Google、Stitchの「DESIGN.md」仕様を公開：AIがデザイン規則を正しく理解

DESIGN.md は、コーディング AI エージェントにデザインシステムの意図と規則を正しく伝えるためのオープンフォーマット仕様です。Google Labs の AI UI ツール「Stitch」で使われていた設計ルール共有の仕組みが、ドラフト仕様として GitHub 上でオープンソース化されました。

要するに、プロジェクト間でデザインシステムを 1 つのファイルとして書き出し、どの AI エージェントにも一貫したブランドルールを守らせることができるツールです。

何ができるのか

AI に画面を作らせるとき、指示を重ねるうちにフォントサイズが崩れたり、意図しない配色が混ざったりするのは日常茶飯事です。

DESIGN.md を使えば、デザイン規則をプロジェクトをまたいで簡単にインポートおよびエクスポートできます。AI は単に指定されたカラーコードを使うだけでなく、それぞれの色がどのような役割を持つのかを正しく認識して画面を構築します。

さらに実用的なのがアクセシビリティの検証です。WCAG のコントラスト比基準に照らし合わせ、AI が選んだ背景色と文字色の組み合わせが基準を満たしているかを自動でチェックできます。

どのような仕組みか

DESIGN.md は特殊な新言語を用意するのではなく、既存の Markdown と YAML を巧みに組み合わせて作られています。

ファイルの構成は大きく 2 つの層に分かれます。先頭にある YAML のデータ層には、色、タイポグラフィ、角丸、余白、コンポーネント定義などの正確なトークン値が機械可読な形で記述されます。

続く Markdown 本文の人間可読レイヤーには、ブランドの概要、配色の意図、レイアウト指針、やってはいけない禁止事項などが論理的な順序で整理されます。たとえば特定のアクセンカラーが主要な操作ボタン専用であるといった文脈を、自然な文章で AI に叩き込む仕組みです。

Google はコマンドラインから使える検査ツールもあわせて提供しています。npx 経由で実行できるリント機能を使えば、トークンの参照切れや WCAG 違反の有無が構造化 JSON で出力され、エージェント自身が修正に役立てることができます。2 つのバージョンを比較して予期せぬ変更を検出する diff コマンドも備わっています。

どこで試せるか

仕様のドラフトは GitHub の google-labs-code リポジトリで公開されており、現在はアルファ版の位置づけです。

Stitch を利用しているユーザーは、ツール内から直接 DESIGN.md ファイルの書き出しや読み込みが行えます。他の AI コーディングツールで使いたい場合は、リポジトリのドキュメントを参考にファイルを作成し、公式の CLI ツールで検証しながらプロジェクトに組み込むことができます。

なぜ重要か

日常的に AI を使ってフロントエンドのコードを書いている開発者にとって、試す価値が十分にあるツールです。プロンプトに毎回長文のデザイン指示を貼り付ける無駄がなくなり、デザインシステムの破綻を未然に防げます。

Google がこの仕様を Stitch 内に囲い込まず、オープン規格として提示した点は非常にスマートだと感じます。AI による UI 生成が普及する中で、デザインルールを正確に渡す標準フォーマットとして普及すれば、人間と AI の協業におけるスタイルのズレは大幅に解消されるはずです。