DESIGN.md 生成器
从实时网站生成 DESIGN.md。输入网址，生成器就会构建你的编程智能体要读取的文件：颜色、字体排版、间距和组件令牌，以及使用它们的规则。刚接触这个格式？请阅读什么是 DESIGN.md。
生成器如何构建 DESIGN.md
输入网站网址
任何公开页面都可以：营销网站、文档网站，或 Web 应用的落地页。请先注册；每次提取都会消耗预付积分包中的积分。
生成器读取网站
它会在真实浏览器中打开网站，测量网站实际使用的颜色、字体、间距、圆角和组件。一次 Pro 提取会抽样网站的大约五个页面。每次提取至少需要一分钟。
得到一份 DESIGN.md
令牌写入 YAML front matter，使用规则写入 Markdown：Overview、Colors、Typography、Layout、Elevation and Depth、Shapes、Components 和 Do's and Don'ts。你可以在“我的提取”中复制、下载或编辑它。
输出示例：Anthropic 的 DESIGN.md
这是生成器从 anthropic.com 生成的文件节选，每组只保留几个令牌，以及 Overview 的开头部分。完整文件还涵盖布局、层次、形状、组件以及 do’s and don’ts。
---
version: alpha
name: Anthropic
colors:
primary: "#141413"
on-primary: "#FAF9F5"
ink: "#141413"
body-muted: "#5E5D59"
surface: "#FAF9F5"
surface-alt: "#F0EEE6"
hairline: "#D1CFC5"
typography:
hero-display:
fontFamily: Anthropic Serif
fontSize: 68.3429px
fontWeight: 400
lineHeight: 1.1
body:
fontFamily: Anthropic Serif
fontSize: 15px
fontWeight: 400
lineHeight: 1.4
rounded:
sm: 8px
md: 12px
lg: 16px
spacing:
base: 4px
section-padding-y: 48px
---
## Overview
Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.常见问题
DESIGN.md 生成器常见问题
生成器会生成什么、费用多少，以及如何在编程智能体中使用这个文件。
一个遵循 Google DESIGN.md 规范的 DESIGN.md 文件。YAML front matter 包含网站的颜色、字体排版、间距、圆角和组件令牌。Markdown 正文逐个章节说明如何使用它们，让编程智能体能构建出与网站风格一致的新界面。
生成器做不到：它是根据实时的公开网站来构建文件的。如果你是从零开始设计，请按照规范手动编写 DESIGN.md，并用免费的 DESIGN.md 校验器检查它的结构和令牌。
任何可以通过 HTTP 或 HTTPS 访问的公开网站，包括静态网站、单页应用和服务端渲染的页面。不支持需要登录的页面、localhost 上的页面或私有网络中的页面，另外有些网站会拦截自动化浏览器。
注册后购买预付积分包，最低 US$5 购买 50 积分。无需订阅，积分永不过期。每次提取都会消耗积分，价格页面会显示当前每次提取的费用。如果因为我们这边的原因提取失败，积分会被退还。
把它以 DESIGN.md 为名保存在项目根目录或 docs 文件夹中，并在提示词中提到它。Claude Code、Cursor、GitHub Copilot、Windsurf 以及其他可以访问文件的智能体，都会把它当作样式参考。智能体也可以通过 Design Extractor MCP 服务器自己运行生成器。
可以。你生成的每份 DESIGN.md 都会保存在“我的提取”中，你可以在那里编辑、重新下载，或者之后重新提取这个网站。它是纯文本，所以你也可以用自己的编辑器修改。