Proto Builder — 产品原型生成器

生成可交互的单文件 HTML 原型，含完整 Mock 数据，零依赖，可直接在浏览器打开或部署为网站。

核心原则

有数据，不留空 — 所有列表、表格、图表必须内置 Mock 数据，禁止空状态
交互真实 — 按钮点击、Tab 切换、弹窗、抽屉、表单校验必须可用
中后台优先 — 默认布局：左侧导航 + 顶部 Header + 内容区，Ant Design 视觉语言
自包含 — 所有 CSS/JS 内联，允许使用 CDN（Ant Design Vue / ECharts / Tailwind）
可迭代 — 代码结构分区清晰，修改定位到具体区块

工作流程

Step 1：解析输入

根据输入类型处理：

输入类型	处理方式
文字描述	提取：页面类型、核心功能模块、关键数据字段、交互行为
草图 / 手绘照片	识别布局区域、组件位置、标注文字，映射到标准组件
截图参考	提取视觉风格、颜色、组件类型，忠实还原布局
Figma / MasterGo 链接	用 `web_fetch` 抓取公开预览页，提取组件和布局信息

必须明确的信息（缺失时主动询问，但不超过 2 个问题）：

页面类型（列表页 / 详情页 / 表单页 / 大屏 / 工作台 / 流程页）
核心数据实体（用户、订单、商品、任务等）

Step 2：确定风格

详细风格 Token 见 references/design-tokens.md。

用户描述	使用风格
默认 / 未指定	`ant-design`（蓝白，专业中后台）
暗色 / 深色 / 程序员	`dark-pro`（深色背景，开发工具感）
简洁 / 轻量 / 现代	`light-minimal`（浅灰底，留白多）
企业 / 政务	`enterprise`（深蓝主色，稳重）
数据大屏 / BI	`data-screen`（深色 + 霓虹，图表导向）

风格可在任意迭代轮次切换，只需替换 CSS Variables 区块。

Step 3：选择页面类型与组件

详细组件规范见 references/components.md。

常用页面类型：

列表页：搜索栏 + 操作按钮 + 表格 + 分页
详情页：面包屑 + 信息卡片 + Tab + 操作区
表单页：分步表单 / 分组表单 + 验证 + 底部操作
工作台：统计卡片 + 快捷入口 + 动态列表 + 图表
大屏 / BI：全屏布局 + 多图表 + 实时数据

Step 4：生成原型

文件结构：

<!DOCTYPE html>
<html>
<head>
  <!-- CDN：按需选用 -->
  <!-- Ant Design Vue 3（完整组件库）：
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
  -->
  <!-- ECharts（图表）：
    <script src="https://unpkg.com/echarts@5/dist/echarts.min.js"></script>
  -->
  <!-- 如不用 Vue，用原生 JS + 内联 CSS 实现交互 -->
  <style>
    /* === CSS Variables（风格 Token）=== */
    /* === Layout === */
    /* === Components === */
    /* === Animations === */
  </style>
</head>
<body>
  <!-- 左侧导航 -->
  <!-- 顶部 Header -->
  <!-- 内容区 -->
  <script>
    // Mock 数据
    // 交互逻辑（Tab/弹窗/抽屉/表单）
    // 图表初始化
  </script>
</body>
</html>

Mock 数据规范：

表格：至少 8 条记录，含不同状态（正常/警告/禁用）
图表：至少 7 个数据点，趋势有起伏（不要全是上涨）
用户名：用真实感中文名（李明、王芳、张伟等）
时间：用相对时间（"2小时前"、"昨天 14:30"）
数字：有量级差异，不要都是整数

交互必须可用：

导航菜单：点击切换高亮 + 内容区变化
表格操作：编辑弹窗 / 删除确认 / 状态切换
弹窗 / 抽屉：打开 + 关闭 + 表单提交
搜索：输入后过滤表格数据
Tab：切换内容区域

Step 5：保存与输出

# 保存到 workspace
~/.openclaw/workspace/prototypes/[页面名称]-proto.html

告知用户：

文件路径
发布方式（见下方）
下一步迭代指引

发布方式：

💡 本地：双击 HTML 文件，浏览器直接打开 💡 免费托管：

Netlify Drop — 拖拽 HTML 文件即可，1分钟上线

Vercel — 支持 GitHub 自动部署

GitHub Pages — 免费静态托管

CodeSandbox — 在线编辑+预览+分享链接

Step 6：迭代修改

用户提出修改时，定位到具体区块，不重写整个文件：

修改类型	定位方式
换整体风格	只改 `/* CSS Variables */` 区块
增加字段/列	定位到 Mock 数据数组 + 表头定义
改交互逻辑	定位到 `<script>` 中对应函数
新增页面/Tab	在导航菜单 + 内容区分别添加对应区块
改文案/标签	定位到 HTML 文本节点

迭代原则：

每次迭代前复述理解："你想要 [X]，我会修改 [Y 区块]，确认吗？"
超过 3 处修改时，一次性完成，不要反复来回
保留之前迭代的所有功能，不退化

快速参考

详细规范分别见：

风格 Token 代码：references/design-tokens.md
组件交互代码：references/components.md
Mock 数据模板：references/mock-data.md

proto-builder