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

关注「淼淼 AI Lab」，每周拆解一个 AI 技术热点，上手验证，给你基于真实体验的结论。

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

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

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

先看效果

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

这 8 个文件分别覆盖了不同的使用场景：给开发者的 Tailwind 配置和 CSS 变量，给设计师的 Figma 变量，给 AI 的结构化 Markdown，还有可视化预览页面。

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

原站：

复刻：

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

一探究竟

上手体验

整个流程很简单。一条命令就能跑，不需要配置。

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

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

这就引出一个关键问题：它到底提取了什么，又丢了什么？

原理拆解

要回答这个问题，先得理解一个网站的”设计系统”由什么组成。

一个看起来”统一”的网站背后，是一套有限的设计变量在反复组合——色彩体系（主色、辅色、强调色的角色分配）、字体排印（字体族、字号递进、行高字重）、间距系统（基于 4px 或 8px 基准单位形成的 scale）、视觉效果（阴影、圆角、渐变）、组件样式（按钮和卡片在不同状态下的表现）、响应式断点（不同屏幕宽度下的布局变化）。

这六个维度定义了一个网站”看起来是什么样”。design-extract 要做的，就是把这些值完整地从一个活的网页上抽取出来。

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

怎么拿到样式？ 一个网站的样式可能来自 Tailwind、CSS-in-JS、SCSS、JavaScript 动态注入——源码层面千差万别。design-extract 的做法是不碰源码，直接问浏览器。它用 Playwright 启动无头浏览器，对页面上的 DOM 元素调用 getComputedStyle()，拿到的是经过所有规则层叠和动态修改后最终实际渲染的样式值。不管你用什么方式写的 CSS，浏览器永远知道最终结果。

采集到的颜色怎么归类？ 几千个元素带回来大量颜色值，同一个蓝色可能以多种格式出现，hover 态的浅蓝变体也应该归入同一组。简单去重不够，design-extract 用的是颜色聚类——在色彩空间里计算两两距离，足够接近的归入同一组，然后按出现频率排序来确定主色、辅色。

静态样式够了吗？ 不够。一个按钮的默认态和 hover 态可能完全不同。design-extract 的解法是 before/after diff：先记录元素当前样式，再程序化触发 hover 或 focus，然后对比变化了哪些属性。

不同屏幕和暗色模式怎么办？ 同一个网站在手机和桌面上可能是两套设计。design-extract 在四个不同宽度的视口下各爬一遍。暗色模式则通过创建 dark mode 的独立浏览器环境，让浏览器自然切换后再提取。

除了以上四个方向，它还有字号聚类、间距推断、无障碍对比度检测等专项提取器。

最终输出中最值得注意的是给 AI 的 Markdown 格式。 600 多行的结构化文档，把所有设计信息组织成表格和分类描述。喂给 Claude，Claude 就”看懂”了你的设计系统。这正是它作为 Claude Code 插件的精髓：不是给人生成文档，而是给 AI 生成对设计系统的理解。

我的结论

判定：暂时观望

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

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

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

参考链接

• • design-extract GitHub：https://github.com/Manavarya09/design-extract
• • getComputedStyle API — MDN：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
• • W3C Design Tokens 规范：https://tr.designtokens.org/format/

如果这篇文章对你有帮助，欢迎点赞、在看、转发三连 🙏

有问题或想法欢迎留言讨论，我会逐条回复。

关注「淼淼 AI Lab」，不错过每周的 AI 实测。