name: screenshot-to-manual

description: |

通过用户提供的 UI 截图和简短文字说明，自动生成结构化的产品操作手册（Markdown 格式）。

支持增量式迭代编写：用户分批提供截图，AI 逐步完善手册内容。

适用于任何 Web/SaaS 产品的用户操作手册编写场景。

version: "1.0"

author: MeMeShun

tags:

• manual
• documentation
• screenshot
• product
• guide

Screenshot-to-Manual Skill

通过用户提供的 UI 截图和简短文字说明，自动生成结构化的产品操作手册。

适用场景

• 产品经理/运营人员需要编写用户操作手册
• 用户提供 UI 截图 + 简短说明，AI 负责结构化撰写
• 支持增量迭代：分批提供截图，逐步完善手册
• 适用于任何 Web/SaaS 产品（不限语言）

核心理念

> 用户负责「提供素材」，AI 负责「结构化撰写」

用户只需：

1. 截取产品界面截图
2. 用简短文字说明截图对应的功能模块
3. 指定截图所属的章节位置

AI 负责：

1. 分析截图中的 UI 元素（按钮、表单、表格、菜单等）
2. 提取字段信息、操作流程、状态说明
3. 按照标准手册结构撰写操作说明
4. 管理目录、章节编号、交叉引用

Phase 1: 初始化手册框架

当用户首次提供截图或提出手册编写需求时，执行以下步骤：

1.1 理解产品结构

通过截图和用户描述，梳理产品的：

• 页面层级：哪些页面？页面之间的导航关系？
• 功能模块：每个页面包含哪些功能？
• 用户角色：不同角色看到的功能是否不同？
• 操作类型：CRUD（增删改查）、审批、配置、查看等

1.2 设计手册大纲

根据产品结构，设计手册的章节大纲。推荐结构：

1. 系统概述
   1.1 产品简介（是什么）
   1.2 核心概念（关键术语对照表）
   1.3 用户角色与权限
   1.4 页面导航关系（ASCII 图）
   1.5 快速上手指南

2. 首次使用
   2.1 注册账号
   2.2 登录系统
   2.3 初始配置

3. [功能模块 A]（按页面/角色组织）
   3.1 页面导航
   3.2 子功能 1
     3.2.1 列表查看
     3.2.2 创建
     3.2.3 编辑
     3.2.4 删除
     3.2.5 详情查看
   3.3 子功能 2
   ...

4. [功能模块 B]
   ...

附录 A：字段说明汇总表
附录 B：常见问题（FAQ）

1.3 创建手册文件

创建 Markdown 文件，包含：

• 文档标题、版本号、更新日期
• 完整目录（与章节一一对应）
• 各章节的占位内容

文件头模板：

# [产品名称] — 产品操作手册

> **适用系统**：[产品全称]
> **文档版本**：V1.0
> **更新日期**：[YYYY-MM-DD]

---

## 目录

[自动生成的目录]

Phase 2: 增量式内容编写

用户分批提供截图时，按以下流程处理每一批：

2.1 截图分析

对每张截图，提取以下信息：

2.2 截图分类与命名

将截图复制到 assets/manual_images/ 目录，按编号命名：

assets/manual_images/
├── 01_register.png          # 第1张截图
├── 02_login.png             # 第2张截图
├── 03_dashboard.png         # 第3张截图
├── ...
└── NN_feature_detail.png    # 第N张截图

命名规则：{编号}_{功能模块}_{具体操作}.png

2.3 内容撰写规范

章节结构模板

每个功能子章节按以下结构撰写：

#### X.Y.Z [操作名称]

[一句话说明该操作的作用]

##### 操作步骤

1. [步骤1：点击/进入某个位置]
2. [步骤2：填写/选择某些内容]
3. [步骤3：确认/提交]

##### 表单字段（如适用）

| 字段 | 类型 | 是否必填 | 说明 |
|------|------|----------|------|
| 字段A | 文本输入 | 是（*） | 说明文字 |
| 字段B | 下拉选择 | 否 | 可选值：A、B、C |

##### 表格字段（如适用）

| 列名 | 说明 | 示例 |
|------|------|------|
| 列A | 说明文字 | 示例值 |

> **提示**：补充使用提示或注意事项

写作原则

1. 操作导向：以"用户需要做什么"为主线，而非"系统有什么"
2. 步骤清晰：每步操作以序号开头，明确指出点击位置和预期结果
3. 表格优先：字段说明、状态说明等用表格呈现，一目了然
4. 截图嵌入：在对应的操作说明后嵌入截图，使用 !描述 格式
5. 提示框：使用 > 提示： 或 > ⚠️ 警告： 补充重要信息
6. 交叉引用：相同操作在不同章节出现时，用引用避免重复

Markdown 格式规范

Phase 3: 结构重组与优化

当手册内容积累到一定规模后，可能需要进行结构调整。

3.1 常见重组场景

3.2 章节重编号策略

当插入新章节导致后续编号变化时：

1. 从大到小替换：先替换大编号（如 4.9→4.10），再替换小编号（如 4.5→4.6），避免冲突
2. 精确匹配：使用章节名称作为匹配条件，避免误替换（如 4.5 沙箱管理 而非仅 4.5）
3. 三处同步更新：
• 目录中的条目和锚点链接
• 正文中的章节标题
• 交叉引用中的章节号和锚点
4. 验证：替换完成后用 grep 验证无遗漏

3.3 目录与锚点

• 目录：使用 文字 格式，锚点由章节标题自动生成
• 锚点规则：中文标题直接作为锚点（如 #1-系统概述），特殊字符用 - 连接
• 层级对应：## → 一级目录，### → 二级目录，以此类推

Phase 4: 质量审查与完善

4.1 审查清单

4.2 可读性优化

1. 第1章系统概述：让用户 3 分钟内理解产品是什么、怎么用
• 产品定位（一句话说明 + 核心能力列表）
• 核心概念对照表（术语 + 类比）
• 快速上手指南（分角色的操作流程）
2. FAQ 附录：覆盖高频问题，每个问题引用对应章节
3. 版本管理：每次重大更新递增版本号，记录更新日期

完整工作流示例

以下是我们实际协作中沉淀的工作流，供参考：

Step 1: 初始化（用户提供首批截图）

用户：这是注册和登录页面的截图，写操作手册吧
AI：→ 分析截图 → 创建手册框架 → 编写第1-2章

Step 2: 增量迭代（用户分批提供截图）

用户：这是助手页面-智能体管理的截图
AI：→ 分析截图 → 新增3.2节 → 更新目录

用户：继续写技能管理
AI：→ 分析截图 → 新增3.3节 → 更新目录

用户：这是后台管理-数据统计的截图
AI：→ 分析截图 → 新增4.2节 → 更新目录

Step 3: 结构调整（用户反馈重组需求）

用户：第4-9章应该归属在后台管理下
AI：→ 重组章节结构 → 重编号 → 更新交叉引用 → 验证

Step 4: 质量优化

用户：整体看看还有哪些不足
AI：→ 全面审查 → 优化第1章 → 补充FAQ → 修复锚点 → 更新版本号

注意事项

1. 截图是第一手资料：所有 UI 描述必须基于截图实际内容，不要臆造
2. 用户说明优先：用户提供的文字说明是功能定性的依据，截图是细节补充
3. 保持格式一致：同一手册中所有章节的写作风格和格式必须统一
4. 增量不破坏：每次新增内容不能破坏已有内容的结构和引用
5. 版本可追溯：每次重大修改更新版本号，方便回溯