unslop は、AI にまかせて作った「AI っぽい」UI を、デザイナーが赤を入れるように直していく、Claude Code・Codex・Google Antigravity 向けのスキルです。作者は X で「Unslopping」シリーズを続けるデザイナーの Damir Sokolovsky 氏（@heydamir）で、GitHub のスターは約1.34万（2026-11-10）、ライセンスは CC BY 4.0 です。紫のグラデーション・光るボタン・絵文字のラベル・叫ぶような文言を場所つきで洗い出し、製品に合った方向性を決めてから、層ごとに直します。
unslop の紹介ポスト
30秒でわかる（2026-11-10）
- ・何ができる：AI が作った画面の「らしさ」を64項目の兆候リストで洗い出し、余白から動きまで9つのパスで直す
- ・何を解決する：どの製品も同じ見た目になる問題。直したあと「この製品にしかない画面」にすることを目標にしている
- ・実測：付属の見本画面に監査だけさせたら、8分類・74行の指摘と方向性の提案を返し、編集の前に止まった
- ・注意：文章ではなく UI のスキル。同じ名前の文章向けスキルとは別物
部品と見た目の決まりごとを揃える考え方は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】 にまとめています。
unslop とは——「AI っぽい UI」の兆候を消すスキル
README によれば、unslop は「vibecode で作った AI っぽい UI を、それ自身の性格を持つ設計された画面に変える」スキルです。Next.js・React・Vue・Svelte・Tailwind・素の HTML と CSS のどれで書かれた画面でも扱え、ダッシュボード・アプリ・ランディングページが対象です。コードが無く URL しか無いときは、付属のスクリプトでページを保存して、その写しを直します。
| 項目 | 内容（2026-11-10 時点） |
|---|---|
| 作者・ライセンス | Damir Sokolovsky 氏・CC BY 4.0（クレジットとリンクが条件） |
| スター・フォーク | 約1.34万・749（コミット29件、リリースのタグは無し） |
| 対応するエージェント | Claude Code・Codex・Google Antigravity |
| 中身 | SKILL.md（約31KB）、兆候リスト・トークン・画像・効果の参照ファイル、保存と動画のスクリプト |
| 追加で要るもの | URL の保存と「直っていく動画」に Playwright、動画に ffmpeg |
SKILL.md は、問題を「色や効果を画面の飾り（背景・ボタン・枠・ラベル）にばらまくこと」だと捉えています。直し方は逆で、飾りは静かにして、色と手間は内容の1〜2か所（描いた物体・美しいチャート・製品の世界の画像）に集める、というものです。「画面ごとに明るい要素は1つ」「ナビやボタンは色味のある中間色と1つのアクセントだけ」といった、目指す姿も書かれています。
unslop の進め方——監査、方向性、9つのパス
HOW IT WORKSunslop の進め方
監査 → 方向性 → 9つのパス。編集の前に必ず止まる
-
1
画面を見る
コードを読み、可能ならブラウザで撮る。URL だけならスクリプトで保存して写しを直す
-
2
監査
64項目の兆候リストで、紫のグラデーション・グロー・絵文字・大文字の見出しなどを場所つきで列挙
-
3
方向性を決めて止まる
製品から性格・世界観・色を担う1〜2か所を決め、編集の前に利用者に確かめる
-
4
9つのパスで直す
余白 → 色 → アイコン → 文言 → 書体 → レイアウト → 細部 → 画像 → 動き の順
兆候のリスト（references/signs.md）は10の分類に64項目あり、1行ずつ「兆候 → 直し方」の組になっています。たとえば次のとおりです。
- 背景・カード・ボタンに紫から青のグラデーション → 中間色の面1つ、アクセントは意味のある所だけ
- 見出しや数値のグラデーション文字 → 主な文字色の単色
NAVIGATIONのような大文字で字間の広いラベル → 普通の文の大文字小文字に- 太さ800・900の見出し → 400〜500にして、大きさで階層をつける
使い方は、Claude Code ならスキルのフォルダをコピーして、/unslop と頼むだけです（README の記載）。
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/
/unslop this dashboard
/unslop the hero of https://example.com
Codex では $unslop と打つか、$skill-installer でリポジトリから入れます。ヒーロー画像が必要な場面では、fal・Replicate・OpenAI の画像生成などに MCP でつないで画像を作れますが、有料の生成の前には毎回プロンプトを見せて確認すると README は書いています。
実際に動かした——見本の画面で74行の指摘
MEASURED AUDIT見本の画面に監査だけさせた結果（行数）
見本のダッシュボードで74行の指摘
リポジトリに付いている見本の画面（examples/dashboard.html、紫が基調の AI っぽい請求管理のダッシュボード）に、手元の Claude Code 2.1.321 でスキルを動かしました。ファイルを読むツールだけを許可し、「監査と方向性の提案までにして、編集はしないで」と頼んでいます。
mkdir -p .claude/skills && cp -r unslop/skills/unslop .claude/skills/
claude -p "/unslop examples/dashboard.html — 監査と方向性の提案までにして、ファイルは編集しないで" --allowedTools "Read" "Glob" "Grep"
結果は約79秒・$0.90 で、監査が8分類74行になりました。指摘はどれも行番号つきです。
- 面と色（18行）：「L35
body：紫#5b34b8→#170d3dの縦グラデーション背景」「L20〜23.glow-pillが8か所で使われている」など - タイポ（8行）：「文字サイズが 10.5px から 54px まで13種類」「
NAVIGATION・PAID THIS MONTHが大文字で字間が広い」 - アイコン（12行）：ナビの
🏠 📥 🚀 👥 💸 📊、ロゴの✨、見出しの👋 - コピー（6行）：「
+12%!!の!!」「比較の対象が無い」に加えて、「売上は今月の値なのにチャートは月〜日の7日間で、期間が食い違う」という見た目を超えた中身の矛盾まで拾っていました
方向性の提案は、製品を「サブスクリプションの請求と入金を追う管理画面」と読み、名前の Ember（熾火）から「グラファイトのダークの面に、熾火のオレンジを唯一のアクセントにする」案でした。最後に「紫をやめてオレンジにしてよいか」「+12% の比較対象は前月か」など6つの質問を返して止まり、見本のファイルは変更されていませんでした（ハッシュが一致）。SKILL.md の「編集の前に方向性を確かめる」手順どおりの動きです。
今回は監査だけで、編集の9つのパスは走らせていません。編集まで任せた結果がこの完成例にどこまで近づくかは未検証です。
使うときの注意と、ほかのスキルとの違い
- 文章のスキルとは別物：同じ「unslop」という名前で、AI っぽい文章を直す別のスキルもあります（Cursor のプラグイン集）。こちらは UI です。
- トークンを使う：SKILL.md だけで約31KB あり、参照ファイルも読みます。今回の監査は Claude Code 経由で $0.90 でした。
- クレジットを残す：CC BY 4.0 なので、改変して社内で配るときも作者のクレジットとリンクを残します。
| スキル | 対象 | 進め方 |
|---|---|---|
| unslop | AI っぽい UI 全体 | 兆候の監査 → 方向性 → 9つのパス |
| Refactoring UI のスキル | UI の原則 | 原則に照らして直す |
| transitions.dev | UI の動き | 決まった値の遷移を付ける |
UI の原則を守らせるスキルの効き方は Refactoring UIの原則をClaude Codeに守らせるスキル｜実測すると発火しない条件がある、動きを揃えるスキルは transitions.devとは｜UIの動きをCSSで配り、AIエージェントにも使わせるモーション集 で扱っています。
参照ソース
- heydamir/unslop（GitHub） — README・SKILL.md・references/signs.md・examples・LICENSE（HEAD 2026-11-09、2026-11-10 確認）
- Damir Sokolovsky 氏の「Unslopping」シリーズ（X）
- unslop の紹介ポスト（X）
