Coach Playbook

---
name: coach-playbook
description: 产品编排：面向非开发人员的「从 0 到 1」固定编排模式。当用户说「我想做一个网站 / 应用 / 小程序 / 看板 / 落地页」等想做产品的诉求时，用这个技能选择对应的固定流水线，按「澄清 → 产品体验与用户路径 → 配色与调性 → UI → 原型验证 → 实现 → 验收 → 上线」的顺序一步步带用户做出体验好的产品。Orchestration playbook for building a product end-to-end from zero.
---

# 产品编排（从 0 到 1）

非开发人员不懂「先做什么后做什么」。本技能提供**几条固定流水线**，你按选定的一条，一步步执行、每步产出可验收的结果、再用大白话向用户确认。用户只做两件事：**描述想法 + 每一步做决定/验收**。

## 何时进入本技能

用户表达「想做一个东西」（网站、应用、小程序、看板、页面、工具）时，进入本技能，先判断属于哪个模式。

## 先选模式（第 0 步，永远先做）

问清楚一件事：「你要做的东西，最接近下面哪一种？」

| 模式 | 典型诉求 | 关键词 |
| --- | --- | --- |
| A. 落地页 / 官网 / 作品集 | 展示、介绍、获客 | 官网、落地页、主页、作品集、介绍页 |
| B. Web 小工具 / 应用 | 有输入输出、有交互逻辑 | 工具、应用、计算器、生成器、记账 |
| C. 数据看板 | 看数据、图表、报表 | 看板、报表、统计、图表、后台 |
| D. 移动端 / 小程序 | 手机上用 | 小程序、App、移动端、H5 |
| E. 内容站 / 博客 / 文档 | 以内容为主 | 博客、文档、知识库、内容站 |

选错模式会浪费一整轮。判断不了就直接列 5 个选项让用户挑；模式定下来后，进入 1️⃣ 澄清段时再加载 `grill-with-docs` 追问细节（不要在选模式这一步就加载追问技能）。

## 通用流水线（八段，每段产出 + 验收）

所有模式都走这八段，只是每段的重点技能和验收标准不同。**每完成一段，用大白话汇报产出，并让用户确认/拍板后再进入下一段。每段只加载该段标注的那一个技能，一段一个、用完再进下一段，不要一次加载多个或抢跑下一段。**

| 段 | 做什么 | 用哪些技能 | 产出 |
| --- | --- | --- | --- |
| 1️⃣ 澄清（带文档） | **只问产品/需求问题**（给谁用、解决什么痛点、怎样算成功、风格偏好）；**技术/边界问题由教练判断推荐并落档，不问用户** | `grill-with-docs`（= `grilling` + `domain-modeling`） | 一句话价值主张 + 目标用户 + 成功标准 + `CONTEXT.md` 术语表 |
| 2️⃣ 产品体验 & 用户路径 | 用户怎么用、有哪些界面、关键转化；**边缘情况由教练补全并写进 ADR** | `product-designer`（+ 复杂时 `product-manager`） | 用户流程图 + 屏幕清单 + 关键路径 + 边界条件清单 |
| 3️⃣ 配色 & 调性 | 定风格方向、配色、字体 | `design-taste-frontend` + `ui-ux-pro-max` | Design Read + 配色方案 + 字体搭配 |
| 4️⃣ UI | 界面长什么样、组件、状态 | `ui-designer`（+ 动效 `motion-designer`） | 界面草图/布局 + 组件清单 + 状态 |
| 5️⃣ 原型验证（叠加设计） | 做一个**能点、能玩、有设计感**的一次性原型，让用户验证「对不对、好不好看」 | `prototype` + 叠加设计技能：`design-taste-frontend`（调性）+ `ui-ux-pro-max`（配色/字体/组件）+ `ui-designer`（布局/状态）+ `motion-designer`（动效） | 一个可运行/可预览的原型（HTML 或按项目约定） |
| 6️⃣ 实现 | 真的把代码写出来：**视觉严格还原原型**（配色/动效/效果），**逻辑可重构**以符合 mattpocock 工程规范 | `implement`（内部 `tdd` 红绿循环）+ 接口/接缝用 `codebase-design`，术语沿用 `CONTEXT.md` | 可运行的产品 |
| 7️⃣ 验收 | 逐项检查是否达标 | `code-review`（Standards + Spec 双轴，**并行子代理**）+ `web-design-guidelines` + `writing-guidelines` | 验收报告（通过/需修） |
| 8️⃣ 上线 | 发布、拿到链接；**所需账号 / Token / 域名等资源需问用户提供，技术配置由教练完成** | `deploy-to-vercel` | 可访问的链接 |

