用 designlang 把网站的设计系统提取成 token

靠盯着 devtools 复刻一个站点的外观，你能拿到六个色值和一个对字号梯度的猜测。designlang——这个 4k 星的仓库名为 design-extract——把无头浏览器指向任意 URL，从真实 DOM 读出设计系统；README 说一条命令就产出 17 个以上的文件，其中有 DTCG token、Tailwind 配置、shadcn 主题、Figma 变量、动效 token、带类型的组件解剖、品牌语气、页面意图标签，以及一套可直接粘贴给 v0、Lovable、Cursor 和 Claude Artifacts 的提示词包。

为什么这个 Skill 重要

README 的卖点是别的工具给你颜料，designlang 读的是架构：布局模式（网格、flex 容器、容器宽度、间距）、4 个断点下的响应式行为、通过程序化 hover 和 focus 捕获的 hover/focus/active 状态、由时长和缓动家族组成的动效语言、对每一对前景/背景做 WCAG 对比度评分并附修复配色、多页面一致性，以及失败时以非零退出码结束、可直接进 CI 的 drift、lint 和 visual-diff 命令。它记载的流水线是 Playwright 驱动的 Chromium 等待网络空闲和字体加载，一次 page.evaluate() 遍历最多 5000 个 DOM 元素读取 25 个以上的计算属性，17 个提取模块，以及 12 个以上的格式化模块。

这篇教程覆盖的入口是 agent skill extract-design。它的 SKILL.md 在"extract design"、"get design system"、"design tokens"或"这个站用了什么颜色/字体"这类请求上触发，流程是四步：运行提取，读取生成的 markdown，呈现发现，给出后续步骤。

安装

通过 skills 生态把它装成 agent skill——README 说这条路径适用于 Cursor、Codex 和 40 多个 AI 编码 agent：

npx skills add Manavarya09/design-extract

这个 skill 会调用 designlang CLI；SKILL.md 把 npm install -g designlang 列为前置条件，或者不安装直接用 npx designlang <url>。浏览器是单独的一次性步骤：designlang install-browser 拉取与内置 Playwright 匹配的 Chromium（在裸 Linux 上加 --with-deps），没有它时 designlang 会回退到已安装的 Google Chrome。npm install 本身不再下载浏览器，所以在 CI、Docker 和代理环境下都能工作。Claude Code 用户也可以用 /plugin marketplace add Manavarya09/design-extract 加 /plugin install designlang@designlang 安装插件，它把 CLI 包装成 slash command，包括 /extract、/grade、/battle、/remix 和 /pack。

实战：把一个参考站点变成 Tailwind 主题

在 Cursor、Codex 或其他 skills 生态的 agent 里：

/extract-design https://stripe.com

SKILL.md 的流程运行 npx designlang <url> --screenshots，读取 design-extract-output/*-design-language.md，然后呈现发现——带色值的主色板、字体家族、间距系统及其基准单位（如果检测到）、WCAG 无障碍评分、发现的组件模式，以及阴影和圆角等值得注意的决定。接着它给出后续步骤，其中包括：把 *-tailwind.config.js 复制进你的项目，引入 *-variables.css，把 *-shadcn-theme.css 贴进 shadcn/ui 的 globals.css，导入 *-figma-variables.json 交接给设计师，打开 *-preview.html 做直观预览，或者把 markdown 作为上下文喂给 LLM。多页面读取，SKILL.md 记载了 --depth 3；暗色方案用 --dark。

一处披露：SKILL.md 描述的是 8 个输出文件，而 README 说每次运行向 ./design-extract-output/ 写入 17 个以上，它的头条表格还列出 *-anatomy.tsx 带类型的 React 桩代码、*-motion-tokens.json、*-voice.json、一个 *-prompts/ 目录和 *-mcp.json。两份文档的说法已经漂移；README 对 vercel.com 的示例运行报告"17 files written"。

技巧

• --full 一次打包五种捕获——截图、4 个视口的响应式爬取、交互状态、自动交互（滚动、打开菜单和模态框、hover CTA），以及通过 document.getAnimations() 捕获的运行时动效。暗色模式是单独的 --dark 参数。
• 大多数提取器只读一个 URL；designlang site <url> 爬取站点的主要页面并合成一套去重后的系统，按覆盖率把每个 token 标为全站、分区或单页，并给出 0–100 的一致性评分。README 称它结果完全确定、免费、不需要 API key。
• designlang fidelity <original> --clone <url> 在视觉像素差和动效两方面给克隆站对比真实站点打分，返回 0–100 分加字母等级和一份按优先级排序的修正计划，--min 90 把它变成 CI 门禁。
• 更想用 MCP 工具？claude mcp add designlang -- npx -y designlang mcp 把 extract_design(url) 暴露为一个作业，再加上 get_tokens、get_colors、get_typography、get_components、get_findings、compute_drift 和 export。
• designlang doctor 是一屏健康检查，覆盖 Node、Playwright、Chromium 二进制、输出目录和网络；任何一项失败就以 1 退出。--system-chrome 跳过内置浏览器下载。

何时不用这个 Skill

SKILL.md 自己划了线：不要用它从零搭建新 UI，除非你先想提取某个现有网站的设计语言。如果你的设计系统已经躺在一份你自己拥有的 token 文件里，就没有什么要从 DOM 里读的——改用 designlang drift <url> --tokens <file> 指向它，核对线上站点与这份文件是否一致。而对于单个色值，devtools 仍然比无头浏览器快。

查看 排行榜 了解更多 skill。