综合案例：为书籍自动配图

需求描述

书籍初稿完成后，需要为每一章添加产品截图，让读者更直观地理解概念。

具体需求是：找出书中哪些章节介绍了什么概念（Agent、Tool、Skill、Prompt……），然后去产品中截对应的页面。产品主页是 http://localhost:8080/#/dashboard，前端工程在 D:\DEV\CODE\Automator\Client\Web\frontend。

核心交付物：

• 确定章节与页面的对应关系
• 每个概念截对应的产品界面
• 截图插入章节文件并配说明文字

能力拆解

能力	发挥的作用	对应章节
跨工作区	同时感知书籍目录和前端路由配置，理解它们的关联	05-第一部分/02-工作区管理
精准定位	2000+ 前端文件中找到路由配置，52 篇 markdown 中匹配概念与页面	06-第二部分/01-文档先行
浏览器 MCP	自动导航页面、识别 UI 结构、点击新建按钮、截图保存	05-第一部分/07-MCP工具集成
复杂任务分解	15 步流水线的自动编排——先分析映射，再逐页截图，最后插入章节	06-第二部分/05-复杂任务分解

执行过程

第一阶段：探索与映射

首先需要理解前端工程的结构，确定有哪些页面，以及每个页面的路由。

输入需求
  → 读取路由配置文件 routes.config.ts
    → 提取所有路由路径：/dashboard、/ai/custom-agent、/market/skill ...
      → 打开浏览器验证每个页面是否可达
        → 读取每章的概念介绍
          → 映射表格：Skill概念→/market/skill、Agent概念→/ai/custom-agent

这一步没有让用户告诉我"哪个章节对哪个页面"，而是靠自己分析代码和文档完成匹配。对于不熟悉的工程，先看路由配置是最快的方式。

第二阶段：浏览器截图

映射确定后，开始逐页截图。但关键一步是：必须点击"新建"按钮展开表单。

🔑 关键决策：停留在"新建 Agent"的空白占位页是没有意义的。读者需要看到的是输入项——有哪些字段、要填什么内容。所以必须点开新建表单再截图。

导航到 /#/ai/custom-agent
  → 页面显示"新建 Agent"空白占位
    → 用 take_snapshot 找到"新建"按钮的 uid
      → 点击 uid，弹出创建表单
        → 表单展示：Agent ID、名称、描述、系统提示词、选择工具、LLM 参数
          → 截图保存到 assets/

重复此流程覆盖所有页面：Skill 市场、提示词中心、自定义 Tool、工作流编辑器、模型管理、触发器……

第三阶段：截图插入章节

最后将截图插入对应章节，配说明文字：

插入到 03-Agent系统详解.md:
  在 YAML 代码示例之后 → 插入 "自定义 Agent 创建表单" 截图
  说明：除了YAML方式，还提供可视化表单

插入到 04-Skill技能包.md:
  在 Skill 内置命令列表之后 → 插入 "Skill 技能中心" 截图
  说明：Skill 中心集中管理所有技能包

插入到 07-Prompt工程.md:
  在提示词优化配置之后 → 插入 "提示词中心" + "新建提示词" 截图
  说明：支持标签分类和 YAML Frontmatter

涉及跨工作区的路径问题：前言章节在 01-前言/ 目录下，而截图在 growth/02/ 下，相对路径需要调整为 /assets/growth/02/02-product-dashboard.png。该路径从书稿相对于 assets/ 的深度计算得出。

关键决策点

1. 为什么连续截图两次

第一次到 Agent 页面时，看到的是"新建 Agent"的占位卡片——一个灰色虚线框上面写"点击创建新 Agent"。如果直接截图，读者看到的只是一个空占位，完全不知道 Agent 创建需要填什么字段。

所以决定先点击新建按钮，等表单弹出来再截图。表单展示了 6 个字段（Agent ID、名称、描述、系统提示词、选择工具、LLM 参数），这才是有信息量的截图。

这是 Agent 自主决策——不是被指令驱动的"你说一句它做一步"，而是 AI 自己判断"当前截图不够好，需要先操作再截图"。

2. 跨工作区路径如何处理

自媒体和前端工程是两个独立的工作区，但 AI 同时感知了两者的目录结构。截图需要插入到书籍 markdown 中时，自动推导了正确的相对路径：

本章（02-框架-第一部分/）→ /assets/growth/02/02-product-dashboard.png
前言（01-前言/）         → /assets/growth/02/02-product-dashboard.png
第二部分（03-框架-第二部分/）→ /assets/growth/02/02-product-dashboard.png

这在"文档先行"章节讲过——文档和静态资源一起管理，但实际使用时路径需要精确对齐，AI 能自动处理这件事。

3. 多页面如何保证效率

15 个页面，如果每次手动输入 URL 再截图会非常慢。实际做法是流水线式处理：

导航到页面 → 截图(点击新建) → 关闭弹窗 → 导航到下一个页面 → 截图(点击新建) → ...

所有非核心页面使用快速的 snapshot+screenshot 模式，只有需要展开表单的页面才额外多一个 click 步骤。这体现了"复杂任务分解"章节讲的原则——识别任务共性，用流水线替代单次操作。

这个案例说明了什么

这个任务不是写代码，而是文档自动化。它展示了 Qoder 的一个被低估的能力——AI 不仅会写代码，还能像人一样操作浏览器、理解 UI 结构、判断什么内容值得截图。

在实操中，这个能力对自媒体创作者、产品文档编写者特别实用：

• 给书籍/文章配图
• 生成产品演示截图
• 录制操作步骤的视觉素材 -- 批量截图做培训材料