将参考图片或描述转化为交互式原型。默认：HTML 格式。仅在用户明确要求时使用 Figma。

输出格式选择

默认：HTML 格式

使用场景：用户未指定格式或泛称"原型"时

• 基于浏览器的网页预览
• 交互元素（悬停、点击、表单验证）
• 可通过文件或 URL 轻松分享
• 快速迭代和修改
• 无需外部工具

可选：Figma 格式

使用场景：用户明确提到 "Figma"、"设计文件" 或 "给设计师"

• 与 UI/UX 团队的设计交接
• 在 Figma 生态系统中协作
• 设计系统文档
• 需要 Figma API 访问令牌

快速开始

HTML 原型（默认）

• 分析参考 → 2. 生成 HTML → 3. 交付文件

用户："从这个截图创建原型"
→ 生成 HTML 文件（默认）

Figma 原型（按需）

• 检查认证 → 2. 分析参考 → 3. 调用 Figma API → 4. 返回文件 URL

用户："从这个截图创建 Figma 原型"
→ 使用 Figma API（明确请求）

核心能力

1. 界面分析

• 解析截图提取 UI 组件
• 识别设计模式和布局
• 提取调色板和字体
• 识别间距和网格系统

2. HTML 原型生成（默认）

• 语义化 HTML5 结构
• 现代 CSS（Flexbox、Grid）
• 交互状态和动画
• 响应式设计
• 独立的单文件

3. Figma 设计生成（按需）

• 基于 API 的自动化创建
• 组件和样式生成
• 自动布局配置
• 设计系统结构

4. 组件库

• 表单、表格、导航
• 模态框、卡片、按钮
• 状态徽章和指示器
• 工具提示和弹出框

工作流程

工作流程 1：HTML 原型（默认）

触发条件：用户未指定格式提供参考

用户："从这个图片创建原型"
        ↓
[默认] 生成 HTML
        ↓
保存到工作区
        ↓
提供文件路径

处理流程：

• 分析参考图片
• 提取设计令牌（颜色、字体、间距）
• 创建语义化 HTML 结构
• 使用变量实现 CSS
• 添加交互状态
• 保存为 .html 文件
• 提供使用说明

示例：

工作流程 2：Figma 原型（仅明确请求）

触发条件：用户明确提到 "Figma"、"设计文件" 或 "给设计师"

用户："创建 Figma 原型" / "在 Figma 中制作"
        ↓
检查 Figma 认证 (auth-profiles.json)
        ↓
[如果认证存在] 调用 Figma API
        ↓
生成设计文件
        ↓
返回 Figma 文件 URL

处理流程：

• 检查认证：

   # 从 auth-profiles.json 读取
   auth = load_auth_profile('figma')
   if not auth:
       prompt_user_for_figma_token()
   

• 分析参考（与 HTML 工作流程相同）

• 转换为 Figma 节点：

   {
     "type": "FRAME",
     "name": "Header",
     "width": 1440,
     "height": 50,
     "fills": [{"type": "SOLID", "color": {"r": 0, "g": 0.08, "b": 0.16}}]
   }
   

• 调用 Figma API：

   headers = {"X-Figma-Token": auth['access_token']}
   response = requests.post(
       "https://api.figma.com/v1/files",
       json={"name": "Prototype", "nodes": nodes},
       headers=headers
   )
   

• 返回 Figma URL：

   https://www.figma.com/file/[FILE_ID]/Prototype
   

认证

Figma API 访问令牌

存储位置：auth-profiles.json

格式：

{
  "profiles": {
    "figma": {
      "provider": "figma",
      "access_token": "figd_xxxxxxxxxxxxxxxx",
      "token_type": "Bearer",
      "created_at": "2024-01-15T10:30:00Z"
    }
  }
}

设置流程：

• 用户请求 Figma 原型
• 检查 auth-profiles.json 中是否存在令牌
• 如果缺失，引导用户：

- 访问 figma.com → 设置 → 个人访问令牌 - 生成新令牌 - 向智能体提供令牌

• 安全保存令牌
• 继续 API 调用

脚本和工具

HTML 生成器（默认）

位置：scripts/html_generator.py

用法：

python3 scripts/html_generator.py --input reference.png --output prototype.html

Figma 生成器（按需）

位置：scripts/figma_generator.py

用法：

export FIGMA_ACCESS_TOKEN=$(cat auth-profiles.json | jq -r '.profiles.figma.access_token')
python3 scripts/figma_generator.py --input reference.png --name "My Prototype"

Figma 插件（捆绑）

位置：plugins/figma-plugin/

用途：将生成的设计导入 Figma

安装：

• 打开 Figma → 插件 → 开发 → 从清单导入插件
• 选择 plugins/figma-plugin/manifest.json
• 使用插件导入生成的 JSON

组件库

HTML 组件

参见 HTML_COMPONENTS.md

Figma 组件

参见 FIGMA_COMPONENTS.md

格式决策树

用户请求
    ↓
包含 "Figma" 或 "设计文件"？
    ↓ 是                           ↓ 否
使用 Figma API                   默认：HTML
    ↓                               ↓
检查认证                        生成 HTML
    ↓                               ↓
[如果认证正常]                  保存 .html 文件
调用 API                        在浏览器中打开
    ↓                               ↓
返回 Figma URL                  完成

最佳实践

HTML 原型

• 独立的单文件
• 嵌入式 CSS 和最小化 JS
• 语义化 HTML 结构
• 移动端响应式
• 跨浏览器兼容

Figma 原型

• 有组织的图层结构
• 命名组件和样式
• 自动布局以提高灵活性
• 设计系统令牌
• 适当的约束

示例

示例 1：HTML 原型（默认）

输入：管理后台截图 输出：admin-dashboard.html 结果：在浏览器中打开，完全可交互

示例 2：Figma 原型（明确请求）

输入："为这个表单创建 Figma 原型" 流程：

• 在 auth-profiles.json 中检查 Figma 令牌
• 生成 Figma 兼容的 JSON
• 调用 Figma API
• 返回：https://figma.com/file/abc123/Form-Prototype

故障排除

HTML 问题

• 无法渲染：检查浏览器控制台错误
• 样式损坏：验证 CSS 是否嵌入在