Claude Design ハーネス構築ガイド

このスライド資料は、Claude Design（およびClaude Artifacts / Claude Code）に対して任意のデザインシステムを正確に読み込ませ、意図通りの画面を出力させるためのファイル設計と運用手法を体系的に解説しています。

スライドの主な構成と解説内容

1. Claude Designのハーネス構成（ディレクトリ配置）

Claude Designがデザインシステムとして認識して読み込むディレクトリ構成（project/ 直下）の役割を解説しています。
エントリーポイント: 生成エージェントは画面作成時に project/README.md と project/tokens.json を最優先で読み込みます。
配下ファイルとアセット: README.md から明示的に指定されたドキュメント（DESIGN.md など）や、components/bundle.js（コンポーネント群）、assets/（ロゴ・アイコン素材）のみが生成プロセスに正しく渡ります。

2. tokens.json のフラット化と指定法

デザイントークンを渡す際の構造上の必須要件を解説しています。
フラットな配列形式: W3C/DTCG形式のような階層型ネストマップはエンジンが解釈できずトークンが脱落するため、{"tokens": [{"name": "...", "value": "...", "usage": "..."}]} という単一の配列リスト構造へ変換して渡す必要があります
。
usageの必須記述: すべてのトークンに対して用途（例: "Page background. AA contrast"）を指示する usage フィールドを記述することが求められます。

3. README.md と DESIGN.md の二層構造

コンテキスト長を圧迫せずにガイドラインを読み込ませる二層構成の手法です。
概要と詳細の分離: README.md を軽量なエントリーポイント（ブランド方針・最優先ルール）とし、詳細な規約や細則は DESIGN.md に配置します。
明示的な誘導: Claudeは README.md に書かれていないMarkdownファイルを自主的には読みに行かないため、「詳細は project/DESIGN.md の〇〇節を参照すること」と指示文を入れて必要な時に読みに行かせる構成にします。

4. 汎用AI感を防ぐ指示とネガティブ制約

AI特有の典型的なSaaS風デザイン（AI slop）に陥るのを防ぐ設計技法です。
禁止事項（ネガティブ制約）の明示: 意味のないグラデーション、過剰な影、目的のない全大文字のeyebrowラベル、純黒の使用などを明確に禁止します。
具体性による制御: 「Modern」「Clean」のような曖昧な形容詞を避け、トークン名や具体的・限定的なスタイル参照を指定することで、ブランド固有の意匠を再現させます。

Transcript