---
name: create-doc
description: >-
创建/生成符合项目规范的 HTML 文档或报告。触发场景包括但不限于：
「写文档」「写个文档」「写一个文档」「写报告」「写个报告」「写一个报告」「写需求文档」「写需求」「写说明」「写说明文档」「写方案」「写方案文档」「写设计文档」「写技术文档」「写接口文档」「写API文档」「写总结」「写总结报告」「写复盘」「写复盘报告」「写周报」「写日报」「写月报」。
「出文档」「出个文档」「出一个文档」「出报告」「出个报告」「出一个报告」「出需求文档」「出方案」「出方案文档」「出设计文档」「出说明」「出说明文档」「出总结」「出总结报告」「出复盘」「出复盘报告」。
「生成文档」「生成报告」「生成需求文档」「生成方案」「生成说明」「生成设计文档」「生成总结」「生成复盘」「生成汇报」。
「做文档」「做个文档」「做报告」「做个报告」「做汇报」「做个汇报」「做方案」「做个方案」「做总结」「做个总结」。
「搞文档」「搞个文档」「搞报告」「搞个报告」「整文档」「整个文档」「整报告」「整个报告」「弄文档」「弄个文档」「弄报告」「弄个报告」。
「文档」「报告」「需求文档」「汇报」单独说且上下文在讨论产出物时也应触发。
「生成一个截图版的html」「生成截图版html」「生成一个截图版」「生成截图版」「截图版文档」「截图版报告」「截图版说明」「截图版的」等任何「截图版」表述。
「生成一个html」「生成html」「生成一个html文档」「生成html文档」「写个html」「写html」「做一个html」「做个html」「出一个html」「出个html」「搞个html」「整个html」「弄个html」「html文档」「html报告」等任何明确要求生成 HTML 的表述。
「html」单独说且上下文在讨论产出物时也应触发。
自动生成符合项目规范（HTML格式、中文文件名、base64内嵌图片、lightbox图片放大、截图为主文字为辅）的中文HTML文档，存放到docs/目录。
---
# 创建 HTML 文档
⚠️ **本 Skill 已触发。第一句话必须输出：「🔧 已触发 `create-doc`，按规范生成 HTML 文档...」然后严格按照以下步骤执行，不得跳过。**
生成符合项目规范的中文 HTML 文档/报告。
## 文档规范
### 格式要求
- 所有新建文档使用 HTML 格式（`.html`），禁止 Markdown（`.md`）
- 文件名使用中文命名，存放到项目 `docs/` 目录
- 标题、正文、章节、说明文字全部中文
- 代码、命令、专有名词、接口字段可保留英文
### 可视化优先
- ⚠️ 核心内容优先用截图、图片、流程图、对比图等可视化形式表达
- ⚠️ 截图为主、文字为辅（截图占主导版面，文字仅作简要说明）
- ⚠️ 每段说明文字紧挨其对应截图（「说明→配图」紧密组合）
### 图片处理
- ⚠️ 所有图片以 base64 data URI 形式内嵌到 HTML 中，禁止引用外部图片文件
- ⚠️ 所有图片必须支持点击放大、全屏查看（lightbox 遮罩层）
- lightbox 实现：图片绑定 click → 弹出半透明黑色遮罩 → 图片居中自适应 → ESC/点击背景关闭
### 报告结构
```html
文档标题
文档标题
```
### 截图规范
- 截取整页（full page），不是可视区域；用真实视口宽度（4K 屏自然宽 3840），禁止强制把视口拉宽
- 截图结果必须包含当前页面 URL
- ⚠️ **截图版 HTML 的每张截图都必须加箭头（或红框）标注**，指向该图要说明的关键操作点或关键数据，禁止放无标注的「裸截图」；标注放在页面空白区域，不遮挡关键内容。⚠️ **标注坐标必须精确**：用 `/screenshot-annotate` skill（浏览器 DOM 测得的坐标 → `annotate.js` 换算到截图像素），禁止肉眼估位
- 制作过程中产生的中间截图文件统一放到 `screenshots/` 目录
### 分步操作记录（每步必录）
- ⚠️ 需求、方案、操作过程类文档必须按操作步骤逐段组织，每个步骤独立成段，禁止跳过任何步骤、禁止只贴图不给说明、禁止只写文字不放截图
- ⚠️ 每个步骤必须包含三要素：
1. **做了什么动作**：说明该步骤执行的具体操作（点了什么按钮 / 执行了什么命令 / 打开了什么页面 / 填写了什么字段）
2. **配截图**：该步骤对应的界面截图，必须带箭头/红框/提示文字标注指向关键操作点或关键数据，标注放在页面空白区域，不遮挡关键内容
3. **详细说明结果**：这一步执行后出现了什么结果、验证了什么、为什么重要
- ⚠️ 步骤之间用编号衔接（步骤 1 → 步骤 2 → …），说明文字必须一图一句、逐张不同，禁止用一句套话覆盖所有步骤的截图
- 截图统一用 base64 data URI 内嵌，禁止引用外部图片文件
### 命令与复制按钮
- ⚠️ 文档中出现的每条可执行命令/脚本，必须能**直接复制到终端执行**：命令完整可复制（禁止省略参数、禁止用 `...` 占位、禁止只给片段）、在项目根目录下可直接运行
- ⚠️ 每条命令/脚本写入文档前，必须**亲自在终端实际执行一遍验证确实可行**，验证通过后才能写入文档；执行失败的命令一律不得写入，禁止凭推断「应该能跑」就下结论
- ⚠️ 每个命令块必须配「一键复制」按钮：点击按钮将完整命令复制到剪贴板，并给出「已复制」反馈
- 复制按钮实现：命令块右上角放复制按钮 → 点击用 `navigator.clipboard.writeText(命令全文)` 复制（不可用时用 `document.execCommand('copy')` 兜底）→ 按钮文案短暂变为「已复制」→ 约 2 秒后恢复为「复制」