---
name: mobile-prototype
description: 移动端多页原型开发。当任务涉及移动端 / 手机端、需要多页 HTML（一个 index 入口 + 若干业务页 + plan 方案总览）、需要给老板/开发/客户演示讲解时使用。每页强制左预览右介绍结构。
---

# mobile-prototype · 移动端多页原型

## 何时触发

**主动触发**（用户说出以下任一短语，立即调用本 skill）：
- 中文：「做一套移动端原型」「做一套手机原型」「多页原型」「多页面原型」「原型套装」「需要方案总览」「需要 plan 页」「需要原型讲解」「给老板看」「评审用」「演示用」
- 英文：`mobile prototype` / `multi-page prototype`

**上下文触发**（同时满足 3 条，主动询问是否启用）：
1. 目标是移动端 / 手机端（375px 基准）
2. 涉及 ≥ 2 个 HTML 页面
3. 用途是演示 / 评审 / 讲解

**已有原型延续**（用户未明说也触发）：
- 工作目录里有 plan.html + 多页 + pi-layout 结构，新增或修改页面时主动按本 skill 规范执行

**不触发**：
- 单文件原型 → 走 `frontend-design`
- Web 桌面端 / 后台管理 → 走 `ui-ux-pro-max`
- 单纯讨论设计规范不动手 → 走 `design-system`

## 目录结构（强制）

每个原型是一个目录，放在 `prototypes/YYYY-MM/<feature-name>-v1/` 下：

```
<feature-name>-v1/
├── plan.html              # 方案总览（必须）
├── index.html             # 入口页（必须）
├── <page-2>.html          # 业务页 2
├── <page-3>.html          # 业务页 3 ...
├── styles/
│   ├── prototype-intro.css    # 介绍区样式（共享）
│   ├── plan.css               # plan.html 专用样式（共享）
│   ├── base.css               # 移动端基础样式（共享）
│   └── <page>.css             # 每页独立样式
├── scripts/
│   ├── store.js               # 跨页状态（共享）
│   ├── data.js                # 共享数据（共享）
│   └── <page>.js              # 每页独立脚本
├── TECHNICAL_PLAN.md      # 技术说明（可选）
└── .claude/launch.json    # 预览服务配置
```

**关键约定**：
- `plan.html` 固定是方案总览，从 `plan.html` 点「进入原型 →」跳到 `index.html`
- 每页一个 `.html` + 一个 `.css` + 一个 `.js`（同名）
- 共享样式 / 脚本放 `styles/` 和 `scripts/`，各页用相对路径引用

## 单页结构（左预览右介绍 · 5-section 强制）

每个业务页必须包含 4 个块：

```html
<div class="pi-layout">
  <header class="pi-header">...</header>  <!-- ① 顶部 -->
  <main class="pi-main">
    <div class="pi-phone-col">...</div>    <!-- ② 左：手机预览 -->
    <aside class="pi-intro-col">...</aside> <!-- ③ 右：介绍区 -->
  </main>
</div>
```

**5 个 section 缺一不可**（在 `.pi-intro` 内）：

1. **使用角色** — 角色 + 姓名，说清"在本页做什么"
2. **本页定位** — 一句话锚点（pi-quote），meta 解释上下游
3. **怎么用** — 3 步以内，每步一句话
4. **示例** — 具体场景 + 关键值高亮（pi-example-key）
5. **场景呼应** — 用 pi-chain 列出前后页

模板见 `templates/page.html.tpl`。

## plan.html 结构（6-section 标准）

```
Hero（方案名 + 简介 + CTA + 迷你手机缩略图）
① 背景与痛点（bullets + 方案定位锚点）
② 业务角色 · 场景 · 流程（客户类型 Tab + Mermaid 流程图）
③ 方案核心（有管线 → 公式条 + 步骤标签；否则 2×2 卡片）
④ 功能介绍（可选，优先级 Tab + 模块按钮 + 3 列功能清单）
⑤ 页面导览（grid 卡片列出所有页面）
```

模板见 `templates/plan.html.tpl`。

### 流程图节点弹窗（plan-modal）标准（4 块结构）

每个 mermaid 节点（T1/T2/T3/...）点击后弹出 Modal，必须包含 4 个固定块：

