AIで作ったアプリが、ちゃんと動くのにアマチュアっぽく見えてしまうことがあるのには理由があります。デザインシステムがないのです。AIが独自に生成する画面はどれも違う色、違う余白、違うボタンを使い、その結果、互いに話し合わなかった5人の人が作ったように見えてしまいます。解決策は各画面に「もっと手をかける」ことではなく、デザインシステムを一度だけ作り、AIに常にそれを守らせることです。そして一番よくある間違いは、それを最後に回すこと。AIに何よりも先に、どんな画面よりも前に頼むべきなのは、あなたのデザインシステムを作ることです。このガイドでは、どんなセクションが必要か（プレミアム製品が使っているのと同じもの）、本物のプロ仕様はどう見えるのか、そして、あなたのAI —Claude、Codex、Cursor、v0— がシリコンバレーレベルのデザインシステムを作るための、すぐ使える2つのプロンプトを紹介します。
AIに画面を1つ頼むと、いい感じに仕上がります。もう1つ頼むと、別の紫のトーン、別のボタンサイズ、別の余白を使ってきます。3つ目には、どこにもなかった影が現れます。各画面は単体で見れば悪くない — でも並べると、あなたのアプリは意見がまとまらなかった5人が作ったように見えます。それが、完璧に動いていてもアマチュアっぽく見えてしまう原因です。
デザインシステムとは、あなたの製品のすべての視覚ルールを1つにまとめたドキュメントです。どんな色が存在し何のためのものか、テキストのサイズは、要素間の余白は、ボタン・カード・アニメーションはどうあるべきか。AIはそれを読み、それ以降生成するすべての画面が一貫したものになる — もう発明せず、ルールに従うからです。
ここがほぼ全員がやる間違いです。先に画面を頼み、デザインは「後で、時間があるとき」と考える。その頃には一貫性のない画面が20枚あって、直すのは終わりのない継ぎ接ぎ作業になります。AIに最初の画面よりも前に、何よりも先に頼むべきなのは、あなたのデザインシステムを作ることです。そうすれば、後から来るものすべてが一貫して生まれます。製品の仕上がりを最も引き上げる決断であり、ほとんどコストがかかりません。
本格的なデザインシステムは「カラーパレット」ではありません。網羅的です。以下はエンタープライズレベルのシステムが持つセクション（Linear、Vercel、Raycastのような製品が使っているのと同じもの）で、あなたのプロンプトが要求すべきものです:
あなたが要求すべきディテールのレベルを見てもらうために、プレミアム製品を作るために私たちが使っているシステムの断片を紹介します。精度に注目 — 「紫を使え」ではなく、どの状況にどの紫をどの不透明度で使うか、正確に言っています:
ブランドカラー（アクセント）— 操作可能／アクティブなものにのみ登場、装飾には決して使わない Primary: #8B5CF6 · Light: #A78BFA (テキスト/アイコン) · Deep: #7C3AED (押下時) サーフェス（奥行き5レベル、「べたっとした黒」ではない）: surface-1 #0A0A0A (背景) · surface-2 #0D0D0D (サイドバー) · surface-3 #111111 (カード) surface-4 #1A1A1A (ドロップダウン) · surface-5 #222222 (浮いた要素上のアクティブ) テキスト（色ではなく不透明度で）: 一次 #FFFFFF · 二次 rgba(255,255,255,0.70) · 三次 0.45 · 消音 0.28 タイポグラフィ — Inter · ベース 14px · ウェイトは 400/500/600/700 のみ（300/800/900 は決して使わない） BODY 12px · TITLE 16px · HERO 24px · 大文字ラベルは letter-spacing 0.07em 余白 — 8px グリッド（4px はマイクロ用）。奇数（3,7,9,11px）は決して使わない。 RADIUS — 入力欄 8px · カード 12px · モーダル 16px（子は常に親より小さく） アニメーション — opacity/transform/box-shadow のみ · ホバー scale 1.02–1.05 · width/height は決してアニメートしない
定まったブランドがないなら、AIに美的スタイルを提案させ、完全なシステムを組み立てさせましょう。これをコピーして、あなたのデザイン／コードのエージェントに貼り付けてください:
どの画面も作る前に、私の製品の「デザインシステム」を一緒に作りたい。そうすれば、あとから生成するものすべてが一貫したものになるから。私の製品は: [あなたのアプリと、それが誰のためかを説明]。私が好きな美的スタイル: [例 「Linear風のダークでプレミアム」/「明るくフレンドリー」/「わからない、あなたが提案して」]。 以下のセクションを含む、完全で網羅的なデザインシステムのドキュメントを作ってほしい。各セクションには「正確な値」を（おおよそではなく）: 1. 哲学／アイデンティティとデザインの柱。 2. カラー: ブランドカラー + レベル別のサーフェス／背景スケール + 不透明度によるテキストスケール + ボーダー + セマンティックカラー（成功／エラー／警告／情報）+ グラフ用パレット。 3. タイポグラフィ: フォント、正確なサイズスケール、許可されるウェイト、行の高さ、letter-spacing。 4. 余白とグリッド（基準単位と倍数）。 5. 要素タイプごとの border-radius。 6. レベル別の影／エレベーション。 7. コンポーネント（ボタン、カード、入力欄、モーダル、バッジ、ツールチップ、ドロップダウン）とその値。 8. モーション／アニメーション（デュレーション、イージング、何をアニメートし何をしないか）。 9. 状態（静止、ホバー、フォーカス、アクティブ、無効、エラー、成功）。 10. アイコン、レイアウト／グリッド、空の状態、そしてアンチパターンのリスト（絶対にやってはいけないこと）。 重要: 何が「柔軟」（適応可能、例 ブランドカラー）で、何が「交渉不可」（触ってはいけない正確な値）かを明確に示してほしい。目標: 結果がシリコンバレーのプレミアム製品と見分けがつかないように見えること。このシステムを保存し、これ以降に作るすべての画面で守ること。
すでに色、ロゴ、アイデンティティがあるなら、これを使ってAIにそれらを尊重しながら完全なシステムを組み立てさせましょう:
画面を作る前に、今ある私のブランドをもとに、製品の完全な「デザインシステム」を作りたい。私のブランド: 色 [あなたの色/hexを貼り付け]、タイポグラフィ [あれば]、そしてこのスタイル／雰囲気 [説明: まじめ、楽しい、高級、など]。私の製品は [説明]。 私のブランドをもとに、正確な値を含む完全で網羅的なデザインシステムを作ってほしい。カバーする範囲: 哲学、カラー（私のブランド + サーフェス + テキスト + ボーダー + セマンティック + グラフ）、タイポグラフィ（スケール、ウェイト、高さ）、余白／グリッド、border-radius、影、コンポーネント（ボタン、カード、入力欄、モーダル、バッジ、ツールチップ）、モーション／アニメーション、状態、アイコン、レイアウト、空の状態、アンチパターン。 ルール: 私のブランドカラーをベースとして尊重すること; そこからバリエーション（明るい、暗い、不透明度）を導くこと; 何が柔軟で何が交渉不可かを示すこと; そして仕上がりがプレミアムに見えること。完成したら、私たちが作るすべての画面でそれを守ること。
ゼロから始めなくていいように、完全でプロ仕様のデザインシステムを用意しました — ダークでプレミアム、ニュートラルで汎用的な美的スタイルです。丸ごとコピーしてAIに貼り付け、「このシステムを守ってすべて作って」と伝えてください。あるいはブランドカラー（唯一柔軟な部分）を変えて、あなたのものにしてください。シリコンバレーの製品が使うのと同じレベルの厳格さです: どの値も調整済みで、何一つ適当ではありません。
このデザインシステムを守ってすべてを作れ。柔軟なのはブランドカラーだけ; 残りは正確な値なので変えるな。 === 哲学 === ダークでプレミアム、ミニマルで精密なインターフェース（Linear/Vercel風）。べたっとせず、レイヤーで奥行きを出す。ブランドカラーは操作可能／アクティブなものにのみ登場し、装飾としては決して使わない。階層は色ではなく、サイズ+ウェイト+不透明度で作る。 === カラー === ブランド（柔軟 — あなたのものに変えて）: Primary #8B5CF6 · Light #A78BFA (テキスト/アイコン) · Deep #7C3AED (押下時)。 サーフェス（奥行き5レベル）: surface-1 #0A0A0A (背景) · surface-2 #0D0D0D (サイドバー) · surface-3 #111111 (カード) · surface-4 #1A1A1A (ドロップダウン/ツールチップ) · surface-5 #222222 (浮いた要素上のアクティブ)。レベルを飛ばすな。 テキスト（白の不透明度で）: 一次 #FFFFFF · 二次 rgba(255,255,255,0.70) · 三次 0.45 · 四次 0.28 · 消音 0.20。 ボーダー（白+不透明度）: 強 0.20 · 通常 0.10 · 微妙 0.08 · ヘアライン 0.06。 セマンティック: 成功 #10B981 · 警告 #F59E0B · エラー #EF4444 · 情報 #3B82F6（背景 0.07-0.10、ボーダー 0.15-0.22、テキストは色そのまま）。 === タイポグラフィ === フォント: Inter (variable)、antialiased、数字は tabular-nums。ベース 14px。 スケール (px): micro 9 · caption 10 · small 11 · body 12 · base 13 · subhead 14 · title 16 · heading 18 · display 20 · hero 24。 ウェイトは以下のみ: 400 (本文) · 500 (ラベル/ナビ) · 600 (タイトル/ボタン) · 700 (数字/KPI)。300、800、900 は決して使わない。 行の高さ: ラベル/ボタン 1.0-1.2 · 本文 1.55 · コード 1.6。 大文字ラベル: 10-11px、ウェイト 600-700、letter-spacing 0.07em、色は不透明度 0.28-0.40。本文を大文字にするな。 === 余白 === 8px グリッド（4px は内部のマイクロ余白のみ）。値: 4·8·12·16·20·24·32·40·48·64。レイアウトに奇数（3,7,9,11px）を決して使うな。 === BORDER-RADIUS === バッジ 4-6px · 入力欄/ドロップダウン項目 8px · カード 12-14px · モーダル 16px · hero 20px · 円 50%。ルール: 子は常に親より小さい radius。 === 影 === カード: ボーダーのみ（影なし）· ドロップダウン: 0 8px 28px rgba(0,0,0,0.55) · モーダル: 0 32px 80px rgba(0,0,0,0.75)。操作可能なカードのホバー時のブランドグロー: 0 0 0 1px rgba(BRAND,0.40), 0 8px 32px rgba(BRAND,0.16)。 === コンポーネント（正確な値）=== 標準ボタン: padding 8px 16px、radius 8px、font 12px ウェイト 600。プライマリ: bg rgba(BRAND,0.20)、ボーダー rgba(BRAND,0.40)、テキスト Light。ゴースト: bg rgba(255,255,255,0.05)、ボーダー 0.08、テキスト 0.45。 カード: padding 12-16px、radius 12-14px、ボーダー rgba(255,255,255,0.05)、bg rgba(255,255,255,0.02)。ホバー: bg 0.045。 入力欄: padding 8px 12px、radius 8px、bg rgba(255,255,255,0.04-0.06)、ボーダー 0.10。フォーカス: ボーダー rgba(BRAND,0.40) + 影 0 0 0 3px rgba(BRAND,0.12)。 モーダル: bg #111111、ボーダー 0.10、radius 16px、オーバーレイ rgba(0,0,0,0.72)。バッジ: 9px ウェイト 700、padding 2px 6px、radius 4px。 アクティブなナビ項目: bg rgba(BRAND,0.15)、テキスト Light、ウェイト 600。静止: 透明、テキスト 0.45、ウェイト 400。 === モーション === opacity、transform (scale/translate)、box-shadow のみアニメートする。width/height/padding/margin は決してアニメートするな（リフローを起こす）。 デュレーション: tap 0.08s · ツールチップ 0.12s · 入退場 0.15s · 標準トランジション 0.18-0.22s · アンビエント（パルス）2s+。 ボタンのホバー: scale 1.02-1.05 · タップ: scale 0.93-0.97。標準イージング: cubic-bezier(0.16, 1, 0.3, 1)。 === 状態（操作可能な各要素）=== 静止 · ホバー (tint + scale、80-180ms) · フォーカス (ブランドのボーダー + リング) · アクティブ (scale 0.93-0.97) · 無効 (不透明度 0.35-0.50、ポインターなし) · エラー (赤ボーダー + エラーテキスト) · 成功 (緑のフラッシュ 1800ms)。 === アイコン / レイアウト / 空の状態 === アイコン: lucide、標準 12-16px、色はテキストから継承。レイアウト: サイドバー 64px (アイコン) または 176px (展開)、パネル 280-320px、コンテンツ flex-1、最大 1440px。空の状態: 消音アイコン 0.15 + タイトル 0.35 + サブタイトル 0.20 + ゴーストCTA。 === アンチパターン（決してするな）=== UIでウェイト 300/800/900 を決して使うな · 名前付きのグレー色を決して使うな（白のrgbaを使え）· 奇数の余白を決して使うな · レイアウトを決してアニメートするな · "transition: all" を決して使うな · 画面の15-20%以上にブランドカラーを決して使うな · 子に親と同じ（または大きい）radius を決して使うな。 目標: 結果がシリコンバレーのプレミアム製品と見分けがつかないように見えること。これらの値をすべての画面で守れ。
#8B5CF6）をあなたのものに変えてください。もっとあなた向けのものが欲しいなら、上のプロンプト1か2を使って、AIにこの同じ構造で独自のものを生成させてください。CLAUDE.md（またはエージェントの指示ファイル）に保存し、ときどき、どこかの画面がルールから外れていないか確認するよう頼んでください。習慣: システムを守っていない新しい画面は作らない。それはC-A-Rプロトコルと同じことを、デザインに対してやるだけです。Join 4,200+ builders. No credit card. Build your first app with AI in minutes.