一个命令扒下整个网站的设计系统，这个工具太狠了

一眼看上瘾的网站风格，AI 直接学会

不知道你有没有这种感觉——看到一个网站，色调舒服、排版讲究，想把这个风格用到自己项目里，但不知道从哪下手。配色值多少？字体用的什么？间距怎么定的？硬盯着看只能猜，猜完还不一定对。

今天介绍一个刚上架的工具，名字叫 design-system-extractor，干的事情就一件：把任意网站的设计系统”逆向”扒下来，生成一份可直接用的 design.md 文件。你不需要装 Figma 插件，不需要问设计师，直接一条命令，AI 就给你整理好。

它是怎么工作的

简单说就是浏览器自动化 + AI 整理。工具会：

• 用 Puppeteer 打开目标网站，模拟真实访问
• 通过 Chrome DevTools 抓取 computed styles——颜色、字体、间距、圆角、阴影，全部拿原始值
• 自动处理现代颜色格式（lab / oklch）转 hex，兼容所有 AI 工具
• 截图每个主要组件，配合 design.md 一起输出
• 探索 hover / focus 状态，记录响应式断点

最后吐出来的 design.md 格式严谨，拿到的人不需要看原网站也能复刻实现。

实际用起来什么感觉

我试了一下，输出一份 design.md 大概长这样：

• Primary / Accent / Neutral 颜色，含 hex 值和语义角色
• 字体族、字号层级、字重、line-height
• spacing scale、border-radius、shadow 系统
• 按钮、表单、卡片的各个状态截图
• 响应式 breakpoint 说明

整个过程不需要配置，不需要登录，直接 npx design-system-extractor –url https://xxx.com 就跑起来了。

为什么这个思路有意思

之前做设计系统迁移，要么靠设计师手动标注，要么靠 Figma 插件抓取。两者都费时费力，而且经常漏掉运行时状态。

这个工具换了个角度——让 AI 帮你做”设计考古”。你看到任何一个让你觉得”这设计真有质感”的网站，现在可以把它变成可复用的设计语言，用到自己的产品里。

输出格式是 Markdown，Claude Code、Cursor、Copilot 都能直接读，下一步直接让 AI 按这个 design.md 实现，完全不用来回沟通”你到底想要什么风格”。

安装和试玩

一条命令装上：

npx design-system-extractor --url https://你想抓的网站.com

也可以装成 Claude Code 插件：

npx skills add https://github.com/KunalKumarkkr01/design-system-extractor

MIT 协议，零商意图，直接上手。

GitHub：https://github.com/KunalKumarkkr01/design-system-extractor

GitHub: https://github.com/KunalKumarkkr01/design-system-extractor