deslop-ui

UI のスロップレビュー

インターフェースが AI 生成だとひと目でわかる、具体的な視覚的「兆候」と、その修正方法をまとめたカタログです。UI の生成時にも、UI（コードまたはスクリーンショット）のレビュー時にも使えます。

核心となる原則：禁止ではなく意図

スロップは要素そのものではありません。要素を反射的に、意味もなく使うことです。

画面上のあらゆるものを判断する基準は、**「これは本当の情報を伝えているか、ここでの文脈に役立っているか」**です。

• はい、ならばそれは技術です。そのまま使いましょう。実際のカテゴリを表すナビゲーションアイコン、「展開可能」を示すシェブロン、明確に異なる状態に対応するステータスピル、アクティビティログの相対時刻フィード、ダークモード切り替えなどは、すべて問題ありません。
• 「ダッシュボードらしく見える」あるいは「技術的に見える」という理由で置いているなら、それはスロップです。取り除くか、置く価値のある別の要素に置き換えましょう。

兆候を避けるために、意味のあるアフォーダンスまで取り除かないでください。禁止リストを無批判に当てはめるような過剰修正も、それ自体が失敗のパターンです。このカタログにもその考え方が反映されています。Tier 1 の項目はほとんどの場合、反射的な使用です。Tier 2 の項目は、意味があれば有効ですが、装飾として使うとスロップになります。

生成時には、自分自身の定番スタイルがスロップの最大のリスク源になります。別のジェネレーターの定番をまねるのではなく、文脈に基づいて判断し、自分の既定値に対抗しましょう。スロップは、派手なもの（グラデーションの多用）にも、目立たないもの（判断の先送り）にも現れます。このカタログは、どちらの方向も扱います。

他のデザインスキルとの併用（すべて任意）

このスキル単独で使用でき、ほかのスキルは必要ありません。

より広範なデザイン方針を扱うスキル（例：frontend-design）がインストールされている場合、美的な方向性（フォントの選択、配色戦略、レイアウトの理念）はそのスキルに任せます。そのガイダンスが、このカタログにある兆候（紫のグラデーション、入れ子状のカード、中央揃えのヒーロー、グラスモーフィズム、均質な弁当箱型レイアウト）と重なる場合は、デザイン方針を扱うスキルのより詳しい指針に従い、このカタログをレビューチェックリストとして使ってください。両方がある場合、UI 作業では両方を使いましょう。

対象を絞った調整スキルがインストールされている場合は、構築またはレビューの後、目的に応じて使い分けてください。該当するスキルがない場合は、この表を省略します。これらをすべて同時に実行するわけではありません。一部は互いに排他的です（bolder と quieter など）。最も関連性の高いものを提案し、ユーザーに確認してもらいましょう。

意図／手がかり	スキル
リリース直前／本番環境への対応	audit、harden、polish
「目を引くように」／もっと印象的に	bolder、colorize、delight
「派手すぎる」／要素が多すぎる	quieter、distill
デザインシステムに準拠させる	normalize
再利用可能なコンポーネント／トークンを統合する	extract
コピー／マイクロコピーがわかりにくい	clarify
レスポンシブ対応／デバイス間の調整	adapt
モーションを追加する	animate
空の状態／初回起動時の状態	onboard
パフォーマンス	optimize
UX の品質を評価する	critique

カタログとレビューチェックリスト

Tier 1／Tier 2 の全カタログ、コピーに関する兆候、レビューチェックリストは reference/tells.md にあります。UI を生成またはレビューする際は、必ず参照してください。

注：出力では、すべてのエムダッシュを避けてください。節を区切る句読点として使うエムダッシュ自体が、AI らしさを最も認識されやすく示すものです。