この記事について（広告・アフィリエイトリンクはありません）
紹介しているスキルは無料で入手できます。画像生成の有料サービスは使っていません。
AI に画面を作らせると、紫のグラデーション、光るカード、絵文字のラベルが並びがちです。そうした「AI 臭さ」を見つけて直すのが、Claude Code・Codex 用のスキル unslop。スキルは、AI に渡す手順書のことです。
2026年10月に公開された unslop を、公式の例2画面と、当サイトのトップページのローカルコピーで試しました。
先に結論（今回のテスト条件で）
所要時間：3画面で約12分（スキルを読む時間を含む）。難易度：Claude Code が動いていれば、フォルダをコピーするだけです。
- 公式の2画面は、見た目がはっきり変わりました。絵文字は 30個→0個、9個→0個です。
- 変えすぎないことも確かめられました。すでに整っている当サイトのトップページは「軽い修正」と判定され、変更はごく一部でした。
- 一番役立ったのは、「色や装飾は1〜2か所に集める」という考え方です。
画像生成サービスがなくても、最後まで進みました。ただ、仕上がりには架空の数字が入ることがあります。実際の画面に使うときは、数字と文言を人が確かめてください。
試した環境
| 項目 | 内容 |
|---|---|
| スキル | heydamir/unslop コミット a6f121e（2026-11-01） |
| 実行 | Windows 11 の Claude Code。スキルの手順書を別のエージェントに読ませて実行（作業はエージェント、結果の評価は私） |
| 対象 | 公式の examples/dashboard.html、examples/hero.html、当サイトのトップページのコピー |
| 画像生成 | 使わない（有料サービスにつながない） |
| スクショ | Playwright の Chromium、1440×900、1画面ずつ |
| 検証日 | 2026年11月4日 |
話題性と中身は別の話として書きます。リポジトリのスターは確認時点で約7,100ですが、これは注目度の数字で、仕上がりの良さを示すものではありません。
入れ方と使い方
Claude Code なら、スキルのフォルダをコピーするだけです。
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/Windows の PowerShell では、skills\unslop フォルダを %USERPROFILE%\.claude\skills\ にコピーしてください。そのあと、次のように頼みます。
/unslop このダッシュボードCodex では $unslop です。ライブのサイトをそのまま読み込むときと、紹介動画を作るときだけ、Playwright と ffmpeg が必要です。手元の HTML を直すだけなら要りません。
Claude Code をローカルの LLM で動かしたい人は、こちらの記事を見てください。ただし、今回の検証はローカル LLM では行っていません。
スキルの流れ
- 監査：AI 臭さのサインを、場所つきで1行ずつ書き出します。
- 程度の判定：重い、軽い、問題なし、の3段階です。
- 方向性：製品、性格、世界観、見せ場、署名の5行を書きます。
- ここで止まって確認：利用者の返事を待ちます。
- 9回の修正：間隔、色、アイコン、コピー、文字、レイアウト、細部、画像、動きの順です。
- 確認と報告：もう一度描画して、監査の一覧と照らします。
今回は自動で進める検証だったので、4の確認だけ省いて、方向性をファイルに残しました。実際に使うときは、ここで止まって方向を選べます。
公式の2画面の before / after
変化を感覚だけで語らないように、HTML から数えました。「絵文字」は文字として書かれた絵文字の数、「グラデーション」と「ぼかし・光」はソース内の指定の数、「色」は6桁の色コードの種類です。
| 画面 | 監査のサイン | 絵文字 | グラデーション | ぼかし・光 | 色 |
|---|---|---|---|---|---|
| ダッシュボード before | 37件 | 30 | 21 | 10 | 23 |
| ダッシュボード after | – | 0 | 3 | 0 | 18 |
| ヒーロー before | 33件 | 9 | 14 | 4 | 7 |
| ヒーロー after | – | 0 | 0 | 0 | 13 |
after は色コードの種類が増えていますが、増えたのは灰色の濃淡です。灰色以外（RGB の差が16以下を灰色として除外）に絞ると、ダッシュボードは 23→5、ヒーローは 7→5 でした。
after の監査のサインが「–」なのは、after では監査をしていないためです。0件という意味ではありません。
数が減ること自体が良いわけではありません。それでも、ダッシュボードは色が棒グラフの1本に集まり、どこを見ればよいかが分かりやすくなったと感じました。これは私の評価です。
方向性の5行は、製品に寄せた内容でした。例えばダッシュボードでは、世界観を「閉店後の帳簿の机」とし、金額の下に帳簿の二重線を引く、という署名を決めています。
ヒーロー画面は、画像生成なしで進めたので、光る球の画像はなくなり、コードで作った請求書の一覧になりました。
架空の内容が入り、日本語向けの指定はない
- 架空の内容が入ります。 ダッシュボードの曜日別の金額や、請求書の顧客名は AI が作ったものです。
- 消される文言があります。 「Loved by 10,000+ teams」「10x faster」のような根拠のない宣伝文句は、私の設定では削除されました。本物の実績なら戻してください。
- 指示の間にずれがあります。 画像ツールがないときの扱いなどで、手順書どうしが食い違う箇所がありました。実行したエージェントが判断して進めています。
日本語向けの指定はありません。和文フォントの案内はなく、文末の句点の扱いも英語前提です。
すでに整った画面ではどうなる？
当サイトのトップページのコピーで試しました。本番のサイトは変更していません。
判定は「軽い修正」で、サインは15行でした。主な変更は次のとおりです。
- ボタンとロゴのグラデーションを単色に
- 番号タイルの13色（29枚のカード）をグレーに
- 見出しの太さを一段細く
- 見出しの句点を1つ削除
ヒーローのノード図はそのままで、全体の作り直しはしませんでした。「良い画面を変えるためだけに変えない」という手順書の方針どおりです。見比べると、ノード図に目が行きやすくなりました。
無料でどこまでできる？
スキル本体は無料です。Claude Code や Codex の利用料は、それぞれのプランによります。画像生成は fal、Replicate、OpenAI images、Higgsfield などをつなぐ場合に費用がかかることがあり、README には、生成の前にプロンプトを見せて確認すると書かれています。今回はつないでいないので、その確認の動きは未確認です。
ライセンスは CC BY 4.0、クレジットを残せば商用も可
CC BY 4.0 です。商用を含めて利用、改変、共有ができます。条件は、作者の Damir Sokolovsky さんのクレジットとリポジトリへのリンクを残すことです。手順書を改変して配るときも、この表示を残します。
よくある質問（FAQ）
Q. unslop は無料ですか？
スキルは無料です。実行には Claude Code か Codex が必要で、その利用料は別です。画像生成サービスをつなぐ場合も別料金になることがあります。
Q. デザインの知識がなくても使えますか？
手順書どおりに AI が進めるので、使えます。ただし、方向性の確認と、数字や文言の確認は人の仕事です。
Q. 画面の機能まで変わりますか？
手順書では、機能や内容、節の順番は変えないとされています。今回は静的な HTML で試したので、実際のアプリの動作は確かめていません。
Q. 日本語のサイトにも使えますか？
当サイトのトップページでは動きました。和文フォントの指定はないので、文字の調整は自分で確かめてください。
Q. ローカルの LLM でも動きますか？
手順書自体はモデルを選びませんが、今回は試していません。
まとめ
- AI で作った画面の「よくある癖」を、手順どおりに直せます。整った画面を壊さず、軽い修正で止まることも確かめました。
- 色と装飾を1〜2か所に集める考え方は、スキルを使わないときにも役立ちます。
- 架空の数字が入るので、仕上がりは人が確かめてください。
検証メモ
有利な条件：3画面のうち2つはスキルの公式デモで、もともとサインを含むように作られています。自分で作った画面でも同じだけ改善するとは限りません。
参考例の影響：実行したエージェントは手順書の参考例を先に読みました。ダッシュボードの構成は参考例に近くなっています。
方向性の確認：止まって確認する手順は省いて実行しました。手順書と README にはそう書かれていますが、対話での動きそのものは見ていません。
数えた値の限界：ソース内の指定の数です。トップページのコピーは CSS を含む全体を数えたので、変更がごく一部でも値はほとんど動きません。
トップページのコピーの見え方：ナビと検索欄に空の四角が出ました。ローカルのコピーでアイコンのフォントが読めなかったためと見て（確かめてはいません）、監査のサインには数えていません。
未確認のこと：スマホ表示、ホバーとフォーカスの動き、ストーリー動画、ライブサイトのスナップショット、画像生成、Codex での実行、ローカル LLM での実行。
完成ページの依存：作り直したページは Tailwind の CDN と Google Fonts を読み込みます。オフラインでは同じに見えません。
