DESIGN.md: コーディングエージェントにビジュアルアイデンティティを記述するためのフォーマット仕様

Google LabsがDESIGN.mdをリリースしました。これは、ビジュアルアイデンティティをコーディングエージェントに記述するためのフォーマット仕様です。このファイルは、機械可読なデザイントークン（YAMLフロントマター）と人間可読なデザインの根拠（マークダウンプローズ）を組み合わせています。トークンはエージェントに正確な値を提供し、プローズはその値が存在する理由と適用方法を説明します。

フォーマット概要

DESIGN.mdファイルは、上部の---フェンスで区切られた2つのレイヤーで構成されます：トークン用のYAMLフロントマターと、##セクションを持つマークダウンボディです。抜粋例：

---
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"

トークンは規範的な値です。プローズは適用のための文脈を提供します。

主な機能

• トークンタイプ：色（16進数sRGB）、タイポグラフィオブジェクト（fontFamily、fontSize、fontWeight、lineHeight、letterSpacing、fontFeature、fontVariation）、寸法（数値+単位）、トークン参照（{path.to.token}）。
• コンポーネント：名前をサブトークンプロパティにマッピングします（例：components.button-primary.backgroundColor: "{colors.tertiary}"）。
• セクション順序（オプションですが強制されます）：概要、色、タイポグラフィ、レイアウト＆スペーシング、エレベーション＆デプス、シェイプ、コンポーネント、Do's and Don'ts。

CLIツール

リンターでDESIGN.mdを検証：

npx @google/design.md lint DESIGN.md
{
  "findings": [
    {
      "severity": "warning",
      "path": "components.button-primary",
      "message": "textColor (#ffffff) on backgroundColor (#1A1C1E) has contrast ratio 15.42:1 — passes WCAG AA."
    }
  ],
  "summary": { "errors": 0, "warnings": 1, "info": 1 }
}

バージョン間の後退を検出：

npx @google/design.md diff DESIGN.md DESIGN-v2.md
{
  "tokens": {
    "colors": {
      "added": ["accent"],
      "removed": [],
      "modified": ["tertiary"]
    },
    "typography": { "added": [], "removed": [], "modified": [] }
  },
  "regression": false
}

使用例

Heritageの例を読んだエージェントは、Public Sansの深いインク色の見出し、暖かい石灰岩の背景（#F7F5F2）、そしてBoston Clay（#B8422E）のコールトゥアクションボタンを持つUIを生成します。すべて単一のファイルからです。