design-extract

收录理由

做前端的人大概都经历过这种事：要照着现有网站重做一版，或者让新页面跟老页面保持同一个调性，结果只能对着浏览器按F12，一格一格地量颜色和间距。design-extract 把这套苦活自动化了——给它一个线上地址，它会用无头浏览器打开真实渲染后的页面，直接从 DOM 里把设计体系读出来，而不是靠肉眼去猜。吐出来的东西是 W3C 标准的 DTCG 设计令牌，分基础、语义、合成三层，顺带还能生成 Tailwind 配置、shadcn/ui 主题变量、Figma 变量和 CSS 自定义属性。跑一次抓取，也能额外产出面向 SwiftUI、Jetpack Compose、Flutter 和 WordPress 的平台专属导出文件，这样一来 Web 和原生端用的样式数据就统一了，不用各管各的。它还不止是导出令牌：附带 CSS 健康检查、能给出通过建议的 WCAG 对比度评分、跨断点的响应式检测，还有组件结构的 React 类型描述。由于它同时以 MCP 服务器的形式提供，Claude Code、Cursor 这类编程助手可以直接拉取抽取结果，接着生成风格一致的新组件，省掉人工转录规范的功夫。