返回总目录：00 总览与导读（MOC）
第四部分的 26 个案例，是"概念复盘"式的快速通览——告诉你每个项目里 AI 能做掉的 70% 和人类要攻坚的 30% 各是什么。而这一组重点案例详解，则是从中精选 9 个最有代表性的案例，做"手把手"级别的深度拆解。
每一篇详解，都把一个真实项目从一句想法做到上线完整走一遍——按下面六个阶段，每阶段都给出你真正要做的动作、要敲的提示词、AI 产出的关键代码片段，以及怎么验收。
[!abstract] 每篇详解的固定六阶段（全轨闭环）
1. 构思——给谁用、解决什么痛点、MVP 砍到多小、什么算成功，产出"一句话规格"。
2. 创建项目——真正把脚手架立起来：装工具 / 建工程 / 申请 API Key / 配环境变量 / 留好退路。
3. 具体提示词编写——把规格展开成留好接口的工单，附真实可复制的提示词。
4. AI 制作——展示 AI 产出的关键代码片段（项目结构、核心函数、配置），理解它给了你什么。
5. 项目检验——接真实接口、逐个排雷（含调试实录），再按"边界清单"验收。
6. 落地——真正部署上线 / 融进日常工作流，拿到可分享的成果；附 30% 复盘表与提示词模板。
为什么是这 9 个？
选择遵循第三部分讲过的三维筛选矩阵，确保四个篇章都有代表、低 / 中 / 高三阶都被覆盖、9 个案例用到的工具尽量不重复：
| # | 案例 | 所属篇章 | 技术栈阶 | 关键工具 | 这一篇重点教你 |
| :-- | :-- | :-- | :-- | :-- | :-- |
| 1 | 案例01 · 智能冰箱剩菜食谱与卡路里追踪器 | 篇章一 · 生活效率 | 低阶 | Bolt.new + Gemini Vision | 多模态识别 + 概率结果兜底 |
| 6 | 案例06 · Obsidian 智能标签与双链推荐器 | 篇章一 · 生活效率 | 高阶 | Claude Code + Node.js | 本地文件批处理 + 增量扫描 |
| 7 | 案例07 · PRD 一键闪变 React 交互原型 | 篇章二 · PM/设计 | 低阶 | Vercel v0 | 把 PRD 写成 AI 听得懂的规范 |
| 12 | 案例12 · 用户故事地图实时协同板 | 篇章二 · PM/设计 | 中高阶 | v0 + Liveblocks | 实时协作 + 并发冲突 |
| 13 | 案例13 · 多语言 SEO 博客自动生成与部署 | 篇章三 · 商业变现 | 中阶（Agent） | Mistral Vibe / Manus | 长程自主工作流的驾驭 |
| 15 | 案例15 · 出海 Mini-CRM（含 Stripe 支付） | 篇章三 · 商业变现 | 中高阶 | Windsurf + Supabase + Stripe | 支付验签 + 多租户安全 |
| 20 | 案例20 · 遗留系统 TypeScript 化重构 | 篇章四 · 硬核工程 | 高阶 | Claude Code | 大规模重构的质量把控 |
| 21 | 案例21 · 单元测试自建闭环 | 篇章四 · 硬核工程 | 高阶 | Claude Code + Vitest | 让 AI 自我验证又不作弊 |
| 26 | 案例26 · Docker 全栈容器编排 | 篇章四 · 硬核工程 | 高阶 | Claude Code + Docker Compose | 服务依赖与持久化编排 |
怎么读这组详解
- 如果你是新手：从案例 1、案例 7 开始。它们是低阶、纯自然语言的，能让你完整体会一次"从一句话到一个能用的东西"。
- 如果你想做产品变现：重点读案例 13、15。它们覆盖了"自主 Agent 出海"和"付费 SaaS 安全"两条最现实的变现路径。
- 如果你是技术从业者：案例 6、20、21、26 是为你准备的硬核场景，集中展示如何驾驭终端自主 Agent。
- 关于提示词：每篇里的提示词都是可直接复制改写的真实范例。但请记住——提示词不是咒语，它的价值在于背后的意图表达逻辑。看提示词时，多想一层"作者为什么这么写"。
[!tip] 一条贯穿 9 篇的主线
你会发现，9 个案例的提示词风格高度一致：先讲清楚"要什么"和"约束是什么"，再让 AI 动手；卡住时不纠缠，而是换一种更精确的说法重启。 这正是第一部分讲的上下文工程在实战中的样子。
返回总目录：00 总览与导读（MOC）