design-extract 可以免费使用吗？用的什么许可证？

design-extract 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

design-extract 还在维护吗？

活跃维护中。design-extract 最近一次提交是在 2026年10月8日。

design-extract 适合用来做什么？

以参考网站为基础，快速搭建设计系统初稿。从现有网站生成 Tailwind 或 shadcn/ui 主题。把提取的令牌交给 AI 编码助手，使生成的界面贴合目标视觉风格。在 CI 中将线上站点与令牌文件对比，及时发现设计漂移。

design-extract 怎么安装和运行？

全局安装 CLI: npm i -g designlang 安装一次性的 Chromium 浏览器: designlang install-browser 提取网站的设计系统: npx designlang https://stripe.com

在哪里获取 design-extract？

源代码和安装说明在 GitHub 上：https://github.com/Manavarya09/design-extract

Manavarya09/design-extract

命令行工具，用无头浏览器读取任意网站的设计系统，输出 DTCG 令牌、Tailwind 配置、Figma 变量等文件。

可替代:Figma

在 GitHub 查看官网

Star: 4,261
Fork: 371
未关闭 Issue: 25
最近提交: 12天前

这是什么？

designlang 通过 Playwright 启动无头 Chromium 打开指定网址，从实时 DOM 中读取计算样式与布局信息。一条命令即可生成多类文件，包括颜色、字体、间距、阴影、圆角、CSS 变量、动效令牌和组件结构，并输出 W3C DTCG 令牌、Tailwind 主题、shadcn/ui 主题以及支持亮色和暗色模式的 Figma 变量。

除了提取令牌，它还能在四个响应式断点下抓取页面，记录 hover、focus、active 状态的变化，为前景与背景色对计算 WCAG 对比度，并比较多个页面之间的一致性。它还提供用于 CI 的漂移检查和 lint 工具、视觉差异对比，以及将整站页面合并为一套规范系统的模式。

项目可作为 MCP 服务器接入 Claude Code、Cursor、Windsurf 等工具，并附带 Claude Code 插件和 Chrome 扩展。输出目标还包括 iOS SwiftUI、Android Compose、Flutter 和 WordPress。基于 Node.js 20+ 运行，可通过 npm 安装。

核心功能

01从实时页面提取颜色、字体、间距、阴影、圆角和 CSS 变量。
02输出 W3C DTCG 令牌、Tailwind 配置、shadcn/ui 主题和 Figma 变量。
03在四个断点下捕获响应式表现，并记录 hover、focus、active 状态。
04为前景与背景颜色组合计算 WCAG 对比度。
05可作为 MCP 服务器接入 Claude Code、Cursor 和 Windsurf。
06为 iOS、Android、Flutter 和 WordPress 生成对应平台的令牌。

适用场景

以参考网站为基础，快速搭建设计系统初稿。
从现有网站生成 Tailwind 或 shadcn/ui 主题。
把提取的令牌交给 AI 编码助手，使生成的界面贴合目标视觉风格。
在 CI 中将线上站点与令牌文件对比，及时发现设计漂移。

快速上手

1
全局安装 CLI
npm i -g designlang
2
安装一次性的 Chromium 浏览器
designlang install-browser
3
提取网站的设计系统
npx designlang https://stripe.com

使用前须知

首次使用前需要下载无头 Chromium 浏览器。
部分高级功能（site、fidelity、dna）版本迭代较快，可能有变化。

常见问题

design-extract 是什么？: 命令行工具，用无头浏览器读取任意网站的设计系统，输出 DTCG 令牌、Tailwind 配置、Figma 变量等文件。 designlang 通过 Playwright 启动无头 Chromium 打开指定网址，从实时 DOM 中读取计算样式与布局信息。一条命令即可生成多类文件，包括颜色、字体、间距、阴影、圆角、CSS 变量、动效令牌和组件结构，并输出 W3C DTCG 令牌、Tailwind 主题、shadcn/ui 主题以及支持亮色和暗色模式的 Figma 变量。
design-extract 可以免费使用吗？用的什么许可证？: design-extract 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
design-extract 还在维护吗？: 活跃维护中。design-extract 最近一次提交是在 2026年10月8日。
design-extract 适合用来做什么？: 以参考网站为基础，快速搭建设计系统初稿。从现有网站生成 Tailwind 或 shadcn/ui 主题。把提取的令牌交给 AI 编码助手，使生成的界面贴合目标视觉风格。在 CI 中将线上站点与令牌文件对比，及时发现设计漂移。
design-extract 怎么安装和运行？: 全局安装 CLI: npm i -g designlang 安装一次性的 Chromium 浏览器: designlang install-browser 提取网站的设计系统: npx designlang https://stripe.com
在哪里获取 design-extract？: 源代码和安装说明在 GitHub 上：https://github.com/Manavarya09/design-extract

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。