- name
- ui-prototype-generator
- description
- 从参考图片或描述生成交互式原型。默认输出 HTML 格式，仅在用户明确要求时使用 Figma。支持 (1) 用于网页预览和测试的 HTML 原型，(2) 通过 API 生成 Figma 设计文件用于设计交接和协作，(3) 基于组件架构的可复用 UI 元素，(4) 响应式布局和交互状态，(5) 基于反馈的快速迭代。
UI 原型生成器
将参考图片或描述转化为交互式原型。默认：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文件 - 提供使用说明
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UI 原型</title>
<style>
:root {
--primary: #1890ff;
--text-dark: #333;
}
/* 完整的 CSS 实现 */
</style>
</head>
<body>
<!-- 语义化 HTML 结构 -->
</body>
</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.htmlFigma 生成器（按需）
位置：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 组件
Figma 组件
格式决策树
用户请求
↓
包含 "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 是否嵌入在
<style>中 - 非响应式：添加 viewport meta 标签
Figma 问题
- 认证失败：检查 auth-profiles.json 中的令牌
- API 错误：验证令牌权限
- 导入失败：使用捆绑的 Figma 插件
迁移：HTML 到 Figma
如果用户有 HTML 并想要 Figma：
- 解析 HTML 结构
- 提取 CSS 样式
- 转换为 Figma 节点
- 调用 Figma API
- 提供 Figma URL
脚本：scripts/html_to_figma.py