Frontier Now
搜索

开发工具#代码生成#UI 设计

designlang：一条命令把网站的设计系统提取成 Tokens 与 Tailwind 配置

designlang：设计师与前端的开源命令行工具，用无头浏览器读取网站样式，导出 DTCG Tokens、Tailwind 与 Figma 变量，MIT。

作者
Frontier Now 编辑部
发布

项目资料

GitHub Ecosystem
仓库地址github.com/Manavarya09/design-extract
许可证
MIT
主语言
HTML
星标
4,980
核查时间
2026-11-09

以上快照资料以核查当日为准，可能随版本或运营策略变化。

做一个接近某个参考网站气质的页面，最费时间的往往不是写组件，而是把它的颜色、字号、间距和圆角一个个抄下来。designlang 是 Manav Arya Singh（GitHub 账号 Manavarya09）以 MIT 许可开源的命令行工具，仓库名 design-extract，截至 2026-11-09 有 4,980 颗星，npm 版本 13.4.0。它让无头 Chromium 打开目标网址，从渲染后的页面读取设计系统，再一次写出 DTCG Tokens、Tailwind 配置、shadcn 主题与 Figma 变量。

终端运行 npx designlang https://vercel.com 后的输出：列出设计语言 Markdown、W3C Tokens、Tailwind 配置、Figma 变量与 shadcn 主题等文件，并附颜色、字体与 WCAG 摘要

图为 3.0.0 版本的输出，共写出 8 个文件。当前 README 写的是每次运行 17 个以上文件，比图中多。

核心功能

  • 读渲染结果，不猜源码：颜色、字体、间距、阴影、圆角与动效参数都从页面真实呈现的样式里取样，看到的是访客看到的东西，而不是设计稿里的意图。代价也很明确：拿到的是某一时刻的快照，不是设计源文件。
  • 一条命令，多种格式：README 写明每次运行生成 17 个以上文件，包括 W3C DTCG Tokens、Tailwind 配置、shadcn 主题、区分亮色与暗色的 Figma 变量、CSS 变量和动效 Tokens。
  • 不止颜色：布局模式、四个断点下的响应式变化、悬停与聚焦状态，以及 WCAG 对比度评分都在输出范围内。
  • 能进 CI：designlang verify-ui 在 390、768、1280 像素宽度下，用品牌规范文件检查本地界面，漂移时以退出码 1 结束，可以直接当流水线的一道关卡；drift 与 lint 沿用同样的做法。
  • 接入 AI 编辑器：designlang mcp 把设计系统以 MCP 资源和工具的形式提供给 Claude Code、Cursor 与 Windsurf。仓库还带有 Claude Code 插件，提供 /extract、/fidelity 等斜杠命令，以及面向 v0、Lovable、Cursor 与 Claude Artifacts 的提示词包。
  • 复刻保真度打分：designlang fidelity <原站> --clone <本地地址> 同时比较视觉与动效，给出分数，并列出按影响排序的修正清单。做复刻的人可以用它判断还差哪里。

典型使用场景

  • 照着参考站做一版落地页：先 npx designlang <网址> 拿到 Tokens，再让 AI 编辑器按这些变量写组件，少在截图上量尺寸。
  • 给多页站点整理一套规范：designlang site 对站内主要页面取样，合并成一套规范系统，并给出一致性评分。
  • 检查线上与本地是否走偏：drift 把已部署的站点当作真值，对比本地 tokens 文件。README 把这种做法称为线上站点同步（live-site sync），即“把线上站点当作 source of truth”。
  • 给页面做一次“模板感”体检：designlang slop 给出 0 到 100 的分数，并列出它识别出的常见 AI 设计特征。分数是工具的判断，不宜当作统一标准。

快速上手

npm i -g designlang
designlang install-browser   # 首次安装 Chromium，约 150 MB
npx designlang https://stripe.com

结果默认写入 ./design-extract-output/。工具需要 Node.js 20 或更高版本，不需要注册，也不需要 API Key。如果机器上已经装了 Google Chrome，加上 --system-chrome 就能跳过 Chromium 的下载。需要登录才能看到的页面，可以用 --cookie、--cookie-file 或 --header 传入凭据。

与既有方案的关系

这类工具并不少。英文搜索结果里能看到 dembrandt（★3,983，MIT）和 extract-design-system（★279，MIT），它们同样从网址读取样式。designlang 的区别主要在输出面：一次运行同时给出 Tailwind、shadcn 主题、Figma 变量和提示词包，再加上 MCP 接入与保真度评分。只需要一个 JSON 文件或一组 CSS 变量，更轻的工具就够用；如果希望结果直接进入 AI 编辑器的工作流，designlang 覆盖得更完整。

如果你的项目本身就是 shadcn-admin 这类基于 shadcn/ui 的后台，生成的 shadcn 主题文件可以直接作为起点。

小结

designlang 适合需要把现成网站的视觉语言搬进自己项目的前端工程师与设计师，也适合想让 AI 编辑器按真实设计变量写界面的团队。要点与边界：MIT 许可，npm 版本 13.4.0，要求 Node.js 20 以上；仓库 2026-04-15 建库，最近一次推送在 2026-11-05，迭代时间约七个月。局限同样清楚：抽出的是某一时刻的渲染结果，不是设计源文件；首次使用要下载约 150 MB 的 Chromium；README 列出了两家赞助商（Atlas Cloud 与 Bloome），可选的 --smart 分类器需要外部模型的 API 密钥，不用也不影响基本提取。抽取别人网站的设计系统用于复刻，授权与品牌问题要自己把关，工具不替你判断。GitHub 把仓库语言统计为 HTML，核心命令行本体是 JavaScript。