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-1/1.1-introduction-to-ai-ide/index.md

@@ -2,12 +2,16 @@
 
 ## 本章导读
 
-::: info 🎯 学习目标
-本章将围绕本地开发环境展开讲解：你将学会从 z.ai 过渡到本地的开发环境，学会在自己的电脑上搭建完整的开发环境，理解什么是 IDE、什么是 AI IDE，以及如何在日常开发中高效地使用它们。
-:::
+<ChapterIntroduction
+  duration="约 <strong>1 天</strong>，可分多次完成"
+  :tags="['本地开发环境搭建', 'IDE 与 AI IDE', '高效开发技巧']"
+  coreOutput="1 个自创小游戏"
+  expectedOutput="使用 Trae 产出"
+>
 
-- 预计时间：约 **1 天**，可分多次完成
-- 预期产出：使用 Trae 产出 **1 个自创小游戏**
+本章将围绕本地开发环境展开讲解：你将学会从 z.ai 过渡到本地的开发环境，学会在自己的电脑上搭建完整的开发环境，理解什么是 IDE、什么是 AI IDE，以及如何在日常开发中高效地使用它们。
+
+</ChapterIntroduction>
 
 <div style="margin: 50px 0;">
   <ClientOnly>
@@ -548,23 +552,44 @@ AI 很认真地给了你一段代码，你也老老实实地复制进去了，
     <div style="font-weight: bold; font-size: 16px;">🚀 挑战任务：打造你的专属游戏</div>
   </template>
 
-你已经用本地 AI IDE 做过一个贪吃蛇。现在请你再挑战一个更复杂一点的小游戏，完整走一遍“描述需求 → 生成项目 → 本地运行 → 调试迭代”的流程。
+  <p>
+    你已经用本地 AI IDE 做过一个贪吃蛇。现在请你再挑战一个更复杂一点的小游戏，完整走一遍“描述需求 →
+    生成项目 → 本地运行 → 调试迭代”的流程。
+  </p>
 
-1. **选择一个比贪吃蛇更复杂的游戏**：
-   - 可以是“俄罗斯方块”“打地鼠”“扫雷”“2048””飞机大战“之类
-   - 或者你自己想象的一个简单原创游戏
-2. **必须用本地 AI IDE 来完成整个过程**：
-   - 新建一个空文件夹，用 AI IDE 打开
-   - 在侧边栏聊天里描述清楚你的游戏需求
-   - 让 AI 负责创建文件、搭建项目结构和实现主要逻辑
-   - 在本地启动开发服务器，确保游戏可以正常运行
-3. **有基本的“可玩性”和反馈**：
-   - 至少包含开始、进行中、结束三种状态
-   - 玩家有明确的操作方式（键盘或鼠标）
-   - 屏幕上有清晰的得分或进度反馈
-4. **至少进行 2 轮以上的迭代**：
-   - 第一轮让 AI 做出“能玩”的版本
-   - 第二轮以后，逐步提出具体改进（样式、难度、交互优化等）
+  <ol>
+    <li>
+      <strong>选择一个比贪吃蛇更复杂的游戏</strong>
+      <ul>
+        <li>可以是“俄罗斯方块”“打地鼠”“扫雷”“2048”“飞机大战”之类</li>
+        <li>或者你自己想象的一个简单原创游戏</li>
+      </ul>
+    </li>
+    <li>
+      <strong>必须用本地 AI IDE 来完成整个过程</strong>
+      <ul>
+        <li>新建一个空文件夹，用 AI IDE 打开</li>
+        <li>在侧边栏聊天里描述清楚你的游戏需求</li>
+        <li>让 AI 负责创建文件、搭建项目结构和实现主要逻辑</li>
+        <li>在本地启动开发服务器，确保游戏可以正常运行</li>
+      </ul>
+    </li>
+    <li>
+      <strong>有基本的“可玩性”和反馈</strong>
+      <ul>
+        <li>至少包含开始、进行中、结束三种状态</li>
+        <li>玩家有明确的操作方式（键盘或鼠标）</li>
+        <li>屏幕上有清晰的得分或进度反馈</li>
+      </ul>
+    </li>
+    <li>
+      <strong>至少进行 2 轮以上的迭代</strong>
+      <ul>
+        <li>第一轮让 AI 做出“能玩”的版本</li>
+        <li>第二轮以后，逐步提出具体改进（样式、难度、交互优化等）</li>
+      </ul>
+    </li>
+  </ol>
 </el-card>
 
 ## 附录

docs/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md

@@ -120,7 +120,6 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
    >   - 蛇吃掉的不是食物，而是英文单词。
    >   - 页面侧边栏展示已收集单词及其数量。
    >   - 游戏结束后，已收集的单词仍然保留，并在新一局中延续。
-   >
    > - 页面 2：写诗页面（Make Poem）
    >   - 展示与游戏页面相同的单词列表（数据一致）。
    >   - 提供一个按钮，将当前收集的单词发送给后端生成一首诗。