Manavarya09/design-extract

解决的问题

designlang 是一个通过分析 DOM 从任意实时网站提取完整设计系统的工具。它解决了从实时网站手动重建设计令牌、布局和品牌指南的难题，为开发者和设计师提供了一种程序化方式，用于克隆或分析网站的视觉身份。

工作原理

该工具使用无头浏览器（Chromium）访问指定 URL，并直接从实时 DOM 中读取设计系统。它分析多个断点下的颜色、排版、间距、动效和布局模式。可爬取多个页面，合成一个统一且去重的设计系统，并能通过像素差异和动效分析，衡量克隆版本与原始网站的「保真度」。

适用人群

• 前端开发者：可基于实时网站快速生成 Tailwind 配置、shadcn 主题或 Next.js 起步模板。
• UI/UX 设计师：可从现有网站中提取 Figma 变量和品牌指南。
• AI 代理：通过 MCP 服务器或 Claude Code 插件，代理可程序化访问设计令牌和组件，以构建或重制网站。

主要亮点

• 全面提取：输出 17+ 个文件，包括 DTCG 令牌、Tailwind 配置、Figma 变量和类型化 React 组件结构。
• 保真度测量：以 0–100 分评分克隆版本与原始版本的匹配度，并提供视觉和动效准确性的排序修正方案。
• 设计 DNA：基于颜色、字体、间距、形状、动效五个维度，将设计与其它系统对比，确定其在设计空间中的相对位置。
• 全站分析：爬取多个页面，区分站点级令牌与页面级选择。
• 代理集成：以 Claude Code 插件和 MCP 服务器形式提供，可无缝集成到 AI 编码工具中。
• 高级视觉捕捉：捕获交互状态（悬停/聚焦）、WCAG 对比度评分以及复杂动效编排。