# Web Operation Document

> 对网页操作进行自动标注，并生成带有操作截图和详细说明文案的 Markdown 格式操作文档。 Use when this capability is needed.

- Skill: `tomevault-io/web-operation-document` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/web-operation-document`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/web-operation-document/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/web-operation-document

---


# Web Operation Document Skill

这个技能通过结合 Chrome DevTools MCP 和 Python 辅助脚本，实现对网页操作的自动化记录、截图标注以及 Markdown 操作文档的自动生成。

## 核心工作流

当你收到“生成 [URL] 的 [功能描述] 操作文档”的任务时，请遵循以下步骤：

1. **初始化项目**：
   - 确定一个项目名称（例如 `baidu_search_doc`）。
   - 运行 `scripts/doc_creator.py init --project [项目名]` 初始化输出目录。

2. **交互记录循环**：
   - **分析操作**：根据用户需求，确定下一步需要点击或输入的元素。
   - **执行前截图**：
     - **重要**：如果用户没有明确提出屏幕分辨率，请调用 `mcp_Chrome_DevTools_MCP_resize_page` 将页面大小设置为 1920*1080。
     - 调用 `mcp_Chrome_DevTools_MCP_take_screenshot` 获取当前页面截图。
   - **获取位置**：通过 `mcp_Chrome_DevTools_MCP_take_snapshot` 获取目标元素的坐标 (x, y, width, height)。
   - **标注与记录**：
     - 调用 `scripts/doc_creator.py add_step` 方法。
     - 传入截图路径、元素坐标、以及**操作说明文案**（如“在搜索框输入‘Trae’，点击搜索”）。
     - 脚本会自动在截图中该元素位置画红框，并记录该步骤。
   - **执行操作**：调用 `mcp_Chrome_DevTools_MCP_click` 或 `mcp_Chrome_DevTools_MCP_fill` 等。
   - **循环**：重复上述步骤直到完成整个操作流程。

3. **生成文档**：
   - 所有步骤完成后，运行 `scripts/doc_creator.py generate_md --project [项目名]`。
   - 脚本将读取所有记录的步骤，生成一个包含操作截图和说明文字的 `README.md` 或 `OPERATIONS.md` 文件。

## 脚本参数说明

- `init`: 初始化项目目录。
- `add_step`: 记录操作步骤。
  - `--project`: 项目目录名。
  - `--screenshot`: 原始截图路径。
  - `--x`, `--y`, `--w`, `--h`: 标注框位置。
  - `--caption`: 操作说明文案。
- `generate_md`: 生成最终的 Markdown 文档。
  - `--project`: 项目目录名。
  - `--title`: (可选) 文档标题。

---
> Source: [citywill/pocket-stack](https://github.com/citywill/pocket-stack) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-23 -->