ガイド：AI × デザイン（生成AI・コーディングエージェントに良いデザインを作らせる）

このフォルダの最重点テーマです。生成AI（ChatGPT / Claude / Figma AI / 画像生成）と、コーディングエージェント（Claude Code / Codex / Cursor / v0 等）に、質が高く一貫したデザイン・UIを作らせるためのテクニックをまとめています。

全体の流れ（おすすめの順番）

材料を渡す → 2. ルールを固定する → 3. 見本・モックを先に作る → 4. 実装する → 5. 見て検証する → 6. リリース前に監査する → 7. 学んだことをルールに戻す

1. 材料を渡す（コンテキスト）

ブランド・製品の資料（概要・数字・ロゴ・色・書体）を1フォルダにまとめ、先に読ませる。プロンプトは5項目だけでよくなる。
プロンプトの前に「教える資料フォルダ」（概要・数字・ロゴ・色・書体）を作って読ませる
前提条件は数値で渡す（サイズ・pt・mm）。できなかった指示は報告させる。
AIにデザインを頼むときは前提を「数値」で渡す

2. ルールを固定する（DESIGN.md / デザインシステム）

DESIGN.md（トークン＋ルール＋Do's/Don'ts）を置き、AGENTS.md / CLAUDE.md に「UI作業の前に読む」と書く。
DESIGN.md（トークン＋ルール）を置き、AGENTS.md / CLAUDE.md から必ず読ませる
好きなサイトのスクショ3〜5枚を分析させ、選んだ要素だけを実際の値でDESIGN.md化する。
好きなサイトのスクショ3〜5枚をエージェントに分析させ、選んだ要素だけをDESIGN.mdにする
単発のプロンプトなら、冒頭にミニ・デザインシステム（役割付きの3色・2書体・角丸1種・8刻みの余白）を書く。
LP生成プロンプトの冒頭に「ミニ・デザインシステム」を書く
チームでは、デザインシステム文書をエージェントが毎回読むファイルとして置く。
デザインシステムをAIエージェントに読ませ、UI変更はBefore/Afterスクリーンショットでレビューする
好みの細かいルール（例：大見出しの字間を -2〜-5%）もスキルやルールファイルに保存しておく。
大見出しは字間を -2%〜-5% 詰める
禁止するなら代わりの方法もセットで書く（フチ文字・影・光彩・カードの色帯はNG → コントラストや余白で整える）。
AIっぽいデザインを避ける「禁止リスト」は、代わりの整え方とセットで指示する
Webの定番AIスロップ（紫グラデ・Inter一択・同一カード3枚）は、コード前に捨てさせる。
Webの「AIっぽさ」は、コードを書く前にデフォルト見た目を捨てさせるプロンプトで潰す
生成後の安っぽさは「もっとおしゃれに」ではなく、揃え・強弱など具体修正で直す。
AIっぽい資料・広告は「もっとおしゃれに」ではなく、8つの具体修正で直す
サムネイルは「12の要素」に分けて指示する（載せる／配置／見せ方／禁止）。
AIへのサムネイル指示は「12の要素」に分けて書く
スクショではなく md・JSON・部品・検証スキルのキットで渡す。
エージェントへの受け渡しはスクショではなく「読めるキット」（md・JSON・部品・検証）にする
量産（10→100）は、人間が育てたFigma DS＋DESIGN.md＋見本が前提。
AIでUIを量産するなら、先に「人間が育てたFigmaのDS＋DESIGN.md＋見本」を揃える（10→100向き）
既製DESIGN.md（awesome-design-md）を選び、公式 shadcn スキルでデザインシステムページまで作らせる。
awesome-design-md で見た目を選び、公式 shadcn スキルでデザインシステムページまで作る
ルールが増えて守られなくなったら、常時は CLAUDE.md、条件付きは .claude/rules/ へ分ける。
守らせたいルールは CLAUDE.md に全部書かず、条件付きは .claude/rules/ へ分ける
「もっと目立たせて」は主役・余白・比較の具体修正に言い換える。
「もっと目立たせて」は、主役・余白・比較の具体修正に言い換える

3. 見本・モックを先に作る

コードの前に画像生成でモックを作る。最初にスタイル方向を4つ出させて選び、修正は1回に1か所ずつ。
コードより先に画像生成でデザインモックを作る。最初にスタイル案を4つ出させて選ぶ
機能ごとに強い参照を1つ指定する（例：「エディタはFigmaのように」「LPはLinearのように」）。
機能ごとに「強いデザイン参照を1つ」渡し、エージェントに10点満点で自己採点させる
動画・広告は、ワイヤーフレームで構成とタイミングを固めてからDESIGN.mdで色を付ける（AIは構造を写すのが得意）。
広告動画はワイヤーフレームで構成とタイミングを固めてから、DESIGN.mdで色を付ける
動きは決まった用語で指示する（Scroll-triggered / Parallax / Pin / Stagger …）。
スクロールアニメーションは「10の用語」で指示する
用語が分からなければ「何が・いつ（時間／押したら／スクロール）・どう動くか」の1文で頼む。
AIにLPの動きを頼むときは「何が・いつ・どう動くか」の3点で伝える
動画・モーションは huashu-art-motion スキルで「名前のある画風」から3案を出させて選ぶ。
huashu-art-motion スキルで、35の画風のアニメーションをコードで作らせる（QA・納品チェック付き）
LP用シェーダー集のURLを渡し、一覧とスクショを出させてから演出を選ぶ。
LP用シェーダー集のURLを渡し、「一覧とスクショを出して」とエージェントに頼む
広告レイアウトは目的から6型を選んでからAIに渡す。
広告レイアウトは「最初に伝えたいこと」から6型を選ぶ
技術説明は Anatomy スキルで等角SVGのインタラクティブ図解にする。
Anatomy スキルで、技術説明をインタラクティブな等角図SVGにする
広告の大きな数字は判断材料になる数にし、単位と意味を近くに置く。
広告の大きな数字は「読者の判断に使える数」にし、単位と意味を近くに置く
CTAボタンは色だけでなく主役・押した先・クリック前の不安で設計する。
CTAボタンは色だけでなく「主役・押した先・クリック前の不安」で設計する

