google-labs-code/design.md

これは何？

主な機能

• 01YAMLのデザイントークンと、その背景を説明するMarkdownを1つのファイルにまとめます。
• 02lintコマンドで、構造、壊れたトークン参照、WCAGコントラスト比を検証します。
• 03diffコマンドで、2つのバージョンのデザインシステム間のトークン単位の変更を報告します。
• 04トークンをTailwind v3・v4の設定やW3C DTCG JSONにエクスポートします。
• 05TypeScript向けlinter APIと、プロンプト用のコンテキストを出力するspecコマンドを提供します。

ユースケース

• ブランドの色、タイポグラフィ、コンポーネントのスタイルを継続的に参照できる形でコーディングエージェントに提供する。
• CIでデザインシステムを検証し、壊れたトークン参照やコントラスト不足のコンポーネントカラーをチェックする。
• exportコマンドを使って、デザイントークンをTailwindプロジェクトに同期する。

クイックスタート

1. 1

   CLIパッケージをインストールする

   npm install @google/design.md
2. 2

   DESIGN.mdファイルを検証する

   npx @google/design.md lint DESIGN.md

使う前に知っておきたいこと

• !この形式はアルファ版であり、成熟するにつれて変更される可能性があります。
• !このプロジェクトはGoogleのオープンソース脆弱性報奨プログラムの対象ではありません。

トピック

よくある質問

design.md とは？

コーディングエージェントが一貫性のあるUIを構築できるよう、デザイントークンと説明文でビジュアルアイデンティティを記述するフォーマット仕様とCLI。 DESIGN.mdは、コーディングエージェント向けにデザインシステムを記述するファイル形式です。各ファイルでは、YAMLのフロントマターで機械可読なデザイントークンを定義し、続くMarkdownの説明文で、各値を設定した理由や適用方法を解説します。トークンには色、タイポグラフィ、余白、角丸、コンポーネントのプロパティを正確に指定し、説明文ではデザインの意図として、トーン、カラーパレットの役割、使用ルールなどを扱います。

design.md は無料で使えますか？ライセンスは？

design.md は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

design.md は今もメンテナンスされていますか？

活発にメンテナンス中。design.md の最終コミットは 2026年10月16日 です。

design.md は何に使えますか？

ブランドの色、タイポグラフィ、コンポーネントのスタイルを継続的に参照できる形でコーディングエージェントに提供する。 CIでデザインシステムを検証し、壊れたトークン参照やコントラスト不足のコンポーネントカラーをチェックする。 exportコマンドを使って、デザイントークンをTailwindプロジェクトに同期する。

design.md のインストール方法は？

CLIパッケージをインストールする: npm install @google/design.md DESIGN.mdファイルを検証する: npx @google/design.md lint DESIGN.md

design.md はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/google-labs-code/design.md