design-extract
design-extract 是一个专门抓取网站设计系统的工具。
design-extract 是一个专门抓取网站设计系统的工具。你只需输入一条命令，它就能自动分析目标网站的视觉规范，比如颜色、字体、间距、圆角等，并把它们整理成标准化的设计令牌（DTCG tokens）。这些令牌分为原始、语义和复合三层，方便在不同场景下使用。它还内置了 MCP 服务器，能直接接入 Claude Code、Cursor 或 Windsurf，让 AI 助手在你编码时随时调用这些设计数据。
除了提取，它还能生成多平台代码。比如把设计系统输出为 iOS 的 SwiftUI、Android 的 Compose、Flutter 或 WordPress 样式，也支持 Tailwind v4 配置、Figma variables 和 shadcn/ui 组件。这意味着你可以把一个网站的设计风格快速复制到自己的项目中，无需手动对照设计稿。
它还附带 CSS 健康审计和 WCAG 无障碍修复功能，可以检查现有样式的问题并给出改进建议。对于前端开发者、设计系统维护者或需要快速搭建一致界面的团队来说，这个工具能大幅提升效率，解决多平台设计不一致、手工维护成本高的问题。即使你不太懂技术，也能借助 AI 生态轻松上手。