开源Chrome插件一键扒光网站设计：自动提取配色/字体/间距，生成AI可读的SKILL.md
设计系统自动提取工具：打开任意网站，点一下插件，字体、颜色、间距、阴影、动画全部分解，生成 DESIGN.md 或 SKILL.md 文件喂给 AI 工具复刻
工具简介
design-md-chrome 是一款 Chrome 浏览器插件，开源免费，可以把任意网站的设计规范"扒"下来，自动提取并生成文档文件。
- GitHub：https://github.com/bergside/design-md-chrome
- Chrome商店：搜索 "Design.md Style Extractor"
- 定位：设计师和开发者的效率工具，AI 编程助手的好搭档
核心功能
自动提取 6 大设计信号
装上插件，打开任意你觉得好看的网站，点一下，它自动识别以下全部设计要素：
| 提取项 | 说明 |
|---|---|
| Typography | 字体大小、字重、行高、字间距 |
| Colors | 主色、辅色、背景色、文字色 |
| Spacing | 间距系统（padding、margin 等） |
| Radius | 圆角规则 |
| Shadows | 阴影层次 |
| Motion | 动画时长、缓动曲线 |
生成两种文件格式
DESIGN.md — 给人类看的设计系统文档，结构完整，可直接用作设计交接文档。
SKILL.md — 给 AI 看的技能文件，可以直接丢给 Claude Code、Google Stitch、Codex 等 AI 编程工具，让 AI 按照原网站的风格复刻开发。
其他实用功能
- 🔄 刷新重新提取 — 网页更新后点 Refresh 即可重新提取，无需重装插件
- ⬇️ 一键下载 — 生成完直接下载到本地，文件名自动生成
- 📖 自带说明书 — 点问号按钮查看文件生成说明，附带参考链接
安装方式
方式一：Chrome Web Store（推荐，需要科学上网）
直接去 Chrome 商店搜索 "Design.md Style Extractor"：
https://chromewebstore.google.com/detail/designmd-style-extractor/ogpdnchdjiibhobphelbbkemnnemkfma
方式二：本地开发者模式安装
- 打开
chrome://extensions - 右上角开启「开发者模式」
- 点「加载已解压的扩展程序」
- 选中项目文件夹，完成
使用流程
- 随便开一个网站
- 点击插件图标
- 选择 Auto-extract，等待提取完成
- 点击 Generate DESIGN.md 或 Generate SKILL.md
- 点击 Download 下载到本地
全程无需配置，零门槛。
典型使用场景
场景一：学习优秀网站的设计
看到 Dribbble 上一个很棒的网页，提取它的完整设计系统，比 Figma 插件量得更快更全。
场景二：让 AI 复刻网站风格
提取设计文件 → 喂给 Claude Code / Codex → 让 AI 按原风格开发新页面
场景三：团队设计交接
设计师用插件导出 DESIGN.md 给前端工程师，减少沟通损耗，规格一目了然。
一句话总结
design-md-chrome 把「看网站、学设计」这件事做到了半自动化——你看到什么好东西，5 秒内就能提取出一份完整的设计规范文档，还能直接变成 AI 的指令。对于天天用 AI 写代码的人来说，这个插件让 AI"理解设计"这件事往前迈了一大步。