一个 Claude 插件说能复刻任何网站样式，我替你试了

前几天在 Claude Code 的插件市场里翻到一个项目——design-extract。它的卖点很直接：给它任何一个网站的 URL，它就能把这个网站的完整设计系统提取出来，输出成 Tailwind 配置、CSS 变量、Figma tokens 等 8 种格式。

听起来很诱人。如果这东西真能用，意味着你再也不用手动吸取颜色、猜间距、翻 DevTools 了——一条命令搞定设计 token，然后交给 AI 去生成页面。

但真能做到吗？我替你试了。

先看效果

运行一条命令：

npx designlang https://sspai.com/

它会启动一个无头浏览器，爬取目标页面，然后在当前目录下生成 8 个文件：

然后我用提取出的设计系统，让 Claude 复刻了一个少数派首页。效果如下：

原图：

复刻图：

老实说，颜色和字体的大感觉对了，但布局细节、组件还原度大概只有 60%。为什么会这样？往下看。

一探究竟 - 上手体验

整个流程很简单。一条 npx designlang <url> 就能跑，不需要配置。

它还支持 clone 命令，能直接生成一个 Next.js 15 + Tailwind 4 的完整项目，把提取出的设计 token 应用进去。听起来很酷，但实际跑出来的结果——颜色基调是对的，字体也抓到了，间距尺度大致没错。问题出在更细的地方：

• 组件的具体样式（卡片圆角、按钮的 hover 态、阴影层次）还原得不够精确
• 布局结构完全靠 AI 猜，因为设计 token 里根本没有布局信息
• 响应式适配和交互细节基本缺失

这就引出一个关键问题：它到底提取了什么，又丢了什么？ 要回答这个，得先理解一个网站的”设计系统”到底由什么组成。

一探究竟 - 原理拆解

一个网站的设计系统包括什么

一个看起来”统一”的网站背后，是一套有限的设计变量在反复组合。把这些变量抽象出来，就是”设计系统”。design-extract 关注的维度有这些：

• 色彩体系: 不仅仅是”用了哪些颜色”，而是颜色的角色分配——哪个是主色（primary），哪个是辅色（secondary），哪个是强调色（accent）；以及背景色、文字色、中性色的层次关系。还有暗色模式下的变体。

• 字体排印：字体族、字号 scale（h1 到 body 的递进关系）、行高、字重的使用频率。

• 间距系统：页面上的 margin、padding、gap 不是随意取值的，大多数成熟网站会基于一个基准单位（通常是 4px 或 8px）形成 scale。

• 视觉效果： 阴影的层次感、圆角的统一性、渐变、边框样式。

• 组件样式：按钮、输入框、卡片在默认状态、hover 状态、focus 状态下分别是什么视觉效果。

• 响应式断点：从手机到桌面，布局在哪些宽度发生变化，变化了什么。

这六个维度基本定义了一个网站”看起来是什么样”。如果你能完整获取它们的值——你就掌握了这个网站的视觉 DNA。

知道了要提取什么，接下来的问题是怎么提取。

问题一：怎么拿到样式？

一个网站的 CSS 可能来自 Tailwind、CSS-in-JS、SCSS、JavaScript 动态注入——源码层面千差万别。怎么统一处理？

design-extract 的做法是不碰源码，直接问浏览器。它用 Playwright 启动无头 Chromium，对最多 5000 个 DOM 元素调用 window.getComputedStyle()，拿到的是经过所有规则层叠、继承、动态修改后最终实际渲染的样式值。不管你用什么方式写的 CSS，浏览器永远知道最终结果。

const elements = document.querySelectorAll('*');
for (const el of Array.from(elements).slice(0, 5000)) {
  const styles = window.getComputedStyle(el);
  collect({
    color: styles.color,
    backgroundColor: styles.backgroundColor,
    fontSize: styles.fontSize,
    fontFamily: styles.fontFamily,
    // ... 25+ 种属性
  });
}

问题二：采集到的颜色怎么归类？

