.claude/skills/d8d-dev/journey-mode.md

@@ -305,7 +305,7 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
 | 验证页面内容 | browser_snapshot | curl GET | 用户看到的是渲染后的页面 |
 | 等待响应/跳转 | browser_wait_for | — | 等待页面状态变化 |
 | 验证数据状态 | browser_evaluate 或 curl（均可） | — | 数据断言允许 curl 补充 |
-| 保存证据 | browser_take_screenshot | — | 每条旅程至少 1 张截图 |
+| 保存证据 | browser_take_screenshot | — | ⛔ 每个用户步骤完成后必须截图。filename 必须以 "tests/e2e/screenshots/" 开头且以 ".png" 结尾 |
 | 检查网络请求 | browser_network_requests | — | 每条旅程至少 1 次检查 |
 
 #### 禁止行为（⛔ 检测即阻断）
@@ -315,7 +315,8 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
 - ❌ 用 `curl POST /api/xxx` 替代 browser_click 提交表单
 - ❌ 操作无反应时不检查页面提示就猜测原因
 - ❌ 表单校验阻止时直接用 API 绕过（必须先尝试通过 UI 解决：browser_snapshot 读提示 → 按提示补充填写/browser_file_upload）
-- ❌ 跳过 browser_take_screenshot（每条旅程必须截图）
+- ❌ 跳过任何用户步骤的 browser_take_screenshot（⛔ 每个用户步骤完成后必须立即截图，不是只在旅程结束时）
+- ❌ browser_take_screenshot 的 filename 不以 "tests/e2e/screenshots/" 开头或不以 ".png" 结尾
 - ❌ 跳过 browser_network_requests 检查
 - ❌ 整条旅程只用 curl 而不用任何 Playwright 工具
 
@@ -329,8 +330,9 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
 2. ✅ 每个用户点击使用 browser_click（非 curl）
 3. ✅ 每个表单填写使用 browser_type（⛔ 仅此一个，失败 = Bug → AUTO-FIX，禁止用 browser_run_code 绕过）
 4. ✅ 页面内容验证使用 browser_snapshot（非 curl GET）
-5. ✅ 旅程结束时 browser_take_screenshot
-6. ✅ 旅程结束时 browser_network_requests
+5. ✅ 每个用户步骤完成后立即 browser_take_screenshot（⛔ 不是只在最后截一张）
+6. ✅ browser_take_screenshot 的 filename 格式为 "tests/e2e/screenshots/journey-epic-{N}-{M}-step{S}.png"
+7. ✅ 旅程结束时 browser_network_requests
 
 ### ⛔ 真实用户完成规则（Real User Completion Rule）
 
@@ -343,6 +345,8 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
 ⛔ **执行前必须对照检查清单**（违反 = 错误，必须纠正后继续）：
 - [ ] `browser_snapshot` = DOM 结构快照（找元素用），**不是**视觉验证
 - [ ] `browser_take_screenshot` = PNG 截图保存（用于视觉验证），**每个步骤必须**
+- [ ] 截图文件名**必须**包含 `.png` 扩展名（`journey-epic-N-M-step-S.png`）
+- [ ] 截图**必须**保存到 `tests/e2e/screenshots/` 目录，不能保存到当前工作目录
 - [ ] 每个用户步骤完成 → `browser_take_screenshot` + `analyze_image` → 视觉验证关卡
 - [ ] 旅程最终完成 → `browser_take_screenshot` 最终截图 + `browser_network_requests` 资源检查
 - [ ] 违反任意一条 → 中断补全，不能继续
@@ -363,7 +367,7 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
      - 标记步骤 FAIL（用户无法从此页面继续操作）
      - `browser_evaluate` 执行 FAIL #5 诊断（检查 interactiveCount / frameworkMounted — 见 auto-fix-engine.md）
      - 按诊断结果分流 → AUTO-FIX 或 AUTO-IMPLEMENT
-   - ⛔ **起始页视觉验证**: browser_take_screenshot（journey-epic{N}-{M}-step0.png）+ analyze_image
+   - ⛔ **起始页视觉验证**: browser_take_screenshot → filename: "tests/e2e/screenshots/journey-epic-{N}-{M}-step0.png", type: "png" + analyze_image
    - 循环每个用户步骤（步骤编号 S = 1, 2, 3...）:
      a. browser_snapshot → 找到目标元素
      b. browser_click / browser_type / browser_run_code → 执行操作（⛔ 禁止用 curl 替代）
@@ -371,7 +375,7 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
      d. browser_snapshot → 验证操作结果（⛔ 禁止用 curl GET 替代）
      e. ⛔ **视觉验证关卡**（⛔ 强制 — Read fully and follow: ./visual-verification.md）
         此关卡为独立步骤，不是子步骤。每个用户步骤完成后必须通过此关卡才能继续。
-        1. browser_take_screenshot → 保存到 tests/e2e/screenshots/journey-epic{N}-{M}-step{S}.png
+        1. browser_take_screenshot → filename: "tests/e2e/screenshots/journey-epic-{N}-{M}-step{S}.png", type: "png"
         2. analyze_image → 使用 visual-verification.md 中的标准提示词
         3. 结果记录到 pipeline-state.yaml 的 verification_detail（含 analyze_image_executed: true）
         4. 视觉验证 FAIL → 按分流规则处理（见 auto-fix-engine.md + iron-laws.md 检测即阻断表）
@@ -505,7 +509,7 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这
         不满足（仅 Toast 拦截但无"可选"声明）→ 普通 FAIL #12 → 按提示补填继续
 
 3. 证据阶段（⛔ 强制，不得跳过）:
-   - browser_take_screenshot → 保存最终截图到 tests/e2e/screenshots/journey-epic{N}-{M}-final.png
+   - browser_take_screenshot → filename: "tests/e2e/screenshots/journey-epic-{N}-{M}-final.png", type: "png"
    - browser_network_requests(static=false) → 检查无 localhost API 调用
    - ⛔ **资源加载状态检查**（新增 — 每条旅程必须执行）:
      - `browser_network_requests(static=true, filter="\\.(jpg|jpeg|png|gif|webp|svg|mp4|webm|mov)$")`

.claude/skills/d8d-dev/validation-mode.md

@@ -354,7 +354,7 @@ echo "placeholder_functions=$PLACEHOLDER_COUNT"
   - 关卡未通过 → 按分流规则处理，不得进入下一个操作
 
 #### 步骤 5: 最终截图保存（Story 涉及前端页面时）
-- 保存最终状态截图到 `tests/e2e/screenshots/story-x-y.png`
+- browser_take_screenshot → filename: "tests/e2e/screenshots/story-{x}-{y}.png", type: "png"
 - 管理后台和小程序分别截图时使用不同后缀：
   - `story-x-y-admin.png`（管理后台页面）
   - `story-x-y-mini.png`（小程序页面）