4〜5. 実装して、見て検証する

見た目に関わる変更のたびにブラウザでスクショを撮って自己チェックさせるルールを入れる（デザイン→実装→スクショ→レビュー→修正）。
エージェントにUI変更のたびにスクショで自己チェックさせる（デザイン→実装→スクショ→レビュー→修正のループ）
チームプロセス例：簡易要件で複数案→機械＋LLMチェック→人が選ぶ→詳細要件で収束（Playwrightで座標付き修正も可）。
AIデザイン開発は「簡易要件で5案発散→機械＋LLMチェック→人が選ぶ→詳細要件で収束」にする
変更前後のスクショを横並びで出させ、コードではなく見た目で判断する。
デザインシステムをAIエージェントに読ませ、UI変更はBefore/Afterスクリーンショットでレビューする
デザイン用スキル（frontend-design、Impeccable、taste-skill 等）と、決まったルールで判定する検出器で「AIっぽいUI」を潰す。作るエージェントと検証する仕組みを分ける。
デザイン用スキル＋決まったルールで検出する仕組みで「AIっぽいUI」を潰す（Impeccable等）
good-css スキルを入れ、モダンCSSを先に試させてからバイブコーディング成果を点検する。
Claude Code / Codex に good-css を入れ、モダンCSSを先に試させてからサイトを点検する
Claude Designのプロトは名札（data-ds）＋対応表で、FigmaのDSコンポーネントに組み直す。
Claude Designのプロトは「名札＋対応表」でデザインシステムどおりのFigmaにする
自己採点（10点満点）＋ミスのスクショ撮影で直させる。
機能ごとに「強いデザイン参照を1つ」渡し、エージェントに10点満点で自己採点させる
写真の上の文字はスマホの実寸表示で読めるか確認する。
写真の上の文字が埋もれるときの対処パターン
良さを「コンセプト・コンテキスト・言葉・レイアウト・色」の5つの納得で点検し、制約→参照→スクショ確認→修正を仕組みにする。
AIのデザインを「それっぽい」から「納得できる」へ：5つの納得と、デザインハーネスの4ステップ

承認した画像モック＋文章の仕様をIssueに固定してから並列実装させる。
画像モックを承認してから「文章の仕様」と一緒にIssueへ固定し、エージェントに並列で実装させる
正本（見た目・値・振る舞い）を分け、lint・a11y・固定環境のスクショ比較で外れたら止める。AI評価役は合否に使わない。
デザインハーネスを「作る・見直す・守る」で組む：値の正本を1か所にし、外れたらlintで止め、AI評価は合否に使わない
一行の依頼から、コンセプト3案→DESIGN.md→撮影・採点（8/10）までスキルに回させる。
/awwwards スキル：一行の依頼から「コンセプト3案→DESIGN.md→実ブラウザで撮影・採点」まで回させる
横スクロールゼロなど測れるUI目標は /goal で測りながら自走させる。
「スマホ幅で横スクロールゼロ」などのUI品質目標は、/goal に「目標・測り方・やめる条件」を書いて、測りながら自走させる

6. リリース前に監査する

デザイン・モバイル・状態・動線・公開準備の5観点を、読み取り専用のサブエージェントで並列にチェックさせる。人が確認してから、メインのエージェントが一度にまとめて修正する。
リリース前のUI監査を、観点別の読み取り専用サブエージェントで並列実行する
AIで作った動画は、冒頭・映像・内容の3体のレビュー用サブエージェントに採点させ、全員7点以上になるまで同じサブエージェントで再レビューする。
AIで作った動画は、3体のレビュー用サブエージェントに9項目で採点させ、全員7点以上で受け取る
Figmaのエージェントで、読み込み中・空・エラーなどの抜けている状態をデザイン段階で洗い出す。
FigmaのAIエージェントで、既存画面から「読み込み中・空・エラー」などの抜けている状態を洗い出す

7. 学んだことをルールに戻す

育てたルールファイルは /doctor prompt-audit で古い指示・存在しない参照・矛盾を点検する。
CLAUDE.md やデザインのルールファイルは、足すだけにせず /doctor prompt-audit で古い指示・存在しない参照・矛盾を点検する
直した内容は、その場の指示で終わらせず、DESIGN.md や資料フォルダに書き戻して「育てる仕様書」にする。
DESIGN.md（トークン＋ルール）を置き、AGENTS.md / CLAUDE.md から必ず読ませる

8. 追加したテクニック

テーマ別の詳しい流れは、ガイド：AIエージェントに守らせるデザインシステム・DESIGN.md／ガイド：画像生成からUI・LPを作る／ガイド：CSSで作る動き（アニメーション・インタラクション）／ガイド：タイポグラフィ・フォントの各ガイドを参照。