🎯 触发条件
当用户提到以下关键词时自动激活：
- "根据原型生成手册"
- "原型转用户手册"
- "生成操作手册"
- "prototype to manual"
- 或上传原型截图并说"写手册"
📋 工作流程（共5步）
第1步：信息收集
向用户确认以下信息（如已提供则跳过）：
1. 原型链接 或 上传原型截图（至少1张核心界面）
2. 产品/系统名称
3. 目标用户群体（如：内部员工、外部客户、管理员）
4. 本次手册要覆盖的核心操作流程（如：登录→创建订单→导出报表）
如果用户只给了链接没给截图，提示：
> "请补充至少一张核心界面的截图，因为 AI 无法直接访问 Figma/原型链接，截图能让我准确识别按钮位置和文案。"
第2步：界面信息提取
收到截图后，逐张分析并记录：
- 页面名称/URL路径
- 核心操作按钮及其文案（如："新建订单"、"导出"）
- 输入框/下拉菜单等交互元素
- 页面跳转逻辑（点击A跳转到B）
- 状态提示位置（成功/失败/加载）
输出格式（内部记录，不展示给用户）：
页面1：登录页
- 元素：手机号输入框、密码输入框、登录按钮、忘记密码链接
- 操作：输入手机号+密码 → 点击登录 → 跳转至首页
页面2：首页
- 元素：顶部导航（首页/订单/报表）、"新建订单"按钮（蓝色，右上角）
- 操作：点击"新建订单" → 跳转至订单创建页
第3步：生成手册结构大纲
根据收集到的信息，生成手册的目录结构（Markdown格式），让用户确认或调整。
示例大纲：
# [产品名称] 用户操作手册
## 目录
1. 系统概述
2. 快速入门
2.1 首次登录
2.2 修改密码
3. 核心功能操作
3.1 创建订单
3.2 查询订单
3.3 导出报表
4. 常见问题
5. 附录：界面元素速查
向用户展示大纲并询问：
> "以上是手册的目录结构，请确认是否需要增删或调整章节顺序？"
第4步：逐章节撰写内容
按确认后的大纲，逐章节生成完整内容。
每个操作步骤的写作规范（必须遵守）：
#### 操作名称
**前置条件**：
- 用户已登录系统
- 拥有 [XX] 权限
**操作步骤**：
1. 在 [页面名称] 页面，点击 **[按钮文案]** 按钮（位于页面 [位置描述，如：右上角]）。
2. 在弹出的 [弹窗/页面] 中，填写以下信息：
- 字段A：输入 [示例值]
- 字段B：选择 [选项]
3. 点击 **[确认/提交]** 按钮。
4. 系统提示 "[预期成功提示文案]"，操作完成。
**预期结果**：
- [具体可验证的结果，如：新订单出现在列表中，状态为"待处理"]
**注意事项**：
- ⚠️ [易错点或限制条件]
排版要求（HTML兼容）：
- 每个步骤用有序列表（<ol>）
- 按钮文案用加粗（<strong>）
- 页面名称用斜体（<em>）
- 警告/提示用特殊块级样式（<blockquote> 或 <div class="note">）
- 每章之间用水平线（<hr>）分隔
第5步：输出最终HTML排版版本
将内容转换为完整的HTML文档，包含：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>[产品名称] 用户操作手册</title>
<style>
/* 完整的网页排版样式 */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 20px; color: #1a1a2e; line-height: 1.7; }
h1 { font-size: 28px; border-bottom: 3px solid #4a6cf7; padding-bottom: 12px; }
h2 { font-size: 22px; margin-top: 32px; color: #2d3748; border-left: 4px solid #4a6cf7; padding-left: 14px; }
h3 { font-size: 18px; margin-top: 24px; color: #4a5568; }
ol { padding-left: 24px; }
li { margin-bottom: 8px; }
strong { color: #4a6cf7; }
em { color: #718096; font-style: italic; }
.note { background: #fefcbf; border-left: 4px solid #d69e2e; padding: 12px 18px; margin: 16px 0; border-radius: 4px; }
.tip { background: #ebf8ff; border-left: 4px solid #3182ce; padding: 12px 18px; margin: 16px 0; border-radius: 4px; }
hr { border: none; border-top: 1px solid #e2e8f0; margin: 32px 0; }
.toc { background: #f7fafc; padding: 20px 24px; border-radius: 8px; margin-bottom: 28px; }
.toc ul { list-style: none; padding-left: 0; }
.toc li { padding: 4px 0; }
.toc a { color: #4a6cf7; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.page-header { text-align: center; margin-bottom: 40px; }
.page-header .subtitle { color: #718096; font-size: 16px; }
</style>
</head>
<body>
<!-- 完整手册内容 -->
</body>
</html>
目录必须支持锚点跳转（如 <a href="#section-1">）。
✅ 质量检查清单（输出前自查）
在输出最终结果前，确认以下事项：
- [ ] 所有操作步骤是否包含"前置条件"？
- [ ] 每个按钮/字段是否标注了具体文案（而非"点击相应按钮"）？
- [ ] 是否包含"预期结果"让用户知道操作成功了？
- [ ] 目录是否可点击跳转？
- [ ] 是否包含至少1个"注意事项"或"常见问题"？
- [ ] 排版在手机上是否可读（响应式）？
🚫 禁止行为
- 禁止虚构不存在的功能或按钮（以截图为唯一依据）
- 禁止使用"请参考其他章节"这类模糊指引
- 禁止输出纯文本而不带HTML结构
- 禁止省略任何步骤（即使看起来很简单）
📝 使用示例
用户输入：
> "根据这个原型截图生成用户手册，产品叫'智采系统'，给采购部门用，核心流程是登录→创建采购单→审批查看"
Skill 输出：
1. 先确认信息（如已完整则跳过）
2. 生成目录大纲并请用户确认
3. 逐章节生成带HTML排版的完整手册
4. 输出最终HTML文件
---
## 如何使用这个 Skill
| 步骤 | 操作 |
| :--- | :--- |
| **1. 复制代码** | 将上面的完整 Markdown 代码复制到剪贴板 |
| **2. 在 WorkBuddy 中创建** | 进入 WorkBuddy → Skills → 创建新 Skill → 粘贴代码 |
| **3. 保存并启用** | 命名为 `prototype-to-manual`，保存后即可使用 |
| **4. 触发使用** | 在对话中上传原型截图并说"根据原型生成手册"即可 |
---
### ⚠️ 重要提示
由于 WorkBuddy 等 AI 工具**无法直接访问 Figma 链接或原型 URL**（需要登录权限），这个 Skill 的设计是基于**截图**而非链接。所以使用时请：
1. **截图核心界面**（至少覆盖主流程的每个页面）
2. 批量上传给 AI
3. 触发 Skill 执行
如果你希望支持直接读取 Figma 链接，需要额外配置 Figma API 插件，这个 Skill 暂时不包含该能力（因为需要 API Key 授权）。
