🎓 教程设计
5 分钟 Quick Start 法则、渐进式教程结构、可复制粘贴的代码块——让用户从"听说过"到"在用"的最短路径
⏱️ 5 分钟 Quick Start 法则
用户打开你的文档时,平均注意力持续时间是 2 分钟。如果 5 分钟内他们看不到你的产品在工作,90% 的人会离开。Quick Start 的唯一目标是:在 5 分钟内让用户体验到产品的第一个价值点。
安装(30 秒)
一行命令安装,不要让用户选择版本/平台
初始化(60 秒)
一行命令创建项目/配置,自动填充默认值
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)
📈 渐进式教程结构
教程不是"文档的另一种写法"。文档是参考手册(按需查阅),教程是学习路径(从头到尾)。好的教程结构是渐进式的——每一步建立在前一步的基础上。
| 层级 | 名称 | 目标读者 | 内容深度 | 时间投入 |
| L0 | Quick Start | 所有人 | 最精简的可运行示例 | 5 分钟 |
| L1 | 基础教程 | 新手 | 核心功能的 3-5 个教程 | 30 分钟/篇 |
| L2 | 进阶教程 | 有经验用户 | 集成、自定义、最佳实践 | 1 小时/篇 |
| L3 | 高级指南 | 专家 | 架构设计、性能优化、内部机制 | 2+ 小时/篇 |
| L4 | API 参考 | 所有开发者 | 每个函数/端点的详细文档 | 按需查阅 |
# 渐进式教程的文件结构
/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 文档 · ✏️ 写作风格 · ✍️ 返回首页