> 原型段说明：简单场景（如纯静态落地页）可把原型简化为一个静态 HTML 预览；复杂或不确定的需求**必须**做可交互原型。原型要把 3️⃣ 的配色、4️⃣ 的 UI、动效都体现出来，不是丑的线框。
>
> **原型锁视觉、逻辑可变**：验证通过后，原型的**视觉基线**（配色、字体、动效、视觉层级、间距、组件外观）在 6️⃣ 实现里必须**严格还原**；但内部逻辑、交互流程、数据结构、架构可以重写，以符合 mattpocock 工程规范。

## 各模式的差异要点

### A. 落地页 / 官网 / 作品集
- 重点段：3️⃣ 配色调性、4️⃣ UI（视觉冲击优先）、文案（`writing-guidelines`）。
- 2️⃣ 只做「单一主路径」：访客从进入 → 理解价值 → 行动（注册/联系/看作品）。
- 验收重点：首屏 3 秒讲清价值、移动端响应式、按钮/表单可达、加载快。

### B. Web 小工具 / 应用
- 重点段：1️⃣ 澄清、2️⃣ 产品体验（核心流程必须闭环）、5️⃣ 原型验证、6️⃣ 实现。
- 2️⃣ 要把「空态、输入态、加载、出错、结果」都想全；复杂交互**必须**走 5️⃣ 原型验证。
- 验收重点：核心流程能走通、边界情况不崩、有错误提示、测试通过。

### C. 数据看板
- 重点段：2️⃣ 产品体验（指标定义）、4️⃣ UI（信息密度与层级）、6️⃣ 实现（图表）。
- 2️⃣ 先定义「看什么指标、给谁看、怎么决策」，再谈图表类型（用 `ui-ux-pro-max` 选图）。
- 验收重点：一眼看懂核心指标、空数据/无权限有兜底、加载态清晰。

### D. 移动端 / 小程序
- 重点段：2️⃣ 产品体验（移动端流程更短更聚焦）、4️⃣ UI（触控目标、单手操作）。
- 4️⃣ 要盯触控目标尺寸、键盘弹出、安全区、弱网；动效用 `motion-designer`。
- 验收重点：真机/预览跑通、触控好用、多机型自适应。

### E. 内容站 / 博客 / 文档
- 重点段：3️⃣ 配色调性（阅读体验优先）、4️⃣ UI（排版层级）、文案（`writing-guidelines`）。
- 4️⃣ 以可读性优先：字号、行距、宽度、明暗模式。
- 验收重点：长文易读、目录/搜索好用、无障碍达标。

## 边界条件处理原则（重要）

非开发人员无法判断边界/边缘情况，**不要让用户去判断**。原则：

- 边界情况（空态、加载、部分数据、出错、无权限、离线、撤销、取消、返回再访、重复提交、极端输入等）由**教练判断并推荐**，写进 `CONTEXT.md` 或 ADR，作为已达成共识的假设。
- 用户只做**确认/微调**，不做开放式判断。只问用户能答的：目标、偏好、成功标准。
- 推荐边界条件要在 1️⃣ 澄清、2️⃣ 产品体验两段内完成并落档；实现时照着文档补全，不再回头问用户。
- 开发过程**必须符合 mattpocock 工程规范**：`implement` 内部走 `tdd` 红绿循环、接口与接缝用 `codebase-design`、术语沿用 `domain-modeling` 的 `CONTEXT.md`、交付前 `code-review` 双轴评审。产品决策可以「教练推荐 + 用户确认」，但**工程实现不允许省步骤、不允许跳测试、不允许跳过评审**。

## 边界条件推荐清单（第 1、2 段用，让推荐更一致）

