指南

用 MCP 按需为你的编程智能体提供设计规范

你的智能体可以像获取文档一样获取设计规范。连接 Design Extractor 的 MCP 服务器后，智能体可以提取任意公开网站的 DESIGN.md，等待提取完成，读取文件并据此构建，全部在一个任务中完成。

无需来回复制文件，也无需打开浏览器标签页：你在提示词中说出网站名，规范就会进入智能体的上下文。

面向构建智能体和智能体工作流的开发者。更新于 。

你将获得

  • MCP 服务器已连接到 Claude Code、Codex、Cursor 或 claude.ai，并用你的账户或 API 密钥登录。
  • 智能体遵循的工具流程：检查、提取、等待、读取。
  • 让智能体完成从提取到界面的完整流程的提示词。
  • 费用说明，以及需要提前考虑的限制。

智能体能得到什么

服务器地址为 https://www.design-extractor.com/api/mcp，使用 streamable HTTP。通过它，智能体可以对公开网站发起提取、等待提取完成、读取完成的 DESIGN.md、查看价格和你的余额，以及列出你之前提取过的内容。每次提取也会像其他提取一样出现在网站上的“我的提取”中。

这个文件和网站生成的文件完全相同：顶部是颜色、字体排版、间距、圆角和组件的令牌，下方是使用它们的规则。它遵循 Google 的 DESIGN.md 规范，所以智能体可以像读取其他规范一样读取它。

连接服务器

选择你的客户端。Claude Code、Codex、claude.ai、Claude Desktop 和 ChatGPT 使用你的账户登录；Cursor 和脚本使用 API 密钥。

  1. 添加一次服务器即可。无需密钥。

    claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

  2. 运行 /mcp，选择 design-extractor，然后选择 Authenticate。在打开的页面中登录并批准。

  3. 让它提取一个网站：“extract the design of stripe.com”（提取 stripe.com 的设计）。

Claude Code、Codex、claude.ai、Claude Desktop 和 ChatGPT 使用你的账户登录。Cursor、n8n 和脚本使用账户页面中的个人 API 密钥。

对于 Claude Code 和 Codex，还有一个插件。它把服务器和 apply-designmd 技能打包在一起，引导智能体提取一个参考网站，并把它的 DESIGN.md 应用到你的代码库。安装后，在 Claude Code 中运行 /mcp，并对插件的服务器进行认证。

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor
codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

所有客户端的配置、Agent SDK 代码片段和密钥设置，都在 MCP 服务器文档页面上。

工具及调用顺序

工具作用
list_my_extractions你的提取记录，按时间从新到旧排列。先调用它，避免为已有的网站重复付费。
get_pricing一次提取当前的积分费用。
get_credits你的剩余积分余额。
extract_design对一个公开网址发起提取并扣除积分。传入 tier PRO 可抽样网站的关键页面。提取进入队列后立即返回。
get_extraction接收网站名称或网址。提取进行中时返回状态，完成后返回完整的 DESIGN.md 文本。失败的提取会说明原因。

一次提取至少需要一分钟，所以流程是先发起，再轮询。服务器会自己告诉智能体这一点；你只需要说出网站名。

1. list_my_extractions    is the site already there?
2. extract_design         url and tier PRO
3. wait about 60 seconds
4. get_extraction         site name, every 25 seconds until COMPLETED
5. save the DESIGN.md text and build from it

实例演示：Supabase

假设智能体被要求按照 supabase.com 的风格进行构建。当 get_extraction 报告提取完成时，它会以文本形式返回整个 DESIGN.md。示例库中的 Supabase DESIGN.md 来自同样的 Pro 提取，因此可以展示进入智能体上下文的内容。它是这样开头的：

示例库中 Supabase 的 DESIGN.md 开头部分，每组只保留几个令牌。
---
name: Supabase
colors:
  primary: "#0E7E4E"
  primary-fill: "#007243"
  primary-deep: "#15593B"
  focus-ring: "#30BA79"
  brand: "#3FCF8E"
  brand-tint: "#A9F1CA"
typography:
  hero-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: normal
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 2.66667px
  sm: 4px
  md: 5.33333px
---

提取自 Supabase 的公开网站，并非官方品牌规范。阅读完整的 Supabase DESIGN.md

令牌下方是智能体读取规则和配方的章节：Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps。仅 Components 章节就包含 49 个配方，以 HTML 和 CSS 编写，所以智能体可以根据测得的数值重建按钮或卡片，而不必去猜。

提示词

写明工具、网站以及文件的用途。这些提示词是为本指南编写的；把网站和任务换成你自己的即可。

在一个任务中提取并构建

Use the design-extractor tools to get a Pro DESIGN.md of supabase.com.
Check list_my_extractions first, so we don't pay twice for a recent run.
When it is complete, save it as DESIGN.md in the repo root.
Then restyle src/app/settings with its color, typography and rounded tokens
and its component recipes. Keep the layout and logic as they are.

选择之前先比较

Get Pro DESIGN.md files for supabase.com and linear.app with the design-extractor tools.
Compare their primary colors, fonts and radii in a short table,
and tell me which one fits a dense admin dashboard better and why.

在构建你自己的智能体？在 Agent SDK 的 mcpServers 选项中传入服务器和 API 密钥，并允许 mcp__design-extractor__*；完整代码片段见 MCP 文档。

积分与限制

  • 与网站相同的积分。一次 Pro 提取需要 10 积分，无论是你在网站上发起，还是你的智能体发起。请在价格页面充值。
  • 你自己最近的提取不会重复收费。请求你最近提取过的网站时，会复用那次提取。
  • 仅限公开页面。不支持需要登录的页面、localhost 上的页面或私有网络中的页面。
  • 密钥。最多五个有效的 API 密钥，每个有效期一年，可以在账户页面撤销。已登录的客户端会自动续期令牌；你可以在同一页面断开它。

常见问题

通过 MCP 为编程智能体提供设计规范：常见问题

尝试之前大家最常问的问题，这里都有简短回答。

一样。它使用同一个账户和同一份预付积分：一次 Pro 提取需要 10 积分。智能体可以调用 get_pricing 查看当前费用，调用 get_credits 查看你的余额；余额不足时，extract_design 会拒绝并说明原因。

支持登录的客户端不需要：claude.ai、Claude Desktop、ChatGPT、Claude Code 和 Codex 只需打开一次授权页面，之后会保存一个自动续期的令牌。Cursor、n8n、脚本和 Agent SDK 使用账户页面中的个人 API 密钥。

至少一分钟。extract_design 会立即返回；智能体等待大约一分钟后，每隔 25 秒用网站名调用一次 get_extraction，直到 DESIGN.md 准备就绪。

如果是你最近提取过的网站，不会：再次请求会复用你已有的提取，回复中会说明未扣除积分。只有其他人提取过的网站，仍按正常价格收费。list_my_extractions 会显示你已有的提取。

不能。服务器根据网址抓取页面，因此不支持需要登录的页面、localhost 上的页面或私有网络中的页面。请部署一个公开的预览版，或者提取线上网站。

想在连接之前先看看 DESIGN.md？

在网站上运行一次提取。你的智能体通过服务器拿到的是同样的文件。

从任意网站获取 DESIGN.md

相关指南

查看全部 DESIGN.md 指南