DESIGN.md（トークン＋ルール）を置き、AGENTS.md / CLAUDE.md から必ず読ませる

どんな問題を解決するか / いつ使うか

Claude Code / Codex / Cursor などで複数画面を作ると、画面ごとに新しいHEX値や余白値をその場で作ってしまい、統一感がなくなるとき。

やり方

1. プロジェクトのルートに DESIGN.md を作る。上にトークン（値）、下にルール（言葉）を書く。投稿で紹介されていた章立て（Googleが公開しているDESIGN.md形式）：
   • Overview（全体のトーン）
   • Colors / Typography / Layout（余白スケール・グリッド）
   • Elevation & Depth（影・重なり）/ Shapes（角丸）
   • Components（ボタン・入力欄・カードの決まり）
   • Do's and Don'ts（やること／禁止事項）
2. エージェント用の指示ファイル（AGENTS.md、Claude Codeなら CLAUDE.md）に次の1行を足す：
   Read DESIGN.md before any UI work.（UI作業の前に必ずDESIGN.mdを読む）
   Claude Code では CLAUDE.md に @DESIGN.md と書けばインポートできる。
3. 投稿では、形式チェック用のコマンドとして npx @google/design.md lint DESIGN.md が紹介されていた。
4. 運用しながら育てる：エージェントの出力を直したら、その理由をDESIGN.mdのルールに追記する（wokobo_net の「その場で書く指示から、育てる仕様書へ」という考え方と同じ）。

注意点・対応状況

• DESIGN.mdが長すぎると守られにくい。値は表にして短く書く（指示ファイル全体も短く保つ）。
• Figmaのバリアブル／コード上のトークン（CSS変数・Tailwind設定）と値がずれないよう、どれを正とするか決めておく。
• lint コマンドやGoogle形式の仕様は投稿で紹介されていた内容。導入前に公式リポジトリで確認すること。

出典

• 投稿者: @dr_cintas (Alvaro Cintas) ／ 関連：@wokobo_net
• 投稿: @dr_cintas · 2026-10-04 / @wokobo_net · 2026-10-09
• 収集日: 2026-10-09（JST）