DESIGN.md ジェネレーター。

色、フォント、角の半径、余白を入力すると、プロダクトの見た目を Codex などのコーディングエージェントに伝える DESIGN.md ファイルができあがります。ブラウザ内で動き、入力した内容はアップロードも保存もされません。

---
version: alpha
name: "Pagely"
colors:
  primary: "#1F3D2B"
  on-primary: "#FAF6EE"
  secondary: "#E8735A"
  tertiary: "#F2C14E"
  neutral: "#FAF6EE"
  surface: "#FFFFFF"
  on-surface: "#1F2A22"
typography:
  headline-lg:
    fontFamily: "Georgia"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
  body-md:
    fontFamily: "system-ui"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 16px
  lg: 22px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---

## Overview

Pagely のビジュアルアイデンティティ。すべての画面で、このファイルのトークンだけを使います。

## Colors

- **primary (#1F3D2B):** メインのアクションと、最も重要な要素。
- **on-primary (#FAF6EE):** primary の上に置く文字とアイコン。
- **secondary (#E8735A):** 補助的なアクセント。控えめに使います。
- **tertiary (#F2C14E):** バッジや進捗表示などのハイライト。
- **neutral (#FAF6EE):** ページの背景。
- **surface (#FFFFFF):** カード、シート、入力欄。
- **on-surface (#1F2A22):** surface の上に置く本文とアイコン。

## Typography

見出しは Georgia、それ以外はすべて system-ui。上で定義したサイズだけを使い、ほかのサイズは使いません。

## Layout

余白はスケールに従います。関連する要素の間は 8px、コンポーネントの内側は 16px、セクションの間は 24px。

## Shapes

角の半径は、小さな要素が 8px、ボタンと入力欄が 16px、カードが 22px。

## Components

プライマリボタンは primary の色に on-primary の文字を使います。プライマリボタンは 1 画面に 1 つだけにします。

## Do's and Don'ts

- 文字のコントラストは WCAG AA（4.5:1）以上を保つ。
- 新しい値を作らず、これらのトークンを再利用する。
- ここで定義していない色を持ち込まない。
- 1 枚のカードで 3 種類以上の文字サイズを混ぜない。

DESIGN.md の作り方

1. プロダクト名を入力し、必要なら目指す印象を 1〜2 文で書きます。その説明が、ファイルの description と Overview になります。
2. 7 つの色を設定します。 primary、on-primary、secondary、tertiary、neutral、surface、on-surface です。色見本から選ぶか、HEX コードを貼り付けます。どれかの組み合わせで文字が読みにくくなる場合（4.5:1 未満）は、フォームがその組み合わせを表示します。
3. 書体を設定します。 見出しのフォントと本文のフォントを、それぞれのサイズとともに指定します。
4. 角の半径と余白を設定します。 それぞれ小・中・大の 3 段階（sm、md、lg）です。
5. ファイルをコピーするかダウンロードします。 ファイルは入力に合わせて更新され、最初は完全な記入例として、DESIGN.md のガイドで紹介している読書アプリ Pagely の内容が入っています。

ファイルは Google Labs の DESIGN.md フォーマットに沿っています。

• YAML フロントマターのトークン： 7 つの色、headline-lg と body-md の 2 つの文字スタイル、角の半径と余白のスケール、そしてそれらを参照する button-primary コンポーネント。
• 文章のセクション： フォーマットが定める順番で、Overview、Colors、Typography、Layout、Shapes、Components、Do’s and Don’ts。それぞれの色の用途についての説明と、守るべき 4 つのルールが入ります。

Codex で使う

ファイルを DESIGN.md として、プロジェクトのルートの AGENTS.md の隣に保存します。Codex は AGENTS.md を自動で読みますが、DESIGN.md は自分では探さないので、AGENTS.md から参照させましょう。

## Design

- Before any UI work, read DESIGN.md and use only its tokens.
- If a screen needs a value that DESIGN.md doesn't define, ask before inventing one.

あとはいつもどおり画面を頼むだけです。

DESIGN.md に従って、[ホーム] 画面を自己完結した HTML ファイル 1 つでデザインしてください。色、文字サイズ、角の半径、余白は DESIGN.md で定義されているものだけを使い、定義されていないもので必要だったものがあれば挙げてください。

プロダクトが育てば、ファイルも育てられます。文字スタイルを増やしたり、カードや入力欄などのコンポーネントや Elevation & Depth のセクションを、手で、あるいは Codex と一緒に追加したりして、npx @google/design.md lint DESIGN.md で結果をチェックしましょう。DESIGN.md のガイドでは、フォーマットの全体と、既存のコードから Codex にファイルを書いてもらう方法を紹介しています。

よくある質問

DESIGN.md とは何ですか？

AI コーディングエージェントにデザインシステムを伝えるための、プレーンテキストのファイルです。正確な色、文字、余白、コンポーネントを YAML のトークンで書き、その使い方を文章で説明します。Google Stitch から生まれた Google Labs のオープンなフォーマットで、仕様はまだ alpha とされています。

Codex は DESIGN.md を自動で読みますか？

読みません。Codex が自動で読むのは AGENTS.md で、DESIGN.md ではありません。上で示したように、UI の作業の前に DESIGN.md を読むよう AGENTS.md に 1 行書いておけば十分です。

ジェネレーターにない項目を追加できますか？

できます。ジェネレーターは、ほとんどの画面に必要なトークンをカバーしています。フォーマットでは、文字スタイルやコンポーネントを増やしたり、Elevation & Depth のセクションを入れたりもできます。自分でファイルに追加するか、Codex に頼みましょう。

無料ですか？入力した内容はアップロードされますか？

無料で、登録も不要です。ファイルはブラウザの中で作られ、入力した内容はアップロードも保存もされません。

続けて読む

• DESIGN.md：Codex にデザインシステムを渡すDESIGN.md のフォーマット、完全な記入例、Codex に守らせる方法。
• 画像からカラーパレットを抽出どんな画像からでも主な色を HEX コードで取り出し、そのままコピーできます。
• WCAG 2.2 対応のコントラストチェッカー文字色と背景色の組み合わせが AA と AAA を満たすかをチェックします。
• UI デザインにおすすめの Codex スキルCodex にセンスを与えるスキルと、自分のデザインシステム用のスキルの書き方。