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を生成します。すべて単一のファイルからです。
📖 全文を読む: HN AI Agents
👀 See Also

SuperHQ: 隔離されたmicroVMサンドボックス上でAIコーディングエージェントを実行
SuperHQは、AIコーディングエージェント(Claude Code、OpenAI Codex、Pi)を分離されたmicroVMサンドボックス内で実行するオープンソースのRust/GPUIアプリです。各エージェントは完全なDebian VMを取得し、プロジェクトディレクトリを読み取り専用でマウントし、ホストのAPIキーを見ることはありません。キーは認証ゲートウェイプロキシを介して注入されます。

ローカルAI画像批評ツール、Ollama Visionモデルを活用してフィードバックを提供
開発者が、Ollamaのビジョンモデルを利用してAI生成画像をローカルで分析する無料デスクトップアプリケーションを作成しました。このツールは、改善提案やプロンプトのアップグレードを含む構造化されたフィードバックレポートを提供します。

JobPilot:自動化された求職応募のためのClaudeコードプラグイン
JobPilotは、Playwrightブラウザ自動化を使用して求職活動と応募プロセスを自動化するClaude Codeプラグインです。求人ボードの検索、応募書類の自動入力、カバーレターの生成、応募状況の統計追跡などのコマンドが含まれています。

ProofShot CLIはAIコーディングエージェントにブラウザ検証機能を提供します
ProofShotは、ブラウザセッションの記録、スクリーンショットの撮影、コンソールエラーの収集を通じて、AIコーディングエージェントがUI機能を検証できるオープンソースのCLIツールです。シェルコマンドを実行できるあらゆるエージェントと連携し、人間によるレビューのための自己完結型HTMLレポートを生成します。