style(docs): improve typography and layout consistency

- Standardize font sizes and line heights across docs
- Add ChapterIntroduction component for consistent chapter headers
- Fix markdown formatting and whitespace issues
- Improve code block and table styling
- Add font size and line height controls to layout

docs/stage-0/0.1-learning-map/index.md

@@ -163,11 +163,13 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
 
 ::: details 第一阶段完整课程大纲 (点击收起)
 **模块一：AI 时代，会说话就会编程**
+
 - **1.1** 普通人的困境与机会？
 - **1.2** AI 能帮你做到什么程度？
 - **1.3** 动手：你的第一个 AI 原生应用
 
 **模块二：认识 AI IDE 工具**
+
 - **2.1** 写代码需要什么环境和工具
 - **2.2** 什么是 IDE，为什么需要 IDE
 - **2.3** AI IDE 和普通 IDE 有什么不同
@@ -175,6 +177,7 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
 - **2.5** 怎么跟 AI 说话才有效
 
 **模块三：动手做出原型**
+
 - **3.1** 把需求变成代码的过程
 - **3.2** 从一个单页面开始
 - **3.3** 遇到报错了怎么办
@@ -182,6 +185,7 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
 - **3.5** 把原型做得像那么回事
 
 **模块四：给原型加上 AI 能力**
+
 - **4.1** 什么是 AI 能力接入（API 调用）
 - **4.2** 如何接入文生图能力
 - **4.3** 如何接入视频生成能力
@@ -189,27 +193,31 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
 - **4.5** 成本控制和错误处理
 
 **模块五：完整项目实战**
+
 - **5.1** 制造模拟数据让原型看起来真实
 - **5.2** 收集反馈并快速调整
 - **5.3** 展示你的成果
 
 **大作业**
+
 - 做一个完整的 Web 应用原型并展示
 
 **附录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
-:::
+  :::
 
 # 为什么要用项目制来训练？
 
@@ -231,7 +239,6 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
 
 短期来看，这种训练确实比较折磨人；但从长期来看，它会极大提高你在求职和职业发展中的竞争力：你会更能扛事儿，更能在不确定环境中找到突破口，也更有能力把 AI 变成真正落地的产品，而不是停留在“玩玩 Demo”阶段。
 
-
 # 提问的艺术：AI 时代的必备技能
 
 在 AI 时代，提问也属于一种 “基本功”。同一份代码、同一个报错，**你怎么提问，几乎决定了 AI 能给出怎样的答案**：是泛泛而谈，还是一步一步给出可落地的改法。
@@ -254,10 +261,10 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
 
 两种方式都可以，但用途不同：
 
-| 方式 | 适用场景 | 关键要求 |
-| --- | --- | --- |
-| **复制粘贴** | 报错堆栈、日志、代码、配置、API 返回 | 尽量完整，不要只截一行关键字 |
-| **截图** | UI 布局问题、交互异常、工具界面找不到按钮 | 截全屏 + 标注重点区域，最好配一句文字说明 |
+| 方式         | 适用场景                                  | 关键要求                                  |
+| ------------ | ----------------------------------------- | ----------------------------------------- |
+| **复制粘贴** | 报错堆栈、日志、代码、配置、API 返回      | 尽量完整，不要只截一行关键字              |
+| **截图**     | UI 布局问题、交互异常、工具界面找不到按钮 | 截全屏 + 标注重点区域，最好配一句文字说明 |
 
 ::: info ⭐ 建议优先级
 能截图就截图；截图沟通不了再复制粘贴沟通。
@@ -268,9 +275,10 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
 如果你不是只要答案，而是要“学会”答案。使用类似下面指令能显著提升解释质量：
 
 ::: tip 🧠 学习型提问示例
+
 - “请先用 5 句话讲清楚这个概念，再给几个问题提问我验证我理解对了没。”
 - ”请你详细解释一下这个报错信息，我不理解为什么会报错。”
-:::
+  :::
 
 # 坚持了好久还是搞不定，我想放弃了
 

docs/stage-0/0.2-ai-capabilities-through-games/index.md

@@ -1,6 +1,5 @@
 # 初级一：AI 时代，会说话就会编程
 
-
 这是一个**基于项目制学习**的学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。
 不要担心犯错或修改内容，我们永远相信你可以做到，请你永远记住：
 
@@ -12,16 +11,18 @@
   </div>
 </el-card>
 
-
 ## 本章导读
 
-::: info 🎯 学习目标
-在这一节，你会用对话式 AI 做出第一个 AI 原生小游戏——一款会“吃单词、写诗、画画”的贪吃蛇，并借此搞清楚 AI 编程的初步效果。
-:::
+<ChapterIntroduction
+  duration="约 <strong>4 小时</strong>，可分多次完成"
+  :tags="['对话式 AI 编程', 'AI 原生小游戏', '贪吃蛇实战']"
+  coreOutput="AI 原生贪吃蛇 + 自创小游戏"
+  expectedOutput="1 个可运行的 AI 原生贪吃蛇 + （可选）1 个你自创的 AI 原生小游戏或 Demo"
+>
 
-- 预计时间：约 **4 小时**，可分多次完成
-- 预期产出：1 个可运行的 AI 原生贪吃蛇 + （可选）1 个你自创的 AI 原生小游戏或 Demo
-- Assignment：复现贪吃蛇，并（可选）实现一种你感兴趣的 AI 原生游戏
+在这一节，你会用对话式 AI 做出第一个 AI 原生小游戏——一款会“吃单词、写诗、画画”的贪吃蛇，并借此搞清楚 AI 编程的初步效果。
+
+</ChapterIntroduction>
 
 <div style="margin: 50px 0;">
   <ClientOnly>
@@ -168,10 +169,11 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会
 一个可参考的经验是：
 
 ::: warning ⚠️ 适用场景指南
+
 - **原型 / Demo / 内部自用工具**：非常适合先交给 AI 打第一版，再由你迭代细节。
 - **面向真实用户的大型产品**：通常需要工程师在架构、抽象、性能和维护上长期投入。
 - **强安全 / 强合规系统（如支付、风控、医疗等）**：在当前阶段，不宜“生成完就直接上线”，必须引入严格的审查与测试流程。
-:::
+  :::
 
 在当下，你可以相对安心地把 AI 视作一个高效的 Demo 与自用工具搭档：
 只要你愿意多测试、多迭代，多问几轮“这里不对，帮我修一下并解释原因”，在原型与内部工具这一级别，整体质量通常是足够且具备实践价值的。