Design Extract：提取网站设计风格，让Claude Code照着写页面

看到喜欢的网站，想把它那套配色、字体和版式搬进自己的项目，过去得靠肉眼比对、手动抄 CSS。现在有个叫 Design Extract 的工具，把这件事自动化了：输入网址，它会把目标网站的设计信息扒下来，整理成可直接复用的规范。

它到底提取了什么

据 B 站相关介绍，Design Extract 能自动提取网站的配色、字体、布局和动画等设计信息，并整理成一套可以复用的规范。这意味着它不只是抓几个色值回来，而是试图把视觉风格拆解成结构化的设计 token。

对做前端的人来说，这一步的价值在于省掉了"翻译"环节。拿到一份结构化的设计规范，比对着截图猜字号和间距要可靠得多。

设计 token（Design Token）是设计系统中最小的可复用决策单元，通常以键值对形式存在，比如 color-primary: #3B82F6、font-size-heading: 24px、spacing-md: 16px。它的核心价值在于把“视觉决策”从具体页面中抽离出来，变成平台无关、可被程序读取的变量。这样一来，同一套 token 可以同时编译成 CSS 变量、Tailwind 配置、iOS/Android 资源文件或 Figma 样式，保证多端视觉一致。与直接复制 CSS 相比，token 更强调语义命名和层级结构（如基础色、语义色、组件级 token），便于后续换肤和主题切换。Design Extract 声称把网站视觉拆解成结构化 token，实际上就是尝试从渲染结果反推这套设计决策体系。

输出格式直接对接现有工作流

提取只是第一步，Design Extract 的产出形态是它比较实用的地方。它支持生成 Tailwind CSS 配置、Shadcn UI 主题和 Figma 变量等文件，可以直接放进自己的项目里使用。

这三种输出覆盖了当前前端和设计协作的主流链路：写代码的拿 Tailwind 配置，用组件库的套 Shadcn 主题，做设计的导入 Figma 变量。同一个参考网站的设计语言，能在三条线上保持一致，减少来回对齐的成本。

Shadcn UI 并非传统意义上通过 npm 安装的组件库，而是一套“复制粘贴式”的组件集合：开发者把组件源码直接放进项目，再通过 CSS 变量和 Tailwind 配置来控制主题。它的主题机制围绕一组语义化 CSS 变量展开，例如 --background、--foreground、--primary、--border 等，在 globals.css 中定义后由 Tailwind 消费。因此，所谓“生成 Shadcn UI 主题”，本质上是把提取到的配色映射到这套变量命名体系里，让现成组件自动继承参考网站的视觉风格。这也解释了为什么它和 Tailwind 配置输出能形成互补：前者管组件层的语义色，后者管原子级的样式工具类。

MCP：让 AI 编程工具读懂参考网站

更有意思的是它对 AI 编程工具的支持。Design Extract 提供了接入 Claude Code 这类 AI 编程工具的 MCP（Model Context Protocol），让 AI 能读取参考网站的设计信息，按照相近的配色、字体和布局来编写页面。

这解决的是 AI 生成页面的一个老问题：模型能写出结构合理的代码，但视觉效果往往千篇一律。接上设计信息的来源之后，AI 的输出就有了具体的风格锚点，而不是凭训练数据里的"平均审美"发挥。

MCP（Model Context Protocol） 是 Anthropic 于 2024 年底提出的一种开放协议，用于标准化 AI 模型与外部工具、数据源之间的连接方式。可以把 MCP 理解为“AI 应用的 USB-C 接口”：模型侧（如 Claude Code、Claude Desktop 或其他支持 MCP 的客户端）通过统一的协议调用外部服务暴露的“工具（tools）”“资源（resources）”和“提示（prompts）”，而不需要为每个数据源单独写集成代码。一个 MCP Server 负责把某项能力（例如读取网站设计信息）封装成模型可调用的接口，模型在推理过程中按需发起请求。对 Design Extract 来说，提供 MCP 意味着 AI 编程工具不必内置抓取逻辑，而是通过标准协议按需获取结构化的设计 token，从而在生成页面时有了明确的风格约束。

一个新项目的快速迭代

据同一来源，Design Extract 的开发历史只有半年，最近一直在增加适配 AI 的新功能，比如评估页面还原度、生成品牌手册等。

评估页面还原度这个方向值得留意：如果 AI 照着参考网站写出的页面，工具能反过来判断像不像、差在哪，就形成了一个可迭代的闭环。品牌手册生成则把提取范围从单个页面的视觉细节，扩大到整套视觉识别。

需要说明的是，这个项目主要由作者一人开发，外部贡献很少。对使用者而言，这既意味着功能方向比较统一，也意味着迭代速度和长期维护存在不确定性，选型时值得纳入考量。

页面还原度评估通常指将实现页面与参考页面进行视觉比对，量化二者在布局、配色、字体、间距等维度上的差异。常见技术路径包括像素级 diff（逐像素比较截图）、结构比对（DOM 树或渲染树差异）以及基于视觉模型的特征相似度打分。像素 diff 实现简单但对字体渲染、滚动位置和响应式断点敏感；结构比对更能反映布局偏差但难以覆盖纯视觉风格。对 AI 生成页面的场景而言，还原度评估的意义在于把“像不像”变成可测量的反馈信号，进而驱动多轮修改，形成“生成—评估—修正”的闭环。不过这类指标也容易过拟合参考网站，需要在风格迁移与内容适配之间做权衡。

适合谁用

最直接的受益者是独立开发者和小团队：想在短时间内做出有辨识度的页面，又不想在设计上投入太多人力，用这类工具先拉齐视觉基调是条务实的路径。做设计参考收集、竞品视觉分析的人，也能用它批量整理素材。

需要注意的是，提取设计风格和复制网站是两回事。工具给的是设计语言层面的参考，落地时仍然需要结合自己的内容和品牌做调整，否则容易做出"看着眼熟但说不出是谁"的页面。

你平时喜欢哪些网站的设计风格？这类工具会不会进入你的工作流，欢迎在评论区聊聊。