AI業務大全運営 株式会社デイトラ

今日

毎朝のAIニュース
業務から探すお役立ち資料無料相談
  1. トップ
  2. ニュース
  3. AIっぽい画面を順番に直すスキル「unslop」が話題。Claude CodeとCodexで使え、編集前に問題と方向性を示す

ニュース

AIっぽい画面を順番に直すスキル「unslop」が話題。Claude CodeとCodexで使え、編集前に問題と方向性を示す

staff

AIで作った画面の「AIっぽさ」を、洗い出してから順番に直すスキル「unslop」がX上で話題になっています。Claude CodeとCodexで使え、無料で公開されています。

3行でわかる今回のニュース
  • unslopは、AIっぽい画面を洗い出して順番に直すスキル
  • AIで社内ツールやLPを作っている人に関係する
  • まず同梱のサンプル画面で試し、直し方を確かめる

AIっぽい画面を、問題の洗い出しから順番に直せるようになった

いきなり作り直すのではなく、問題の一覧を出して方向を決めてから編集します。デザイナーが赤入れをしながら直す進め方に近いものです。

問題を洗い出し、方向を決め、余白や色や文言を順番に修正する流れ
問題の洗い出し、方向決め、修正の順に進む

「AIっぽい画面」とは？

公式の説明では、紫のグラデーション、光る装飾、絵文字のラベル、強すぎる言葉づかい、ばらばらの余白などが例に挙げられています。動くものの、どこかで見たような印象になる画面のことです。

直す順番

  • 洗い出し：問題と、その場所を一覧にする
  • 方向決め：製品の内容から、画面の性格や色を使う場所を決める
  • 修正：余白、色、アイコン、文言、文字組み、レイアウト、細部、画像、動きの順に直す

導入と使い方

Claude Codeの場合は、次のコマンドでスキルをコピーします。

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

あとは /unslop this dashboard のように頼みます。Codexでは $unslop で呼び出します。

基本情報

作者

Damir Sokolovsky（@heydamir）

話題になった日

2026年10月31日

できること

AIっぽい画面の問題の洗い出し、方向決め、順番に沿った修正

対応ツール

Claude Code、Codex

ライセンス

CC BY 4.0（作者の表示とリポジトリへのリンクが条件）

一次情報

GitHubリポジトリ

業務でどう使える？どう変わる？

AIで作った画面は、動いても見た目で損をすることがあります。デザイナーに頼む前の整理や、社内ツールの仕上げに使いやすいスキルです。

unslopで整えられる画面の例。広告用ページ、管理画面、業務アプリ
広告用ページ、管理画面、業務アプリが対象

職種別の活用アイデア

  • マーケター：AIで作ったランディングページの下書きを整え、確認に回す
  • 営業企画：社内向けの数字のダッシュボードを、読みやすく直す
  • PM：試作の画面を整えてから、関係者に見せる
  • 開発者：洗い出された問題の一覧を、デザイン修正の作業リストとして使う
注意点
  • 公開から日が浅いスキルです（リポジトリの作成は2026年10月29日）。まず検証用の画面で試してください
  • コードを編集するので、事前にGitなどで元に戻せる状態にしておきます
  • 公開中のサイトの取り込みや紹介動画の作成には、PlaywrightとChromium、動画にはffmpegも必要です
  • 画面の文言も修正の対象です。表示内容や法的な表記が変わっていないか、人が確認してください

よくある質問

無料で使えますか？

リポジトリはCC BY 4.0で公開されています。商用でも使えますが、作者の名前の表示とリポジトリへのリンクが条件です。Claude CodeやCodexの利用料は別です。

どんな画面に使えますか？

ダッシュボード、アプリ、ランディングページが対象です。Next.js、React、Vue、Svelte、Tailwind、素のHTMLとCSSで作った画面で動くとされています。

すでに整った画面を大きく変えられませんか？

画面がすでに良い場合は、そう伝えたうえで小さな改善案を出すとされています。編集の前に問題の一覧と方向性を示すので、途中で調整もできます。

画像生成の費用はかかりますか？

必要な場合に外部の画像サービスを使えます。公式の説明では、有料の生成の前にプロンプトを示して確認を取るとされています。

まとめ：まずサンプル画面で直し方を確かめる

unslopは、AIっぽい画面を洗い出して順番に直すスキルです。編集の前に問題と方向性を示すので、途中で判断を入れながら進められます。本番の画面に使う前に、同梱のサンプルで試すと直し方がつかめます。

今回話題のきっかけになったのは、@sora_bizさんの投稿です。直す順番と対象の画面を簡潔に紹介していて、全体像をつかむのに役立ちます。

「まず自分がAIを業務で使える側になりたい」という方には、デイトラのAI業務活用コースで、基本から体系的に学べます。

AI活用の導入支援・研修のご相談はデイトラへ

株式会社デイトラでは、企業向けのAI研修・AI業務効率化の導入支援を行っています。「何から手を付けるべきか」「自社ならどのツールを選ぶべきか」といった相談段階からお気軽にどうぞ。

無料で相談する

お役立ち資料のダウンロードはこちら

あわせて読む