# Phase 4: Screenshot Capture

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

## 核心原则

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

## 执行流程

```javascript
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 构建

```javascript
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](05-html-assembly.md)