design-extract Skill：一键把任意网站设计系统「扒」出来的 AI 工具

总结

design-extract（npm 包名 designlang）是一个用一条命令把任意网站设计系统完整「扒」出来的 Node.js CLI 工具。它用无头浏览器读取真实 DOM，一次输出 17+ 个文件——DTCG 设计令牌、Tailwind 配置、shadcn 主题、Figma 变量、iOS/Android/Flutter 平台代码等，并自带 WCAG 无障碍评分、响应式断点分析、设计一致性报告和像素级克隆保真度测量。GitHub 累计 3,990 星（截至 2026-08-31），近 4 个月增长近 4 倍，是 AI 编程工作流中 design-to-code 赛道的热门新工具。

功能与原则

design-extract 的核心能力是实时 DOM 分析：用 Playwright 驱动无头 Chromium 打开目标页面，直接从渲染后的 DOM 中提取颜色、字体、间距、阴影、圆角、动效等所有设计属性，再按 DTCG（Design Token Community Group）规范结构化输出。

设计原则有三条：
– 测量代替假设：所有输出均可量化（颜色覆盖百分比、WCAG 对比度分数、像素差百分比），不靠肉眼看图说话。
– 平台无关发射：同一套设计系统源码，可同时吐出 iOS SwiftUI、Android Compose、Flutter、WordPress、Tailwind v4、Figma Variables 多端代码。
– CI 友好：自带保真度分数（fidelity）和 CI gate 能力，clone 产物自动写入 fidelity.md + 修正计划，可直接进代码审查流程。

认可度

• GitHub Stars：3,990（截至 2026-08-31），4 个月前约 1,200 星，增长约 3.3 倍
• Forks：341，Issues：22（活跃维护）
• npm 包 designlang 有独立版本发布（v13.x），持续迭代
• 被收录于 mcpxhub.io、skillful.sh 等多个 Agent Skill 目录
• 2026-08-27 出现在 GitHub Trending 列表，被多家 AI 资讯周报收录

链接

GitHub：https://github.com/Manavarya09/design-extract

原作者

Manavarya09（GitHub Handle），个人开发者，专注 design-to-code 工具链。2026-04-15 创建该项目，MIT 许可证，无商业依赖。

介绍

传统 design token 提取工具只能读取页面截图或 CSS 字符串，输出的数据缺乏结构、无法直接进工程流水线。design-extract 从根本上改变了这一点——它用 Playwright 实时打开页面，在真实渲染环境下抓取每个元素的计算样式，生成 DTCG 规范的设计令牌（Design Tokens），再通过多平台发射器（emitter）同时吐出各端代码。

除了基础的颜色和字体，它还能处理更复杂的设计属性：多断点（4 个）响应式布局、hover/focus/active 等交互状态、Tailwind v4 的完整配置、shadcn/ui 主题变量、motion tokens（动画时长、缓动曲线、关键帧类型）、甚至品牌语调（brand voice）和页面意图标签。这些数据被打包进一个目录，上游接到 Claude Code/Cursor/Windsurf 等 AI 编程 Agent 中，Agent 就能「理解」目标网站的设计语言并据此生成代码。

更进阶的能力是设计保真度测量（fidelity）。所有 design-to-code 工具都声称「像素级复刻」，但从未有人测量它。design-extract 的 fidelity 命令同时对原站和克隆站截图，做像素级 diff，并对比两边的 CSS 动画（时长、缓动、弹簧、关键帧类型），输出一个 0–100 的综合分数和具体修正计划。这让 design review 从主观变成客观数据。

特点

