From a4a9f6d58ae125c22c1c4e62a172fe925f50ac7d Mon Sep 17 00:00:00 2001 From: zyh Date: Tue, 14 Apr 2026 12:40:08 +0000 Subject: [PATCH] =?UTF-8?q?sync:=20=E6=96=B0=E5=A2=9EPNG=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E9=AA=8C=E8=AF=81=E6=A3=80=E6=9F=A5=E3=80=81=E9=80=90=E9=A1=B5?= =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E4=BB=BB=E5=8A=A1=E3=80=81=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=90=8C=E6=AD=A5=E9=98=B6=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/skills/d8d-dev/journey-mode.md | 34 +++++++++---------- .../skills/d8d-dev/visual-diff-mode-pencil.md | 14 +++++++- .claude/skills/d8d-requirements/workflow.md | 11 ++++-- 3 files changed, 38 insertions(+), 21 deletions(-) diff --git a/.claude/skills/d8d-dev/journey-mode.md b/.claude/skills/d8d-dev/journey-mode.md index d10e38f..6f529bf 100644 --- a/.claude/skills/d8d-dev/journey-mode.md +++ b/.claude/skills/d8d-dev/journey-mode.md @@ -178,7 +178,7 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这 ### 验收标准 - [ ] {具体可量化的断言1} - [ ] {具体可量化的断言2} -- [ ] {全程使用自然导航路径} +- [ ] 全程使用自然导航路径 ``` ### 旅程来源优先级 @@ -505,10 +505,10 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这 - 修复失败 → 标记 journey-step-fail → 继续下一步骤 - 步骤 4（修复阶段）仅处理功能断言 FAIL，不处理视觉验证 FAIL f. 如涉及数据变化 → browser_evaluate 或 curl 验证数据（✅ 允许 curl 补充） - + 6. ⛔ **旅程步骤原型/Pencil 视觉对比验证**（⛔ 强制 — 针对操作时产生的动态状态） 目的: 捕获并验证操作时才会出现的视觉状态（hover、选中、弹窗、展开、加载中、错误提示等），这些状态在静态原型对比中无法覆盖 - + 触发条件（满足任一即执行）: - 当前步骤操作后出现了弹窗/Modal/对话框 - 下拉菜单/Select/日期选择器展开 @@ -519,14 +519,14 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这 - 页面切换/跳转后的首屏渲染完成 - 出现了错误提示/Toast/Notification - 折叠面板展开/收起状态变化 - + 执行流程: a. 等待状态稳定（动画/过渡完成）: - browser_wait_for → time=1-2s（等待动画完成） - + b. 捕获实际状态截图: - browser_take_screenshot → 保存为 journey-epic{N}-{M}-step{S}-state.png - + c. 搜索匹配的设计帧（双模式支持）: **Pencil MCP 模式（优先）**: - 读取 pipeline-context.md 获取设计文件路径（如 VividSpark1.2.pen） @@ -534,33 +534,33 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这 - 搜索关键词: "{Page}-{State}" 如 "Dashboard-Modal", "Login-Error", "Upload-Loading" - 或按 frame 类型和名称模式匹配 - 如找到匹配帧 → mcp__pencil__export_nodes 导出设计截图 - + **HTML 原型模式（回退）**: - 检查 prototype/pages/{group}/{page}-{state}.html 是否存在 - 如存在 → 启动原型服务 → Playwright 截图 - + 设计帧未找到处理: - 标记 prototype_found: false - 记录 actual_screenshot 路径 - 不阻断旅程，但记录到 pipeline-report.md 建议补充设计帧 - + d. 执行视觉对比（如找到设计帧）: - ui_diff_check: - expected_image_source: 设计帧截图（或原型截图） - actual_image_source: 当前状态截图 (journey-epic{N}-{M}-step{S}-state.png) - prompt: "对比设计原型和实际实现。这是用户操作后出现的动态交互状态（如弹窗、hover、选中、加载中、错误提示等）。 - + 重点关注： 1) 组件布局和结构是否一致（弹窗位置、按钮排列等） 2) 颜色/样式是否匹配（背景色、边框、阴影等） 3) 文字内容是否正确（标题、提示信息、按钮文字等） 4) 交互状态是否准确（hover 效果、选中状态、focus 样式等） 5) 图标和装饰元素是否一致 - + 注意：忽略动态数据（如用户名、时间戳等），只关注 UI 结构和样式。 - + 按严重程度列出所有视觉差异：" - + e. 差异分级与处理: 记录到 pipeline-state.yaml: ```yaml @@ -593,14 +593,14 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这 auto_fix_type: "AUTO-FIX" # 修复类型 auto_fix_result: "PASS" # 修复结果 ``` - + 差异处理规则: - 🔴 严重差异（布局错误、关键组件缺失、文字错误）→ 立即触发 AUTO-FIX - 🟡 中等差异（颜色、间距偏差）→ 记录到 pipeline-report.md，建议修复 - 🟢 轻微差异（微小像素偏移）→ 记录但不阻断旅程 - ✅ 无差异 → 标记状态正常 - - f. 自动修复与重测（如触发）: + + f. 自动修复与重测（如触发）: - AUTO-FIX 触发后: 1. 定位相关源码文件（根据差异类型确定） 2. 执行修复（如调整 CSS、修改组件样式等） @@ -608,7 +608,7 @@ Story 验证全部通过 ≠ 用户能正常使用系统。旅程模式弥补这 4. 重新对比: ui_diff_check 5. 修复成功 → 标记 auto_fix_result: "PASS" 6. 修复失败 → 标记 auto_fix_result: "FAIL"，记录原因 - + 6. ⛔ **源码 SVG data URI 扫描**（视觉验证关卡内 — 每次 snapshot 后强制执行）: g. ⛔ **约束一致性检查**（每个用户步骤首次执行时 — R7 执行时强制检测）: 触发条件（操作被拦截 + 声明方说"可选"）: diff --git a/.claude/skills/d8d-dev/visual-diff-mode-pencil.md b/.claude/skills/d8d-dev/visual-diff-mode-pencil.md index eae8669..73ae216 100644 --- a/.claude/skills/d8d-dev/visual-diff-mode-pencil.md +++ b/.claude/skills/d8d-dev/visual-diff-mode-pencil.md @@ -168,13 +168,25 @@ visual_diff_pencil_mapping: mkdir -p tests/e2e/screenshots/visual-diff-pencil ``` +### 0.7 创建任务清单 + +为每个 `status: active` 的映射页面**创建独立的 Task 任务**，使用 `TaskCreate` 工具： +- 每个任务记录：页面名称、设计帧ID、实际页面路径 +- 便于独立追踪每个页面的验证进度 +- 避免单个 agent 上下文过大导致污染或遗漏 + +### 0.8 启动逐个任务验证 + +对**每个任务**启动一个**独立的 agent**，按照 Phase PVD-1 流程执行验证。独立 agent 避免上下文污染，执行更精准。 + --- ## Phase PVD-1: 逐页门禁对比循环 ⛔ **核心原则：逐页执行，每页必须通过门禁才能继续下一页。禁止全量截图后批量对比。** +**最佳实践：每个页面启动一个独立 agent，避免上下文污染，执行更精准。** -对映射表中每个 `status: active` 的页面，依次执行以下完整循环： +对映射表中每个 `status: active` 的页面，依次执行以下完整循环（每个页面由独立 agent 处理）： ``` PVD-1 PER-PAGE LOOP: diff --git a/.claude/skills/d8d-requirements/workflow.md b/.claude/skills/d8d-requirements/workflow.md index 40fdbe6..698c21d 100644 --- a/.claude/skills/d8d-requirements/workflow.md +++ b/.claude/skills/d8d-requirements/workflow.md @@ -51,6 +51,7 @@ progress_file: '{planning_artifacts}/.pipeline-progress.md' | 2-规划 | 2.1 | `bmad-create-prd` | `*prd*.md` | 产品简报 | | 2-规划 | 2.2 | `bmad-validate-prd` | 验证报告（内嵌） | PRD | | 2-规划 | 2.3 | `bmad-create-ux-design` | `*ux*.md` | PRD | +| 2-规划 | 2.4 | (流水线内置) | `.pen` 设计文件同步 | PRD, UX, 已有 .pen | | 3-解决方案 | 3.1 | `bmad-create-architecture` | `*arch*.md` | PRD, UX | | 3-解决方案 | 3.2 | `bmad-create-epics-and-stories` | `*epic*.md` | PRD, 架构 | | 3-解决方案 | 3.3 | `bmad-check-implementation-readiness` | 就绪报告 | 全部 | @@ -96,7 +97,8 @@ phase-01 → 预读上下文 → bmad-product-brief → 验证 → 三文件更 phase-02 → 2.1: 预读产品简报 → bmad-create-prd → 验证 → 三文件更新 2.2: 预读PRD → bmad-validate-prd → 读取结果 → 如Critical自动修复循环 - 2.3: 预读PRD+设计 → bmad-create-ux-design → 验证 → 三文件更新 → 自动继续 + 2.3: 预读PRD+设计 → bmad-create-ux-design → 验证 → 三文件更新 + 2.4: 检测 UX 设计文档是否新增页面规范 → 如果需要，调用 Pencil MCP 在 .pen 中创建对应页面 → 截图验证设计效果 → 如视觉效果不佳，自动进入优化循环（调整布局配色直到满意）→ 更新设计上下文 → 三文件更新 → 自动继续 phase-03 → 3.1: 预读PRD+UX → bmad-create-architecture → 验证 → 三文件更新 3.2: 预读PRD+架构+UX → bmad-create-epics-and-stories → 验证 → 三文件更新 @@ -206,8 +208,9 @@ phases: status: in_progress steps: prd: done - prd-validation: in_progress - ux-design: pending + prd-validation: done + ux-design: done + design-sync: pending phase-03: status: pending steps: @@ -245,6 +248,7 @@ phases: | create-prd | 页面导航流程 + 功能区域 + 组件概览 | | validate-prd | （不注入，验证已有PRD） | | create-ux-design | 完整设计系统：变量、组件、页面布局 | +| **design-sync (built-in)** | 检查 UX 文档是否新增页面 → 创建页面 → **截图验证 + 自动优化循环** → 更新设计上下文 | | create-architecture | 组件层级 + 数据流模式 | | create-epics | 页面级功能分解 | | check-readiness | （不注入，验证已有产物） | @@ -260,6 +264,7 @@ phases: ✅ 2.1 PRD done ✅ 2.2 PRD验证 Pass ✅ 2.3 UX设计 done +✅ 2.4 设计文件同步 done ✅ 3.1 架构 done ✅ 3.2 史诗与故事 done ✅ 3.3 就绪检查 Pass