app-docs
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseApp Documentation Generator
应用文档生成工具
Browse a running web app, screenshot every screen, and produce a complete user guide. The documentation is generated from the actual app, not from specs or assumptions.
浏览运行中的Web应用，对每个界面进行截图，并生成完整的用户指南。文档基于实际应用生成，而非基于规格说明或假设。
Browser Tool Detection
浏览器工具检测
Before starting, detect available browser tools:
- Chrome MCP () — preferred for authenticated apps
mcp__claude-in-chrome__* - Playwright MCP () — for public apps
mcp__plugin_playwright_playwright__* - playwright-cli — for scripted flows
If none are available, inform the user and suggest installing Chrome MCP or Playwright.
开始前，先检测可用的浏览器工具：
- Chrome MCP () —— 适用于需要身份验证的应用（优先选择）
mcp__claude-in-chrome__* - Playwright MCP () —— 适用于公开访问的应用
mcp__plugin_playwright_playwright__* - playwright-cli —— 适用于脚本化流程
如果没有可用工具，告知用户并建议安装Chrome MCP或Playwright。
Depth Levels
深度模式
| Depth | Screenshots | Coverage | Duration |
|---|---|---|---|
| quick | ~10 | Main 3-5 screens, happy path | 10-15 min |
| standard | ~30 | All pages, primary workflows | 30-60 min |
| thorough | ~80+ | All pages, all states, mobile views, every CRUD flow | 1-3 hours |
Default: standard
| 深度模式 | 截图数量 | 覆盖范围 | 耗时 |
|---|---|---|---|
| 快速 | ~10 | 核心3-5个界面，主流程 | 10-15分钟 |
| 标准 | ~30 | 所有页面，主要工作流 | 30-60分钟 |
| 详尽 | ~80+ | 所有页面、所有状态、移动端视图、所有CRUD流程 | 1-3小时 |
默认模式：标准
Workflow
工作流程
1. Get App Details
1. 获取应用详情
Ask the user:
- App URL (required)
- App name (for the guide title)
- Auth — do they need to log in? Chrome MCP uses their session; Playwright needs credentials
- Depth — quick, standard, or thorough
- Audience — who will read this guide? (end users, admins, new team members)
向用户确认：
- 应用URL（必填）
- 应用名称（用于指南标题）
- 身份验证——是否需要登录？Chrome MCP使用现有会话；Playwright需要凭据
- 深度模式——快速、标准或详尽
- 目标受众——指南的阅读对象？（终端用户、管理员、新团队成员）
2. Discover All Routes
2. 发现所有路由
Navigate the app and build a page inventory:
- Read the sidebar/navigation menu
- Click through all top-level items
- Note sub-pages and nested navigation
- Check for settings, profile, admin areas
- Record the URL and purpose of each page
Create a task list to track documentation progress.
遍历应用并构建页面清单：
- 读取侧边栏/导航菜单
- 点击所有顶级菜单项
- 记录子页面和嵌套导航
- 检查设置、个人资料、管理区域
- 记录每个页面的URL和用途
创建任务清单以跟踪文档进度。
3. Document Each Page
3. 记录每个页面
For each page in the inventory:
针对清单中的每个页面：
a. Navigate and Orient
a. 导航与定位
- Navigate to the page
- Wait for data to load (no skeleton/spinner in screenshot)
- Resize browser to 1280x720 for consistent screenshots
- 导航至目标页面
- 等待数据加载完成（截图中无加载骨架或加载动画）
- 将浏览器窗口调整为1280x720分辨率以保证截图一致性
b. Screenshot Default State
b. 截图默认状态
- Take a clean screenshot showing the page with realistic data
- Save to with descriptive names:
docs/screenshots/,01-dashboard.png02-contacts-list.png
- 截取包含真实数据的清晰页面截图
- 保存至目录，命名规则：
docs/screenshots/（带描述性名称）01-dashboard.png
c. Describe the Page
c. 描述页面内容
Write a section covering:
- What this page is for — one sentence
- What the user can see — key data, status indicators, navigation elements
- What the user can do — actions available (buttons, forms, filters)
撰写包含以下内容的章节：
- 页面用途——一句话说明
- 用户可见内容——关键数据、状态指示器、导航元素
- 用户可执行操作——可用的操作（按钮、表单、筛选器）
d. Document Key Workflows
d. 记录关键工作流
For interactive pages, document step-by-step:
- Screenshot the starting state
- Perform the action (click button, fill form)
- Screenshot each significant step
- Screenshot the result/confirmation
- Write numbered steps matching the screenshots
针对交互式页面，分步记录：
- 截取初始状态截图
- 执行操作（点击按钮、填写表单）
- 截取每个关键步骤的截图
- 截取结果/确认界面截图
- 撰写与截图匹配的分步说明
e. Depth-Specific Extras
e. 不同深度模式的额外要求
| Extra | quick | standard | thorough |
|---|---|---|---|
| Empty states | Skip | Note if present | Screenshot and document |
| Error states | Skip | Note if present | Trigger and screenshot |
| Dark mode | Skip | Skip | Screenshot every page |
| Mobile view (375px) | Skip | Skip | Screenshot every page |
| All CRUD operations | Skip | Primary only | Every operation with screenshots |
| Settings/config pages | Skip | Document | Document all options |
| 额外要求 | 快速 | 标准 | 详尽 |
|---|---|---|---|
| 空状态 | 跳过 | 若存在则标注 | 截图并记录 |
| 错误状态 | 跳过 | 若存在则标注 | 触发并截图 |
| 深色模式 | 跳过 | 跳过 | 为每个页面截图 |
| 移动端视图（375px） | 跳过 | 跳过 | 为每个页面截图 |
| 所有CRUD操作 | 跳过 | 仅记录主要操作 | 记录所有操作并截图 |
| 设置/配置页面 | 跳过 | 记录内容 | 记录所有选项 |
4. Organise the Guide
4. 整理指南结构
Group pages into logical sections. Common groupings:
markdown
undefined将页面按逻辑分组。常见分组方式：
markdown
undefined[App Name] User Guide
[应用名称] 用户指南
Getting Started
入门指南
- Accessing the app (URL, login)
- Dashboard overview
- Navigation guide
- 应用访问（URL、登录）
- 仪表盘概览
- 导航说明
[Core Feature 1: e.g. Contact Management]
[核心功能1：例如 联系人管理]
Viewing contacts
查看联系人
Adding a new contact
添加新联系人
Editing contact details
编辑联系人详情
Deleting a contact
删除联系人
Searching and filtering
搜索与筛选
[Core Feature 2: e.g. Reports]
[核心功能2：例如 报表]
Viewing reports
查看报表
Creating a report
创建报表
Exporting data
导出数据
[Core Feature 3: e.g. Settings]
[核心功能3：例如 设置]
Profile settings
个人资料设置
Team management
团队管理
Preferences
偏好设置
Tips and Shortcuts
技巧与快捷方式
- Keyboard shortcuts (if any)
- Bulk actions
- Filters and search tips
- 键盘快捷键（若有）
- 批量操作
- 筛选与搜索技巧
Troubleshooting
故障排除
- Common issues noticed during documentation
- Error messages and what they mean
undefined- 文档记录过程中发现的常见问题
- 错误提示及含义
undefined5. Write the Output
5. 输出文档
Screenshots: (numbered for order)
docs/screenshots/NN-description.pngUser guide: with:
docs/USER_GUIDE.md- Relative image paths:
 - Step-by-step numbered lists for workflows
