google-labs-code/design.md

解決する課題

コーディングエージェントは、UIを生成する際に一貫したビジュアルアイデンティティを維持することに苦労することがよくあります。DESIGN.mdは、デザインシステムを記述するための標準化された永続的なフォーマットを提供し、AIエージェントが視覚的なブランドの正確な値（トークン）と、その背後にある理由（文章）の両方を理解できるようにします。

仕組み

このシステムは、二層のファイルフォーマットを使用しています：

1. YAML Front Matter: 色、タイポグラフィ、間隔、およびコンポーネント固有のプロパティ（例：ボタンの色）に関する、マシンリーダブルなデザイントークンが含まれます。
2. Markdown Body: 特定のセクション（例：概要、色、タイポグラフィ）に整理された、人間が読めるデザインの論理とガイドラインが含まれます。

これには、ファイルの構造的な正しさを確認するためのリンター、WCAGコントラスト比のチェック、壊れたトークン参照の検出、および Tailwind CSS (v3 および v4) や W3C Design Tokens Format などの形式へのトークンエクスポートを行うためのCLIツールが含まれています。

対象者

生成されたUIが特定のブランドアイデンティティやデザインシステムと一貫性を保つようにしたい、AIコーディングエージェントを活用している開発者やデザイナー。

ハイライト

• ハイブリッドフォーマット: 構造化されたYAMLトークンと記述的なMarkdown文章を組み合わせています。
• アクセシビリティチェック: WCAG AAコントラスト比の組み込みリンター。
• WriteLineエクスポート: Tailwind CSS および W3C DTCG 形式へのエクスポートをサポート。
• エージェント対応: エージェントのプロンプトに注入するためのフォーマット仕様を出力する spec コマンドが含まれています。