From 60bb25b366d1995fcd76d7f2565b8cac1d48af98 Mon Sep 17 00:00:00 2001 From: yourname Date: Tue, 7 Apr 2026 11:51:11 +0000 Subject: [PATCH] =?UTF-8?q?fix(skill):=20=E5=8A=A0=E5=BC=BA=20d8d-prototyp?= =?UTF-8?q?e=20=E6=8A=80=E8=83=BD=E6=AD=A5=E9=AA=A4=E6=89=A7=E8=A1=8C?= =?UTF-8?q?=E7=BA=AA=E5=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 三个改进防止步骤被跳过或简化执行： 1. workflow.md 增加"步骤完成门禁"机制： - 每个步骤必须提供 evidence 才能标记完成 - Step 7 强制要求 Playwright 截图 + ZAI 图片分析 - 明确列出禁止的替代行为 2. step-03 更新桌面端 iframe 缩放模板： - 添加 min-width:0 防止 iframe 撑开 grid 列宽 - display:block 去除 iframe 底部间隙 3. step-07 增加"强制验证"声明： - 文件开头明确禁止 curl 替代截图 - 规定必须按顺序执行：截图→分析→修复→报告 Co-Authored-By: Claude Opus 4.6 --- .../steps/step-03-generate-index.md | 65 ++++++++++++++----- .../d8d-prototype/steps/step-07-validate.md | 14 ++++ .claude/skills/d8d-prototype/workflow.md | 29 ++++++++- 3 files changed, 89 insertions(+), 19 deletions(-) diff --git a/.claude/skills/d8d-prototype/steps/step-03-generate-index.md b/.claude/skills/d8d-prototype/steps/step-03-generate-index.md index 8c23c27..9842995 100644 --- a/.claude/skills/d8d-prototype/steps/step-03-generate-index.md +++ b/.claude/skills/d8d-prototype/steps/step-03-generate-index.md @@ -20,6 +20,8 @@ ### 3.2 桌面端平铺入口 (admin-index.html) +**核心原理：iframe 以桌面端固定宽度（1280px）渲染，通过 CSS `transform: scale()` 等比缩小到网格列宽度。这样页面内容保持桌面端布局，只是视觉上缩小了。** + ```html @@ -36,25 +38,32 @@ gap: 16px; padding: 16px; } - .prototype-iframe { + /* 防止子元素撑开 grid 列宽（关键！） */ + .prototype-grid > div { min-width: 0; } + @media (min-width: 1400px) { + .prototype-grid { grid-template-columns: repeat(3, 1fr); } + } + @media (min-width: 768px) and (max-width: 1399px) { + .prototype-grid { grid-template-columns: repeat(2, 1fr); } + } + /* 缩放容器：min-width:0 防止 iframe 撑开列宽，overflow:hidden 裁剪 */ + .prototype-iframe-wrapper { + position: relative; width: 100%; - height: 1000px; + min-width: 0; + overflow: hidden; border: 1px solid #e5e7eb; - border-radius: 12px; + border-radius: 0 0 12px 12px; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } - @media (min-width: 1400px) { - .prototype-grid { - grid-template-columns: repeat(3, 1fr); - } - .prototype-iframe { height: 750px; } - } - @media (min-width: 768px) and (max-width: 1399px) { - .prototype-grid { - grid-template-columns: repeat(2, 1fr); - } - .prototype-iframe { height: 900px; } + /* iframe 以桌面端固定宽度渲染，通过 transform 缩放，display:block 去除底部间隙 */ + .prototype-iframe { + width: 1280px; + height: 1000px; + border: none; + transform-origin: top left; + display: block; } @@ -64,15 +73,37 @@

所有页面同时显示，一目了然

- +
页面标题
- +
+ +
- +
+ ``` diff --git a/.claude/skills/d8d-prototype/steps/step-07-validate.md b/.claude/skills/d8d-prototype/steps/step-07-validate.md index 4825b4c..2462502 100644 --- a/.claude/skills/d8d-prototype/steps/step-07-validate.md +++ b/.claude/skills/d8d-prototype/steps/step-07-validate.md @@ -2,6 +2,20 @@ **Progress: Step 7 of 7** — Next: 完成 +## ⚠️ 强制验证（不可跳过） + +本步骤**禁止**用以下方式替代： +- ❌ 用 curl/wget 检查 HTTP 状态码代替截图 +- ❌ 只检查文件是否存在 +- ❌ 跳过图片分析直接标记完成 +- ❌ 自行声称"验证通过"而不提供截图证据 + +**必须**按以下顺序执行： +1. Playwright 导航 → 截图（至少：平铺入口页 + 每个独立页面） +2. ZAI analyze_image 分析每张截图 +3. 发现问题 → 修复 → 重新截图验证 +4. 全部通过 → 写入验证报告 → 标记完成 + ## STEP GOAL 使用 Playwright MCP 和图片 MCP 对所有已生成的页面进行自动化验证，输出验证报告。 diff --git a/.claude/skills/d8d-prototype/workflow.md b/.claude/skills/d8d-prototype/workflow.md index 83252f5..7e439d7 100644 --- a/.claude/skills/d8d-prototype/workflow.md +++ b/.claude/skills/d8d-prototype/workflow.md @@ -20,6 +20,30 @@ - 💾 **始终**在每步/每页面完成后更新状态文件 - 🎯 **始终**严格遵循步骤文件中的指令 +## 🔒 步骤完成门禁（强制） + +每个步骤标记完成前，**必须**满足以下条件，无证据 = 未完成： + +### 通用门禁（所有步骤） +1. ✅ 已完整 Read 当前步骤文件 +2. ✅ 步骤文件中每条指令都已执行 +3. ✅ 状态文件 `completed_steps` 包含 `evidence` 字段 + +### 验证步骤门禁（Step 7 专属） +1. ✅ 使用 `mcp__playwright__browser_take_screenshot` 对平铺入口截图 +2. ✅ 使用 `mcp__zai-mcp-server__analyze_image` 分析截图，验证： + - 桌面端页面：布局列数正确，内容按桌面端比例缩放 + - 移动端页面：手机框架包裹，375×812 尺寸 + - 文字可读、UI 元素清晰 +3. ✅ 生成验证报告文件 `prototype/VALIDATION-REPORT.md` +4. ✅ 分析结果中无 ❌ 级别问题（有则必须修复后重新验证） + +### ❌ 禁止的替代行为 +- ❌ 用 curl/wget HTTP 状态码代替截图验证 +- ❌ 只检查文件是否存在 +- ❌ 跳过图片分析直接标记完成 +- ❌ 自行声称"验证通过"而不提供截图证据 + ## 状态文件：.prototype-state.md 状态文件位于输出目录 `prototype/.prototype-state.md`，用于跟踪前后台每个页面的生成进度。 @@ -36,7 +60,8 @@ status: in_progress | completed current_step: step-02-generate-pages current_page_index: 3 completed_steps: - - step-01-analyze + - step: step-01-analyze + evidence: "描述做了什么" scene_type: mixed | desktop | mobile design_system_source: {设计系统文档路径或 "default"} page_counts: @@ -67,7 +92,7 @@ page_counts: 1. **每个步骤开始时**：更新 `current_step`、`last_updated` 2. **每个页面生成后**：勾选对应行 `[x]`，添加完成时间戳，更新 `page_counts` 和 `current_page_index` -3. **每个步骤完成时**：将步骤名加入 `completed_steps` +3. **每个步骤完成时**：将步骤名和 evidence 加入 `completed_steps`（必须有 evidence，描述具体做了什么） 4. **全部完成时**：设置 `status: completed` ## 状态机：启动与恢复