- Tables for reference data (keyboard shortcuts, settings options)
- Admonitions for important notes:
> **Note:** ...
Optional HTML version: If the user wants a hosted version, generate a single HTML file with embedded images (base64) or relative image paths, styled with Tailwind CDN.
截图存储：（按顺序编号）
docs/screenshots/NN-description.png用户指南：包含：
docs/USER_GUIDE.md- 相对图片路径：
 - 工作流使用分步编号列表
- 参考数据使用表格（键盘快捷键、设置选项）
- 重要说明使用提示框：
> **注意：** ...
可选HTML版本：若用户需要可托管版本，生成包含内嵌图片（base64格式）或相对图片路径的单HTML文件，使用Tailwind CDN进行样式美化。
Screenshot Conventions
截图规范
- Resolution: 1280x720 (desktop), 375x812 (mobile if thorough)
- Naming: (e.g.
NN-section-description.png,01-dashboard-overview.png)05-contacts-add-form.png - Content: Wait for data to load. No spinners, no skeleton screens in final shots.
- Annotations: If a screenshot needs callouts, describe them in the markdown text below the image rather than editing the image
- Save location: in the project root
docs/screenshots/
- 分辨率：1280x720（桌面端），375x812（详尽模式下的移动端）
- 命名规则：（例如
NN-章节-描述.png、01-dashboard-overview.png）05-contacts-add-form.png - 内容要求：等待数据加载完成，最终截图中无加载动画或骨架屏
- 标注方式：若截图需要标注，在图片下方的markdown文本中说明，而非直接编辑图片
- 存储位置：项目根目录下的
docs/screenshots/
Autonomy Rules
自主操作规则
- Just do it: Navigate pages, take screenshots, read page content
- Brief confirmation: Before writing docs to files
- Ask first: Before submitting forms, before clicking delete, before entering credentials
- Thorough mode: Same as above but skip confirmation for writing files and filling forms with test data
- 直接执行：导航页面、截取截图、读取页面内容
- 简短确认：在将文档写入文件前需确认
- 提前询问：提交表单、点击删除按钮、输入凭据前需先询问用户
- 详尽模式：与上述规则一致，但写入文件和填写测试数据时无需确认
Quality Rules
质量规则
- Document what the app actually does, not what you think it should do
- Every screenshot must have context — don't just dump images without explanation
- Write for the audience — admin docs are different from end-user docs
- Number screenshots chronologically — so they make sense when viewed in a file browser
- Note gaps — if a feature seems incomplete or confusing, note it (this is feedback for the developer)
- Keep steps atomic — one action per numbered step
- 记录应用实际功能，而非主观预期的功能
- 每张截图必须附带上下文说明——不能仅粘贴图片而无解释
- 根据受众调整内容——管理员文档与终端用户文档需区分
- 截图按顺序编号——确保在文件浏览器中查看时逻辑连贯
- 标注功能缺口——若发现功能不完整或易混淆，需标注（作为给开发者的反馈）
- 步骤拆分至原子级——每个编号步骤对应一个操作