Google Labs、AIエージェント向けデザイン仕様「DESIGN.md」公開

Google Labsが、コーディングエージェント向けにデザインシステムを記述するためのフォーマット仕様「DESIGN.md」を公開した。GitHubリポジトリ「google-labs-code/design.md」上で公開された本仕様は、機械可読なデザイントークンと人間向けのデザイン意図説明（プローズ）を一つのMarkdownファイルに統合する。これにより、AIエージェントが一貫したビジュアルアイデンティティを維持しながらコード生成できるようになる。

DESIGN.mdは、デザインシステムを「持続的かつ構造化された理解」としてエージェントに提供することを目的としている。従来、デザインシステムは人間のデザイナーが参照するドキュメントやFigmaファイルとして存在し、AIエージェントがそのルールを正確に把握するのは困難だった。本仕様はそのギャップを埋める。

ファイル構造の二層設計

DESIGN.mdは二つの層で構成される。一つ目はYAMLフロントマターである。ファイル冒頭の「---」で区切られた領域に、機械可読なデザイントークンを定義する。二つ目はMarkdownボディで、人間が読むためのデザイン意図や適用ルールを「##」セクションで記述する。トークンは規範的な値（normative values）であり、プローズはそのコンテキストを提供する。

提供されたサンプルでは、以下のようなトークン構造が示されている。

---

name: Heritage colors: primary: “#1A1C1E” secondary: “#6C7278” tertiary: “#B8422E” neutral: “#F7F5F2” typography: h1: fontFamily: Public Sans fontSize: 3rem body-md: fontFamily: Public Sans fontSize: 1rem label-caps: fontFamily: Space Grotesk fontSize: 0.75rem rounded: sm: 4px md: 8px spacing: sm: 8px md: 16px

この例では、カラーパレット、タイポグラフィ、角丸サイズ、スペーシングが定義されている。プローズ側では「Architectural Minimalism meets Journalistic Gravitas」というデザインコンセプトを説明し、各トークンの用途を解説している。例えばprimary（#1A1C1E）は「見出しや本文に使う深いインク」、neutral（#F7F5F2）は「純白より柔らかい温かみのある石灰岩の基調」といった具合だ。

エージェントはこのファイルを読み込むことで、見出しにはPublic Sansの3rem、背景には#F7F5F2、CTAボタンには#B8422Eを適用するUIを生成する。単なるカラーコードだけでなく、その背後にある意図も理解できる点が特徴である。

CLIツールで検証と差分管理

DESIGN.mdには、仕様に準拠しているかを検証するlintコマンドと、二つのバージョン間の差分を検出するdiffコマンドが付属する。いずれもnpmパッケージ「@google/design.md」から利用できる。

lintコマンドは、DESIGN.mdファイルを解析し、トークン参照の欠落やWCAGコントラスト比のチェック、構造上の問題をJSON形式で出力する。サンプル出力では、ボタンのテキストカラーと背景色のコントラスト比15.42:1がWCAG AAに合格したことがwarningとして報告されている。エラー数0、警告1、情報1というサマリーも提供される。

diffコマンドは、二つのバージョンのDESIGN.mdを比較し、トークンレベルとプローズレベルのリグレッションを検出する。出力例では、カラートークンにaccentが追加され、tertiaryが変更されたこと、リグレッションなしと判定されたことが示されている。

これらのツールにより、デザインシステムの変更をCI/CDパイプラインに組み込める。例えばプルリクエスト時にDESIGN.mdのlintを実行し、アクセシビリティ基準を満たしているか自動チェックすることが可能だ。

トークンスキーマの詳細

仕様書で定義されている主要なトークンタイプは以下の通りである。

• colors: CSSで有効な任意のカラー値（16進数、RGB、HSLなど）を指定できる。
• typography: fontFamily、fontSizeに加え、fontWeight、lineHeight、letterSpacingなどのプロパティを持つオブジェクト。
• rounded: レベル名（sm, md, lgなど）と寸法値をマッピングする。
• spacing: 同様にレベル名と寸法値をマッピング。数値の場合はpx解釈される。
• components: コンポーネントごとにトークン参照を定義可能。例えばボタンの背景色にprimaryを参照するといった使い方。

トークンの型は、Color（CSSカラー値）、Dimension（単位付き文字列または数値）、Typographyオブジェクトなどが用意されている。components内では他のトークンを「$ref: colors.primary」のように参照できる。

デザインシステムの新しい共有手段

DESIGN.mdの最大の利点は、人間とエージェントが同じファイルからデザイン情報を取得できる点にある。FigmaのトークンエクスポートやStorybookのパラメータファイルと異なり、YAMLフロントマターは機械処理に最適化されている。一方、Markdownボディは人間が読み書きしやすく、デザイナーがプロジェクトの意図を自然言語で記述できる。

Google Labsはこのプロジェクトを「alpha」バージョンとして公開しており、今後仕様が安定化するにつれてエコシステムが拡大する可能性がある。例えば、FigmaプラグインでDESIGN.mdを自動生成するツールや、主要なCSSフレームワークへの変換ツールが登場すれば、採用が加速するだろう。

既にGitHub Trendingで話題になっており、デザインシステムの管理方法に新たな選択肢を提供するものとして注目される。Googleが先日公開したGoogle Research、時系列予測モデルTimesFM 2.5を公開のような基盤モデルと組み合わせ、エージェントがデザインルールを自律的に学習・適用する未来も想定できる。

また、Google Wallet、Ticketmaster向けカスタマイズチケット機能やGoogle Wallet実用テスト、スマホだけで街に出られるかといった動きに見られるGoogleのUI/UX統合の流れの中で、DESIGN.mdは社内外のデザイン標準化に寄与する可能性がある。

編集部の見解

短期的には、本仕様はAIコード生成においてデザインの一貫性を高める実用的なツールとして機能する。現状、CursorやGitHub Copilotといったエージェントは、プロジェクト内のCSS変数やコンポーネントライブラリからデザイントークンを推論するにとどまる。DESIGN.mdが普及すれば、エージェントは明示的なルールに従ってUIを生成できるようになり、手戻りが減少すると見る。 長期的には、デザイントークンの標準化とエージェント間の相互運用性が進む可能性がある。Google Labsが仕様を公開したことで、他の企業やOSSプロジェクトが同様のアプローチを採用したり、DESIGN.mdをFigmaやStorybookと連携するエコシステムが生まれるかもしれない。ただし、現時点ではalpha版であり、実運用でのフィードバックが不足している。トークン参照の名前空間の衝突や、大規模プロジェクトでのパフォーマンスなど、検証すべき課題は多い。 編集部としては、AIエージェント時代におけるデザインと開発の橋渡しとして、本仕様がどの程度の普及率を得るかが注視点だと考える。

参考

• GitHub Trending — 2026-06-26公開