diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 2c7c5e4..97bae8e 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,4 +1,6 @@
import DefaultTheme from 'vitepress/theme'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import TypeIt from 'typeit'
@@ -8,6 +10,9 @@ import './style.css'
export default {
extends: DefaultTheme,
+ enhanceApp({ app }) {
+ app.use(ElementPlus)
+ },
setup() {
const route = useRoute()
const { frontmatter } = useData()
diff --git a/docs/stage-0/0.1-learning-map/index.md b/docs/stage-0/0.1-learning-map/index.md
index 5f50fad..f83a8a1 100644
--- a/docs/stage-0/0.1-learning-map/index.md
+++ b/docs/stage-0/0.1-learning-map/index.md
@@ -2,9 +2,13 @@
我们正身处由大语言模型（LLM）推动的人工智能应用爆发期。与以往AI开发高度依赖算法研究不同，**当前行业的重心已转向如何有效利用现有强大模型，构建具有实际价值的应用。**这一转变大幅降低了AI开发的门槛，将焦点从"从零开始构建模型"转移到"将AI能力封装为可落地的解决方案"。
+::: tip 💡 核心机遇
对大多数人而言，如今最大的机遇并非发明新算法，而是学会如何借助AI编码工具快速实现想法。
+:::
+::: info 🚀 Vibe Coding 的核心
AI coding的出现正在改写传统编程学习的规则。你不再需要花费数年时间精通某门语言的每个细节，而是可以通过与AI协作，**以"vibecoding"的方式将创意直接转化为可运行的代码**。会使用大模型生成代码片段只是起点。
+:::
当前真正的挑战在于：如何引导AI生成高质量、可维护的代码？如何将前后端代码组装成完整应用并成功部署上线？在AI时代，如何将文本生成、图像处理、语音识别等AI能力集成到你的应用中？本课程正是为应对这些挑战而设计。
@@ -16,17 +20,21 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
## 三个阶段的成长路径：从“会用 AI”到“会做 AI 产品”
-**第零阶段：体验 AI 编程的魔力**
-通过贪吃蛇等小游戏，你将第一次体验到 AI 辅助编程的能力与边界。这个阶段不需要任何编程基础，只需要你愿意动手尝试——看着 AI 在几分钟内帮你生成一个可玩的游戏，你会直观感受到 vibecoding 的强大。
+::: info 🎮 第零阶段：体验 AI 编程的魔力
+通过贪吃蛇等小游戏，你将第一次**体验到 AI 辅助编程的能力与边界**。这个阶段**不需要任何编程基础**，只需要你愿意动手尝试——看着 AI 在几分钟内帮你生成一个可玩的游戏，你会直观感受到 **vibecoding 的强大**。
+:::
-**第一阶段：掌握产品开发的完整闭环**
-学会使用 AI IDE（如 Cursor、Claude 等工具）将想法转化为可运行的 Web 应用原型。你将学习如何拆解需求、设计多页面应用、接入 AI 能力（文本生成、图像处理等），并用模拟数据完成一个完整的产品 demo。这个阶段结束时，你能独立完成一个像“霍格沃茨画像”那样接入 AI 能力的前端应用。
+::: tip 🛠️ 第一阶段：掌握产品开发的完整闭环
+学会使用 **AI IDE（如 Cursor、Claude 等工具）**将想法转化为可运行的 Web 应用原型。你将学习如何**拆解需求、设计多页面应用、接入 AI 能力**（文本生成、图像处理等），并用模拟数据完成一个完整的产品 demo。这个阶段结束时，你能**独立完成一个像“霍格沃茨画像”那样接入 AI 能力的前端应用**。
+:::
-**第二阶段：成为能上线产品的工程师**
-这是质的飞跃。你将学习现代 Web 开发的核心技能：从 Figma 设计稿到组件化前端实现，从 Supabase 数据库到 API 接口开发，从 Git 版本管理到 Zeabur 部署上线。更重要的是，你将学会集成支付系统（如 Stripe），让你的应用具备真实的商业价值。通过 Dify 等工具，你还将掌握知识库与工作流的构建，为应用注入更强的 AI 能力。
+::: warning 💻 第二阶段：成为能上线产品的工程师
+这是质的飞跃。你将学习**现代 Web 开发的核心技能**：从 **Figma 设计稿**到组件化前端实现，从 **Supabase 数据库**到 API 接口开发，从 Git 版本管理到 **Zeabur 部署上线**。更重要的是，你将学会**集成支付系统（如 Stripe）**，让你的应用具备真实的商业价值。通过 **Dify** 等工具，你还将掌握知识库与工作流的构建，为应用注入更强的 AI 能力。
+:::
-**第三阶段：构建跨平台的复杂应用**
-掌握多平台开发能力，将同一个应用部署到 Web、微信小程序、安卓等多个平台。学习 MCP 等高级工具扩展 IDE 能力，深入理解 RAG 原理并使用 LangGraph 等框架设计复杂的 AI 工作流。这个阶段你将具备高级工程师的思维方式和工具链。
+::: danger 🚀 第三阶段：构建跨平台的复杂应用
+掌握**多平台开发能力**，将同一个应用部署到 Web、微信小程序、安卓等多个平台。学习 **MCP 等高级工具**扩展 IDE 能力，深入理解 **RAG 原理**并使用 **LangGraph** 等框架设计复杂的 AI 工作流。这个阶段你将具备**高级工程师的思维方式和工具链**。
+:::
## 你将获得的核心能力
@@ -37,63 +45,67 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
- **AI 能力集成：** 学会调用各类多模态 AI API，将文本、图像、语音等 AI 能力无缝集成到你的应用中，并通过 RAG 等技术构建智能化产品。
- **产品思维与运营能力：** 从用户研究到需求拆解，从 MVP 设计到产品迭代，从支付集成到用户管理，形成完整的产品开发与运营闭环。
-# 第一阶段学习目标
+# 各阶段学习目标
+
+## 第一阶段学习目标
本阶段本质上是一套“AI 产品经理 Vibe Coding 能力培训课程”，主要面向希望进入 AI 产品方向、但编程基础较弱或几乎为零的同学，目标是在 AI 的帮助下完成一个“能跑、能展示”的 Web 应用原型。
-```
-## 模块一：AI 时代，会说话就会编程
-- 1.1 普通人的困境与机会？
-- 1.2 AI 能帮你做到什么程度？
-- 1.3 动手：你的第一个 AI 原生应用
+::: details 第一阶段完整课程大纲 (点击收起)
+**模块一：AI 时代，会说话就会编程**
+- **1.1** 普通人的困境与机会？
+- **1.2** AI 能帮你做到什么程度？
+- **1.3** 动手：你的第一个 AI 原生应用
-## 模块二：认识 AI IDE 工具
-- 2.1 写代码需要什么环境和工具
-- 2.2 什么是 IDE，为什么需要 IDE
-- 2.3 AI IDE 和普通 IDE 有什么不同
-- 2.4 界面上每个按钮是干什么的
-- 2.5 怎么跟 AI 说话才有效
+**模块二：认识 AI IDE 工具**
+- **2.1** 写代码需要什么环境和工具
+- **2.2** 什么是 IDE，为什么需要 IDE
+- **2.3** AI IDE 和普通 IDE 有什么不同
+- **2.4** 界面上每个按钮是干什么的
+- **2.5** 怎么跟 AI 说话才有效
-## 模块三：动手做出原型
-- 3.1 把需求变成代码的过程
-- 3.2 从一个单页面开始
-- 3.3 遇到报错了怎么办
-- 3.4 做多个页面的应用
-- 3.5 把原型做得像那么回事
+**模块三：动手做出原型**
+- **3.1** 把需求变成代码的过程
+- **3.2** 从一个单页面开始
+- **3.3** 遇到报错了怎么办
+- **3.4** 做多个页面的应用
+- **3.5** 把原型做得像那么回事
-## 模块四：给原型加上 AI 能力
-- 4.1 什么是 AI 能力接入（API 调用）
-- 4.2 如何接入文生图能力
-- 4.3 如何接入视频生成能力
-- 4.4 其他常见 AI 能力的接入方法
-- 4.5 成本控制和错误处理
+**模块四：给原型加上 AI 能力**
+- **4.1** 什么是 AI 能力接入（API 调用）
+- **4.2** 如何接入文生图能力
+- **4.3** 如何接入视频生成能力
+- **4.4** 其他常见 AI 能力的接入方法
+- **4.5** 成本控制和错误处理
-## 模块五：完整项目实战
-- 5.1 制造模拟数据让原型看起来真实
-- 5.2 收集反馈并快速调整
-- 5.3 展示你的成果
+**模块五：完整项目实战**
+- **5.1** 制造模拟数据让原型看起来真实
+- **5.2** 收集反馈并快速调整
+- **5.3** 展示你的成果
-## 大作业
+**大作业**
- 做一个完整的 Web 应用原型并展示
-## 附录A：产品思维补充
-- A.1 什么是好的产品想法
-- A.2 如何发现用户真正的需求
-- A.3 功能优先级怎么排
-- A.4 MVP 思维：最小可行产品
+**附录A：产品思维补充**
+- **A.1** 什么是好的产品想法
+- **A.2** 如何发现用户真正的需求
+- **A.3** 功能优先级怎么排
+- **A.4** MVP 思维：最小可行产品
-## 附录B：常见报错及解决方案
-- B.1 页面显示空白或不加载
-- B.2 数据保存不成功
-- B.3 样式显示不正常
-- B.4 点击按钮没反应
-- B.5 API 调用失败
-- B.6 如何把报错信息有效地反馈给 AI
-```
+**附录B：常见报错及解决方案**
+- **B.1** 页面显示空白或不加载
+- **B.2** 数据保存不成功
+- **B.3** 样式显示不正常
+- **B.4** 点击按钮没反应
+- **B.5** API 调用失败
+- **B.6** 如何把报错信息有效地反馈给 AI
+:::
# 为什么要用项目制来训练？
+::: warning ⚠️ 现实世界的挑战
原因其实很简单：按照大多数同学现在的状态，直接走入职场，很可能会在真实项目和老板 / 客户的“社会毒打”下寸步难行。现实世界更常见的场景是：
+:::
> 你的导师 / 老板：我们要做一个 xxx，目标是达到 yyy 的效果。
>
diff --git a/docs/stage-0/0.2-ai-capabilities-through-games/index.md b/docs/stage-0/0.2-ai-capabilities-through-games/index.md
index b5d67c4..7153bdc 100644
--- a/docs/stage-0/0.2-ai-capabilities-through-games/index.md
+++ b/docs/stage-0/0.2-ai-capabilities-through-games/index.md
@@ -1,30 +1,94 @@
# 初级一：AI 时代，会说话就会编程
+
这是一个**基于项目制学习**的学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。
不要担心犯错或修改内容，我们永远相信你可以做到，请你永远记住：
-🎉 **完成比完美更重要**。
+::: tip 🎉 核心理念
+**完成比完美更重要**。
+:::
+
## 本章导读
+::: info 🎯 学习目标
在这一节，你会用对话式 AI 做出第一个 AI 原生小游戏——一款会“吃单词、写诗、画画”的贪吃蛇，并借此搞清楚 AI 编程的初步效果。
+:::
- 预计时间：约 **4 小时**，可分多次完成
- 预期产出：1 个可运行的 AI 原生贪吃蛇 + （可选）1 个你自创的 AI 原生小游戏或 Demo
- Assignment：复现贪吃蛇，并（可选）实现一种你感兴趣的 AI 原生游戏
+
+
+
+
+
+
+
+
+
## 1. 普通人的困境与机会
很多人脑子里有一堆产品点子：一款帮自己记账的小工具、一个记录孩子成长的网页、甚至一款小游戏。但一想到要写代码、要找程序员,就直接劝退。
AI 出现之后,第一次给了普通人一个全新的可能：你不需要会写代码,只需要学会对 AI 说清楚你想要什么。来自 GitHub Copilot 的[数据显示](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics),超过1500万开发者正在用AI辅助编程,平均46%的代码都是AI生成的! 在Java项目中这个比例能达到61%。
-让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 55%。原本需要 9.6 天才能提交的代码，现在只要 2.4 天就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。采用率的数据也印证了这一点：在获得访问权限的当天，就有 81% 的开发者第一时间完成安装并开始使用；其中 96% 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。
+
+
+
+ 🚀
+ 效率的飞跃：AI 编程新时代
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 55%。原本需要 9.6 天才能提交的代码，现在只要 2.4 天就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。
+
+ 采用率的数据也印证了这一点：在获得访问权限的当天，就有 81% 的开发者第一时间完成安装并开始使用；其中 96% 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。
+
+
对于普通人来说,这个趋势更有意义:如果专业程序员都在大量依赖AI写代码,那我们这些**不会编程的人,为什么不能直接跟AI对话来实现自己的想法呢**?
这门课的目标是帮你练成新技能：通过自然语言对话就能做应用。我们将教你怎么跟 AI 用计算机的语言沟通、怎么让AI帮你把脑子里的想法变成真实可用的产品。
+
+
+
+
+
+
+
+
+
## 2. AI 能帮你做到什么程度
在本节中，我们只讨论一个问题：如果你完全不会写代码，现在的 AI 能帮你做到什么程度？
@@ -80,6 +144,9 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会
在这个边界内，你可以把对话式 AI 看作一位执行力不错的“辅助开发者”。你只需在每一轮用自然语言细化和修正需求，就能快速得到可用的原型。
+**AI 独立完成小型项目的成功率：**
+
+
#### 大型项目需要“流程视角”
一旦超出小而清晰的范围，只指望靠几轮对话让 AI 端到端完成复杂系统，很快就会遇到上限。大型项目往往要接后端、连数据库、整合第三方服务，还牵涉权限、安全、并发和大量业务规则，目标是交付一整套与现有业务深度打通的系统，而不是一页网页。
@@ -94,13 +161,24 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会
一个可参考的经验是：
+::: warning ⚠️ 适用场景指南
- **原型 / Demo / 内部自用工具**：非常适合先交给 AI 打第一版，再由你迭代细节。
- **面向真实用户的大型产品**：通常需要工程师在架构、抽象、性能和维护上长期投入。
- **强安全 / 强合规系统（如支付、风控、医疗等）**：在当前阶段，不宜“生成完就直接上线”，必须引入严格的审查与测试流程。
+:::
在当下，你可以相对安心地把 AI 视作一个高效的 Demo 与自用工具搭档：
只要你愿意多测试、多迭代，多问几轮“这里不对，帮我修一下并解释原因”，在原型与内部工具这一级别，整体质量通常是足够且具备实践价值的。
+
+
+
+
+
+
+
+
+
## 3. 动手：你的第一个 AI 原生应用
让我们回到动手部分，在前一部分，我们已经用 AI 快速做出了一个可以玩的贪吃蛇原型，也大致知道了 AI 能做什么、不能做什么。接下来我们将学习如何用最基础的 **vibe coding** 技巧创建一个**现代版**的 AI 贪吃蛇游戏。我们将让蛇吃掉文字字符而不是豆子。最后让游戏根据吃掉的文字字符生成一首诗，并画一幅画。
@@ -190,6 +268,15 @@ z.ai 的回复将会是这样的：
+
+
+
+
+
+
+
+
+
### 3.3 尝试制作其他小游戏
除了贪吃蛇（游戏），我们可以让想象力尽情驰骋。