【要約】DESIGN.md とは — GoogleがOSS化した「AIエージェント向けデザイン仕様」 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
フロントエンドエンジニアが、Claude CodeやCursorなどのAIエージェントを用いてUIを生成する際に、ブランドの一貫性を維持できない問題がある。エージェントはブランドの細かなルールを知らないため、指示のたびに見た目が微妙に変化してしまう。具体的には以下の課題が生じている。
- ・指示プロンプトへのブランド情報のベタ書きによる限界。
- ・エージェントがデザインの「意図」を推測せざるを得ない状況。
- ・色の用途が不明確なため、アクセシビリティ検証が困難な点。
// Approach
Googleは、UI生成ツール「Stitch」の機能をベースに、AIエージェントがブランド定義を直接参照できる共通フォーマットを開発した。機械と人間の両者が理解できるハイブリッドな構造を採用している。
- ・YAML front matterを用いて、色や余白などのデザイントークンを定義。
- ・Markdown bodyを用いて、その値を選んだ設計根拠（Why）を記述。
- ・Token Reference機能により、トークン間の依存関係を構造的に管理。
- ・CLIツール（@google/design.md）による、W3C DTCGやTailwind形式への変換。
// Result
DESIGN.mdを導入することで、AIエージェントがブランドの「単一情報源」を参照できるようになり、UI生成の精度が向上する。開発プロセスにおいて以下の成果が期待できる。
- ・エージェントが色の用途を正確に把握し、WCAGに基づいた検証が可能になる。
- ・デザインシステムをコードと同様に、CI/CDやバージョン管理に組み込める。
- ・W3C標準への準拠により、既存のツールチェーンとのシームレスな連携が実現する。
Senior Engineer Insight
> AIエージェントによるUI生成が普及する中、ブランドの「意図」を構造化して伝える仕組みは不可欠だ。単なる値の定義に留まらず、Markdownで「なぜその値か」を併記する設計は、設計資産の継承という観点で極めて合理的である。ただし、現在はalpha版であり、仕様変更のリスクがある。既存のTailwind等のエコシステムと接続できる点は、導入障壁を下げる重要な要素と言える。AI主導の開発フローを構築するチームは、早期に検証すべき技術である。