Claude デザインシステムプロンプト

Claude デザインシステムプロンプトAnthropicのClaude Designからリバースエンジニアリングされたシステムプロンプト。LLMを、意見を持ち、アクセシビリティを意識し、AIスロップ（AI特有の安易なパターン）に強いデザイン協力者に変えるシステムプロンプトとスキルライブラリ。オープンソース、MITライセンス。このプロンプトをシステムプロンプトをサポートするあらゆるLLM（Claude、GPT、Gemini、ローカルモデル）にドロップし、必要に応じて手続き型スキルとペアリングしてください。これは何ですか？ほとんどの「デザインアシスタント」プロンプトは、攻撃的なグラデーション、絵文字装飾、丸角に左ボーダーが付いたカード、どこでもInterフォントといった、一般的なSaaSテンプレート出力を生成します。このプロンプトは、それらのパターンを明確に拒否し、以下の完全なデザイン哲学に置き換えます：コンテンツの規律（フィラーなし - すべての要素は存在意義を持つ）美的規律（AIの定型句を避け、パレットとトーンにコミットする）視覚的階層とリズム（サイズ、色、太さ、位置、密度、スペーシングのスケール）アクセシビリティ（WCAG、セマンティックHTML、キーボードナビゲーション、フォーカスリング、モーション設定）インタラクションとフィードバック（ホバー、アクティブ、無効、フォーカス、ローディング、バリデーション状態）システム思考（個々のページではなく、コンポーネントとトークン）媒体の尊重（実際のCSS Grid、oklch()、text-wrap: pretty、実際のインタラクティブプロトタイプ）量より質（幅より深さ、すべてのディテールを磨き上げる）さらに、プロダクション、抽出、レビュー作業のためにエージェントが呼び出せる14の手続き型スキルが含まれています。含まれるものclaude-design-system-prompt/ ├── claude/ Claude Code / Claude.ai バリアント │ ├── system-prompt.md メインシステムプロンプト — 20章 │ └── skills/ 14の呼び出し可能なスキル │ ├── discovery-questions.md キックオフ質問プロトコル │ ├── frontend-aesthetic-direction.md ブランドが存在しない場合にルックにコミットする │ ├── wireframe.md 低忠実度探索、3つ以上のバリエーション │ ├── make-a-deck.md HTMLでのスライドプレゼンテーション │ ├── make-a-prototype.md インタラクティブなクリック可能なプロトタイプ │ ├── make-tweakable.md フローティング調整パネル │ ├── generate-variations.md 軸を横断した3つ以上の高忠実度バリエーション │ ├── design-system-extract.md ソースからトークンを抽出する │ ├── component-extract.md 再利用可能なコンポーネントのインベントリ作成 │ ├── accessibility-audit.md WCAG、セマンティック、キーボード、モーション │ ├── ai-slop-check.md グラデーション/絵文字/フォント/ハウススタイルの定型句検出 │ ├── hierarchy-rhythm-review.md サイズ/太さ/色+スペーシングスケール │ ├── interaction-states-pass.md ホバー/アクティブ/無効/フォーカス/ローディング │ └── polish-pass.md アンブレラ最終ゲートレビュー ├── codex/ OpenAI Codex バリアント（シングルループ、サブエージェントなし） │ ├── AGENTS.md Codex自動検出エントリーポイント │ ├── system-prompt.md 同じプロンプト、Codex用に調整 │ └── skills/ 同じスキル、並列エージェントではなく逐次レビュー ├── README.md このファイル └── LICENSE MIT 使用方法システムプロンプトを直接使用するsystem-prompt.mdの内容を、システムプロンプトをサポートするあらゆるLLMのシステムプロンプトとして貼り付けます。エージェントはデザイン哲学に従い、タスクが一致した場合にスキル名を参照します。スキルを手続きとして使用skills/の各スキルは、自己完結型の段階的な手続きです。スキル名がトリガーです。ユーザーのリクエストがスキルの説明と一致すると、エージェントはそのスキルをロードして従います。スキルは3つのカテゴリにグループ化されます：プロダクション — ビルド discovery-questions · frontend-aesthetic-direction · wireframe · make-a-deck · make-a-prototype · make-tweakable · generate-variations システム — 構造を抽出 design-system-extract · component-extract レビュー — 監査と修正 accessibility-audit · ai-slop-check · hierarchy-rhythm-review · interaction-states-pass · polish-pass スキルはチェーンできます。典型的なグリーンフィールドフロー：discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass ブランドを意識したフロー：design-system-extract → generate-variations → make-tweakable → polish-pass プラットフォームに合わせて調整プロンプトはHTML出力のデザイン環境（Claude.aiのデザインツールに似ています）を想定しています。ターゲット環境が異なる場合（Figmaプラグイン、コードのみのアシスタント、チャットのみのデザインコーチ）、ワークフローの章とツールの参照を調整する必要があります。原則（第5～16章）はどの媒体にも適用できます。モデルキャリブレーションclaude/バリアントは、現在のAnthropicフロンティアモデル（Fable 5およびOpus 4.7/4.8系統）に合わせて調整されており、これらのモデルは指示に忠実に従い、以前の世代よりもアグレッシブなプロンプトを必要としません：クォータではなく条件。 「少なくともN個の質問をしてください」や「CRITICAL: YOU MUST」はありません。現在のモデルはクォータを文字通りの契約として扱い、過剰にトリガーするため、プロンプトは行動すべき条件と、マイナーな決定のための自律条項（質問するのではなく、合理的なオプションを選択して記録する）を記載しています。スキルとサブエージェントの明示的なトリガー。現在のモデルはデフォルトでオプション機能を過小評価するため、各スキル説明には呼び出し時期が記載されており、検証者の委任には明示的なトリガー（「実質的な視覚的変更のたびに」）があります。カバレッジ優先レビュー。レビューエージェントは、信頼度/重大度推定値とともにすべてを報告し、集約ステップでフィルタリングします。現在のモデルは「重要な問題のみ報告」を文字通りに実行するため、発見事項がサイレントに抑制されます。ハウススタイルのガード。現在のモデルのデフォルトの美学（クリーム色の背景、セリフ体ディスプレイタイプ、テラコッタ/アンバーのアクセント）は、ai-slop-check（ルール9）によって検出され、frontend-aesthetic-directionの4方向プロトコルによって事前に対処されます。サンプリングパラメータ（温度）はこれらのモデルにはもはや存在しないため、視覚的な多様性はランダム性ではなく、明示的なバリエーションごとの仕様から来る必要があります。古いモデル（Claude Opus/Sonnet 4.6以前、またはAnthropic以外のモデル）では、穏やかな表現が過小トリガーする可能性があります。モデルが質問ラウンドやレビューをスキップしている場合は、より強力な命令言語を復元してください。codex/バリアントは別途維持されており、これらの注記の影響を受けません。デザイン原則、要約するとsystem-prompt.mdの20章は以下をカバーしています：# 第1章 アイデンティティと役割 2 ワークフロー 3 まず質問をする 4 デザインを既存のコンテキストに根ざす 5 コンテンツの原則 — フィラーなし 6 美的原則 — 意図的なビジュアル 7 視覚的階層とリズム 8 タイポグラフィシステム 9 カラーシステム 10 アクセシビリティとインクルージョン 11 インタラクションとフィードバック 12 シンプルさと明確なCTA 13 システム思考 14 媒体の尊重 15 ユーザーの理解 16 量より質 17 出力原則 18 コラボレーションとデリバリー 19 IPとコンテンツの境界 20 利用可能なスキル 貢献する問題とプルリクエストを歓迎します。特に役立つ貢献：追加のレビュー（例：コピーレビュー、モーションレビュー、ダークモードパリティチェック）他の環境（Figma、コードのみ、ターミナルのみ）向けの調整済みプロンプトプロンプトの他の言語への翻訳プロンプトと同じ運用トーンを維持し、プロンプトの肥大化を避けてください。各章は、プロンプトがエージェントに課すのと同じ基準で、その場所を確保する必要があります。ライセンスMIT — LICENSEを参照してください。このプロンプトとスキルライブラリは、商用利用を含む、いかなる目的にも使用、変更、配布できます。帰属表示は不要ですが、感謝されます。