```
.plan-node-header           ① 节点头
├── .plan-node-title        {场景} · {动作}（{限制}）
└── .plan-node-badges       [角色徽章]

.plan-node-section          ② 业务场景（总分结构）
├── .plan-node-scene-lead   一句话总述（≤30 字）
└── .plan-node-scene-list   bullet 列表（≤4 条）

.plan-node-section          ③ 业务动作（总分结构 + 有序）
├── .plan-node-actions-lead 一句话总述
└── .plan-node-list         ol 有序列表（3-5 步）

.plan-node-section          ④ 功能清单（按 列表/新增/编辑/推送 4 组聚合）
└── 每项 = 状态徽章(done/pending/suggested) + 名称 + 跳转链接
```

**说明**：
- 「拍照点 / 上传点 / 扫码点」等业务特定块**不是默认 4 块之一**，只在涉及此类动作时额外加 `detail.photo`（参考 group-watermark-photo-v1 的拍照节点）
- 节点 id（T1/T2/...）必须与 `nodeDetails` 的 key 完全一致，否则点击不弹 Modal

### plan.html 内容归属表（防重复硬规则）

每条信息**只能在一个地方说**：

| 信息类型 | 唯一归属位置 | 禁止出现在 |
|---|---|---|
| 方案定位（一句话） | ① 背景与痛点的 plan-positioning | Hero 副标、方案核心、公式条下方 |
| 核心机制（管线 / 公式） | ③ 公式条 + 步骤标签 | 方案核心 4 卡、Hero、功能介绍 |
| 核心动作（非管线的用户侧保证） | ③ 方案核心 4 张卡 | ② 节点 Modal 业务动作、功能介绍 |
| 节点级动作（步骤） | ② 节点 Modal 业务动作 | ③ 方案核心、功能介绍 |
| 功能点（带状态） | ④ 功能介绍 + 节点 Modal 功能清单 | ① 背景痛点、③ 方案核心 |
| 页面跳转 | ⑤ 页面导览 | Hero、节点 Modal 内 |

违反 → 视为排版 bug，必须删一处。

### plan.html 扫读层（防写成说明书）

plan.html 给业务评审扫，不是给开发读文档。扫读层规则同 exec-briefing：一行标题，超过一句下转。

**机制 ≠ 功能卡**：方案若有管线 / 公式 / 编译关系（A + B → C），用公式条 + 三步标签画出来。禁止收成「方案核心」4 张功能卡——那会把设计思路讲普通。

**默认只留标签**：
- Hero 副标 ≤ 1 句；方案定位 ≤ 1 句
- 步骤 / 分段 / 模块：扫读层 = 编号 + 名称（+ 不超过 6 字的 who）
- 超过一句的规则用 `<details>`（class `plan-scan-chips`）或节点 Modal 下转
- 同一句定位禁止在核心区再贴一次

**4 张核心卡只用在**：4 个互不构成管线的用户侧保证。有管线时删掉这 4 卡。

公式条示例（class 见 `templates/styles/plan.css`）：

```html
<div class="plan-formula">
  <span class="plan-formula-token">输入 A</span>
  <span class="plan-formula-op">+</span>
  <span class="plan-formula-token">输入 B</span>
  <span class="plan-formula-op">→</span>
  <span class="plan-formula-token is-out">产物 C</span>
</div>
<div class="plan-scan-chips">
  <details><summary><i>1</i>画布</summary><p>一句规则。</p></details>
</div>
```

### plan.html 排版硬指标（防松散）

| 指标 | 约束值 | 检查方式 |
|---|---|---|
| 单页总长 | ≤ 1500px | DevTools 量 `body.scrollHeight` |
| Hero padding | 24px 32px（已锁定） | grep plan.css |
| Hero 标题字号 | 24px（已锁定） | grep plan.css |
| section 间距 | margin-bottom 20px（已锁定） | grep plan.css |
| 卡片行高 | line-height 1.5~1.6（不写 1.8+） | grep plan.css |

### plan.html 生成后自检 checklist

每次生成 / 修改 plan.html 后必须过：

