🎓 教程设计

5 分钟 Quick Start 法则、渐进式教程结构、可复制粘贴的代码块——让用户从"听说过"到"在用"的最短路径

⏱️ 5 分钟 Quick Start 法则

用户打开你的文档时,平均注意力持续时间是 2 分钟。如果 5 分钟内他们看不到你的产品在工作,90% 的人会离开。Quick Start 的唯一目标是:在 5 分钟内让用户体验到产品的第一个价值点。

安装(30 秒)

一行命令安装,不要让用户选择版本/平台

初始化(60 秒)

一行命令创建项目/配置,自动填充默认值

运行(30 秒)

一行命令启动,看到第一个输出

WOW 时刻(2 分钟)

用户修改一个参数,看到产品响应变化

下一步(60 秒)

指向"深入学习"路径,不要让用户迷失

# ❌ 坏的 Quick Start(至少 15 分钟) ## 前置条件 - Node.js >= 18 - PostgreSQL >= 14 - Redis >= 7 - Docker & Docker Compose ## 步骤 1: 克隆仓库 git clone https://github.com/... ## 步骤 2: 安装依赖 cd project && npm install ## 步骤 3: 配置数据库 cp .env.example .env # 编辑 .env 文件,填入以下 12 个环境变量... ## 步骤 4: 初始化数据库 npm run db:migrate npm run db:seed # ... 还要 10 步 ... --- # ✅ 好的 Quick Start(5 分钟完成) npx create-my-app@latest # 🎉 打开 http://localhost:3000 → 看到你的第一个 Agent 运行! # # 想自定义?编辑 app.config.ts → 保存 → 自动热重载 # # 下一步: [添加自己的工具](/docs/custom-tools) | [连接数据库](/docs/database)

📈 渐进式教程结构

教程不是"文档的另一种写法"。文档是参考手册(按需查阅),教程是学习路径(从头到尾)。好的教程结构是渐进式的——每一步建立在前一步的基础上。

层级名称目标读者内容深度时间投入
L0Quick Start所有人最精简的可运行示例5 分钟
L1基础教程新手核心功能的 3-5 个教程30 分钟/篇
L2进阶教程有经验用户集成、自定义、最佳实践1 小时/篇
L3高级指南专家架构设计、性能优化、内部机制2+ 小时/篇
L4API 参考所有开发者每个函数/端点的详细文档按需查阅
# 渐进式教程的文件结构 /docs/ /getting-started/ quickstart.mdx ← L0: 5 分钟上手 installation.mdx ← 详细安装选项 /tutorials/ 01-first-agent.mdx ← L1: 创建你的第一个 Agent 02-custom-tools.mdx ← L1: 添加自定义工具 03-memory.mdx ← L1: 让 Agent 记住上下文 04-multi-agent.mdx ← L2: 多 Agent 协作 05-production.mdx ← L2: 生产环境部署 06-custom-llm.mdx ← L3: 自定义 LLM Provider /guides/ authentication.mdx ← L2: 认证最佳实践 error-handling.mdx ← L2: 错误处理策略 performance.mdx ← L3: 性能优化 architecture.mdx ← L3: 内部架构 /api/ reference.mdx ← L4: API 参考(自动生成) /examples/ cookbook.mdx ← 复制粘贴即可运行的代码片段

📋 可复制粘贴的代码块

教程中最重要的元素是代码块,但很多代码块是不能直接运行的——缺少 import、缺少上下文、版本不对。以下原则确保你的代码块可以直接复制粘贴运行:

# 代码块 6 原则 1. **完整性**: 每个代码块都是完整可运行的 # ❌ 不完整 agent.run("do something") # agent 从哪来? # ✅ 完整 from mylib import Agent agent = Agent(model="gpt-4") agent.run("do something") 2. **显式 import**: 所有依赖都列出 # ✅ import os from dotenv import load_dotenv load_dotenv() 3. **环境变量有默认值**: 不让用户猜 # ✅ API_KEY = os.getenv("API_KEY", "sk-your-key-here") 4. **输出示例**: 展示预期输出 # 运行结果: # > Agent started... # > Task: do something # > Result: ✅ Done! 5. **版本标注**: 代码基于哪个版本 6. **一键复制**: 文档框架提供复制按钮 # 所有主流文档框架都支持

🗺️ 从零到 Hero 学习路径

学习路径是"有方向的教程集合"。它告诉用户"先学什么,再学什么",避免用户在文档海洋中迷失。

# 学习路径设计示例 ## 🟢 新手路径(第 1 天) 目标: 能用产品完成基本任务 Quick Start (5min) → 基础概念 (15min) → 第一个项目 (30min) → 常见问题 FAQ (10min) ## 🟡 进阶路径(第 1 周) 目标: 能在项目中深度使用 自定义配置 (30min) → 集成第三方服务 (1h) → 生产环境部署 (1h) → 最佳实践 (30min) ## 🔴 专家路径(第 1 月) 目标: 能扩展和贡献 架构深入 (2h) → 插件开发 (2h) → 性能优化 (1h) → 贡献代码 (30min) ## 每个节点的格式 | 路径节点 | 预计时间 | 前置条件 | 产出物 | |----------|---------|---------|--------| | Quick Start | 5min | 无 | 第一个运行的 Demo | | 第一个项目 | 30min | Quick Start | 完整的小项目 | | 集成第三方 | 1h | 第一个项目 | 集成代码 + 测试 |

💡 Vue.js 的文档秘诀

Vue.js 的文档是前端框架中公认最好的。为什么?因为它有两条学习路径:① "渐进式"——从 CDN 引入到单文件组件到完整工程 ② 每个概念都有 CodeSandbox 在线演示。用户不需要安装任何东西就能跟练。这把"从读到做"的摩擦降到零。

🔗 相关专题

🔧 文档框架 · 🔌 API 文档 · ✏️ 写作风格 · ✍️ 返回首页