Design Extract (MCP server) — 使用场景, 安装 & 实时演示

为什么要用

核心特性

三层 DTCG token 输出（primitive → semantic → composite）
多平台导出：SwiftUI、Compose、Flutter、Tailwind v4、Figma
WCAG 修复通道——标记不合规的颜色对并提出修复建议
CSS 健康审计（选择器特异性、废弃规则、冗余 token）
配套 Chrome 扩展，一键捕获
基于 Playwright，需 Node 20+，MIT 协议

实时演示

实际使用效果

design-extract-mcp.replay ▶ 就绪

0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "design-extract-mcp",
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  ]
}

Continue 使用服务器对象数组，而非映射。

~/.config/zed/settings.json

{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add design-extract-mcp -- npx -y design-extract-mcp

一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。

使用场景

实战用法： Design Extract

如何将某个品牌的视觉体系克隆为 DTCG token

👤 设计工程师、代理商团队、品牌对齐产品团队 ⏱ ~25 min intermediate

何时使用： 你在基于参考网站重建营销站或 App，需要在 10 分钟内获取其 token，而不是费时费力地在 Figma 里截图取色。

前置条件

参考网站的公开 URL — 例如 https://stripe.com——必须可公开访问

步骤

提取

Use design-extract on https://stripe.com. Output DTCG tokens, SwiftUI, and Tailwind v4. Save to /tokens/.✓ 已复制

→ tokens.json + tokens.swift + tailwind.css 已写入；并附覆盖率报告
审计

Run the CSS health pass and the WCAG remediation. Flag everything below AA.✓ 已复制

→ 审计报告，列出不合规的颜色对及改进建议
应用

Now generate a starter Next.js page using these tokens — nav, hero, 3 feature cards.✓ 已复制

→ 页面以品牌视觉风格渲染

结果： 一套 token 集 + 审计报告 + 起始页面，全部从一个 URL 衍生而来。

注意事项

网站使用了大量 SSR 渲染或需要登录 — 通过扩展提供已登录的 cookie，或自定义 Playwright 前置步骤

搭配使用： filesystem

审计你自己的网站是否存在设计系统偏差

👤 内部设计系统维护者 ⏱ ~30 min intermediate

何时使用： 你怀疑有 47 种未授权的颜色悄悄进入了生产环境，需要确认。

步骤

清点

Run design-extract against https://yoursite.com. Don't emit code — just report unique colors, font stacks, spacing values used.✓ 已复制

→ 各类别的独立值数量统计
与源对比

Compare against /design/tokens.json. Flag every value used in production that's not in the source-of-truth.✓ 已复制

→ 偏差表，附文件或组件引用
制定清理计划

Group drift by likely cause (legacy CSS, ad-hoc style, wrong token). Suggest a 3-PR cleanup plan.✓ 已复制

→ PR 计划已拟定

结果： 一份可直接交给工程团队的具体偏差报告，而不是「我们有不一致问题」这种模糊说法。

注意事项

工具误报：因 CSS 变量在运行时才解析而过度报告 — 传入 --resolve-vars 参数，让它在计数前追踪 var(--x) 链

搭配使用： filesystem

从线上网站生成 Figma 变量

👤 需要让设计稿追上代码的设计师 ⏱ ~15 min beginner

何时使用： 代码先上线了；设计稿需要在 Figma 里补上。

步骤

导出 Figma JSON

Use design-extract on https://yoursite.com with output=figma-variables. Save to /design/figma-vars.json.✓ 已复制

→ 可导入的 Figma 变量 JSON 文件
导入

Walk me through importing this with the Figma Variables Import plugin.✓ 已复制

→ 逐步的插件操作说明

结果： Figma 文件与已上线代码保持同步，无需手动用取色器一个个对。

注意事项

token 名称与已有 Figma 变量冲突 — 使用 --prefix 参数添加命名空间，例如 site/color.bg.primary

组合

与其他 MCP 搭配，撬动十倍杠杆

design-extract-mcp + filesystem

将 token 输出持久化到仓库，供后续运行做差异对比

Run extract every Friday and save under /design/snapshots/$(date +%F)/.✓ 已复制

design-extract-mcp + Figma-Context-MCP

双向同步——从线上提取，再推回 Figma

After extract, push the token file to Figma via Figma-Context-MCP.✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用	成本
extract	url, output_format[]: dtcg\|swiftui\|compose\|flutter\|tailwind\|figma\|wordpress\|shadcn	主入口	1 次 Playwright 爬取
audit_css_health	url	目标是健康检查而非克隆时，作为 extract 的替代或补充	1 次爬取
wcag_remediate	tokens	提取后、发布 token 前	免费（后处理）
diff_tokens	url, source_tokens_path	对自有网站进行偏差审计	1 次爬取

成本与限制

运行它的成本

API 配额: 本地运行——取决于你的机器
每次调用 Token 数: 每次提取摘要 1500–6000 token
费用: 免费（MIT）
提示: 不要每次 PR 都重新提取——缓存结果，仅在变更时运行

安全

权限、密钥、影响范围

凭据存储： 无，除非目标需要认证（此时通过 cookie 文件传入）

数据出站： 仅向你指定的 URL 发送请求。Playwright 在本地运行。

请遵守 robots.txt 和目标网站的服务条款——虽然行为类似浏览器，但大规模使用本质上仍属爬取。

故障排查

常见错误与修复

Playwright Chromium 无法启动

执行一次 npx playwright install chromium

验证： `npx playwright --version` 能输出版本号

网站拦截无头浏览器

传入 --headed 参数，或提供住宅代理 / cookie 文件

输出 token 不完整

网站使用了大量 CSS-in-JS——尝试 --wait-for-selector main 以确保 SPA 渲染完成

替代方案

Design Extract 对比其他方案

替代方案	何时用它替代	权衡
Figma-Context-MCP (GLips)	真相来源是 Figma 而非线上网站	Figma MCP 需要 Figma 文件；design-extract 可从任意 URL 工作
Tokens Studio 插件	你已在 Figma 内部，需要 token 管理界面	需手动操作；design-extract 自动化了初始提取过程

Design Extract

为什么要用

核心特性

实时演示

实际使用效果

安装

选择你的客户端

使用场景

实战用法： Design Extract

如何将某个品牌的视觉体系克隆为 DTCG token

前置条件

步骤

注意事项

审计你自己的网站是否存在设计系统偏差

步骤

注意事项

从线上网站生成 Figma 变量

步骤

注意事项

组合

与其他 MCP 搭配，撬动十倍杠杆

工具

此 MCP 暴露的能力

成本与限制

运行它的成本

安全

权限、密钥、影响范围

故障排查

常见错误与修复

替代方案

Design Extract 对比其他方案

更多

资源