mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-15 02:42:45 +08:00
90 lines
2.2 KiB
Markdown
90 lines
2.2 KiB
Markdown
# 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)
|