MCP + Playwright + AI：全自动生成系统操作手册
上午跟朋友聊天，他说凌晨两点还在苦逼地截系统页面写操作手册。我说让他试试 AI，他回我："AI 又不能帮你截图。"
我没说话，花了一杯咖啡的时间，全自动生成了一份带截图的完整操作手册。22 张截图，18 个模块，一个不落。
做了什么
用 AI Agent + MCP（Model Context Protocol）+ Playwright，全自动完成了：
浏览器自动登录 → 逐页截图 → 源码分析提取功能描述 → 生成 Word 文档
最终产出：一份 1.02MB 的 .docx 操作手册，封面 + 目录 + 18 个功能模块章节 + 权限受限说明 + FAQ，每个模块都配截图和功能描述。
全程不需要人工操作浏览器，不需要手动复制粘贴。
技术栈
三个东西，各管一段：
| 工具 | 干什么 |
|---|---|
| MCP | Anthropic 开源的协议，让 AI 能调用外部工具 |
| Playwright MCP Server | 把 Playwright 浏览器自动化能力暴露给 AI |
| docx (npm) | Node.js 库，程序化生成 Word 文档 |
核心思路很简单：MCP 给 AI 装上了"手"和"眼"，AI 自己操作浏览器完成整个工作流。
怎么做的
1. 让 AI 操控浏览器截图
配置好 Playwright MCP Server 后，AI 就有了完整的浏览器操控能力——打开页面、点击元素、输入文本、等待加载、截屏。
流程是这样的：
AI 打开登录页 → 获取页面结构 → 定位输入框 → 填写账号密码 → 点击登录 → 逐页导航 → 截图保存
AI 通过左侧导航栏自动识别所有功能模块路径，逐层展开子菜单，等待页面加载完成后截图。一共截了 22 张。
有个细节值得一提：当 AI 访问某些需要更高权限的页面时，系统直接重定向回了首页。传统脚本到这里就报错中断了，但 AI 理解了发生了什么——它把重定向后的页面也截图保存，并在文档中标注为"权限受限模块"。
这比跳过或报错有用得多。能理解异常并做出合理决策，这是 AI 和自动化脚本最大的区别。
2. 从源码提取功能描述
截图是"形"，还得有"魂"——每个页面到底是干什么的。
我给 AI 提供了目标系统（一个基于 Java + Angular 的 IoT 平台）的前端源码。AI 自动定位到各模块的 Model、Service、Component 文件，通过分析 TypeScript 接口定义和业务逻辑，提炼出每个模块的核心功能描述。
比如"设备管理"模块，AI 分析了设备实体字段定义、CRUD 接口、列表页交互逻辑后，自动输出了涵盖传输协议、凭证管理、状态监控等要点的功能描述。
描述内容直接来源于源码，不是 AI 凭空编的。
3. 生成 Word 文档
最后用 docx npm 包把截图和文字组装起来。核心逻辑：
// 读取截图
const img = (name) => fs.readFileSync(path.join(IMG_DIR, name));
// 嵌入文档
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new ImageRun({
data: img("screenshot_devices.png"),
transformation: { width: 520, height: 293 }
})
]
});
每个章节统一结构：标题 → 截图（居中+图注）→ 功能描述列表。最终通过 Packer.toBuffer() 序列化为 .docx 文件。
文档结构：
封面 → 自动目录 → 18个功能模块 → 权限受限说明(4个) → FAQ附录
核心收获
MCP 改变了 AI 的角色。
以前：AI 是工具链中的一个环节——你截图，它描述。
现在：AI 是整条工具链的编排者——它自己截图、分析、生成，你拿成品。
而且这套方案不绑定特定系统。换成任何 Web 应用，改个 URL 和账号就能跑。想输出 PDF？换 Puppeteer。想自动发邮件？接邮件 MCP 工具。AI 的能力边界，取决于你给它接什么工具。
一个晨会的功夫，我把文档发给了他。
他没回我。但我猜他应该在更新简历了。
