diff --git a/.claude/skills/d8d-prototype/steps/step-07-validate.md b/.claude/skills/d8d-prototype/steps/step-07-validate.md index 2b1e25c..a0e0853 100644 --- a/.claude/skills/d8d-prototype/steps/step-07-validate.md +++ b/.claude/skills/d8d-prototype/steps/step-07-validate.md @@ -4,7 +4,7 @@ ## STEP GOAL -使用 Playwright MCP 和图片 MCP 对所有已生成的页面进行自动化验证,输出验证报告。 +使用 Playwright CLI 和图片 MCP 对所有已生成的页面进行自动化验证,输出验证报告。 ## ⚠️ 强制验证(不可跳过) @@ -47,31 +47,25 @@ curl -s -o /dev/null -w "%{http_code}" http://localhost:8080/ cd prototype/ && nohup node server.js &>/dev/null & ``` -### 7.3 使用 Playwright MCP 验证原型页面 +### 7.3 使用 Playwright CLI 验证原型页面 -```javascript -// 1. 启动浏览器,导航到入口 -mcp__playwright__browser_navigate -url: http://localhost:8080/index.html +```bash +# 1. 导航到入口 +playwright-cli -s={S} goto http://localhost:8080/index.html -// 2. 截图保存入口页面 -mcp__playwright__browser_take_screenshot -filename: prototype/screenshots/01-index.png -fullPage: true +# 2. 截图保存入口页面 +playwright-cli -s={S} screenshot filename=prototype/screenshots/01-index.png fullPage=true -// 3. 点击原型系统入口,验证平铺展示 -mcp__playwright__browser_click -ref: [原型系统卡片] +# 3. 点击原型系统入口,验证平铺展示 +playwright-cli -s={S} click "text=原型系统" -mcp__playwright__browser_take_screenshot -filename: prototype/screenshots/02-prototype-grid.png -fullPage: true +playwright-cli -s={S} screenshot filename=prototype/screenshots/02-prototype-grid.png fullPage=true -// 4. 遍历每个独立页面 -// 对状态文件中每个已勾选的页面: -// - 导航到页面 URL -// - 获取快照 -// - 截图保存 +# 4. 遍历每个独立页面 +# 对状态文件中每个已勾选的页面: +# - 导航到页面 URL +# - 获取快照 +# - 截图保存 ``` ### 7.4 文档内容深度验证 ⭐(强制步骤) @@ -80,7 +74,7 @@ fullPage: true #### 7.4.1 遍历所有文档链接 -使用 Playwright `browser_run_code` 批量验证: +使用 Playwright `eval` 批量验证: ```javascript async (page) => { @@ -112,10 +106,9 @@ async (page) => { 对每个文档页面检查控制台是否有 404 或加载失败错误: -```javascript -mcp__playwright__browser_console_messages -level: error -// 检查是否有 "Failed to load resource" 或 "404" 错误 +```bash +playwright-cli -s={S} console level=error +# 检查是否有 "Failed to load resource" 或 "404" 错误 ``` #### 7.4.3 修复发现的问题 @@ -249,7 +242,7 @@ Read _d8d/design-tool-adapter/adapters/pencil.md — 了解具体命令 - 测试页面: {total} 个 - 测试文档: {doc_count} 个 - 截图数量: {count} 张 -- 验证方式: Playwright MCP + Image MCP +- 验证方式: Playwright CLI + Image MCP ## 链接验证结果 | 页面 | 链接状态 | 跳转正确 | 备注 | diff --git a/.claude/skills/d8d-prototype/workflow.md b/.claude/skills/d8d-prototype/workflow.md index e87e104..3122a91 100644 --- a/.claude/skills/d8d-prototype/workflow.md +++ b/.claude/skills/d8d-prototype/workflow.md @@ -81,8 +81,8 @@ page_counts: 3. ✅ 状态文件 `completed_steps` 包含 `evidence` 字段 ### 验证步骤门禁(Step 7 专属) -1. ✅ 使用 `mcp__playwright__browser_take_screenshot` 对平铺入口截图 -2. ✅ 使用 `mcp__zai-mcp-server__analyze_image` 分析截图,验证: +1. ✅ 使用 `playwright-cli -s={S} screenshot` 对平铺入口截图 +2. ✅ 使用图片 MCP 分析截图,验证: - 桌面端页面:布局列数正确,内容按桌面端比例缩放 - 移动端页面:手机框架包裹,375×812 尺寸 - 文字可读、UI 元素清晰