概要
AIエージェントが汎用的なUIを作ってしまう問題を解決するため、機械可読なデザイントークンと人間向けの設計思想を一つのMarkdownファイルに統合する新規格「DESIGN.md」の提案。
詳細内容
この記事では、Google Labsが公開した新しいオープンソース規格「DESIGN.md」について詳しく解説しています。現在のAIコーディングエージェントは、ブランド独自のスタイルを知る術がないため、デフォルトの汎用コンポーネントを使用しがちです。これを解決するのがDESIGN.mdです。
### 主な特徴と構造
- **ハイブリッド構造**: ファイル上部のYAMLフロントマターに「機械可読なデザイントークン」を記述し、下部のMarkdownプロースに「人間向けの設計根拠」を記述します。
- **8つの標準セクション**: 概要、色、タイポグラフィ、レイアウト、深度、形状、コンポーネント、Do's & Don'tsの順で構成され、一貫した情報提供を行います。
- **信頼できる唯一の情報源（SSOT）**: README.mdがコードの実行方法を説明するように、DESIGN.mdはブランドの見た目と意図を定義し、リポジトリのルートに配置されます。
### AI時代の利点
AIエージェントにこのファイルを読み込ませることで、単なる数値（Hex値など）だけでなく、その色を「いつ、なぜ使うのか」という判断基準（Intent）を伝えることが可能になります。これにより、AIによるフロントエンド開発においてもブランドの一貫性を保つことができます。記事では、チャットツールを使った最初のファイルの作り方や、既存のワークフローへの組み込み方も紹介されています。