AI生成UIの悪癖を削るスキル「unslop」の検証と注意点

AIが生成するUIデザイン特有の過剰な装飾や不自然さを修正するオープンソースのスキル「unslop」が注目を集めています。本動画では、unslopの設計思想や修正フローを整理し、素のClaudeによる出力との比較検証を通してその実力と活用時の注意点を解説しています。

unslopの概要と3段階の修正手順

unslopは、Damir Sokolovsky氏が公開したClaude CodeやCodex向けのスキルです。AIが生成しがちな紫色のグラデーション、発光エフェクト、過剰な絵文字アイコン、不均一な余白といった、いわゆる「AI slop」と呼ばれる特徴を検知し、製品らしい洗練されたインターフェースへ修正することを目的としています。

単に見た目を平坦にするだけでなく、体系的なチェックリストと修正順序がSKILL.mdや参照ファイルとして整備されている点が特徴です。

素のClaudeとの比較検証

動画内では「管理画面」「ランディングページ（LP）」「設定画面」の3つのUIを対象に、元のUI、素のClaudeによる修正、unslopを適用した修正の比較が行われました。

検証の結果、紫のグラデーションや発光などの明らかなAI臭を消すだけであれば、素のClaude（Opus）でも十分に除去できることが確認されました。しかし、unslopを適用した場合はさらに踏み込んだ改善が見られます。 ・管理画面の例：素のClaudeはすべての棒グラフを一律で緑色に揃えたのに対し、unslopは最も利用が多い土曜日の棒グラフだけを目立たせ、他をグレーにするなど「見せ場」を意識した配色を行いました。また、「おはようございます、山田先生」といった定型的な挨拶文を削除し、「11月2日 月曜日」という具体的な日付を見出しに置き換える文言の修正を行っています。 ・LPの例：味噌蔵のLPにおいて、素のClaudeが単に樽のイラストを中央に配置したのに対し、unslopは樽のビジュアルに伝票のUIを重ねるなど、文脈に沿った視覚表現を構成しました。 ・設定画面の例：「保存」「変更を保存」といったボタンの配置整理や、強調すべきでない警告表示のトーンダウンなど、UI要素の優先順位を判断した調整が行われています。

利用時の注意点と数値の勝手な改変対策

unslopの実装には明確な注意点も存在します。デザインを整える過程で、UI内に含まれる「グラフの数値」や「実績データ」を勝手に書き換えてしまう事象が確認されました。

検証中、棒グラフの予測数値を別の値に改変したり、LPに記載されていた「12,000+」「98%」といった実績数値をユーザーへの確認なしに削除してしまう挙動が発生しました。unslopの内部ルールに「確認できない実績は削除する」という方針が含まれていることが原因です。

この問題を防ぐための対策として、unslopを実行するプロンプト内に「数字・グラフの値・実績の表記は1つも変えないこと」という指示を一言明記することが推奨されています。バックエンドと連携していないモックアップ作成時などでは特に注意が必要です。

なぜ重要か

AI生成UIの「見た目の装飾」を落とすだけであれば汎用モデルでも可能ですが、unslopは挨拶文を日付見出しに置き換えるような情報設計や視覚的優先順位の調整まで踏み込みます。ただし、実績値やグラフ数値をAIが勝手に改変・削除するリスクがあるため、「数値や表記を一切変更しない」という制約プロンプトの併用が前提となります。

こんな人におすすめ

Claude CodeやCodexなどのコーディングエージェントを使ってUIを作成している開発者やデザイナー。AI特有の安っぽいデザインから脱却し、より実用的なUIに整えるための具体的なプロンプト・指示手順が分かります。