docs: improve documentation content and styling

- add centered image styling in CSS
- enhance introduction section with practical tips
- expand AI capabilities explanation with new paradigm details
- improve prototype building section with business insights

docs/.vitepress/theme/style.css

@@ -170,6 +170,13 @@
   margin-bottom: 0 !important;
 }
 
+/* 图片默认居中显示 */
+.vp-doc img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 /* 图片高度限制策略：根据长宽比调整最大高度 */
 /* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
 .vp-doc img.img-tall {

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

@@ -105,6 +105,22 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会
 
 首先，请你打开课程中使用的实验网页 [z.ai](https://chat.z.ai/)，`z.ai` 是由智谱 AI（中国领先的大语言模型公司之一）开发的 AI 平台，其核心能力由智谱自研的 GLM 系列大模型提供支持。该平台集成了多项 AI 功能，包括幻灯片生成、海报设计和全栈开发等。在本教程中，我们将重点介绍其全栈开发模块的使用。
 
+::: details 💡 什么是「网页就能编程」的新模式？
+
+过去，开发一个网页应用需要：
+- 安装编程环境（如 Python、Node.js）
+- 配置代码编辑器
+- 学习 HTML/CSS/JavaScript 等语言
+- 处理各种依赖和报错
+
+而现在，借助 AI 编程平台，你只需要：
+- 打开浏览器，访问网页
+- 用自然语言描述你想要的功能
+- AI 自动生成代码并实时预览效果
+
+这种「对话即编程」的模式，让编程从「写代码」变成了「描述需求」。你不需要关心底层技术细节，只需要清楚地告诉 AI 你想要什么，它就能帮你把想法变成可运行的程序。这就是 AI 时代编程的新范式——**Vibe Coding（氛围式编码）**。
+:::
+
 ![](images/index-2026-01-07-18-25-03.png)
 
 输入我们的简单需求后点击 **全栈开发** 按钮，你可以实时观看网页的完整创建过程。通常只需泡一杯咖啡的时间，网页便会自动生成完毕！
@@ -130,6 +146,18 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会
 
 ![](images/image7.png)
 
+::: tip 🌐 探索更多 AI 编程工具
+
+除了 z.ai，还推荐你还可以尝试以下优秀的 AI 编程平台进行测试：
+
+| 工具 | 地址 | 特点 |
+|------|------|------|
+| **Google AI Studio** | [aistudio.google.com/apps](https://aistudio.google.com/apps) | 谷歌官方出品，支持 Gemini 模型，适合快速原型开发 |
+| **Figma Make** | [figma.com/make](https://www.figma.com/make) | 与设计工具深度整合，适合设计师快速实现交互原型 |
+
+想了解更多网页编程工具的详细对比和使用教程，可以参考我们的扩展阅读：[7 款主流 Vibe Coding 在线平台实测对比](./../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.html)
+:::
+
 ### 2.2 对话编程能做什么不能做什么
 
 本节聚焦一个具体问题：当你只依赖对话式 AI、不写任何代码时，它究竟能把事情推进到哪一步。

docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md

@@ -201,7 +201,16 @@ Cline 是 VS Code（Visual Studio Code）的一款 AI 编程 Agent 插件，可
 
 ## 4. 实战：用 AI IDE 在本地生成贪吃蛇游戏
 
-前面讲的主要是“概念”和“差异”。这一小节，我们通过一次完整的实战，把抽象概念落到具体操作上：**新建一个空文件夹 → 用 AI IDE 打开 → 在侧边栏聊天，让它用 React 帮你从零生成一个贪吃蛇游戏。** 这里以上面介绍的 Trae 为例，首先需要安装和简单理解什么是 Trae。
+前面讲的主要是"概念"和"差异"。这一小节，我们通过一次完整的实战，把抽象概念落到具体操作上：**新建一个空文件夹 → 用 AI IDE 打开 → 在侧边栏聊天，让它用 React 帮你从零生成一个贪吃蛇游戏。** 这里以上面介绍的 Trae 为例，首先需要安装和简单理解什么是 Trae。
+
+::: tip 💡 小提示：从网页到本地的无缝衔接
+如果你之前已经在 z.ai 或其他网页端 AI 编程平台上开发过项目，可以直接将代码下载到本地，然后用 AI IDE 打开继续开发。这样既能保留之前的成果，又能享受本地 IDE 更强大的 AI 辅助能力。
+
+操作步骤很简单：
+1. 在 z.ai 等平台点击下载按钮，将项目保存到本地
+2. 解压后用 Trae/Cursor 等 AI IDE 打开该文件夹
+3. 在侧边栏继续与 AI 对话，迭代优化你的项目
+:::
 
 ### 4.1 准备工作：安装并了解 Trae
 

docs/zh-cn/stage-1/1.2-building-prototype/index.md

@@ -65,32 +65,44 @@ const duration = '约 <strong>8 小时</strong>'
 包含商品描述、图片、视频等素材的生成和管理功能。
 ```
 
-如果你兴高采烈的直接把这个需求转换成了原型，然后发给了老板 —— 恭喜你，这个季度的奖金要取消了！因为你做的完全不符合真实场景，只是停留在 AI 的建议和自己的遐想，真正的业务需求需要开口提问，有了好问题才会有好答案。
+如果你兴高采烈的直接把这个需求转换成了原型，然后发给了老板 —— 恭喜你，这个季度的奖金要取消了！因为你做的完全不符合真实场景，只是停留在 AI 的建议和自己的遐想，真正的业务需求需要开口提问，有了好问题才会有好答案。（好的点子甚至大于好的技术）
-
-一个好的点子甚至大于好的技术，譬如最近比较火的一个程序，但就技术水平而言，我相信大家在学习后能够依靠自己独立复现：
-
-![](images/index-2026-01-14-14-35-53.png)
 
 ### 1.1 从想象到真实：学会向业务提问
 
-从最简单的视角出发，你可以先问自己几个问题，也可以让 AI 基于需求提问:
+::: info 💡 先搞清楚：什么是需求？什么是业务？
 
-- 老板说的“效率高一点”到底指什么？是缩短上新时间？还是减少人力投入？还是提高商品详情页的转化率？
+**需求**就是用户真正想要的东西，是他们遇到的麻烦、想解决的问题。比如"老板想让我上架商品更快一点"，这就是一个需求。
-- 当前的上新流程是什么样的？瓶颈在哪里？
-- 团队现在每天要上多少个新品？每个新品需要多少张图和多少字文案？
-- 现有的工作流程中，哪些环节最耗时、最痛苦？
 
-但这些都是猜测的问题，我们要向一线的抖音电商业务方直接提问，“你们的困难和关注的点在哪里？”，通过沟通获得更准确的答案（以下为真实采访结果）：
+**业务**就是用户每天实际在做的事情、他们的工作方式。比如电商运营每天要做的事：上架商品、改价格、做图片、看数据……这些都是业务。
 
-- **管理店铺多、任务杂：**
+**为什么要关注业务？**
-  - 运营手上需要同时管理很多店、很多商品，处在不同阶段推进；
+因为如果你不懂业务，做出来的工具可能就是"看起来很好，但没人用"。只有真正了解用户每天怎么工作、卡在哪里，才能做出真正帮得到他们的东西。
-  - 运营每天在“上新、改价格、调素材、看投放数据”之间频繁切换；
 
-- **内容生产本身，也更像是“在既有素材基础上快速试错”的过程而不是一次性准备好：**
+:::
-  - 先用厂家图包、历史素材或市场上已有样板，快速挂上架；
-  - 通过投少量流量、做简单活动，观察是否有基础转化；
-  - 只有跑出数据的商品，才会投入精力做主图、详情、视频的深度优化。
 
+从最简单的视角出发，你可以先问自己几个问题：
+
+- 老板说"**效率高一点**"，具体是什么意思？是想**做得更快**？还是想**少花钱**？还是想**卖更多货**？
+- 现在是怎么把商品上架的？**哪里做得不顺**？
+- 每天要做多少个**新商品**？每个商品要做多少**图**、写多少**字**？
+- 现在的工作中，**哪件事最麻烦**、**最不想做**？
+
+但这些都是猜测的问题，我们要向一线的抖音电商业务方直接提问，“你们的困难和关注的点在哪里？”，通过沟通获得更准确的答案：
+
+::: info 📋 真实业务采访结果
+
+我们问了做电商运营的人，他们说了这些烦恼：
+
+**1. 事情太多太杂**
+- 一个人要管好几个店，每个店都有很多商品要弄；
+- 每天忙来忙去：**上架新商品**、**改价格**、**做图片**、**看数据**，一件事没做完又要做另一件。
+
+**2. 做内容不是一次做好，而是边做边试**
+- 先用**厂家给的图**、**以前用过的素材**或**网上找的参考图**，快速把商品**上架**试试；
+- 花点小钱做推广，**看看有没有人买**；
+- 只有**卖得好的商品**，才会认真做图、写详情、拍视频。
+
+:::
 做完业务方提问后，我们心怀激情，因为此时我们真正能做出完美的符合业务的产品原型了！—— 又错了，如果我们试图“一口气满足所有诉求”，产品会非常庞大，也很难在课程时间内落地。因此，还需要进一步梳理和收敛，找出真正的核心痛点。
 
 ### 1.2 从发散到收敛：锁定业务的核心痛点和功能