designlang

designlang 是一款强大的 CLI 工具，它使用无头浏览器（Playwright）爬取任何网站，从实时 DOM 中提取所有计算后的样式、布局模式、动效语言及品牌语调。不同于仅提取颜色和字体的传统工具，designlang 能生成 17+ 种输出文件，包括针对 AI 优化的 Markdown、Tailwind/Shadcn/Figma 配置、React 组件骨架以及可直接用于 v0/Cursor/Lovable 的提示包。

其核心突破在于 v10 版本的“意图发布”：它不仅捕获网站的“外观”，更通过 LLM 辅助理解网站的“本质”（页面意图、区块角色、材质语言），让 AI 能够忠实地重建而非仅仅重新样式化。

核心亮点

1. 语义意图与区块角色 (v10)

• 页面意图分类：自动识别 URL 类型（落地页、定价页、文档、博客、仪表盘等），附带置信度分数。
• 区块角色标记：为每个语义区域分配角色（Hero, Feature-grid, CTA, Footer 等），并提取阅读顺序和关键文案。
• 多页面一致性报告：通过 --full 模式自动发现并爬取规范页面，生成跨页面设计一致性分析（共享令牌、Jaccard 分数）。

2. 深度视觉 DNA 提取

• 材质语言分类：识别玻璃态、新拟态、扁平、粗野主义、Material You 等视觉风格。
• 图像风格指纹：分析图片是摄影、3D 渲染、等距插画还是渐变网格，并记录宽高比与圆角特征。
• 组件库检测：自动识别 shadcn/ui, Radix, MUI, Ant Design, Tailwind UI 等主流库，提供证据支持。

3. 动效与交互捕获 (v9)

• 动效语言：提取时长语义令牌（xs/sm/md/lg）、缓动曲线（spring, ease-out）、滚动联动动画及关键帧类型。
• 交互状态记录：编程式触发悬停（Hover）、聚焦（Focus）、激活（Active）状态，捕获真实的样式过渡。
• 响应式多断点：在 4 种视口下并行爬取，精确映射不同屏幕尺寸下的布局变化。

4. AI Agent 就绪输出

• 提示包 (Prompt Pack)：生成 *-prompts/ 目录，内含专为 v0, Lovable, Cursor, Claude Artifacts 优化的提示文件。只需一次粘贴，即可让 AI 重建高保真界面。
• MCP 服务器支持：通过 designlang mcp 将提取的设计数据暴露为 MCP 资源，供 Cursor、Claude Code 等智能体直接调用。
• 组件解剖骨架：生成带类型的 React/TSX 存根 (*-anatomy.tsx)，包含插槽、变体与状态矩阵。

快速开始

1. 基础使用

无需安装，直接使用 npx：

npx designlang https://stripe.com

2. 完整提取（推荐）

获取多页面一致性报告、Logo、提示包及所有高级特性：

npx designlang https://stripe.com --full

3. 智能模式（LLM 辅助）

当启发式分类置信度低时，调用 LLM 进行优化（需设置 OPENAI_API_KEY 或 ANTHROPIC_API_KEY）：

npx designlang https://example.com --smart

4. 作为 Agent Skill 安装

适用于 Claude Code, Cursor, Codex 等：

npx skills add Manavarya09/design-extract

输出文件概览

运行后，你将获得一个包含以下文件的文件夹：

高级功能命令

为什么选择 designlang？

1. 超越表面：不仅提取颜色，更提取布局系统（Grid/Flex）、动效语言和品牌语调。
2. 真实交互：程序化触发 Hover/Focus 状态，捕获真实的过渡效果，而非静态截图。
3. 多平台支持：一次运行，额外输出 iOS SwiftUI, Android Compose, Flutter 及 WordPress 主题文件。
4. AI 原生：生成的 Markdown 和 Prompt 包专为 LLM 理解优化，极大降低 AI 重建 UI 的幻觉率。
5. 工程化集成：支持 Lint、Drift 检测及 GitHub Actions 集成，将设计系统纳入 CI/CD 流程。