在 1️⃣ 澄清、2️⃣ 产品体验时，对照下面清单**主动推荐并落档**，不要等用户提。用大白话写进文档：「这种场景如果 X 会怎样，我们按 Y 处理」。用户只确认，不追问。

### 通用边界条件（所有模式都要过一遍）

- 空态（没数据/没内容/首次使用）、加载中、部分数据、加载失败
- 出错（服务不可用、超时、失败重试与提示）
- 无权限 / 未登录、离线 / 弱网
- 撤销、取消、返回、二次确认（不可逆操作）
- 返回再访（记住上次状态）、重复提交（防抖/幂等）
- 极端输入：空、超长、特殊字符、非法格式、超大数值
- 时区 / 货币 / 单位 / 语言（国际化）
- 无障碍：键盘操作、读屏、对比度、`prefers-reduced-motion`
- 性能：慢加载、长列表、大图、动画卡顿
- 响应式：手机 / 平板 / 电脑、横竖屏、深色模式

### A. 落地页 / 官网 / 作品集

- 首屏在弱网下图片/视频加载失败时的兜底
- 移动端首屏布局与 CTA 可达
- 表单校验（邮箱/电话/必填）与提交失败提示
- 分享/SEO 预览（标题、描述、缩略图、社交卡片）
- 无 JS / 慢设备下的可读性

### B. Web 小工具 / 应用

- 核心流程的空态、输入态、计算中、结果为空、结果出错
- 输入校验与错误提示（逐字段、可理解）
- 重复点击提交、并发操作、中途关闭再回来
- 数据为空 / 权限不足 / 账号未登录的兜底页
- 撤销与重做（涉及破坏性操作时）

### C. 数据看板

- 无数据、部分数据缺失、数据加载失败
- 无权限查看时的兜底
- 时区、货币、单位、超大/超小数值、百分比与绝对值的误读
- 筛选后无结果、图表渲染失败、日期区间非法
- 加载态与骨架屏（避免布局跳动）

### D. 移动端 / 小程序

- 触控目标尺寸、单手可达性
- 键盘弹出遮挡输入框、安全区（刘海/底部）
- 弱网 / 离线、首次启动慢、资源加载失败
- 多机型 / 横竖屏 / 深色模式适配
- 权限拒绝（相机/定位/通知）、系统返回手势、后台切换恢复

### E. 内容站 / 博客 / 文档

- 长文排版与阅读宽度、空目录/无搜索结果
- 图片懒加载失败、外链失效、代码块超宽换行
- 打印样式、明暗模式、无障碍（读屏顺序、焦点）
- 搜索无结果时的建议、旧链接重定向（404）

## 验收清单（第 7 段通用，按模式取用）

交付前逐项确认，任何一项不过就回到对应段修，不要带病上线：

- [ ] **功能**：核心用户路径从头到尾能走通（`code-review` 的 Spec 轴）
- [ ] **体验**：关键界面有清晰层级、状态齐全（空/加载/错/成功）（`web-design-guidelines`）
- [ ] **配色**：配色统一、对比度达标、符合调性（`web-design-guidelines` 无障碍轴）
- [ ] **文案**：文字清晰、无错别字、术语有解释（`writing-guidelines`）
- [ ] **响应式/适配**：手机和电脑都能用
- [ ] **代码质量**：无低劣实现、通过测试（`code-review` 的 Standards 轴）

## 铁律

- **先选模式，再动手；每段产出，先验收，再下一段。** 不跳段、不合并段。
- **用户拍板才前进。** 每段结束把「产出 + 下一步」用大白话讲给用户，等确认。
- **先产品、再界面、再原型、后实现。** 2️⃣ 没定清楚绝不跳 4️⃣；4️⃣ 没定稿绝不跳 6️⃣ 实现；复杂/不确定的需求必须先过 5️⃣ 原型验证。
- **原型锁视觉、逻辑可变。** 6️⃣ 实现必须严格还原 5️⃣ 原型的视觉（配色/字体/动效/间距/组件外观）；内部逻辑、交互、架构允许重写以符合 mattpocock 工程规范。
- **产品决策教练推荐、用户确认；工程实现严格遵循 mattpocock 规范**（tdd → code-review 一环不能少）。
- 全程中文大白话；技术名词第一次出现给一句解释；不让用户接触底层复杂度。