这个项目能做什么

designlang（仓库 manavarya09/design-extract，npm 包 designlang）是一款基于 MIT 许可的开源 CLI 工具，依赖 Node 20+ 环境。它利用无头浏览器从任意在线网址中提取设计系统，并向 ./design-extract-output 目录输出 17 个以上的文件。其中包括包含 19 个部分的编程语言风格 Markdown 文档、具备原始层、语义层和组合层的 W3C DTCG 设计令牌、Tailwind 配置文件、shadcn/ui 主题变量、Figma Variables JSON、CSS 自定义属性、带类型定义的 React 组件骨架代码、运动令牌、品牌语音 JSON，以及可直接粘贴至 v0、Lovable、Cursor 和 Claude Artifacts 的使用提示词。它还写入 MCP 服务器负载，并可作为 MCP 服务器运行。 除了单页令牌提取之外，它还提供布局系统捕获（网格、Flex、容器宽度、间距）、在四个断点下的响应式爬取、交互状态捕获（悬停/焦点/激活态）、通过 document.getAnimations() 进行的运行时运动捕获（含持续时间、编曲/交错及滚动配方）、多页面爬取中的共享与路由特定令牌合并、具有修复配色建议的 WCAG 2.1 对比度评分、Z-index 映射、渐变检测、SVG 图标去重、字体文件检测、图像风格分类、堆叠指纹识别、CSS 健康审计、语义区域分类（导航、主视觉、定价、用户评价、行动号召、页脚），以及可复用组件聚类。 命令包括： - designlang URL：执行完整提取； - site：扫描整个网站的规范系统及一致性评级； - grade：生成可分享的 HTML 成绩单和 SVG 徽章； - battle：进行两两对决评级； - remix：使用粗野主义、瑞士派、装饰艺术、赛博朋克、柔顺 UI、编辑风格等词汇表进行重新设计； - pack：捆绑输出内容； - theme-swap：围绕新主色调对 OKLCH 色相进行旋转； - brand：生成包含 13 章内容的品牌指南手册； - pair：融合两种设计风格； - dna：在设计库中将某个设计置于含 30 项特征的测量空间内； - dna-corpus：构建自定义参考语料库； - fidelity：通过视觉和运动表现对克隆版本进行评分并提供修正方案； - gallery：构建静态画廊； - clone：生成 Next.js 启动项目； - apply：将令牌写入自动检测到的框架； - drift、lint 和 visual-diff：提供符合 CI 就绪标准的检查； - sync、history、watch 和 diff：用于监控和比较。 多平台发射器还涵盖 iOS SwiftUI、Android Compose、Flutter 和 WordPress 的输出支持。配套的 Chrome 扩展（MV3 标准，activeTab）提供一键交接功能。它可以通过 npm 全局安装，也可以作为代理技能添加，同时附带支持斜杠命令的 Claude Code 插件。可选的 --smart 分类功能可以使用 Atlas Cloud 或现有的 OpenAI/Anthropic API 密钥。自述文件指出，站点提取的核心操作是确定性的且免费，并且设计评分会避免用估算值替代缺失的测量数据。这是一个设计与开发者工具类项目，适用于设计系统审计、令牌生成、无障碍审查、设计转代码工作流以及克隆保真度测量等场景。