# H5 Demo Review

> H5交互Demo多视角评测技能。当用户提供H5交互Demo文件路径并要求进行体验评测、 生成修改建议、输出修改指令文档时使用此技能。 调用agent-squad小队从视觉、交互、用户旅程、逻辑一致性四个维度并行评测， 每轮生成结构化问题清单，并自动追加到项目修改指令md文件中。 支持增量迭代：每次修改后重新体验，只记录新增/残留问题，不重复已修问题。 触发关键词：体验下demo、帮我看下这个h5、评测交互、看下修改效果、 demo体验、再体验一遍、小队体验、交互评测。

- Skill: `nuonuo0518/h5-demo-review` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nuonuo0518/h5-demo-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nuonuo0518/h5-demo-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: nuonuo0518 (https://skillmd.com/u/nuonuo0518)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nuonuo0518/h5-demo-review

---


# H5 Demo 多视角评测 — SOP

> **定位**：本技能是 `agent-squad` 的专项联动场景。
> agent-squad 提供持久人格数据，本技能提供评测 SOP 和输出规范。

---

## 一、前置准备

### Step 1 — 读取 Demo 文件
读取用户提供的 HTML 文件全文（CSS + HTML 结构 + JS 逻辑全部读取）。
关键关注点：
- CSS 变量定义（色板/间距/字号）
- 页面结构（有多少个 page，导航逻辑）
- 状态管理（state 对象，各模块的数据结构）
- 渲染函数（renderXxx，了解每个视图怎么生成）
- 交互函数（点击/完成/领取等所有用户操作）
- 工具函数（toast/modal/动画等）

### Step 2 — 读取设计基调（如有）
如果项目有设计基调文件，读取它作为视觉评测的对照基准。
2KOL3 项目默认路径：`C:\Users\tiannuoxie\2kol3\H5交互demo\2kol3设计基调.md`

### Step 3 — 读取 agent-squad profiles
读取 `C:\Users\tiannuoxie\AgentSquad\profiles\` 下所有 8 个 Agent profile。

### Step 4 — 确认修改指令文档路径
询问或推断本次评测对应的修改指令 md 文件路径。
本次默认路径：`C:\Users\tiannuoxie\2kol3\designer-llm-wiki\doc\raw\design\pending\活动\demo\修改指令-活动Demo.md`

---

## 二、评测阵容分配

根据评测重点选择合适的 Agent 子集。标准阵容如下：

| Agent | 本次职责 | 核心关注维度 |
|-------|---------|------------|
| **Instinct（炽锋）** | 第一印象 + 手感 | 视觉廉价感、控制感缺失、操作节奏 |
| **Trace（拾墨）** | 细节与代码核对 | 文案精确性、实现完整度、逐条核对上轮问题 |
| **Deduce（墨隐）** | 逻辑一致性 | 状态机完整性、规则与实现的裂缝、代码漏洞 |
| **Gambit（棋落）** | 用户旅程全局 | 旅程断点、跨模块联动、长线价值 |
| **Throne（摇光）** | 成就感与激励 | 完成后的展示/反馈、成就仪式感 |
| **Toxin（蚀心）** | 信息结构漏洞 | 信息不对等、决策成本、可被优化的路径 |
| **Anvil（铁戟）** | 经验实证对比 | 同类产品对比、基本功检查、数据节奏 |
| **Tradeoff（灰弦）** | 投入产出比 | 奖励感知值、付出与回报比 |

**精简阵容（快速迭代轮，重点看修复效果）**：Trace + Instinct + Deduce 三人组，其余补充观察。

---

## 三、评测执行 SOP

### 阶段一：逐条核对上轮修复（仅第二轮起）

Trace 主导，逐条核对修改指令 md 中上一轮的问题清单：
- ✅ 已修复：确认 + 注明代码行
- ❌ 未修复：标注「仍存在」
- ⚠️ 修复方式有误：标注「修复方式待调整」+ 说明

### 阶段二：新问题发现

各 Agent 按自己的认知风格进行体验，覆盖以下检查点：

**视觉层检查点**
- [ ] 色值是否对齐设计基调
- [ ] 字号层级是否清晰（主文/次文/弱文三层）
- [ ] 图标/图形是否垂直居中、不与文字重叠
- [ ] 深色背景下文字对比度是否足够
- [ ] 动效是否因 DOM 重建而失效
- [ ] 毛玻璃层数是否合理（不超过两层）

**交互层检查点**
- [ ] 所有按钮的 hover/active/disabled 状态是否完整
- [ ] 已完成状态的可点击元素是否有 `pointer-events:none`
- [ ] 弹窗开关是否有过渡感（不能瞬间消失）
- [ ] Toast 时长是否足够（建议 2800ms+）
- [ ] 动画是否正确触发（transition 在新增 DOM 元素上需要 rAF 延迟）
- [ ] 积分/数值变化是否有动效反馈

**用户旅程检查点**
- [ ] 入口页是否有进度摘要（无需点进去就知道自己在哪）
- [ ] 活动完成后是否有「然后呢」的下一步引导
- [ ] 跨模块是否有联动（完成A模块能否影响B模块）
- [ ] 关键信息（刷新时间/规则说明）是否在用户需要时就能看到
- [ ] 翻页/切换视图是否有「出不去」的陷阱

**逻辑一致性检查点**
- [ ] 规则文案与代码逻辑是否一致
- [ ] 状态机是否完整（所有状态组合都有处理）
- [ ] DOM id 是否唯一，选择器是否会误匹配
- [ ] 初始化时状态是否正确（updateDots/updateProgress 是否在 init 时调用）
- [ ] 子视图完成操作后，返回父视图时数据是否同步更新

### 阶段三：汇总输出

格式：
```markdown
## 第N轮评测（YYYY-MM-DD HH:MM）

### ✅ 本轮已修复确认
| 条目 | 状态 |
|------|------|
| [上轮编号] 描述 | ✅ 已修复 · L行号 |

### 🐛 Bug
| # | 位置 | 问题 | 代码行 |
|---|------|------|-------|

### 🎨 视觉
| # | 位置 | 问题 |
|---|------|------|

### 🔁 交互
| # | 位置 | 问题 |
|---|------|------|

### 🗺️ 旅程
| # | 位置 | 问题 |
|---|------|------|
```

---

## 四、修改指令写入规范

评测完成后，**增量追加**到修改指令 md 文件末尾。格式：

```markdown
## 第N轮评测补充（YYYY-MM-DD）

> 上轮X条问题已全部/部分修复。以下为本轮新发现，共X条。

### 🐛 Bug 修复

**BX｜[简短标题]**

[问题描述]

[修改方案 + 代码片段]

---

### 🎨 视觉问题 / 🔁 交互问题 / 🗺️ 旅程问题
...

*第N轮补充共X条。优先处理：BX > VX > IX。*
```

**原则：**
- 每条问题带完整可用的代码片段，CC 可直接复制
- 优先级在末尾注明，最高优先级的原因简要说明
- 不重复已在之前轮次中完整写过的内容，只写增量

---

## 五、Profile 写回规则

评测完成后，**必须**写回参与 Agent 的成长日志（`C:\Users\tiannuoxie\AgentSquad\profiles\`）。

写回内容：
- 活动类型：游戏活动UI交互评测
- 角色定位：本次承担的评测维度
- 关键输出：本次发现的最有价值的问题
- 经验教训：这种评测场景下该认知风格的有效策略

写回时机：**在输出最终报告之前完成写回**，不是之后。

---

## 六、迭代节奏建议

| 阶段 | 评测深度 | 推荐阵容 |
|------|---------|---------|
| 首轮（初版体验） | 全量 8 人 | 全员 |
| 修复后复查 | 核对修复 + 新问题 | Trace + Instinct + Deduce |
| 精修轮（接近冻结） | 只找遗漏细节 | Trace + Deduce |
| 冻结确认 | 走完整流程验证 | Instinct（手感最敏感） |

---

## 七、「本次」快速上下文

> 以下为当前活跃项目的具体信息，每次调用时可用这些路径和约定。

| 项目 | 2KOL3 赛季限时活动 Demo |
|------|----------------------|
| Demo 文件 | `C:\Users\tiannuoxie\2kol3\designer-llm-wiki\doc\raw\design\pending\活动\demo\index-standalone.html` |
| 修改指令 md | `C:\Users\tiannuoxie\2kol3\designer-llm-wiki\doc\raw\design\pending\活动\demo\修改指令-活动Demo.md` |
| 设计基调 | `C:\Users\tiannuoxie\2kol3\H5交互demo\2kol3设计基调.md` |
| 历史评测轮次 | 已完成3轮（见修改指令 md） |
| 当前状态 | 核心 Bug 已清，视觉方向对齐，可演示 |