AI 改前端总跑偏？试试把网页风格提成 DESIGN.md

看到一个网站做得顺眼，想让 Codex 或 Claude Code 参考它的风格，最难的地方往往不是写代码。

是描述。

你可以说“参考 Linear 的克制感”，也可以说“像 Vercel 一样干净”。问题是，Agent 拿到的仍然是一段模糊评价。 它不知道主色是什么，按钮圆角是多少，页面留白为什么舒服，也不知道哪些东西只是品牌资产，不能照搬。

design-md-chrome 处理的就是这件事。

它是一个 Chrome 扩展，可以从当前网页提取字体、颜色、间距、圆角、阴影、动效等样式信号，然后生成 DESIGN.md 或 SKILL.md。

换句话说，它不是帮你抄网站，而是把“这个页面为什么看起来像这个页面”整理成一份 Agent 更容易读的设计说明。

项目地址：

https://github.com/bergside/design-md-chrome

它不是 CSS 查看器

如果只是想看某个元素的颜色，Chrome DevTools 已经够用了。

design-md-chrome 的核心价值是把页面样式整理成一份可复用的设计规范，而不是简单地查询几个 CSS 值。生成内容里会有颜色、字号、间距这些基础信息，也会写到可访问性要求、组件状态、使用规则和质量检查点。

项目 README 对它的定位很明确：从任意网站提取样式和信息，生成 DESIGN.md 或 SKILL.md，再交给 Google Stitch、Claude Code、Codex 等工具使用。

简单上手

安装

Chrome 浏览器直接扩展商店搜索 DESIGN.md Style Extracto

其它基于 Chrome 的大部分浏览器都可以安装，下面以Edge浏览器为例：

1. 浏览器地址栏输入edge://extensions
2. 开启左下角开发者模式
3. 下载ZIP包解压后整个文件夹直接拖入页面完成安装

使用

将扩展程序固定在浏览器的状态栏里，打开想要借鉴的网页，直接点击扩展程序即可查看 DESIGN.md

然后将 DESIGN.md 放在项目根目录下，直接让 Agent 生成类似风格的网页。

DESIGN.md 和 SKILL.md 有什么区别

扩展可以生成两类文件。

DESIGN.md 更像设计说明书，适合人看，也适合放进项目里作为设计上下文。它会整理颜色、字体、间距、组件规则、可访问性要求，以及一些不要做的事。

SKILL.md 更像给 Agent 的工作规程。它会告诉 Claude Code、Codex 或 Cursor：什么时候使用这套风格，改 UI 时要遵守哪些规则，哪些状态必须覆盖，修改后怎么检查。

可以粗略这样分：

DESIGN.md  -> 设计说明
SKILL.md   -> Agent 执行规则

一个偏说明，一个偏执行。

Quick install 做了什么

扩展界面里有一个 Quick install 区域，下面有 Claude Code、Codex、Cursor 三个按钮。

它不是帮你安装这些工具本体。它做的事更小：把生成的 SKILL.md 写进对应工具约定的技能目录。

以 Codex 为例，点击 Quick install -> Codex 后，扩展会尝试让你选择项目目录，然后写入：

你的项目/
└── .agents/
    └── skills/
        └── design-system/
            └── SKILL.md

如果浏览器不支持目录写入，或者你取消授权，扩展不会强行写入项目。它会尝试复制内容、下载 SKILL.md，再提示你手动移动到对应目录。

这一步不复杂，但省掉了不少重复动作。以前你要生成文件、改名、找目录、粘进去。现在只要浏览器环境支持，可以少走几步。

一个更稳的使用流程

假设你正在做一个 Next.js 项目，想参考某个网站的视觉风格，可以这样用：

打开目标网站
-> 点击 design-md-chrome
-> 查看生成的 DESIGN.md / SKILL.md
-> Quick install 到项目
-> 让 Codex 读取这个 skill
-> 看 diff
-> 不满意就回滚

给 Codex 的提示词可以直接一点：

请读取 .agents/skills/design-system/SKILL.md，把它作为这次 UI 优化的设计参考。

目标：在不改变业务逻辑、不删除现有功能的前提下，调整当前页面的视觉风格。

要求：
1. 只借鉴颜色、排版、间距、圆角、阴影、按钮、表单和整体节奏；
2. 不要照搬原网站 logo、品牌文案、商标、插图和完整页面结构；
3. 先审计当前页面和 skill 的差距；
4. 修改前列出计划；
5. 优先改样式、CSS 变量、Tailwind token 和基础组件；
6. 修改后运行构建或类型检查。

我会保留最后两步：看 diff，不满意就回滚。

设计 skill 能减少沟通成本，但它不能替你判断页面到底适不适合自己的产品。

它适合哪些场景

你已经有页面了，但默认样式太散，想让 Agent 按一个明确方向收一收——适合用它。

你想快速做原型，不想从零定义色板、字号、圆角和组件状态，只想先拿一个成熟网站的表层风格当参考，也适合用它。

更常见的情况是：你不是缺代码能力，而是缺一份能喂给 AI 编程工具的设计上下文。

很多时候 Agent 写 UI 不差在代码，差在审美上下文太薄。你跟它说“高级一点”，它扭头就给你一整套紫色渐变、大圆角卡片。 你给它一份结构化设计说明，它至少知道该往哪个方向走。

它也有边界

design-md-chrome 提取的是当前网页上能看到的样式信号。

它看不到一个品牌完整的设计系统，也不理解公司内部设计原则，更不知道其他页面里还有哪些组件状态。

这个项目依赖于 TypeUI DESIGN.md 所以别把它当万能复刻器。

更合理的用法是： 借鉴视觉规律，不复制品牌资产； 让 Agent 参考风格，不让它照搬页面。

和 AGENTS.md 配合使用

如果你用的是 Codex，建议把设计说明和项目规范拆成两个文件。

.agents/skills/design-system/SKILL.md 只管视觉风格——颜色、间距、圆角这些。

AGENTS.md 管项目纪律：用什么包管理器、改完跑什么命令、哪些文件不要动、团队有什么约定，全放这里。

一个管方向，一个管规则。如果混在一起，两边都说不清楚。

值不值得装

如果你只是偶尔让 AI 写一个落地页，它未必是必需品。截图、参考链接、几句明确要求，有时候也够用。

但如果你经常让 Codex、Claude Code 或 Cursor 改前端页面，design-md-chrome 能省掉一类很烦的沟通：反复解释“我想要的不是这个味道”。

用的好，第一次就少跑偏一点，这工具就算值了。

如果你也在头疼"怎么让 AI 理解我想要的设计"——那么可以试试这个扩展。