DESIGN.md：AI生成UIの新標準をApache 2.0で公開

AIによるUI生成が急速に進化する中、その品質や一貫性を担保するための仕組みが求められています。そんな中、新たなオープンスタンダード「DESIGN.md」がApache 2.0ライセンスで公開されました。この記事では、Googleが公開した最新の仕様解説動画の内容を交え、DESIGN.mdの核心に迫ります。

参考動画:

DESIGN.mdとは何か：AIに「デザインの意図」を伝える

DESIGN.mdは、単なるスタイルガイドではありません。AIエージェントに対して、デザインシステムの永続的かつ構造的な理解を与えるためのテキストファイルです [00:00]。

従来、AIへの指示は断片的になりがちでしたが、DESIGN.mdには以下の要素が集約されます：

• カラーとタイポグラフィの定義とその用途
• デザインルール（どのように各要素が組み合わさるか）
• 意思決定の背景（Reasoning）：なぜその色を選んだのか、どのような印象を与えたいのか [18:49]

これにより、AI（Stitchなどのエージェント）はこのファイルを読み込むだけで、ブランドに沿った一貫性のあるデザイン決定を自律的に行えるようになります [00:25]。

最新アップデート：トークンと推論の融合

最新の仕様では、これまで別々に管理されがちだった「人間向けの設計思想（Reasoning）」と「プログラム向けの具体的な値（Tokens）」が、一つのファイル内で統合されました [02:24]。

「役割」としてのトークン

DESIGN.mdにおけるトークンは、単なる変数ではありません。それは**「命名された決定（Named Decision）」**です [03:41]。

• Primary（主要色）：単なる16進数ではなく、「見出しや本文に使用するメインのインク」という役割を定義します [03:49]。
• Neutral（中立色）：キャンバスや背景など、ユーザーが感情的に中立に感じる要素の役割を担います [04:50]。

このように「役割」でデザインを定義することで、色を直接指定するのではなく、目的に応じた最適な要素をAIが選択できるようになります。

AIが自らミスを修正する「CLIツール」

今回の公開に合わせて、DESIGN.mdを検証するための**CLI（コマンドラインインターフェース）**も導入されました [08:02]。これがWeb制作の現場に革新をもたらします。

動画では、AIエージェントが新しいボタンを追加した際、CLIを実行してアクセシビリティ（コントラスト比）のチェックを行う様子が紹介されています [08:44]。

• AIがデザインを生成・変更する
• CLIで仕様やアクセシビリティ規格（WCAG）に準拠しているか検証する
• 問題があればAIが自ら修正する

この「生成・検証・修正」のループが、DESIGN.mdという共通規格によって自動化されます [09:10]。

まとめ：コミュニティと共に進化するスタンダード

DESIGN.mdは現在、GitHubで仕様書のドラフトが公開されており、誰でもフィードバックや貢献が可能です [06:48]。Apache 2.0ライセンスによるオープン化は、特定のツールに縛られず、VS CodeなどのIDEや様々なAIツール間でデザイン情報を共有可能にすることを目的としています [01:05]。

人間が設計書（DESIGN.md）を書き、AIがそれを正しく解釈して実装する。この新しい協業の形は、Web制作のスピードと品質を次の次元へと引き上げるでしょう。