Chrome插件一键扒光网站设计，让AI帮你复刻

平时看到别人网站设计得好看，想参考一下风格，以前只能老老实实打开开发者工具一行行翻CSS。碰到大项目样式表嵌套七八层，找个变量名都费劲。最近发现个Chrome插件叫 Design.md Style Extractor，点一下就能把整个网站的设计规范扒下来，还能直接丢给AI帮你复刻。

用法很简单。装好插件后打开你觉得好看的网站，点一下插件图标，它就开始自动提取。字体大小、字重、行高这些typography信息，主色辅色背景色，间距系统，圆角大小，阴影层次，甚至动画节奏，全部给你识别出来，不用手动去量。

提取完会生成两种文件。DESIGN.md是给人看的设计系统文档，结构完整，适合存档或者跟团队共享。SKILL.md是给AI看的技能文件，这个比较有意思，直接喂给Claude Code、Cursor、Codex这些AI编码工具，它就能按照原网站的风格帮你搭页面，省去自己写设计规范的时间。

网页要是改了样式，点Refresh重新跑一遍就行，不用卸载重装。生成的文件一键下载到本地，文件名都帮你起好了，挺省心的。点那个问号按钮还有说明，告诉你文件怎么生成的，附带TypeUI的参考链接。

装插件两种方式。喜欢折腾的可以打开Chrome扩展管理页面，开启开发者模式，加载已解压的扩展程序选项目文件夹。图省事的直接去Chrome商店搜”Design.md Style Extractor”装就完了。装好后随便开个网站，点插件选Auto-extract，等跑完选生成DESIGN.md或者SKILL.md，最后Download下来。

不过说实话这工具只提取视觉层面的样式，不涉及交互逻辑和后端代码，想要完整复刻还是得自己补业务层的东西。而且提取结果准不准，也跟网站本身CSS写得规不规范有关系，碰到那种样式全靠!important糊上去的网站，提取出来可能也不太好看。但对于想快速扒一个网站的视觉风格来说，确实比手动翻CSS高效多了，配合AI编码工具基本能直接开干。

下载链接：https://pan.quark.cn/s/e2380fdaf5a4

GitHub 项目地址：https://github.com/bergside/design-md-chrome