Florious95/de-ai-ui

UI デザインの AI 臭さ除去（De-AI UI）

雰囲気で作ったインターフェースは一瞬で安っぽく見える。それが決定的に欠けているのは、細部へのこだわりだ。—— @bruc3van

このスキルは、X 上で中国語圏デザイナー8名が公開共有した「AI インターフェースのどこが怪しいのか、どう AI に指示すべきか」を整理し、実行可能かつチェック可能なルールにまとめたものです。各ルールの末尾にある [作者] は出典を示し、原文の要約とリンクは references/sources.md にあります。[汎用的プラクティス] と記されたものは、ルールを連携させるために補足した一般的な知識であり、出典元の見解を代表するものではありません。

使用するタイミング / When to use

• AI を使用して任意のインターフェース（ランディングページ、管理画面、ダッシュボード、設定画面、コンポーネントライブラリ、デザイントークン）を新規作成または修正する場合。
• ユーザーが「AI が作ったように見える / 安っぽい / 高級感がない / AI 臭い / スロップだ」と言ったり、「もっと洗練されたものに」「高級感を出して」と要求した場合。
• UI を納品する前のセルフレビュー時。

中核となる原則 / Core principles

1. 足し算より引き算を優先する。 AI の最も一般的な失敗は「何かが足りない」ことではなく、「何かが多すぎる」ことです。余計な説明文、区切り線、アイコン、ラベル、シャドウ、色、アニメーションなど、すべての要素に「本当に必要か？」と問いかけましょう。 [ZaynHao] [dingyi] [yanliudreamer]
2. インターフェースは引き算し、コンテンツを際立たせる。 インターフェース自体は黒・白・グレーのみを使用し、色は写真やコンテンツに残します。 [ianneo_ai]
3. 一貫性は感覚ではなくシステムで担保する。 色はトークンセット（Radix Colors）、スペース/角丸は 4px グリッド、フォントサイズは少数の段階に抑え、コンポーネントは既存のライブラリとデザインシステムを再利用します。 [ZaynHao] [Kubai087] [yanliudreamer]
4. 細部は「幾何学的に正しく」。 入れ子の角丸は同心円状に、光学的位置合わせ、ボーダーの太さは統一します。 [Kubai087] [ZaynHao] [dingyi]
5. 先に定義してから実装する；全体像を確認してから部分的に修正する。 誰に使われるのか、何を解決するのか、どんな印象を与えたいのかを明確にします。全体版を作成した後、問題をリストアップして優先順位を付け、一度に一箇所だけ修正します。 [Xian0063]
6. 異なるモードは個別にデザインし、自動変換に頼らない。 Apple は Preview アプリアイコンの Clear モード用に別途レイヤーを追加しました。デフォルトモードの画像を単純に変換すると「汚く見える」からです。ダーク/ナイト/透明モードも同様です。 [remixdesigner] [ianneo_ai]

チェック可能なハードルール / Checkable rules

角丸とボーダー（詳細は references/radius-and-borders.md 参照）

• 入れ子の角丸：内側の角丸 = 外側の角丸 − スペース（r = R − p）。内外で円の中心を共有します。外側から内側へ： dialog/card → panel、input、button → chip、tag。例：dialog 32px、padding 16px → 内部 16px；16px の panel、padding 8px の chip → 8px。 [Kubai087]
• 同一階層のボックスは同じ角丸を使用する。最小は 4px 以上。pill と円形は完全な丸を維持する。 [Kubai087]
• padding、gap、radius はすべて 4px グリッドに従う。radius トークンがあればトークンを変更し、ハードコーディングしない。 [Kubai087]
• 連続角丸（超楕円） をプログレッシブエンハンスメントとして追加する：border-radius を維持し、@supports (corner-shape: superellipse(1.25)) で corner-shape を追加。pill/円形は corner-shape: round に設定。Chrome/Edge 139+ で有効。Safari/Firefox は通常の角丸に自動フォールバック。 [Kubai087]
• 線とボーダーは 0.5px を使用し、サイト全体で太さを統一する（「0.5px を使うべきところで 1px を使っている」のはスロップの特徴）。 [ZaynHao] [dingyi] —— 注：ZaynHao 自身、これは個人の経験に基づくアドバイスであり、低解像度ディスプレイ/古いデバイスを特に考慮したものではないと述べています。互換性が必要な場合はフォールバックを実装してください（参考ファイル参照）。
• 角丸とシャドウをむやみに追加しない。カード左端のカラー縦線は禁止。 角丸/シャドウが本当に必要な場合、その値は機能的なシナリオに合致している必要があります。 [ZaynHao] [dingyi]
• 細部を詰め込みすぎない：区切り線、複数のシャドウ、半透明の色の重ね合わせ、ボーダー付きコンテナ、カードの中のカードなど。 [dingyi] [Xian0063]

