DESIGN.md 生成器。

填好颜色、字体、圆角和间距，就能得到一份 DESIGN.md，告诉 Codex 和其他编程 Agent 你的产品应该长什么样。全程在浏览器里运行，你填的内容不会上传，也不会保存。

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):** 主色上的文字和图标。
- **secondary (#E8735A):** 辅助强调色，少量使用。
- **tertiary (#F2C14E):** 徽标、进度等高亮。
- **neutral (#FAF6EE):** 页面背景。
- **surface (#FFFFFF):** 卡片、面板和输入框。
- **on-surface (#1F2A22):** 表面上的正文和图标。

## Typography

标题用 Georgia，其他文字都用 system-ui。只使用上面定义的字号。

## Layout

间距按刻度来：相关元素之间 8px，组件内部 16px，区块之间 24px。

## Shapes

小元素圆角 8px，按钮和输入框 16px，卡片 22px。

## Components

主按钮用主色，文字用 on-primary。每个界面只放一个主按钮。

## Do's and Don'ts

- 要保证文字对比度达到 WCAG AA（4.5:1）或更高。
- 要复用这些设计变量，不要另造新值。
- 不要使用这里没有定义的颜色。
- 一张卡片里不要混用两种以上的字号。

在你的浏览器里运行，放进来的内容不会上传，也不会保存。

怎么生成 DESIGN.md

填写产品名称，愿意的话，再用一两句话描述想要的感觉。这段描述会成为文件里的 description 和 Overview。
设置七种颜色：primary、on-primary、secondary、tertiary、neutral、surface 和 on-surface。可以点色块选，也可以粘贴 HEX 色值。如果某一组颜色上的文字可能看不清（低于 4.5:1），表单会指出是哪一组。
设置字体：标题字体和正文字体，以及各自的字号。
设置圆角和间距，各分小、中、大三档（sm、md 和 lg）。
复制或下载文件。 文件随输入实时更新，一打开就是一份完整的示例：DESIGN.md 指南里的阅读 App Pagely。

生成的文件遵循 Google Labs 的 DESIGN.md 格式：

YAML front matter 里的 token：七种颜色，headline-lg 和 body-md 两种文字样式，圆角和间距的尺寸层级，以及引用这些 token 的 button-primary 组件。
按格式规定顺序排列的正文章节：Overview、Colors、Typography、Layout、Shapes、Components 和 Do’s and Don’ts，包括每种颜色的用途说明和四条规则。章节标题是格式规定的，保持英文；下面的说明文字是中文。

在 Codex 里使用

把文件保存为项目根目录下的 DESIGN.md，和 AGENTS.md 放在一起。Codex 会自动读取 AGENTS.md，但不会自己去找 DESIGN.md，所以要在 AGENTS.md 里指向它：

## 设计

- 做任何 UI 工作之前，先读 DESIGN.md，只使用其中的 token。
- 如果某个界面需要 DESIGN.md 里没有定义的值，先问我，不要自己编一个。

然后照常让它设计界面：

按 DESIGN.md 设计

按照 DESIGN.md，把 [首页] 设计成一个自包含的 HTML 文件。只使用它定义的颜色、字号、圆角和间距；如果需要用到它没有定义的东西，列出来告诉我。

产品在长，这个文件也可以跟着长。你可以手动或让 Codex 补充更多文字样式、卡片和输入框等组件，或者加一个 Elevation & Depth 章节，再用 npx @google/design.md lint DESIGN.md 检查。完整的格式说明，以及怎么让 Codex 从现有代码里写出 DESIGN.md，见 DESIGN.md 指南。

常见问题

DESIGN.md 是什么？

一个纯文本文件，用来向 AI 编程 Agent 描述你的设计系统：用 YAML token 写下精确的颜色、字体、间距和组件，再用正文说明怎么使用。它是 Google Labs 的开放格式，最早出自 Google Stitch，规范目前仍标为 alpha。

Codex 会自动读取 DESIGN.md 吗？

不会。Codex 自动读取的是 AGENTS.md，不是 DESIGN.md。像上面那样，在 AGENTS.md 里写一句「做 UI 工作之前先读 DESIGN.md」就够了。

能加生成器里没有的内容吗？

能。生成器覆盖的是大多数界面都要用的 token。这个格式还支持更多文字样式、更多组件和 Elevation & Depth 章节，你可以自己加进文件，也可以让 Codex 来加。

免费吗？我填的内容会上传吗？

免费，不用注册。文件在你的浏览器里生成，你填的内容不会上传，也不会保存。