你有没有遇到过这种情况：看到一个网站设计得特别好，想参考它的配色、字体、间距，但打开 DevTools 一看，CSS 变量嵌套了七八层，搞半天也不知道人家到底用的什么设计体系。
designlang 就是解决这个问题的。一句话说清楚它能干嘛：给它一个网址，它把整个网站的设计系统扒下来，整理成你能直接用的格式，还能给你一份该网站的AI agent prompt提示词。
不是截图，不是猜，是真正用浏览器把页面渲染出来，然后读取每一个元素实际显示的样子——颜色、字号、间距、阴影、动效，全都要。
这东西怎么用
装好 Node 20 以上版本，一行命令：
npx designlang https://stripe.com跑完之后，当前目录下多了一个文件夹，里面十几二十个文件。你拿到的是：
- 颜色表——主色、辅助色、语义色（成功/警告/危险）分层列好，带 CSS 变量和 Tailwind 配置
- 字体规范——用的什么字体、多大字号、行高多少、字重有哪些
- 间距系统——人家用的 4px 还是 8px 基准网格，一目了然
- 动效参数——按钮按下去多久弹回来、用什么缓动曲线
- 响应式断点——在手机、平板、桌面各自长什么样，哪些元素会消失
这些东西不是零散的截图，是结构化的 JSON、CSS、JS 配置文件，直接复制到你的项目里就能用。
它跟”审查元素”有什么区别
手动审查元素你只能看到一个元素的样式，而且经常是多层覆盖之后的结果，搞不清哪些是基础值、哪些是覆盖值。
designlang 的做法是：用无头浏览器把页面真正跑起来，在四个不同屏幕宽度下各跑一遍，hover、focus、active 这些状态也模拟一遍，然后把所有计算后的最终值记下来。
打个比方：手动审查像是你拿尺子量一栋楼，designlang 是给楼做 CT 扫描。
实际能干嘛
几个最常见的场景：
参考竞品。想做一个跟 Stripe 风格接近的后台？跑一下 npx designlang https://stripe.com，出来的 Tailwind 配置直接贴进项目，配色和间距体系就有了基础。
接手老项目。代码里一堆硬编码颜色值，想整理成设计系统但没有设计师配合。对着线上环境跑一遍，出来的 token 文件就是你的起点。
跨端统一。加 --platforms all，它连 iOS 的 SwiftUI 配色、Android 的 Compose 主题、Flutter 的色板一起给你生成好。
给 AI 当上下文。接了 Cursor 或 Claude Code 的话，装它的 MCP Server，AI 写代码的时候直接能读到你指定的设计 token，不会自己瞎编颜色名。
几个实用的命令
# 基础提取
npx designlang https://stripe.com
# 完整模式，包含截图和交互态
npx designlang https://stripe.com --full
# 顺便出 iOS/Android/Flutter 的配置
npx designlang https://stripe.com --platforms all
# 给网站打个设计分，出个评分卡
npx designlang grade https://stripe.com
# 两个网站 PK 一下设计水平
npx designlang battle stripe.com vercel.com
# CI 里检查设计有没有漂离规范
npx designlang drift https://yours.com --tokens ./src/tokens.json说点需要注意的
这工具不是万能的。它读的是渲染结果，所以动态加载的内容可能抓不全；特别复杂的组件库它未必能完美拆出变体矩阵。但作为”快速建立设计基线”的手段，效率比手动扒高出一个量级。
另外注意一点：它会对目标网址发请求并用浏览器跑 JS，别拿它去爬需要登录的内部系统然后不小心把 cookie 带上去。公开网站随便跑，本地项目起个 dev server 也能跑。
开源免费，MIT 协议，GitHub 上搜 Manavarya09/design-extract 就能找到。不想装环境的话，designlang.app 网站上也有限免的在线体验。