5000 个元素带回来几千个颜色值，同一个蓝色可能以 #3b82f6、rgb(59, 130, 246)、hsl(217, 91%, 60%) 三种格式出现，hover 态的浅蓝变体也应该归入同一组。简单去重解决不了这个问题。

design-extract 用的是颜色聚类——在 RGB 空间算欧几里得距离，距离小于 15 的归入同一个 cluster，然后按出现频率排序。频率最高的有彩色就是 primary，第二是 secondary。再通过 HSL 饱和度区分有彩色和中性色，#333333（深灰）和 #3b82f6（蓝色）自然分到不同的桶。

问题三：静态样式够了吗？

不够。一个按钮的默认态和 hover 态可能完全不同，但 getComputedStyle 只能拿到当前状态。

design-extract 的解法是 before/after diff：先记录元素当前样式，再用 Playwright 程序化触发 .hover() 或 .focus()，然后对比变化了哪些属性。这样就能知道”按钮 hover 时背景色从 #3b82f6 变成了 #2563eb，透明度从 1 降到 0.9”。

问题四：不同屏幕和暗色模式怎么办？

同一个网站在手机和桌面上可能是两套设计。design-extract 在 375/768/1280/1920px 四个视口下各爬一遍，对比断点处的变化。暗色模式则通过创建 colorScheme: 'dark' 的独立浏览器上下文，让浏览器自然切换后再用同样的逻辑提取。

除了以上四个核心问题，design-extract 还有 typography（字号聚类）、spacing（间距 scale 推断）、accessibility（WCAG 对比度检测）等专项提取器，覆盖设计系统的各个维度。

8 种输出格式

提取出原始数据后，通过 7 个 formatter 转换成 8 种格式，面向不同的消费者。

给开发者——Tailwind Config。 颜色映射为 primary/secondary/accent，字号映射为 Tailwind 的 fontSize scale：

export default {
  theme: {
    extend: {
      colors: {
        primary: '#635bff',
        secondary: '#0a2540',
        accent: '#00d4ff',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

给设计师——Figma Variables。 支持 light/dark 双模式，指定变量类型和作用域，可以直接导入 Figma。

给 shadcn/ui 用户——主题 CSS。 自动转 HSL 格式，用 NTSC 亮度公式 (R×0.299 + G×0.587 + B×0.114) 判断明暗，自动算前景色用黑还是白：

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 210 11% 15%;
    --primary: 244 83% 68%;
    --primary-foreground: 0 0% 100%;
    --radius: 8px;
  }
}

给 AI——Markdown。 这是最核心的输出。600+ 行的结构化文档，开头就声明意图：

This document describes the complete design language of the website. It is structured for AI/LLM consumption.

把所有设计信息组织成表格和代码块，喂给 Claude，Claude 就”看懂”了你的设计系统。这正是它作为 Claude Code 插件的精髓：不是给人生成文档，而是给 AI 生成对设计系统的理解。

我的结论

判定：暂时观望

design-extract 的技术路径是清晰的——用 computed styles 绕过构建工具差异、颜色聚类代替简单去重、before/after diff 捕获交互态。

但实际复刻效果大概只有 60%。问题不在提取——它提取到的设计 token 是准确的——问题在于设计 token ≠ 网站。还差布局结构、内容、交互逻辑、业务逻辑。这些设计系统覆盖不了的部分，目前只能靠 AI 去猜，而 AI 猜得还不够好。

它的真正价值不是”一键克隆网站”，而是让 AI 获得目标网站的审美能力。你不是要抄一个一模一样的站，而是要用同样的设计语言去构建新内容。如果你的期望是这个层面，它能用。但如果你期待高保真复刻——还不到时候。

参考链接

• design-extract GitHub
• getComputedStyle API — MDN
• W3C Design Tokens 规范
• WCAG 对比度标准

本文作者 ChrisMiaoMiao，首发于「淼淼 AI Lab」。每周拆解一个 AI/技术热点，上手验证，给你基于真实体验的结论。