skip to content
日替わり OSS
Table of Contents

リポジトリ

DESIGN.mdとは：デザインシステムとコーディングエージェントを結ぶ架け橋

DESIGN.mdは、Google Labs Codeが提唱する、デザインシステムを「コーディングエージェント」に理解させるための新しいフォーマット仕様です。これは単なるデザインドキュメントではなく、機械可読なデザイントークンと人間可読なデザイン思想を組み合わせることで、開発プロセスにおけるデザインの一貫性と自動化を強力に推進します。

近年の開発現場では、デザインシステムが不可欠となっています。UIの一貫性を保ち、開発効率を高める上で欠かせませんが、その設計思想や具体的な適用ルールをコードに正確に反映させるのは常に課題です。特に、LLM（大規模言語モデル）ベースのコーディングエージェントが台頭する中で、人間が意図するデザインをエージェントに曖昧さなく伝える共通言語の必要性が高まっていました。DESIGN.mdは、この課題に対する明確なソリューションを提供します。

DESIGN.mdが提供する価値

1. 機械と人間、双方に伝わるデザイン定義

DESIGN.mdファイルは、大きく二つの層から構成されます。

  • YAMLフロントマター: ファイルの冒頭に---で囲まれたブロックとして記述されます。ここには、色、タイポグラフィ、スペース、角丸などの具体的なデザイン値（デザイントークン）が機械可読なYAML形式で定義されます。エージェントはこれらのトークンを直接読み取り、コード生成に利用します。
  • Markdown本文: YAMLフロントマターの後に続く部分です。ここでは、デザインの全体的なコンセプト、各色の役割、タイポグラフィの適用文脈といった、人間がデザインシステムを理解し、適切に適用するために必要な背景情報やガイドラインがMarkdown形式で記述されます。エージェントはこれを読み込むことで、「なぜ」そのデザイン値が存在するのか、「どのように」適用すべきかといった、より深い理解を得ることができます。

このハイブリッドなアプローチにより、開発者はデザインの意図を明確に伝えられ、コーディングエージェントは単なる数値だけでなく、その背景にあるコンテキストを理解した上で、より正確かつ意図通りのコードを生成できるようになります。

2. デザインシステムの一貫性と品質向上を促進するツール群

DESIGN.mdエコシステムには、デザインシステム運用を支援するCLIツールが用意されています。

デザインのバリデーションと品質チェック (lint コマンド)

DESIGN.mdファイルが仕様に準拠しているか、またデザインシステムとして問題がないかを検証します。

  • 構造的な正しさ: ファイル構造、セクション順序、トークン定義の整合性をチェックします。
  • WCAGコントラスト比の検証: テキストと背景色のコントラスト比を自動でチェックし、アクセシビリティ基準（WCAG AA/AAA）への準拠をサポートします。これは、デザインの品質を自動的に保証する上で非常に強力な機能です。
  • 壊れたトークン参照の検出: 定義されていないトークンを参照している箇所を特定します。

これらのチェック結果は構造化されたJSON形式で出力されるため、CI/CDパイプラインに組み込むことで、デザイン変更時の品質低下を防ぎ、一貫性を維持する自動化されたワークフローを構築できます。

Terminal window
npx @google/design.md lint DESIGN.md

デザインシステムの変更履歴管理と回帰テスト (diff コマンド)

二つのDESIGN.mdファイルを比較し、トークンレベルの変更点を詳細にレポートします。

  • 追加/削除/変更されたトークン: 色、タイポグラフィ、コンポーネントなどのトークンが、バージョン間でどのように変化したかを明確に示します。
  • 回帰の検出: 特定のデザイン変更が意図しない視覚的後退（レグレッション）を引き起こしていないかを判断するのに役立ちます。

これにより、デザインシステムの進化を追跡し、変更がもたらす影響を正確に把握することで、大規模なリファクタリングや機能追加時にもデザインの一貫性を保ちやすくなります。

Terminal window
npx @google/design.md diff DESIGN.md DESIGN-v2.md

どのような現場でDESIGN.mdが役立つか

DESIGN.mdは、特に以下のような環境やチームにとって大きな価値を発揮します。

  • 大規模なデザインシステムを運用するプロジェクト: 多くのプロダクトやチームが共通のデザインシステムを使用している場合、DESIGN.mdは一貫性を保ち、変更管理を効率化するための「唯一の信頼できる情報源（Single Source of Truth）」となり得ます。
  • デザインと開発の連携を強化したいチーム: デザイナーはデザインツールで定義した値をDESIGN.mdに落とし込み、開発者はそのDESIGN.mdを元にコンポーネントを実装する。この共通フォーマットにより、コミュニケーションのギャップを埋め、デザインの意図がより正確にコードに反映されるようになります。
  • コーディングエージェントや自動化ツールを導入している（または検討している）現場: DESIGN.mdは、エージェントがデザインシステムを構造的かつ文脈的に理解するための最適なインプットとなります。これにより、Figmaなどのデザインデータから直接コードを生成する際の精度が格段に向上する可能性があります。
  • 品質とアクセシビリティを重視する開発: lintコマンドによるWCAGコントラスト比の自動チェックは、アクセシビリティ要件を満たすUI開発において強力なサポートとなります。

まとめ

DESIGN.mdは、デザインシステムを単なるドキュメントから、コーディングエージェントが理解し、活用できる実践的な仕様へと昇華させる試みです。機械可読性と人間可読性を両立させたこの新しいアプローチは、デザインと開発の間のギャップを埋め、デザインの一貫性を高め、そして最終的には開発プロセス全体の効率と品質を飛躍的に向上させる可能性を秘めています。デザインシステムの運用に課題を感じているエンジニアや、将来のコーディングワークフローの自動化を見据えているチームにとって、DESIGN.mdは注目すべき革新的なツールとなるでしょう。