design-md-chrome 深度解析：Chrome 扩展一键生成网站设计蓝图
前端开发最痛苦的环节之一，就是把设计师的视觉稿还原成代码。颜色、字体、间距、圆角、阴影……散落在各个 CSS 文件里，靠人眼比对，效率极低。
design-md-chrome 这个 Chrome 扩展做了一件很巧妙的事：扫描任意网页，自动提取视觉规范，生成结构化的 DESIGN.md 文件——可以直接喂给 Claude Code、Codex 等 AI 工具，让 AI 按照你网站的设计规范写代码。
项目概览
| 项目 | 详情 |
|---|---|
| GitHub | bergside/design-md-chrome |
| 协议 | MIT |
| 类型 | Chrome 浏览器扩展 |
| 格式标准 | 基于开源 TypeUI DESIGN.md 格式 |
工作原理
扩展的核心逻辑分两步：
第一步：提取视觉信号
点击扩展图标，它会自动从当前页面提取：
- 色彩系统 — 主色、辅助色、背景色、文字色
- 字体层级 — 字体族、大小、行高、字重
- 间距系统 — padding、margin 的数值模式
- 圆角 — border-radius 的常用值
- 阴影 — box-shadow 的分层
- 动画/过渡 — transition 和 animation 的参数
第二步：生成结构化文档
提取的信号被整理成标准的 DESIGN.md 格式，包含以下章节：
| 章节 | 内容 |
|---|---|
| Mission | 设计系统目标定义 |
| Brand | 产品/品牌上下文、URL、受众、产品形态 |
| Style Foundations | 视觉 Token 和基础规则 |
| Accessibility | WCAG 2.2 AA 无障碍要求 |
| Writing Tone | 文案语气指导 |
| Rules: Do / Don't | 必须遵循和禁止的行为 |
| Guideline Authoring Workflow | 设计规范编写步骤 |
| Required Output Structure | AI 输出结构约束 |
| Component Rule Expectations | 组件交互/状态细节 |
| Quality Gates | 质量一致性检查 |
两种输出格式
扩展支持生成两种格式：
- DESIGN.md — 完整设计系统文档，适合团队共享和设计评审
- SKILL.md — Agent-ready 的技能文件，可直接喂给 Claude Code、Codex、Google Stitch 等 AI 工具
安装方式
# 1. 下载项目
git clone https://github.com/bergside/design-md-chrome.git
cd design-md-chrome
# 2. 打开 Chrome 扩展管理
# chrome://extensions → 开启开发者模式 → 加载已解压的扩展程序 → 选择项目文件夹
无需 npm install 或编译，原生 Chrome 扩展格式，即装即用。
实际用法
你有一个 SaaS 产品网站，想让 Claude Code 帮你重构一个新页面
1. 在 Chrome 中打开你的网站
2. 点击 design-md-chrome 扩展图标
3. 自动生成 DESIGN.md
4. 把 DESIGN.md 放进项目根目录
5. 告诉 Claude Code："按照 DESIGN.md 中的设计规范重构首页"
这就是 design-md-chrome 的核心价值：把人类设计师的视觉直觉，转换成 AI 能理解的结构化规则。
总结
design-md-chrome 解决的是一个很具体的问题：AI 时代，设计规范需要被机器读取。它不是替代 Figma，而是让设计师的成果能被 AI 工具直接使用——从网页到 DESIGN.md 到代码，全链路打通。
对于前端开发者和设计师来说，这个小工具能大幅减少"对稿"的时间成本。
参考链接
- GitHub: bergside/design-md-chrome
- TypeUI 格式标准: typeui.sh
- 设计技能集合: typeui.sh/design-skills