AIが生成した崩れたUIの手動修正はやめましょう
AIコーディングツールは、デザインにおいて失敗することがよくあります。
ボタンを頼むと、AIはある青色を出してきます。別のコンポーネントを頼むと、また別の青色を出してきます。これは、AIに厳格なデザインシステムが欠けているために起こります。
Google Labsはこの問題を解決するためにdesign.mdをリリースしました。
これは、Cursor、Claude Code、GitHub Copilotといったツールにデザインルールを読み込ませるための仕様です。これにより、不整合なスペーシング、誤ったフォント、色のばらつきを防ぐことができます。
仕組み：
design.mdは2つのパートで構成されるMarkdownファイルです。
- YAML Front Matter: ここには正確なデザイントークンが含まれます。色、タイポグラフィ、スペーシング、角丸（corner radii）などをここで定義します。
- Markdown Body: ここにはデザインの根拠（rationale）が含まれます。なぜその色を使うのか、どのような場合に避けるべきかを説明します。
この構造により、AIはデータとロジックの両方を理解できるようになります。単に16進数（hex code）を見るのではなく、特定の色の用途がヘッドライン用であり、本文には使用すべきではないといったことを理解するのです。
design.md CLIの主な機能：
- Linting（リンティング）: トークンが正しいかどうかをチェックします。WCAG AAのアクセシビリティ・コントラストの確認も可能です。
- Diffing（差分表示）: デザインを更新した際に、どのトークンが変更されたかを正確に示します。
- Exporting（エクスポート）: デザインファイルをTailwind CSS、JSON、またはW3C Design Tokensに変換します。
- Spec（仕様書生成）: AIにファイルの読み方を教えるためのガイドを生成します。
なぜこれが重要なのか：
ほとんどの開発者は、一般的なルールとしてCLAUDE.mdやAGENTS.mdを使用しています。これらは有用ですが、その多くは自然言語で書かれています。そのため、AIは依然として具体的な値を推測しなければなりません。
design.mdは、デザインシステムをマシンリーダブル（機械判読可能）なデータへと変換します。
使用方法：
- DESIGN.mdをプロジェクトのルートディレクトリに配置します。
- CLAUDE.mdまたはCursorのルールに、次の行を追加します: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."（UIタスクについては、まず DESIGN.md を読み、トークンと根拠に厳密に従ってください。）
AIに対して「色が違う」と繰り返し伝えるのはもうやめましょう。AIに「信頼できる唯一の情報源（single source of truth）」を与えてください。
Optional learning community: https://t.me/GyaanSetuAi