```
□ Hero 副标 ≠ 方案定位（去重）
□ 有管线 / 公式 → 公式条，无 4 张功能卡
□ 扫读层无段落（`<details>` / 节点 Modal 里才允许一句）
□ 方案核心 4 张卡的话 ≠ 节点 Modal 业务动作（去重）
□ 流程图节点数 = nodeDetails 数据条数（id 一一对应）
□ 每个节点 Modal 4 块齐全（节点头/业务场景/业务动作/功能清单）
□ body.scrollHeight ≤ 1500px
□ 所有颜色都来自 --pi-* 变量（grep '#[0-9A-Fa-f]\{6\}' 应返回 0 或仅在 classDef 内）
```

## 设计 token（必须用 CSS 变量）

禁写死 hex，必须用：

```css
var(--pi-primary)          /* 主色 */
var(--pi-text-title/body/secondary/muted)
var(--pi-border/bg/card-bg)
var(--pi-success)
var(--pi-radius)           /* 8px */
var(--pi-space-1 ~ 6)      /* 4/8/16/24/32/48 */
var(--pi-transition)       /* 200ms ease-out */
```

## 反模式（禁止）

- ❌ placeholder.com 等占位图 → 用 CSS 几何图形
- ❌ Redux / Vuex 等状态库 → 用 store.js
- ❌ 写死 hex 颜色 → 用 CSS 变量
- ❌ 省略 5-section 任何一段
- ❌ 单页超过 500 行不拆分
- ❌ 生产级路由 → 用 location.href / location.hash
- ❌ 各页样式独立 → 必须共享 prototype-intro.css / base.css
- ❌ 写死预览端口号 → launch.json 用 `autoPort: true`（本机 9881/9882/9990 常被占用）
- ❌ Hero / 方案定位 / 核心卡 / 节点 Modal 内容重复 → 查「plan.html 内容归属表」，每条信息只能说一次
- ❌ 把管线 / 公式拆成 4 张「方案核心」卡 → 用公式条 + 步骤标签
- ❌ 扫读层堆导读段、三步各一段、分段各一句 → 默认只留标签，说明进 `<details>`
- ❌ Hero padding 40px / 标题 32px → 已锁定为 24px，禁止调大（防松散）
- ❌ 节点 Modal 缺 4 块任一块（节点头/业务场景/业务动作/功能清单） → 必须齐全

## 使用流程

### 场景 A：从零开始一套新原型

1. 用 scaffold.js 生成骨架：

```bash
node ~/.claude/skills/mobile-prototype/scaffold.js \
  --name "customer-points-v1" \
  --title "客户积分查询" \
  --pages "index:积分首页, detail:积分明细" \
  --roles "客户·小王, 客服·李婷"
```

2. 用 `frontend-design` skill 生成每页真实原型内容（在 `.pi-phone-col` 内）
3. 按 5-section 标准填 `.pi-intro` 介绍区
4. 改 plan.html 的 mermaid 流程图为实际业务流程
5. 用 preview server 在浏览器验证

### 场景 B：已有原型加新页

1. 拷贝现有页（如 camera.html）作为模板
2. 替换 `.pi-phone-col` 内的原型内容
3. 按 5-section 标准重写 `.pi-intro` 介绍区
4. 在 plan.html 的「页面导览」grid 里加一张新卡
5. 同步更新 plan.html 的 mermaid 流程图节点（新页对应的节点要能在流程图里看到）+ 在 `nodeDetails` 里加对应数据（含 4 块：节点头/业务场景/业务动作/功能清单）

### 场景 C：修改已有页

1. 直接改对应的 `.html` / `.css` / `.js`
2. 不要动共享样式（prototype-intro.css / plan.css / base.css）
3. 改完用浏览器验证

## 模板文件清单

| 文件 | 用途 |
|---|---|
| `templates/plan.html.tpl` | 方案总览骨架 |
| `templates/page.html.tpl` | 单页骨架（含 5-section） |
| `templates/launch.json.tpl` | 预览服务配置 |
| `templates/styles/prototype-intro.css` | 介绍区样式 |
| `templates/styles/plan.css` | plan.html 样式 |
| `templates/styles/base.css` | 移动端基础样式 |
| `templates/scripts/store.js` | 跨页状态层 |
| `templates/scripts/data.js` | 共享数据骨架 |