色（詳細は references/color.md 参照）

• インターフェースのフレーム（ボタン、カード、入力フィールド）はデフォルトで黒・白・グレーのみを使用し、色は写真、イラスト、データなどのコンテンツに残す。 [ianneo_ai]
• すべての色を Radix UI Colors に置き換え、その 12 段階の色階調の用途定義に従って使用する。 [ZaynHao]（各段階は背景/コンポーネント/ボーダー/ベタ塗り/テキストに対応。詳細は Radix 公式ドキュメント参照。 [汎用的プラクティス]）
• プロダクトのために 3～5 個の識別可能な色を選び、基調を決める（好きなウェブサイト/アプリケーションから色を取ってもよい。例：彼のアプリケーションの背景色 #f6f4f0）。 [ZaynHao]
• 禁止事項：紫/青紫のグラデーション、グラデーションボタン、カラーアイコン、カードごとに異なる色、特定の文字だけを着色すること。 [dingyi] [Xian0063] [ianneo_ai]

フォントとタイポグラフィ（詳細は references/typography-cjk.md 参照）

• フォントサイズは最大 4 種類、理想的には 3 種類。最小は 12px。 階層が足りない場合は、フォントサイズを増やすのではなく、フォントウェイト、色、スペースで区別する。 [ZaynHao] [dingyi]
• ヒーローセクションのタイトルは大きすぎないようにする。小見出しのすべて大文字、タイトル上のアイブロウ（eyebrow）、セクション番号、コード風のパンくずリストは避ける。 [dingyi] [Xian0063]
• 使い古された 3 つのフォントを避ける：Instrument Serif、Space Grotesk、Bricolage Grotesque。等幅フォントとイタリック体の乱用を避ける。 [dingyi]
• 中国語 font-family：欧文フォントを先に、中国語フォントを後に、主流 OS に対応し、最後に sans-serif でフォールバック。中国語フォント名は英語で記述。スペースを含む名前はダブルクォーテーションで囲む。実用的な記述は参考ファイル参照。 [ricouii]
• デフォルトですべて中央揃えにしない。 [Xian0063]

コピーとコンテンツ（詳細は references/copy-and-content.md 参照）

• 区切り文字として中点「·」を使用しない。 あれば削除する。 [ZaynHao] [dingyi]
• 冗長な説明文を追加しない。本文中に絵文字を入れない。タイトルに絵文字アイコンを載せない。 [ZaynHao] [dingyi] [Xian0063]
• コピーはターゲットユーザーに合わせる：わかりやすく、しかし過度に口語的でなく、長さは機能的なシナリオに合わせ、不必要に造語しない。 [ZaynHao] [dingyi]
• データや社会的証明（例：「10,000+ 満足しているお客様」）を捏造しない。末尾に無理やりメール購読フォームを設置しない。 [Xian0063 による Hallmark のチェック項目の引用]
• チャートを「過度に詳細」にしない。あらゆる場所にタグ/バッジがあるのもスロップの特徴。 [dingyi]

モーションとインタラクション（詳細は references/motion-and-interaction.md 参照）

