从任意网站
获取 DESIGN.md

DESIGN.md 是一份纯文本的设计系统文档，AI 编程智能体读取它来生成风格一致的界面。它是 AGENTS.md 在设计方面的对应物：人和智能体都能阅读、编辑并遵循它。它内部分为两层：YAML front matter 存放机器可读的设计令牌，比如颜色、字体排版和间距；Markdown 正文则解释设计理由。

DESIGN.md 通常按顺序包含八个标准章节：Overview、Colors、Typography、Layout、Elevation and Depth、Shapes、Components 和 Do's and Don'ts。YAML front matter 记录精确的令牌值，Markdown 正文说明如何以及为什么使用它们。不相关的章节可以省略，也可以添加特定领域的额外章节。

把任意公开网站的网址粘贴到 Design Extractor，然后点击提取。注册并购买积分包后，每次提取会消耗少量积分。结果是一份可以直接复制的 DESIGN.md。把它放进你的仓库，你的 AI 智能体就会把它当作样式参考，适用于 Claude、Cursor、Copilot 或 Stitch。

任何能读取项目目录中 Markdown 文件的 AI 编程工具都可以使用 DESIGN.md，包括 Claude Code、Cursor、GitHub Copilot，以及其他可以访问文件的编程助手。把 DESIGN.md 放在项目根目录或 docs 文件夹中，并在提示词里引用它即可。

任何可以公开访问的网站。Design Extractor 会分析在浏览器中实时渲染的页面，支持静态网站、SPA 和服务端渲染的页面。网站必须能通过标准的 HTTP/HTTPS 网址访问。

有些网站，比如政府门户和本地商店，只对来自特定国家的访问者开放。如果提取因为网站拒绝访问而失败，结果页会说明原因，并建议可以打开该网站的国家。选择其中一个，页面就会由位于该国家的浏览器加载，然后照常提取。从其他国家发起的提取按档位价格另加一小笔附加费，开始前会显示；如果仍然失败，费用会退还。Chrome 扩展程序和 MCP 服务器也提供同样的选项。

有。Design Extractor 的 Chrome 扩展程序沿用你在网站上登录的会话，无需单独登录。弹出窗口会显示你的积分余额，点一下就能把当前标签页中的页面送去提取，流程与首页表单完全相同，可选 Lite 或 Pro，消耗的积分也一样。完成的 DESIGN.md 会在网站上打开，并出现在“我的提取”中。在这个首个版本中，页面必须是公开的：页面由服务器抓取，因此暂不支持需要登录的页面、localhost 上的页面或私有网络中的页面。编辑和下载仍需在网站上完成。

可以。Design Extractor 同时也是一个 MCP 服务器。在 claude.ai、Claude Desktop 或 ChatGPT 中，把服务器 URL 添加为连接器，并用你的账户登录；在 Claude Code、Codex、Cursor 或 Agent SDK 中，用一条命令即可连接（文档页面提供了每个客户端的配置代码块，客户端需要时可在账户页面获取 API 密钥），然后让它提取一个网站。智能体会启动提取，大约一分钟后回来查看，并拿到 DESIGN.md 文本保存到你的仓库，消耗的积分与在网站上相同。Claude Code 和 Codex 还可以把它安装为插件，插件会添加一个技能，用于把 DESIGN.md 应用到代码库。