一条命令提取任何网站的完整设计系统：design-extract 介绍

前端开发中有一类永恒的痛苦：你看着某个网站的设计语言很喜欢，想在自己的项目里复刻或参考，结果要一边打开 DevTools、一边手动抄颜色值、字体、间距……来回折腾半天，最终整理出来的还是残缺的。

design-extract（npm 包名 designlang）要解决的正是这件事。一条 npx 命令，它就能用无头浏览器爬取目标页面，从真实 DOM 的计算样式里提取出完整的设计系统，并生成 17+ 个即用型文件。

它能提取什么

最基础的一次运行：

1
npx designlang https://stripe.com

就会产出：

文件	内容
`*-design-language.md`	AI 优化的 Markdown，可直接喂给 LLM 重建设计
`*-design-tokens.json`	W3C DTCG 格式的 Design Tokens（含语义层 + 原始层）
`*-tailwind.config.js`	可直接 drop-in 的 Tailwind 主题配置
`*-variables.css`	CSS 自定义属性
`*-figma-variables.json`	Figma Variables 导入文件（含暗色模式）
`*-shadcn-theme.css`	shadcn/ui 的 `globals.css` 变量
`*-preview.html`	含色板、字型比例、阴影、a11y 分数的可视化预览报告
`*-theme.js`	React/CSS-in-JS 主题（兼容 Chakra、Stitches、Vanilla Extract）
`*-motion-tokens.json`	动效 Token：持续时长、缓动函数、弹簧参数
`*-anatomy.tsx`	每个检测到的组件的 React 类型定义桩
`*-voice.json`	品牌语气指纹：语调、代词、CTA 动词

加上 --full 参数，还会额外抓取截图、跨断点响应式差异和交互状态（hover / focus / active）。

远不止颜色和字体

大多数同类工具给你颜色和字体就完了。designlang 的差异化在于它试图提取设计系统的骨架，而非仅仅是"油漆层"。

布局系统

1
Layout: 55 grids, 492 flex containers

网格列模式、弹性布局方向、容器宽度、gap 值——这些是还原一个页面骨架真正需要的数据。

响应式行为

1
npx designlang https://vercel.com --responsive

工具会在 4 个视口宽度（移动、平板、桌面、宽屏）下各爬一次，并精确记录每个断点之间发生了什么变化：哪个元素消失了、标题字号跳了多少、网格从几列变成几列。

交互状态捕获

1
npx designlang https://stripe.com --interactions

程序化地触发 hover、focus，记录真实的样式过渡：

1
2
3
/* Button Hover */
background-color: rgb(83, 58, 253) → rgb(67, 47, 202);
box-shadow: none → 0 4px 12px rgba(83, 58, 253, 0.4);

动效语言（v9+）

不只是 transition: all 0.3s 这种字符串。工具会将所有持续时长分桶成语义化 Token（instant / xs / sm / md / lg / xl），识别缓动函数家族，标记 scroll-linked 动画，输出一个 feel 指纹——springy、responsive、smooth 还是 mechanical。

品牌语气（v9+）

视觉之外，工具还会抓取页面文案，输出语调分类（技术性/友好/正式等）、代词偏好（we→you / you-only）、标题大小写风格，以及最常用的 CTA 动词列表。LLM 重建站点时需要的不只是"涂色方案"。

组件感知提取

designlang 能识别页面上的可复用组件集群，并为每个组件生成一个带槽位的解剖树和变体矩阵：

1
2
3
4
5
6
7
export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  leadingIcon?: React.ReactNode;
  children?: React.ReactNode;
}

这直接省去了从零定义组件接口的时间。

多平台输出

一次提取，多端可用：

1
npx designlang https://stripe.com --platforms all

在默认 Web 输出的基础上，还会生成：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
design-extract-output/
├── ios/
│   └── DesignTokens.swift
├── android/
│   ├── Theme.kt
│   ├── colors.xml
│   └── dimens.xml
├── flutter/
│   └── design_tokens.dart
└── wordpress-theme/
    ├── theme.json
    └── style.css

MCP Server：与 AI 编码工具深度集成

v7 引入了 MCP Server 支持，一行命令启动：

1
designlang mcp --output-dir ./design-extract-output

启动后，Cursor、Claude Code、Windsurf 等支持 MCP 的工具可以直接查询提取结果：

designlang://tokens/semantic — 语义层 Token
designlang://components — 检测到的组件集群
designlang://health — CSS 健康审计报告

也可以作为 Agent Skill 安装：

1
npx skills add Manavarya09/design-extract

在 Claude Code 里直接 /extract-design <url> 即可使用。

工程质量工具

除了提取，工具还内置了几个面向工程实践的子命令：

designlang lint — 审查本地 Token 文件，检测颜色蔓延、间距漂移、WCAG 对比度不合格，CI 友好（检测到 error 级问题时非零退出）。

designlang drift — 以线上站为基准，检测本地 Token 文件的漂移程度，给出 in-sync / minor-drift / notable-drift / major-drift 的判定。

designlang visual-diff — 对比两个 URL 的截图和 Token 差异，生成单文件 HTML 报告，不需要额外服务器。

designlang score — 从 7 个维度给任意网站的设计质量打分（A-F），包括颜色纪律、间距系统、无障碍性等。

整体架构

graph TD
    A[目标 URL] --> B[Playwright 无头 Chromium]
    B --> C[DOM 计算样式采集\n最多 5000 个元素]
    C --> D[17 个提取模块\n颜色/字体/布局/动效/组件...]
    D --> E[8 个格式化模块]
    E --> F[Web 输出\nTokens / Tailwind / Figma / shadcn]
    E --> G[多平台输出\niOS / Android / Flutter / WordPress]
    E --> H[AI 集成输出\nMCP Server / Agent Rules / Prompt Pack]

安装与快速上手

无需安装，直接使用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
# 基础提取
npx designlang https://example.com

# 提取一切
npx designlang https://example.com --full

# 多平台输出
npx designlang https://example.com --platforms all

# 设计质量评分
npx designlang score https://example.com

# 与 AI 工具集成
designlang mcp --output-dir ./my-tokens

也可以全局安装：

1
npm install -g designlang

该项目以 MIT 协议开源，Node.js 20+ 和 Playwright 是运行依赖。截至目前，项目在 GitHub 上已获得 1.7k Star，158 次 Fork。

一点看法

designlang 的定位不是"设计稿转代码"，而是把线上运行的设计系统变成可编程的数据。它最有价值的场景大概是：在 AI 辅助开发的工作流里，给 LLM 提供一份真实、完整、结构化的设计上下文，而不是让模型凭空猜测或依赖一份可能已经过期的 Figma 文件。