• 一条命令，17+ 文件输出：DTCG tokens JSON、Tailwind v4 配置、shadcn 主题、Figma Variables、motion tokens、组件类型定义、品牌语调文档、prompt pack（v0/Lovable/Cursor/Claude Artifacts）
• 多平台代码发射：iOS SwiftUI、Android Compose、Flutter、WordPress 同时支持，无需手工适配
• 无头浏览器实时提取：非截图/非 CSS 字符串，直接从渲染后的 DOM 读取计算样式，响应式、交互状态、WCAG 对比度全覆盖
• 设计保真度测量：像素 diff + 动效 diff，输出可量化的 fidelity 分数和修正路线图，支持 CI gate（--min 90）
• 全站一致性分析：designlang site 爬取多个典型页面（首页、定价、文档、博客），聚合出一套统一的 canonical design system，标注每个 token 的页面覆盖范围（🟢全站 / 🟡局部 / 🔴页面独有）
• Chrome 扩展 + Claude Code 插件：支持浏览器直接提取 + Claude Code 内部 /extract 等 11 个 slash 命令
• 免费无需 API Key：所有能力在本地跑通，不依赖任何云端付费服务

使用方法

安装（任选一种）：

# 全局安装 CLI
npm i -g designlang

# 作为 Agent Skill 安装（支持 40+ 编程 Agent）
npx skills add Manavarya09/design-extract

# Claude Code 插件模式
/plugin marketplace add Manavarya09/design-extract
/plugin install designlang@designlang

基本调用：

# 提取单个页面的完整设计系统
npx designlang https://stripe.com

# 全站提取（爬取首页/定价/文档等，聚合 canonical system）
npx designlang site stripe.com --max-pages 8

# 测量克隆保真度（pixel diff + motion diff）
npx designlang fidelity https://stripe.com --clone http://localhost:3000

# 设计系统评分 + 在设计空间中的位置
npx designlang dna stripe.com

# 生成可编辑的 Next.js 克隆项目
npx designlang clone https://stripe.com

Claude Code 插件命令（安装后可用）：

使用场景与人群

适用场景：
– 竞品设计分析：快速提取竞品官网的设计系统，做对标研究
– design-to-code 开发：提取参考站点的设计语言，让 AI Agent 按此生成代码而非凭空创作
– 设计一致性审计：对已有产品做全站设计系统一致性评分，发现散乱的局部样式
– 克隆保真度验证：AI 生成的前端代码与原站的设计还原度，需要客观数据而非主观判断
– 多品牌主题管理：用 theme-swap 或 pair 命令在多个品牌设计系统之间切换

目标用户：
– 前端工程师 / UI 开发者（特别是用 AI 编程工具的）
– 设计系统团队（需要从线上产品逆向提取 design tokens）
– AI Coding Agent 用户（Claude Code、Cursor、Windsurf 等）
– 品牌设计师 / 产品经理（需要快速理解竞品设计语言）

输入与输出案例

案例 1：提取 Stripe 官网设计系统

输入：

npx designlang https://stripe.com

输出（17+ 文件）：
– stripe-dtcg-tokens.json — DTCG 格式设计令牌（含 primitive + semantic 层）
– stripe-tailwind-v4.config.js — 可直接用的 Tailwind v4 配置
– stripe-shadcn-theme.ts — shadcn/ui ThemeToken 配置
– stripe-figma-variables.json — Figma Variables 可直接导入
– stripe-motion.json — 动效参数（时长/缓动/关键帧）
– stripe-brand-voice.md — 品牌语调文档
– stripe-coverage.md — 每个 token 的页面覆盖标注
– stripe-grade-report.html — 可分享的设计评分报告（含 WCAG 对比度分数）

案例 2：测量克隆保真度

输入：

npx designlang fidelity https://stripe.com --clone http://localhost:3000 --min 90

输出：

Fidelity Score: 88% · B

Visual:  91% (pixel diff heatmap → fidelity-diff.png)
Motion:  83% (5/6 animations matched, spring timing off on modal)

Correction Plan (hardest-hitting first):
1. Modal: spring easing 'elastic' not reproduced → replace with cubic-bezier(0.68,-0.55,0.27,1.55)
2. Button hover: scale(1.02) missing → add transform: scale(1.02) on :hover
3. Font: 'Skiff Sans' loaded as 'Inter' → preload correct woff2

CI gate: FAILED (min=90, got=88)

这意味着克隆在像素层面 91% 匹配原站，但动效丢失了弹性动画，整体未达到 90% CI 门槛，pipeline 会自动阻塞并给出精确修正步骤。

GitHub: https://github.com/Manavarya09/design-extract