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 子集。标准阵容如下：

精简阵容（快速迭代轮，重点看修复效果）：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 时调用）
• 子视图完成操作后，返回父视图时数据是否同步更新

阶段三：汇总输出

格式：

## 第N轮评测（YYYY-MM-DD HH:MM）

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

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

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

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

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

四、修改指令写入规范

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

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

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

### 🐛 Bug 修复

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

[问题描述]

[修改方案 + 代码片段]

---

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

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

原则：

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

五、Profile 写回规则

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

写回内容：

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

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

六、迭代节奏建议

七、「本次」快速上下文

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