• トランジションアニメーションは最小限に抑える。必須の場合は、基本設定として ease-out、約 250ms。スクロールアニメーションは多用せず、トランジションは控えめに。 [ZaynHao] [dingyi]
• 出現時は ease-in ではなく ease-out を使用する。ドロップダウンメニューはトリガーボタンの位置から成長するように、0 ではなく 0.96 のスケールから開始する。ボタン押下時は 0.97 にスケールダウン。トーストは重ねて表示し、コンテンツを圧迫しない。長い名前は切り詰め、大きな数字は省略形にする。 [Xian0063 による Emil Kowalski Skills の引用]
• ユーザーに立ち止まって判断を促すインタラクションを減らす。どうしても必要な場合は、ユーザーが元々選択したいと思っている場所に配置し、情報の優先順位を再構成する。 [ZaynHao]
• ドロップダウンメニューボタンの下向き矢印アイコンは特に修正が必要——dingyi はこれをリストの中で「最も深刻」で、ほとんど誰も修正しない細部であると述べている。 [dingyi]

コンポーネント、リソース、アイコン（詳細は references/libraries-and-skills.md、references/icons-and-detail.md 参照）

• プロジェクトに既存のコンポーネントライブラリ/デザインシステムやトークンがあれば、それを優先的に再利用し、車輪の再発明をしない。成熟したプロダクトの実証済み UX パターンを参考にする。 [yanliudreamer] [Kubai087]
• 一連のインターフェース内のアイコンは同じスタイル体系からのものであり、線の太さ、角丸、比率、視覚的な重みが一貫していること（例：Remix Icon）。 [yanliudreamer] [Kubai087]
• ダーク/ナイト/Clear などのモードのアセットは個別に処理し、フィルター変換に頼らない。 [remixdesigner] [ianneo_ai]

ワークフロー / Workflow

1. コーディング前（Before coding）

• 明確に記述する：誰に使われるのか、何を解決するのか、どんな印象を与えたいのか。説明できない場合は、まずユーザーに質問する。この段階ではデザインは出力しない。 [Xian0063]
• プロジェクトの既存コンポーネントライブラリ、デザイントークン（色/角丸/スペース/フォントサイズ）を確認する。存在する場合はそれをベースに変更し、存在しない場合は最小限のトークンセットをまず作成する（examples/tokens.css 参照）。
• ビジュアルルールを決定する：3～5 個のブランドカラー + Radix グレースケール、最大 4 段階のフォントサイズ、4px グリッド、角丸の階層、0.5px ボーダー、中国語フォントスタック。 [ZaynHao] [Kubai087] [ricouii]

2. コーディング中（While coding）

• 要素を追加するたびに「本当に必要か？」と自問する：説明文、区切り線、アイコン、バッジ、シャドウ、色など。 [yanliudreamer] [ZaynHao]
• 局所的な修正ではなく、まずページ全体の全体像を出力する。 [Xian0063] [yanliudreamer]
• 複雑なビジュアル方向性の場合は、一度に 3～4 つのバリエーションを比較検討し、「プロトタイプの引力」（すでにコードに投資したため、現在の方向性のみを最適化する傾向）を避ける。 [yanliudreamer]

3. セルフレビュー（Review pass）

• references/slop-checklist.md を項目ごとに確認し、該当する項目を記録する。
• 重要度で並べ替え、一度に一箇所だけ修正し、確認してから次の箇所に進む。 [Xian0063]
• 角丸を修正する場合は、Kubai087 の要件に従って element: old -> new の変更リストを出力する。
• 少なくとも 3 種類の画面幅でスクリーンショットを確認する（Taste Skill のセルフレビュー方法。[Xian0063] の引用）。また、ダークモードも確認する。
• フィードバックは「ピクセル指定」ではなく「目標」で行う：スクリーンショットに問題をマークし、望む効果を説明し、具体的な数値は AI に計算させる。 [Xian0063]

AI に直接コピー＆ペーストできるプロンプト / Copy-paste prompts

完全版（Kubai087 の英語オリジナルプロンプト、ZaynHao の 10 個のプロンプトを含む）は references/prompts.md にあります。最もよく使用される統合版：

以下の