Claude-Code-Workflow/.claude/skills/software-manual/phases/04-screenshot-capture.md

Phase 4: Screenshot Capture

使用 universal-executor 子 Agent 调用 Chrome MCP 截图。

核心原则

主 Agent 负责编排，子 Agent 负责截图采集。

执行流程

const config = JSON.parse(Read(`${workDir}/manual-config.json`));
const screenshotsList = JSON.parse(Read(`${workDir}/screenshots-list.json`));

// 委托给 universal-executor 执行截图
const result = Task({
  subagent_type: 'universal-executor',
  run_in_background: false,
  prompt: buildScreenshotPrompt(config, screenshotsList, workDir)
});

const captureResult = JSON.parse(result);

Prompt 构建

function buildScreenshotPrompt(config, screenshotsList, workDir) {
  return `
[ROLE] Screenshot Capturer

[TASK]
使用 Chrome MCP 批量截图

[INPUT]
- 配置: ${workDir}/manual-config.json
- 截图清单: ${workDir}/screenshots-list.json

[STEPS]
1. 检查 Chrome MCP 可用性 (mcp__chrome__*)
2. 启动开发服务器: ${config.screenshot_config?.dev_command || 'npm run dev'}
3. 等待服务器就绪: ${config.screenshot_config?.dev_url || 'http://localhost:3000'}
4. 遍历截图清单，逐个调用 mcp__chrome__screenshot
5. 保存截图到 ${workDir}/screenshots/
6. 生成 manifest: ${workDir}/screenshots/screenshots-manifest.json
7. 停止开发服务器

[MCP CALLS]
- mcp__chrome__screenshot({ url, selector?, viewport })
- 保存为 PNG 文件

[FALLBACK]
若 Chrome MCP 不可用，生成手动截图指南: MANUAL_CAPTURE.md

[RETURN JSON]
{
  "status": "completed|skipped",
  "captured": <n>,
  "failed": <n>,
  "manifest_file": "screenshots-manifest.json"
}
`;
}

Agent 职责

1. 检查 MCP → Chrome MCP 可用性
2. 启动服务 → 开发服务器
3. 批量截图 → 调用 mcp__chrome__screenshot
4. 保存文件 → screenshots/*.png
5. 生成清单 → screenshots-manifest.json

输出

• screenshots/*.png - 截图文件
• screenshots/screenshots-manifest.json - 清单
• screenshots/MANUAL_CAPTURE.md - 手动指南（fallback）

质量门禁

• 高优先级截图完成
• 尺寸一致 (1280×800)
• 无空白截图
• Manifest 完整

下一阶段

→ Phase 5: HTML Assembly