design-md-chrome

这玩意儿就是个 Chrome 浏览器插件，装上去之后能把任意网站的设计样式扒下来——字体、颜色、间距、圆角、阴影、动画全都不放过，最后生成一份 DESIGN.md 或者 SKILL.md 文件，丢给 Claude、Cursor、Codex 这些 AI 工具，它就能照着原网站的风格帮你重新做一套出来。

Github地址

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

能干啥

自动提取设计信号

打开一个你觉得好看的网站，点一下插件，它就开始干活。 typography（字体大小、字重、行高这些）、colors（主色、辅色、背景色）、spacing（间距系统）、radius（圆角）、shadows（阴影层次）、motion（动画节奏）——全部自动识别，不用你手动量。

生成两种文件格式

• DESIGN.md：给人看的设计系统文档，结构完整
• SKILL.md：给 AI 看的技能文件，直接喂给 Claude Code、Google Stitch、Codex 这些工具用

刷新重新提取

网页改了？点 Refresh 重新跑一遍，不用重装插件。

一键下载

生成完直接下载到本地，文件名都帮你起好了。

自带说明书

点那个问号按钮，它会告诉你这文件是怎么生成的，还附带 TypeUI 的参考链接，不怕看不懂。

怎么装上用

本地开发版（适合想折腾的）

1. 打开 Chrome，地址栏输入 chrome://extensions
2. 右上角打开「开发者模式」
3. 点「加载已解压的扩展程序」
4. 选中这个项目的文件夹，完事

商店直装（适合图省事，会科学上网的）

直接去 Chrome Web Store 搜「Design.md Style Extractor」，或者点这个链接：

https://chromewebstore.google.com/detail/designmd-style-extractor/ogpdnchdjiibhobphelbbkemnnemkfma

装好之后，随便开个网站，点插件图标，选 Auto-extract，等它跑完，再点 Generate DESIGN.md 或者 Generate SKILL.md，最后 Download 下来就行。