Manavarya09/design-extract

解决的问题

designlang 是一个从任意实时网站中提取完整设计系统的工具。它通过程序化读取 DOM，消除手动重建样式、令牌和布局的工作量，自动生成开发者可用的资产，如 Tailwind 配置、Figma 变量和 React 组件模板。

工作原理

该工具使用无头浏览器（Chromium）分析 URL 的实时 DOM。它提取颜色、排版、间距和动效，并可爬取多个页面，合成一个统一且去重的设计系统。同时，它还分析布局模式、四个断点下的响应式行为以及交互状态（悬停/聚焦/激活）。

适用人群

需要克隆、复现或分析现有网站设计语言的前端开发者、UI/UX 设计师以及 AI 编码代理，以加速开发或确保视觉一致性。

主要亮点

• 全面输出：生成超过 17 个文件，包括 W3C DTCG 令牌、Tailwind 配置、shadcn 主题和 Figma 变量。
• 保真度测量：通过像素差异和动效分析，将克隆站点与原始站点进行对比，提供 0-100 分的评分和排序后的修正方案。
• 设计 DNA：在颜色、字体、空间、形状、动效五个维度上，将设计与其它系统进行对比，确定其在设计空间中的相对位置。
• AI 集成：以 Claude Code 插件和 MCP 服务器形式提供，允许 AI 代理直接访问设计令牌和组件。
• 高级提取：捕捉运行时动效（交错、编排、滚动配方）和 WCAG 对比度评分，支持无障碍访问。
• 全站合成：爬取多个页面，基于覆盖率将站点级令牌与页面级选择分离开来。