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