refactor: restructure docs for i18n support

- Move existing documentation to docs/zh-cn/ - Initialize structure for multiple languages (ar-sa, de-de, en-us, etc.) - Add update_readmes.cjs utility script - Update deployment documentation
2026-01-13 20:09:45 +08:00
parent bfa503162c
commit 0e0de6382f
691 changed files with 4956 additions and 576 deletions
@@ -0,0 +1,79 @@
+# 项目介绍
+
+2025年，被很多人视为AI编程的元年。越来越多的人开始用AI写代码，但往往做出来的还停留在玩具层面——不知道如何用Vibe Coding组织开发流程，不知道该选哪些工具，更不清楚从原型到上线中间还差哪些关键步骤。
+
+我们采用循序渐进的**三阶段实战路径**：新手入门阶段通过小游戏快速上手AI编程，第一阶段掌握Vibe Coding工作方式并完成Web应用原型，第二阶段学习全栈开发与部署上线，第三阶段构建跨平台复杂应用。
+
+每个阶段都配有完整项目实战，让你在真实挑战中从玩具走向产品，最终具备**将任何想法落地为可用应用**的能力。
+
+我们相信，掌握Vibe Coding并配合系统化训练，你一个人就能成为**集前后端开发、AI能力集成、产品设计于一身的全能开发者**。
+
+本项目主要面向三类学习者：
+
+- **新手（普通人 / 产品与运营侧）**：帮助非技术背景角色和入门学习者听懂关键概念，完成第一个 AI 小工具或产品原型。
+- **初中级开发者（有一定基础的学生和开发者）**：系统掌握 vibe coding 与原生 AI 应用开发。
+- **高级开发者（公司与初创、开源与独立开发者）**：支持团队和个人快速搭建、验证与迭代原生 AI 应用。
+
+## 📖 内容导航
+
+### 总附录
+
+[AI 能力词典：常见 AI 核心概念与名词、场景解释](/zh-cn/appendix/ai-capability-dictionary)
+
+### 零、幼儿园
+
+| 章节                                                                             | 关键内容                               | 状态 |
+| :------------------------------------------------------------------------------- | :------------------------------------- | :--- |
+| [新手入门：学习地图](/zh-cn/stage-0/0.1-learning-map/)                                 | 整体学习路径导览                       | ✅   |
+| [新手入门：AI 时代，会说话就会编程](/zh-cn/stage-0/0.2-ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅   |
+
+### 一、AI 产品经理
+
+| 章节                                                                    | 关键内容                                          | 状态 |
+| :---------------------------------------------------------------------- | :------------------------------------------------ | :--- |
+| [初级二：认识 AI IDE 工具](/zh-cn/stage-1/1.1-introduction-to-ai-ide/)        | 学会使用 IDE，掌握界面结构和高效提示方式          | ✅   |
+| [初级三：动手做出原型](/zh-cn/stage-1/1.2-building-prototype/)                | 从产品分析拆解，到多页面产品原型实现的完整闭环    | ✅   |
+| [初级四：给原型加上 AI 能力](/zh-cn/stage-1/1.3-integrating-ai-capabilities/) | 理解并完成常见 AI 能力（文本图片视频）的 API 接入 | ✅   |
+| [初级五：完整项目实战](/zh-cn/stage-1/1.4-complete-project-practice/)         | 模拟真实场景、接受用户反馈迭代并完成项目展示      | ✅   |
+| [大作业：做一个完整的 Web 应用原型并展示](/zh-cn/stage-1/1.5-final-project/)  | 独立用 AI IDE 落地并演示一个可用 Web 应用         | ✅   |
+
+#### 附录
+
+| 章节                                                            | 关键内容                                  | 状态 |
+| :-------------------------------------------------------------- | :---------------------------------------- | :--- |
+| [附录A：产品思维补充](/zh-cn/stage-1/appendix-a-product-thinking/)    | 从想法评估到需求拆解与 MVP 的产品思维框架 | ✅   |
+| [附录B：常见报错及解决方案](/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法        | ✅   |
+
+### 二、初中级开发工程师
+
+#### 前端部分
+
+| 章节                                                                                                          | 关键内容                                                                     | 状态 |
+| :------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
+| 前端零：使用 lovart 生产素材                                                                                  | 学会用 lovart 批量生成人物、场景等视觉素材，为 UI 设计和前端开发提供素材基础 | 🚧   |
+| 前端一：Figma 与 MasterGo 入门                                                                                | 用设计工具梳理信息架构和页面结构，为前端实现打基础                           | 🚧   |
+| 前端二：构建第一个现代应用程序-UI 设计                                                                        | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路                       | 🚧   |
+| 前端三：参考 UI 设计规范与多产品 UI 设计                                                                      | 围绕统一主视觉扩展多产品界面，练习系统化设计能力                             | 🚧   |
+| [前端四：一起做霍格沃茨画像](/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发                         | 🚧   |
+
+#### 后端与全栈部分
+
+| 章节                                                                                                              | 关键内容                                                      | 状态 |
+| :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
+| 后端一：什么是 API                                                                                                | 理解 HTTP 接口与请求响应模型，为后端集成与联调做准备          | 🚧   |
+| [后端二：从数据库到 Supabase](/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面        | 🚧   |
+| 后端三：大模型辅助编写接口代码与接口文档                                                                          | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端    | 🚧   |
+| 后端四：Git 工作流与 Zeabur 部署                                                                                  | 在 Git 工作流中管理代码，并将应用部署到 Zeabur 上线           | 🚧   |
+| 后端五：现代 CLI 开发工具                                                                                         | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流   | 🚧   |
+| 后端六：如何集成 stripe 等收费系统                                                                                | 接入支付系统，完成收费链路与基础结算流程                      | 🚧   |
+| 大作业 1：构建第一个现代应用程序-全栈应用                                                                         | 综合前端、后端与支付模块，完成可上线的全栈 Web 应用           | 🚧   |
+| 大作业 2：现代前端组件库 + Trae 实战                                                                              | 使用现代前端组件库与 Trae，独立完成可登录注册并支持收费的产品 | 🚧   |
+
+#### AI 能力附录
+
+| 章节                                                                                                                                                            | 关键内容                                                       | 状态 |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
+| [AI 一：Dify 入门与知识库集成](/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 | 🚧   |
+| AI 二：学会查询 AI 词典与集成多模态 API                                                                                                                         | 学会查找合适的模型与 API，并把文本、图像等多模态能力接入产品   | 🚧   |
+
+### 三、高级开发工程师
@@ -0,0 +1,245 @@
+---
+layout: home
+hero:
+  name: 'Easy-Vibe'
+  text: 'Learn Vibe Coding from 0 to 1'
+  tagline:
+    - 不止是写代码，而是成为集产品、设计、全栈开发于一身的超级个体。
+    - 从想法到原型，从原型到上线，把每一次输出变成可交付的产品。
+    - 让 AI 成为你的搭档：更快、更稳、更有创造力。
+    - 用系统化的学习路径，构建你的个人技术与产品护城河。
+  actions:
+    - theme: brand
+      text: 开启学习之旅
+      link: /zh-cn/stage-0/0.1-learning-map/
+    - theme: alt
+      text: ⭐️ GitHub 加速更新
+      link: https://github.com/datawhalechina/easy-vibe
+features:
+  - title: 零基础友好
+    details: 专为非技术背景设计。从"会说话就会编程"开始，通过贪吃蛇等小游戏快速上手，打破技术恐惧。
+  - title: 循序渐进的实战路径
+    details: 独创"三阶段"学习法。从 AI 产品经理思维，到全栈开发落地，再到复杂应用构建，步步为营。
+  - title: Vibe Coding 新范式
+    details: 掌握 AI 时代的编程核心。学会与 AI 结对编程，让 IDE 成为你的最强搭档。
+  - title: 真实项目驱动
+    details: 拒绝玩具代码。亲手构建 Web 原型、全栈应用、微信小程序，将每一个想法真正落地为产品。
+---
+
+<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
+  <h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">为什么选择 Easy-Vibe？</h2>
+  <p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
+    2025 年是 AI 编程的元年。越来越多的人开始尝试 AI 编程，但往往止步于简单的 Demo。<br>
+    Easy-Vibe 致力于填补这一空白，教你如何像专业人士一样，用 AI 组织开发流程，从原型到上线，打通产品落地的最后一公里。
+  </p>
+</div>
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const base = site.value.base
+</script>
+
+<div class="stage-container">
+  <a :href="base + 'cn/stage-0/0.1-learning-map/'" class="stage-card">
+    <div class="stage-icon">🌱</div>
+    <h3>Stage 0: 新手入门</h3>
+    <p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
+    <span>查看详情 →</span>
+  </a>
+  <a :href="base + 'cn/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
+    <div class="stage-icon">🎨</div>
+    <h3>Stage 1: AI 产品经理</h3>
+    <p>掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。</p>
+    <span>查看详情 →</span>
+  </a>
+  <a :href="base + 'cn/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>Stage 2: 初中级开发</h3>
+    <p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
+    <span>查看详情 →</span>
+  </a>
+  <a :href="base + 'cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>Stage 3: 高级开发</h3>
+    <p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>
+    <span>查看详情 →</span>
+  </a>
+</div>
+
+<style>
+.VPHomeHero .text {
+  font-size: 1.8rem;
+}
+
+.stage-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  max-width: 1152px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+  .stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
+  .stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
+  .stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
+  .stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
+
+  .stage-card {
+    background-color: var(--vp-c-bg-soft);
+    border-radius: 12px;
+    padding: 24px;
+    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+    border: 1px solid var(--vp-c-bg-soft);
+    position: relative;
+    overflow: hidden;
+    text-decoration: none;
+  }
+
+  .stage-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background-color: var(--card-color);
+    opacity: 0.5;
+    transition: opacity 0.2s;
+  }
+
+  .stage-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    border-color: var(--card-color);
+  }
+
+  .stage-card:hover::before {
+    opacity: 1;
+  }
+
+  .stage-icon {
+    font-size: 3rem;
+    margin-bottom: 16px;
+    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
+  }
+
+  .stage-card h3 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--vp-c-text-1);
+    transition: color 0.2s;
+  }
+
+  .stage-card:hover h3 {
+    color: var(--card-color);
+  }
+
+  .stage-card p {
+    font-size: 0.9rem;
+    color: var(--vp-c-text-2);
+    margin-bottom: 16px;
+    line-height: 1.5;
+  }
+
+  .stage-card a {
+    color: var(--card-color);
+    font-weight: 500;
+    text-decoration: none;
+    font-size: 0.9rem;
+    display: inline-flex;
+    align-items: center;
+    transition: transform 0.2s;
+  }
+
+  .stage-card a:hover {
+    text-decoration: none;
+    transform: translateX(4px);
+  }
+</style>
+
+<div class="footer-cta">
+  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
+  <h3 class="support-title">觉得有帮助？</h3>
+  <p class="support-text">你的 Star 是我们持续更新的动力 🚀</p>
+  <div class="github-badge">
+    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
+      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
+    </a>
+  </div>
+</div>
+
+<style>
+.footer-cta {
+  margin-top: 100px;
+  padding: 40px 24px;
+  text-align: center;
+  background: var(--vp-c-bg-soft);
+  border-radius: 24px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 40px;
+  border: 1px solid var(--vp-c-bg-soft);
+  transition: border-color 0.3s;
+}
+
+.footer-cta:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.love-text {
+  color: var(--vp-c-text-3);
+  font-size: 0.875rem;
+  margin-bottom: 24px;
+  font-family: var(--vp-font-family-mono);
+}
+
+.support-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: var(--vp-c-text-1);
+}
+
+.support-text {
+  font-size: 1.1rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 24px;
+}
+
+.github-badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.github-badge img {
+  height: 32px;
+}
+
+.VPButton.alt[href*="github.com"] {
+  background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
+  background-size: 200% auto;
+  border: 1px solid transparent !important;
+  color: white !important;
+  font-weight: 600;
+  animation: gradient 3s linear infinite;
+  box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
+  transition: all 0.3s ease;
+}
+
+.VPButton.alt[href*="github.com"]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
+  background-position: right center;
+}
+
+@keyframes gradient {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+</style>
@@ -0,0 +1,178 @@
+:root {
+  /* 调整侧边栏分组之间的间距 */
+  --vp-sidebar-nav-section-gap: 8px;
+  --ev-doc-font-size: 13px;
+  --ev-doc-line-height: 1.65;
+}
+
+.vp-doc {
+  font-size: var(--ev-doc-font-size);
+  line-height: var(--ev-doc-line-height);
+  --el-font-size-extra-large: calc(var(--ev-doc-font-size) + 6px);
+  --el-font-size-large: calc(var(--ev-doc-font-size) + 4px);
+  --el-font-size-medium: calc(var(--ev-doc-font-size) + 2px);
+  --el-font-size-base: var(--ev-doc-font-size);
+  --el-font-size-small: calc(var(--ev-doc-font-size) - 1px);
+  --el-font-size-extra-small: calc(var(--ev-doc-font-size) - 2px);
+  --el-font-line-height-primary: var(--ev-doc-line-height);
+}
+
+.vp-doc p,
+.vp-doc ul,
+.vp-doc ol {
+  line-height: var(--ev-doc-line-height) !important;
+}
+
+.vp-doc :where(p, ul, ol, table, blockquote, pre, details, figure) {
+  margin: 10px 0;
+}
+
+.vp-doc blockquote {
+  font-size: 0.9em !important;
+  color: var(--vp-c-text-2);
+}
+
+.vp-doc blockquote p {
+  font-size: inherit !important;
+  line-height: 1.4 !important;
+}
+
+.vp-doc :where(li) {
+  margin: 4px 0;
+}
+
+.vp-doc :where(ul, ol) {
+  padding-left: 1.15em;
+}
+
+.vp-doc :where(h1, h2, h3, h4, h5, h6) {
+  line-height: 1.3;
+}
+
+.vp-doc :where(h1) {
+  margin: 22px 0 12px;
+}
+
+.vp-doc :where(h2) {
+  margin: 20px 0 10px;
+}
+
+.vp-doc h2 {
+  margin: 16px 0 8px !important;
+  padding-top: 10px !important;
+  border-top: 0 !important;
+}
+
+.vp-doc :where(h3) {
+  margin: 18px 0 8px;
+}
+
+.vp-doc :where(h4, h5, h6) {
+  margin: 16px 0 8px;
+}
+
+.vp-doc :where(hr) {
+  margin: 14px 0;
+}
+
+.vp-doc :where(th, td) {
+  padding: 6px 10px;
+}
+
+.vp-doc :where(:not(pre) > code) {
+  font-size: 0.95em;
+}
+
+/* 减少一级标题（如"前端开发"）底部的间距 */
+.VPSidebarItem.level-0 {
+  padding-bottom: 4px !important;
+}
+
+/* 减少一级标题文字与下方子菜单的间距 */
+.VPSidebarItem.level-0 > .item {
+  padding-bottom: 2px !important;
+}
+
+/* 调整子菜单项之间的间距 - 针对所有层级 */
+.VPSidebarItem.level-1 .item,
+.VPSidebarItem.level-2 .item,
+.VPSidebarItem.level-3 .item,
+.VPSidebarItem.level-4 .item {
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+  min-height: 24px !important; /* 强制减小最小高度 */
+}
+
+/* 针对可能存在的特定类名进行覆盖，确保紧凑 */
+.VPSidebarGroup {
+  padding-top: 6px !important;
+  padding-bottom: 6px !important;
+}
+
+/* 进一步压缩分组标题与第一项之间的间距 */
+.VPSidebarItem.level-0 + .VPSidebarItem.level-1 {
+  margin-top: -2px !important;
+}
+
+/* 压缩分组标题本身的行高 */
+.VPSidebarItem.level-0 .text {
+  line-height: 1.3 !important;
+}
+
+/* 压缩子项的行高 */
+.VPSidebarItem.level-1 .text,
+.VPSidebarItem.level-2 .text,
+.VPSidebarItem.level-3 .text {
+  line-height: 1.4 !important;
+  padding: 0 !important; /* 移除文字本身的内边距 */
+}
+
+/* 强制链接本身没有额外的边距 */
+.VPSidebarItem .VPLink {
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+  min-height: auto !important;
+}
+
+/* 图片高度限制策略：根据长宽比调整最大高度 */
+/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
+.vp-doc img.img-tall {
+  max-height: 380px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-very-tall {
+  max-height: 280px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-ultra-tall {
+  max-height: 200px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-limit-width {
+  max-width: 100% !important;
+  max-height: 320px !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-limit-height {
+  max-height: 450px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+/* Fix tagline wrapping issues */
+.VPHomeHero .tagline {
+  white-space: nowrap;
+  max-width: none !important;
+}
@@ -0,0 +1,293 @@
+# 从创意到 AI 产品
+
+我们正身处由大语言模型（LLM）推动的人工智能应用爆发期。与以往AI开发高度依赖算法研究不同，**当前行业的重心已转向如何有效利用现有强大模型，构建具有实际价值的应用。**这一转变大幅降低了AI开发的门槛，将焦点从"从零开始构建模型"转移到"将AI能力封装为可落地的解决方案"。
+
+::: tip 💡 核心机遇
+对大多数人而言，如今最大的机遇并非发明新算法，而是学会如何借助AI编码工具快速实现想法。
+:::
+
+::: info 🚀 Vibe Coding 的核心
+AI coding的出现正在改写传统编程学习的规则。你不再需要花费数年时间精通某门语言的每个细节，而是可以通过与AI协作，**以"vibecoding"的方式将创意直接转化为可运行的代码**。会使用大模型生成代码片段只是起点。
+:::
+
+当前真正的挑战在于：如何引导AI生成高质量、可维护的代码？如何将前后端代码组装成完整应用并成功部署上线？在AI时代，如何将文本生成、图像处理、语音识别等AI能力集成到你的应用中？本课程正是为应对这些挑战而设计。
+
+我们不空谈理论，聚焦于AI辅助编程的端到端实战——**从利用 AI IDE 等工具快速构建原型，到将想法落地为真实可用的产品**。你将学会如何与AI高效协作编码，如何利用vibecoding思维快速迭代，如何调用常见的AI功能（文本生成、图像处理等）为应用赋能，以及如何完成从开发到上线的完整闭环。
+
+# 为什么要学这个？它将如何帮助我的未来？
+
+本课程专为初级水平的学生设计，侧重于 AI 原生应用的实际开发和创新思维培养。通过三个循序渐进的学习阶段，你将从零基础逐步成长为能够独立开发和运营 AI 应用的全栈开发者。
+
+## 三个阶段的成长路径：从“会用 AI”到“会做 AI 产品”
+
+<div class="stage-intro">
+  <div class="stage-card">
+    <div class="stage-icon">🎮</div>
+    <h3>新手入门</h3>
+    <p class="stage-role">体验 AI 编程</p>
+    <div class="stage-tags">
+      <span>贪吃蛇小游戏</span>
+      <span>零基础上手</span>
+      <span>Vibecoding 初体验</span>
+      <span>几分钟生成</span>
+    </div>
+  </div>
+</div>
+
+<div class="stage-grid">
+  <div class="stage-card">
+    <div class="stage-icon">🛠️</div>
+    <h3>第一阶段</h3>
+    <p class="stage-role">产品经理 / 运营</p>
+    <div class="stage-tags">
+      <span>AI IDE (Cursor/Claude)</span>
+      <span>需求拆解 & 原型</span>
+      <span>接入 AI 能力</span>
+      <span>完整 Demo 开发</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>第二阶段</h3>
+    <p class="stage-role">初中级开发 / 独立开发者</p>
+    <div class="stage-tags">
+      <span>Figma 到代码</span>
+      <span>Supabase 数据库</span>
+      <span>Stripe 支付集成</span>
+      <span>Dify 知识库</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>第三阶段</h3>
+    <p class="stage-role">高级开发 / 架构师</p>
+    <div class="stage-tags">
+      <span>Web/小程序/多端</span>
+      <span>MCP 高级工具</span>
+      <span>RAG & LangGraph</span>
+      <span>高级工程师思维</span>
+    </div>
+  </div>
+</div>
+
+<style>
+.stage-intro {
+  margin: 20px auto;
+  max-width: 400px;
+}
+
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stage-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.stage-card:hover {
+  transform: translateY(-2px);
+  background-color: var(--vp-c-bg-mute);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  border-color: var(--vp-c-brand);
+}
+
+.stage-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.stage-card h3 {
+  margin: 0 0 4px 0 !important;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stage-role {
+  margin: 0 0 8px 0 !important;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.stage-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px;
+}
+
+.stage-tags span {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stage-card:hover .stage-tags span {
+  background-color: var(--vp-c-bg);
+  border-color: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+}
+</style>
+
+## 你将获得的核心能力
+
+通过这个完整的学习路径，你将获得：
+
+- **Vibe Coding开发能力：** 熟练使用 vibecoding 思维和 AI 编码工具，将开发效率提升数倍。不再需要死记硬背语法，而是学会如何引导 AI 生成高质量代码。
+- **全栈开发技能：** 从 UI 设计到前端实现，从数据库设计到 API 开发，从本地开发到云端部署，掌握现代 Web 应用的完整技术栈。
+- **AI 能力集成：** 学会调用各类多模态 AI API，将文本、图像、语音等 AI 能力无缝集成到你的应用中，并通过 RAG 等技术构建智能化产品。
+- **产品思维与运营能力：** 从用户研究到需求拆解，从 MVP 设计到产品迭代，从支付集成到用户管理，形成完整的产品开发与运营闭环。
+
+# 各阶段学习目标
+
+## 第一阶段学习目标
+
+本阶段本质上是一套“AI 产品经理 Vibe Coding 能力培训课程”，主要面向希望进入 AI 产品方向、但编程基础较弱或几乎为零的同学，目标是在 AI 的帮助下完成一个“能跑、能展示”的 Web 应用原型。
+
+::: 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 说话才有效
+
+**模块三：动手做出原型**
+
+- **3.1** 把需求变成代码的过程
+- **3.2** 从一个单页面开始
+- **3.3** 遇到报错了怎么办
+- **3.4** 做多个页面的应用
+- **3.5** 把原型做得像那么回事
+
+**模块四：给原型加上 AI 能力**
+
+- **4.1** 什么是 AI 能力接入（API 调用）
+- **4.2** 如何接入文生图能力
+- **4.3** 如何接入视频生成能力
+- **4.4** 其他常见 AI 能力的接入方法
+- **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
+  :::
+
+# 为什么要用项目制来训练？
+
+::: warning ⚠️ 现实世界的挑战
+原因其实很简单：按照大多数同学现在的状态，直接走入职场，很可能会在真实项目和老板 / 客户的“社会毒打”下寸步难行。现实世界更常见的场景是：
+:::
+
+> 你的导师 / 老板：我们要做一个 xxx，目标是达到 yyy 的效果。
+>
+> 文档？现成框架？详细的需求说明？很多时候都不存在。
+
+真实工作中的许多任务，本质上就是在高度不确定的环境下解决从未见过的问题：需求是模糊的，边界是变化的，没人告诉你标准答案，你需要自己查资料、做实验、搭原型、不断迭代，最后给出一个“能跑、能用、能上线”的解决方案。
+
+这门课想做的，就是在一个相对安全的环境里，提前给你一次“模拟社会毒打”：
+
+- 通过看似有一定难度的项目任务，迫使你练习拆解问题、设计方案、自己寻找资料
+- 通过不那么“傻瓜化”的脚手架和代码，让你学会阅读、理解和改造一份中大型代码库
+- 通过从创意到上线的完整闭环，让你体验真实产品从 0 到 1 的完整过程
+
+短期来看，这种训练确实比较折磨人；但从长期来看，它会极大提高你在求职和职业发展中的竞争力：你会更能扛事儿，更能在不确定环境中找到突破口，也更有能力把 AI 变成真正落地的产品，而不是停留在“玩玩 Demo”阶段。
+
+# 提问的艺术：AI 时代的必备技能
+
+在 AI 时代，提问也属于一种 “基本功”。同一份代码、同一个报错，**你怎么提问，几乎决定了 AI 能给出怎样的答案**：是泛泛而谈，还是一步一步给出可落地的改法。
+
+::: tip ✅ 养成好习惯
+把“向 AI 提问”当成日常开发流程的一部分：遇到不懂、卡住的问题就立刻问。
+:::
+
+## 为什么这是必备技能？
+
+- **现实很少有完整文档**：更多时候你面对的是不清晰的需求、半成品代码、零散的错误信息
+- **AI 是你随身的导师 + 同事**：会提问的人，能把它变成“高质量的结对编程”
+- **能力上限由沟通决定**：你越能提供关键信息、越能约束输出格式，答案越可用
+
+::: warning ⚠️ 常见误区
+只问一句“为啥报错？”通常只能得到一堆猜测。把上下文补齐，才会得到可执行的方案。
+:::
+
+## 如何把信息“喂给”AI：截图 vs 复制粘贴
+
+两种方式都可以，但用途不同：
+
+| 方式         | 适用场景                                  | 关键要求                                  |
+| ------------ | ----------------------------------------- | ----------------------------------------- |
+| **复制粘贴** | 报错堆栈、日志、代码、配置、API 返回      | 尽量完整，不要只截一行关键字              |
+| **截图**     | UI 布局问题、交互异常、工具界面找不到按钮 | 截全屏 + 标注重点区域，最好配一句文字说明 |
+
+::: info ⭐ 建议优先级
+能截图就截图；截图沟通不了再复制粘贴沟通。
+:::
+
+## 让 AI “解释得很好”的提示词技巧
+
+如果你不是只要答案，而是要“学会”答案。使用类似下面指令能显著提升解释质量：
+
+::: tip 🧠 学习型提问示例
+
+- “请先用 5 句话讲清楚这个概念，再给几个问题提问我验证我理解对了没。”
+- ”请你详细解释一下这个报错信息，我不理解为什么会报错。”
+  :::
+
+# 坚持了好久还是搞不定，我想放弃了
+
+也许是你坚持的方法不对。不要一个人在黑暗中硬撑，可以来跟作者和助教们聊聊：把你已经尝试过的方法、遇到的具体卡点、和你目前的心理状态，坦诚地说出来。很多时候，只要稍微调整一下方向、补上一个关键知识点，你就能继续往前走。
+
+# 我觉得教程有的设计不合理
+
+欢迎随时联系作者、提交 issue，或者在群里 / 课堂上直接反馈。我们非常希望和你一起把这套教程打磨得越来越好：哪里不清晰、哪里体验不好、哪里让你白费力气，都可以坦诚指出来。越真实、越具体的反馈，越能帮助后来者少踩坑。
+
+# Reference
+
+- [南京大学 计算机科学与技术系 计算机系统基础 课程实验](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
@@ -0,0 +1,676 @@
+# 初级一：AI 时代，会说话就会编程
+
+这是一个**基于项目制学习**的学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。
+不要担心犯错或修改内容，我们永远相信你可以做到，请你永远记住：
+
+<el-card shadow="hover" style="border-radius: 16px; border: 2px dashed #FFB6C1; background-color: #FFF0F5; margin: 20px 0;">
+  <div style="text-align: center;">
+    <div style="font-size: 24px; font-weight: 600; color: #595959;">
+       完成比完美更重要 🐣
+    </div>
+  </div>
+</el-card>
+
+## 本章导读
+
+<ChapterIntroduction
+  duration="约 <strong>4 小时</strong>，可分多次完成"
+  :tags="['对话式 AI 编程', 'AI 原生小游戏', '贪吃蛇实战']"
+  coreOutput="AI 原生贪吃蛇 + 自创小游戏"
+  expectedOutput="1 个可运行的 AI 原生贪吃蛇 + （可选）1 个你自创的 AI 原生小游戏或 Demo"
+>
+
+在这一节，你会用对话式 AI 做出第一个 AI 原生小游戏——一款会“吃单词、写诗、画画”的贪吃蛇，并借此搞清楚 AI 编程的初步效果。
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '困境与机会', description: '普通人的编程新可能' },
+      { title: '能力初探', description: '60秒极速开发体验' },
+      { title: '原生实战', description: '打造AI原生贪吃蛇' },
+      { title: '拓展创造', description: '举一反三做游戏' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. 普通人的困境与机会
+
+很多人脑子里有一堆产品点子：一款帮自己记账的小工具、一个记录孩子成长的网页、甚至一款小游戏。但一想到要写代码、要找程序员,就直接劝退。
+
+AI 出现之后,第一次给了普通人一个全新的可能：你不需要会写代码,只需要学会对 AI 说清楚你想要什么。来自 GitHub Copilot 的[数据显示](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics),超过1500万开发者正在用AI辅助编程,平均46%的代码都是AI生成的! 在Java项目中这个比例能达到61%。
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span style="font-size: 20px;">🚀</span>
+      <span style="font-weight: bold; font-size: 16px;">效率与采用率的飞跃</span>
+    </div>
+  </template>
+  
+  <el-row :gutter="20" style="margin-bottom: 24px;">
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">速度提升</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">天</span></div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">任务耗时 (原9.6天)</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">首日安装率</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">建议采纳率</div>
+      </div>
+    </el-col>
+  </el-row>
+
+  <div style="line-height: 1.8; color: #606266;">
+    让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 <b>55%</b>。原本需要 9.6 天才能提交的代码，现在只要 <b>2.4 天</b>就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。采用率的数据也印证了这一点：在获得访问权限的当天，就有 <b>81%</b> 的开发者第一时间完成安装并开始使用；其中 <b>96%</b> 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。
+  </div>
+</el-card>
+
+对于普通人来说,这个趋势更有意义:如果专业程序员都在大量依赖AI写代码,那我们这些**不会编程的人,为什么不能直接跟AI对话来实现自己的想法呢**?
+
+这门课的目标是帮你练成新技能：通过自然语言对话就能做应用。我们将教你怎么跟 AI 用计算机的语言沟通、怎么让AI帮你把脑子里的想法变成真实可用的产品。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: '困境与机会', description: '普通人的编程新可能' },
+      { title: '能力初探', description: '60秒极速开发体验' },
+      { title: '原生实战', description: '打造AI原生贪吃蛇' },
+      { title: '拓展创造', description: '举一反三做游戏' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. AI 能帮你做到什么程度
+
+在本节中，我们只讨论一个问题：如果你完全不会写代码，现在的 AI 能帮你做到什么程度？
+
+大致来说，你可以把当前大模型的能力理解为：可以胜任简单的内部小工具、数据可视化看板，以及一些轻量级小游戏的开发。这些能力用来做自用工具、从产品经理视角验证需求，基本已经足够。但若想一键生成可直接商用的成熟产品，通常仍需要人工在流程设计、细节打磨上持续优化。
+
+接下来，我们就以贪吃蛇为例，具体看看 AI 编程目前到底能做到什么程度。
+
+### 2.1 60 秒做一个贪吃蛇游戏
+
+首先，请你打开课程中使用的实验网页 [z.ai](https://chat.z.ai/)，`z.ai` 是由智谱 AI（中国领先的大语言模型公司之一）开发的 AI 平台，其核心能力由智谱自研的 GLM 系列大模型提供支持。该平台集成了多项 AI 功能，包括幻灯片生成、海报设计和全栈开发等。在本教程中，我们将重点介绍其全栈开发模块的使用。
+
+![](images/index-2026-01-07-18-25-03.png)
+
+输入我们的简单需求后点击 **全栈开发** 按钮，你可以实时观看网页的完整创建过程。通常只需泡一杯咖啡的时间，网页便会自动生成完毕！
+
+```
+帮我做一个贪吃蛇游戏：
+1. 用方向键控制蛇的移动
+2. 吃到食物后蛇会变长，分数增加
+3. 撞到墙壁或自己的身体就游戏结束
+4. 要有开始和重新开始按钮
+5. 界面要简洁好看
+```
+
+![](images/index-2026-01-07-18-34-03.png)
+
+生成结束后，你能看到右侧出现可浏览的网页界面。你可以上下滚动浏览页面内容，或点击页面顶部的 🧭 按钮切换至全屏模式查看效果。
+
+> 其中顶部从左到右按钮的作用依次为：箭头按钮展开侧边对话历史栏，铅笔按钮用于新建一个对话，循环箭头按钮用于刷新页面，指南针按钮负责切换至全屏模式，Download 按钮用于下载项目，<> 按钮用于切换代码视图，Publish 按钮用于发布项目。
+
+![](images/index-2026-01-07-18-35-11.png)
+
+如果你想查看该网页的源代码，可以点击右上角的代码图标查看完整代码。
+
+![](images/image7.png)
+
+### 2.2 对话编程能做什么不能做什么
+
+本节聚焦一个具体问题：当你只依赖对话式 AI、不写任何代码时，它究竟能把事情推进到哪一步。
+在经验层面，一个较为稳定的结论是：它可以帮你完成一个“小而完整”的东西，但“做到什么程度就算够”，仍然需要你亲自决策每一步的详细步骤。
+
+#### 更擅长“小而清晰”的应用
+
+从前面的贪吃蛇示例中，你已经看到了一种典型模式：
+只要你能把界面和交互说清楚，AI 通常可以在几轮对话内，拼出一个可以打开、可以点击、可以玩的完整网页。
+
+这类任务往往具备几个共同特征：
+
+- 范围清晰：一页网页、一个简单内部工具、一个小玩法
+- 结果可见：你能立即在浏览器中验证是否按预期工作
+- 纠错直接：发现问题后，可以在后续对话中点明具体现象并要求修正（通过复制错误直接粘贴，或者截图粘贴的形式让 AI 进行修改）
+
+在这个边界内，你可以把对话式 AI 看作一位执行力不错的“辅助开发者”。你只需在每一轮用自然语言细化和修正需求，就能快速得到可用的原型。
+
+**AI 独立完成小型项目的成功率：**
+<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
+
+#### 大型项目需要“流程视角”
+
+一旦超出小而清晰的范围，只指望靠几轮对话让 AI 端到端完成复杂系统，很快就会遇到上限。大型项目往往要接后端、连数据库、整合第三方服务，还牵涉权限、安全、并发和大量业务规则，目标是交付一整套与现有业务深度打通的系统，而不是一页网页。
+
+在这种情况下，更合理的做法不是把所有需求一股脑丢给 AI，而是先梳理出清晰的整体流程：关键步骤是什么、每一步的输入输出和状态变化是什么、哪些节点对性能和安全最敏感。再基于这张流程图，把相对独立的环节拆分出来，交给对话式 AI 生成接口、模块、脚本和测试。
+
+以目前的能力来看，AI 更擅长加速一个个小步骤，由你（或你的团队）来决定怎么拆步骤、如何串联，并负责最终的架构设计、系统集成和运维。
+
+#### 能写和能用的区别
+
+咋一看，AI 好像什么都能写，但这些东西到底能不能用，能用到什么程度，我们该如何划分？
+
+一个可参考的经验是：
+
+::: warning ⚠️ 适用场景指南
+
+- **原型 / Demo / 内部自用工具**：非常适合先交给 AI 打第一版，再由你迭代细节。
+- **面向真实用户的大型产品**：通常需要工程师在架构、抽象、性能和维护上长期投入。
+- **强安全 / 强合规系统（如支付、风控、医疗等）**：在当前阶段，不宜“生成完就直接上线”，必须引入严格的审查与测试流程。
+  :::
+
+在当下，你可以相对安心地把 AI 视作一个高效的 Demo 与自用工具搭档：
+只要你愿意多测试、多迭代，多问几轮“这里不对，帮我修一下并解释原因”，在原型与内部工具这一级别，整体质量通常是足够且具备实践价值的。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: '困境与机会', description: '普通人的编程新可能' },
+      { title: '能力初探', description: '60秒极速开发体验' },
+      { title: '原生实战', description: '打造AI原生贪吃蛇' },
+      { title: '拓展创造', description: '举一反三做游戏' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. 动手：你的第一个 AI 原生应用
+
+让我们回到动手部分，在前一部分，我们已经用 AI 快速做出了一个可以玩的贪吃蛇原型，也大致知道了 AI 能做什么、不能做什么。接下来我们将学习如何用最基础的 **vibe coding** 技巧创建一个**现代版**的 AI 贪吃蛇游戏。我们将让蛇吃掉文字字符而不是豆子。最后让游戏根据吃掉的文字字符生成一首诗，并画一幅画。
+通过这个实际案例你能够理解全新编程方式的核心理念：如何学会用自然语言清晰地表达需求。
+
+### 3.1 AI 原生贪吃蛇
+
+在一开始，我们可以用最简单的方式与大模型对话，这将帮助我们快速获得产品原型。我们可以直接在聊天框中输入：
+
+> **💡 示例提示词：** 帮我做一个贪吃蛇游戏
+>
+> ![](images/image12.png)
+
+> **💡 示例提示词：** 帮我做一个贪吃蛇游戏，它应该支持
+>
+> 1. 我可以吃不同的单词，它们会被收集在一个盒子里
+>    ![](images/image13.png)
+
+> **💡 示例提示词：** 帮我做一个贪吃蛇游戏，它应该支持：
+>
+> 1. 我可以吃不同的单词，它们会被收集在一个盒子里
+> 2. 当蛇吃了8个单词时，llm 应该根据这些单词创作一首诗，我们可以根据需要重新混合这首诗。
+> 3. 当诗完成后，下一步将自动根据这首诗创建一幅图像。
+>
+> ![](images/image14.png)
+
+注意，在开发过程中，我们可能会遇到不尽如人意的问题，例如点击按钮没有任何反应、使用功能时报错、功能未按预期工作，或者前端页面与预期设计不符。
+
+在这种情况下，我们需要进一步向模型提问，以帮助修复这些意外问题。
+
+![](images/image15.png)
+
+### 3.2 给游戏添加新功能
+
+完成基本功能后，我们可以尝试给我们的程序添加一些新花样！如果你觉得蛇吃单词或字符的过程有点枯燥，你可以让蛇吃不同颜色的单词，并相应地改变蛇的颜色。
+
+你还可以为“吃”的过程添加特效，或者引入触发特效的魔法单词——比如增加蛇的速度或大小。另一个想法是每当蛇吃一个单词时就让模型生成一首诗和一幅图，而不是等到它吃掉八个单词。
+
+如果觉得这些有挑战性，你可以直接向语言模型求助！它可以提供创意建议，让你的游戏更有趣。试一试吧！
+
+```JavaScript
+1. "单词解锁世界" 机制
+每当蛇吃掉一个单词，LLM 会对该单词进行诗意联想（例如，“树”→“森林”、“绿荫”），图像模型会即时为该单词生成一个小艺术品。这些图像逐渐拼凑成一个独特的、玩家创造的全景图，所以玩家每次游玩都在“作画和写诗”。
+
+2. "诗歌拼图" 玩法
+蛇吃掉的每个单词都会触发 LLM 生成简短的诗句，图像模型生成插图。这些诗句和图像像拼图一样组合在一起，在回合结束时形成一首 AI 协作的诗和画。
+
+3. "魔法单词" & "故事分支"
+特殊的“魔法单词”（例如，“风”、“夜”、“梦”）不仅触发 LLM 生成诗歌，还会改变场景的情绪或主题——将生成图像的风格转变为夜晚、暴风雨或梦幻般的氛围。
+分支故事：LLM 在开始时给出一个主题或谜语（例如，“秋天的回忆”）。玩家的单词选择直接影响故事和诗歌的演变，图像模型实时更新背景和视觉效果。
+
+4. "实时互动生成"
+每个单词之后，LLM 生成一行对话或描述，游戏中的 NPC 可以对玩家“说话”，或者环境可以相应地改变。
+蛇的外观或游戏中的障碍物可以根据吃掉的单词在视觉上发生变化，这要归功于图像模型。
+
+5. "创作 & 分享"
+玩家可以在会话结束时保存并分享他们 AI 创作的诗歌和图像，炫耀他们独特的“AI 协作”。
+“最美诗歌+艺术”、“最有创意单词组合”等排行榜，鼓励重玩和创造力。
+
+6. "按句贪吃蛇" 挑战
+反向模式：LLM 给出一句诗或一个谜语，玩家必须引导蛇按顺序吃掉单词来重构句子。吃错单词会通过图像生成模型触发有趣或艺术性的后果。
+
+7. "主题关卡" & "风格选择"
+游戏开始时，玩家选择一个主题（例如，“童话”、“科幻”、“唐诗”），LLM 和图像模型都会调整单词选择、诗歌风格和视觉效果以匹配，使每次运行都感觉新鲜。
+
+8. "现场共创"
+当吃掉一个特殊单词时，LLM 可以提示玩家输入短语或选择风格，然后 AI 生成相应的诗句和插图，使其成为真正的人类-AI 共创。
+
+9. "AI 彩蛋 & 成就"
+某些单词组合被 LLM 识别为特殊主题或内部笑话（例如，“月亮”、“桂花”、“河岸”），触发稀有的诗句和插图，奖励探索。
+
+10. "成长的故事"
+随着蛇的成长，LLM 生成一个连续的故事诗，图像模型创建一个无缝的长卷或全景图，所以玩家同时在“写作、绘画和玩耍”。
+```
+
+此外，我们还可以要求 LLM 帮你直接生成项目级的提示词。在上一节中，我们只自己写了贪吃蛇游戏的提示词。现在让我们尝试让大模型生成一个带有整体框架和实现路径的提示词（你可以直接用 z.ai 生成）：
+
+> 我想让 AI 生成一个网页贪吃蛇游戏，需要一个更完整的提示词，让生成结果更令人印象深刻和有趣。请生成相应的提示词。当前目标是：生成一个贪吃蛇游戏，需要实现吃不同单词生成诗歌的功能，并且应该包含图像生成模块。
+
+z.ai 的回复将会是这样的：
+
+![](images/image56.png)
+
+我们可以使用这个提示词在全栈开发模式下重新生成项目：
+
+![](images/image57.png)
+
+![](images/image58.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: '困境与机会', description: '普通人的编程新可能' },
+      { title: '能力初探', description: '60秒极速开发体验' },
+      { title: '原生实战', description: '打造AI原生贪吃蛇' },
+      { title: '拓展创造', description: '举一反三做游戏' }
+    ]" />
+  </ClientOnly>
+</div>
+
+### 3.3 尝试制作其他小游戏
+
+除了贪吃蛇（游戏），我们可以让想象力尽情驰骋。
+
+创造任何我们想创造的东西，甚至尝试搞砸一切！然后重头再来！
+
+```YAML
+1. AI 艺术画廊平台
+   描述：一个展示 AI 生成艺术作品的在线画廊，用户可以上传、分享和评论 AI 艺术作品。
+   功能：用户账户系统、艺术作品上传和展示、评分系统、分类浏览、AI 生成工具集成。
+   技术亮点：React/Vue 前端、Node.js 后端、MongoDB 数据库、AI API 集成。
+
+2. 复古游戏档案馆
+   描述：一个致敬经典游戏的网站，包含游戏历史、玩法指南和在线可玩复古游戏。
+   功能：游戏数据库、时间轴展示、在线模拟器、用户评论、游戏收藏功能。
+   技术亮点：响应式设计、WebGL/Canvas 游戏实现、RESTful API、用户认证系统。
+
+3. 可持续生活追踪器
+   描述：一个帮助用户通过环保提示和社区挑战来追踪和减少碳足迹的网站。
+   功能：个人碳足迹计算器、目标设定、进度追踪、社区挑战、环保知识库。
+   技术亮点：数据可视化、移动端优化、社交功能、推送通知。
+
+4. 虚拟厨房助手
+   描述：一个基于 AI 的烹饪指导平台，提供个性化食谱推荐和分步烹饪说明。
+   功能：食谱数据库、食材识别、个性化推荐、烹饪计时器、营养分析。
+   技术亮点：图像识别 API、机器学习推荐系统、语音控制、实时视频指导。
+
+5. 地下音乐发现平台
+   描述：一个专注于独立和新兴艺术家的音乐流媒体平台，提供独特的发现体验。
+   功能：音乐流媒体、艺术家资料、个性化推荐、播放列表创建、社区评论。
+   技术亮点：音频流处理、推荐算法、社交功能、音乐可视化。
+
+6. 极简任务管理系统
+   描述：一个具有禅意美学的任务管理工具，专注于简单和高效的任务组织。
+   功能：任务创建和分类、优先级设置、进度追踪、团队协作、数据分析。
+   技术亮点：极简 UI 设计、拖放功能、实时同步、跨平台兼容性。
+
+7. 科幻写作工坊
+   描述：一个为科幻作家提供创意工具和灵感的平台，包括世界观构建辅助和角色开发工具。
+   功能：故事结构工具、角色资料、世界观构建模板、写作统计、社区反馈。
+   技术亮点：富文本编辑器、数据可视化、协作编辑、AI 辅助创作。
+
+8. 个人知识图谱
+   描述：一个帮助用户构建个人知识网络，可视化并连接各种想法和信息的工具。
+   功能：节点创建和连接、标签系统、搜索功能、导入/导出工具、可视化图表。
+   技术亮点：图数据库、数据可视化算法、Markdown 支持、跨设备同步。
+
+9. 虚拟植物园
+   描述：一个互动植物百科全书，用户可以探索植物世界并创建虚拟花园。
+   功能：植物数据库、3D 植物模型、生长模拟、园艺指南、社区展示。
+   技术亮点：3D 渲染、季节变化模拟、AR 集成、植物识别 API。
+
+10. 编程挑战竞技场
+    描述：一个面向程序员的在线竞赛平台，具有各种难度级别的编程挑战。
+    功能：挑战问题、代码编辑器、自动评估、排行榜、学习路径。
+    技术亮点：代码沙箱环境、实时评估系统、算法可视化、社交学习功能。
+```
+
+还有... 如果你喜欢玩游戏，让我们一起尝试创造游戏吧！
+
+```SQL
+1. 3D 开放世界 RPG
+   描述：一个具有广阔开放世界、任务和角色成长的奇幻 RPG。
+   功能：昼夜循环、动态天气、技能树、多人合作、制作系统。
+   技术亮点：Three.js 或 Babylon.js 用于 3D 渲染、服务器端游戏逻辑、角色自定义、存档系统。
+
+2. 第一人称射击 (FPS) 竞技场
+   描述：一个快节奏的多人 FPS，具有各种游戏模式和地图。
+   功能：团队死斗、夺旗、武器自定义、排位赛。
+   技术亮点：WebGL/Three.js 用于 3D 图形、多人网络代码、命中检测、语音聊天。
+
+3. AI 国际象棋和多人游戏
+   描述：一个功能齐全的国际象棋平台，具有 AI 对手和在线对战功能。
+   功能：AI 难度级别、残局挑战、锦标赛模式、回放分析。
+   技术亮点：国际象棋逻辑库、WebSocket 用于实时对战、ELO 排名系统、反作弊。
+
+4. 麻将在线多人游戏
+   描述：一个具有在线多人游戏和计分功能的传统麻将游戏。
+   功能：多种规则集、私人房间、排名系统、回放功能。
+   技术亮点：牌匹配逻辑、实时多人游戏、大厅系统、分数追踪。
+
+5. 回合制策略游戏
+   描述：一个具有网格战斗和单位管理的战术策略游戏。
+   功能：战役模式、遭遇战、单位升级、战争迷雾、多人对战。
+   技术亮点：网格移动系统、AI 决策、回合同步、存档/读档系统。
+
+6. 计时赛赛车游戏
+   描述：一个专注于计时赛和赛道记录的 3D 赛车游戏。
+   功能：多条赛道、汽车自定义、幽灵回放、排行榜。
+   技术亮点：3D 汽车物理、赛道编辑器、回放系统、在线排行榜。
+
+7. 卡牌对战游戏 (卡组构建)
+   描述：一个策略卡牌游戏，玩家构建卡组并与对手战斗。
+   功能：卡牌收集、卡组构建、排位赛、赛季活动。
+   技术亮点：卡牌游戏逻辑、匹配系统、AI 对手、卡牌动画。
+
+8. 大逃杀 (俯视 2D)
+   描述：一个俯视 2D 大逃杀游戏，具有缩小的游戏区域和战利品机制。
+   功能：单人和小队模式、武器多样性、局内事件、排行榜。
+   技术亮点：实时多人游戏、区域缩小逻辑、战利品生成系统、匹配。
+
+9. 恐怖生存游戏 (第一人称)
+   描述：一个具有资源管理和逃生机制的第一人称恐怖游戏。
+   功能：氛围环境、解谜、敌人 AI、多重结局。
+   技术亮点：动态照明、声音设计、敌人寻路、存档系统。
+
+10. 音乐节奏游戏 (3D)
+    描述：一个 3D 节奏游戏，玩家随着音乐节拍击打音符。
+    功能：多种难度级别、赛道编辑器、自定义歌曲支持、排行榜。
+    技术亮点：音频分析、节拍同步、3D 音符轨道、输入时机检测。
+```
+
+# 📚 Assignment
+
+- 复现 AI 原生的贪吃蛇游戏。
+- （可选）根据更多参考案例实现不同种类好玩的 AI 原生游戏。
+
+这就是完整的教程！你可能需要 **4 小时** 才能完成所有内容并构建你自己的贪吃蛇游戏。不要着急——探索、实验并享受这个过程。推荐你读完下列附录，用于补充基础知识：
+
+# 附录
+
+## 附录 1：我们需要前端开发知识吗？
+
+在 Vibe Coding 阶段，我们不再要求每一位用户都具备专业的编程能力。这种模式下，你的核心任务主要体现在两个方面：
+
+1. 能够用自然语言，比较清晰地描述自己想要的界面和交互效果；
+2. 当 AI 给出的结果不符合预期或出现报错时，能够把报错信息、截图等上下文整理后，再反馈给 AI，协助其完成修正。
+
+在这个前提下，即便你从未写过一行代码，也可以通过与 AI 的持续对话，逐步搭建出可用的原型。
+
+但是，如果我们对前端开发的一些基础概念有所了解，就可以更准确地提出需求，更有效地利用 AI 的能力。这也是本附录希望补充说明的部分。
+
+### 什么是前端？
+
+在一个典型的应用系统中，我们通常会将其大致分为两个部分：
+
+- 一部分是直接呈现在用户面前的界面，以及与界面相关的交互；
+- 另一部分是运行在服务器上的数据处理和业务逻辑。
+
+其中，前者通常被称为**前端**，后者则被称为**后端**。
+
+从结果上看，前端就是**用户“能看到、能点到”的那一层内容**。例如：
+
+- 网页上的标题、段落文字和图片；
+- 按钮、输入框、下拉菜单、勾选框等交互控件；
+- 排行榜页面、游戏界面、动态动画效果等。
+
+后端则更多负责**“看不见”的部分**，例如：
+
+- 用户分数存放在什么地方；
+- 登录时如何校验账号和密码是否正确；
+- 针对不同用户，如何分配不同的关卡或内容。
+
+**前端开发**的工作，就是在浏览器这一“运行环境”中，把上述可视化界面和交互行为搭建出来，使用户能够顺畅地查看信息、提交表单、进行操作。
+
+### 1. 前端基础三件套：从“页面是哪儿来的”说起
+
+前端页面并不是“凭空出现”的。  
+当我们在浏览器中打开一个网址时，浏览器会从服务器获取一份描述页面的“说明书”，然后按照这份说明书的内容，一步步把界面“画”出来，并让它能够响应用户的操作。
+
+这份“说明书”，通常由三类内容共同组成：
+
+- HTML
+- CSS
+- JavaScript
+
+从工程角度看，它们本质上都属于**代码**：  
+也就是一段一段、遵循固定规则的文本指令；这些指令虽然是人写出来的，但最终是**由浏览器来阅读和执行**的。
+
+为了方便理解，我们可以把这三者类比为一栋房子的不同方面：
+
+1. **HTML：搭骨架，告诉浏览器“有什么”**  
+   HTML 负责描述页面上的“结构”和“元素”。对浏览器来说，HTML 就像是一张建筑结构草图：哪里有一堵墙，哪里有一扇门，哪里有一扇窗。
+   - 例如：页面中有一个标题、一段文字、一个按钮、一张图片。
+
+2. **CSS：定样式，告诉浏览器“长什么样”**  
+   CSS 负责控制界面的视觉呈现。它相当于给已经搭好的“骨架”穿上合适的“衣服”和“装修”。
+   - 例如：按钮是蓝色的、带圆角；文字需要居中对齐；背景需要是浅灰色。
+
+3. **JavaScript：管行为，告诉浏览器“怎么动起来”**  
+   JavaScript 负责页面的交互逻辑和动态行为。它更像是这栋房子里的“电路”和“开关”，决定各种设备在什么情况下被触发。
+   - 例如：点击按钮后弹出提示；表单提交前先检查是否填写完整；游戏角色按一定规则移动。
+
+这三者虽然形式上都是“代码”，但承担的职责并不相同。浏览器会在加载页面时，将它们分别读入，然后按既定顺序执行：先根据 HTML 搭出结构，再根据 CSS 进行渲染，最后由 JavaScript 负责交互和逻辑，让整个页面真正“活起来”。
+
+### 2. 一个简单的执行链路示例
+
+下面我们通过一个极简示例，来直观感受一下“从代码到效果”的完整链路。
+
+![](images/image9.png)
+
+假设我们希望在页面上放置一个可以点击的按钮，并在点击时给用户一个提示。
+
+1. **HTML：声明有一个按钮**
+
+   ```html
+   <button>点我</button>
+   ```
+
+   当浏览器读到这行代码时，会理解为：  
+   页面上需要出现一个按钮，按钮上的文字是“点我”。
+
+2. **CSS：设置按钮的外观**
+
+   ```css
+   button {
+     background-color: #3498db; /* 蓝色背景 */
+     color: white; /* 白色文字 */
+     border: none; /* 无边框 */
+     padding: 10px 20px; /* 适当留白 */
+     border-radius: 4px; /* 稍微圆角 */
+   }
+   ```
+
+   浏览器在渲染页面时，会把这段样式规则应用到刚才创建的按钮上，使其变成一个蓝底白字、带圆角的按钮。
+
+3. **JavaScript：定义点击时的行为**
+
+   ```javascript
+   document.querySelector('button').onclick = function () {
+     alert('你点了我！')
+   }
+   ```
+
+   当浏览器执行到这段 JavaScript 时，会给按钮绑定一个“点击事件”。  
+   此后，每当用户点击这个按钮时，页面上就会弹出提示框。
+
+从用户的视角来看，只是“打开网页 → 看到一个按钮 → 点了一下 → 出现提示”。  
+但在背后，浏览器实际上经历了一个完整的执行过程：**解析 HTML → 应用 CSS → 执行 JavaScript → 响应用户操作**。
+
+这就是前端“三件套”在一个最简场景下的协同方式。
+
+### 3. 现代前端框架：在“三件套”之上的进一步抽象
+
+随着前端应用不断演进，单纯依赖 HTML、CSS 和 JavaScript 手工组织代码，逐渐暴露出一系列问题：
+
+- 页面结构日益复杂，代码量急剧增加；
+- 相同的界面片段需要多处复制粘贴，维护成本高；
+- 数据变化频繁时，需要手动更新界面，容易出错。
+
+在这种背景下，**现代前端框架**应运而生。所谓“框架”，可以理解为一套经过实践检验的**固定结构和约定**，帮助开发者在统一的规则下组织代码，从而降低复杂度、提高可维护性。
+
+以常见的 React 为例，现代前端框架通常带来以下几方面的能力提升：
+
+1. **组件化：把页面拆成可复用的“模块”**  
+   一个完整的页面，可以被拆解为若干相对独立的区域：导航栏、侧边栏、内容区、评论列表、按钮组等。  
+   在框架中，每一个区域都可以被定义为一个“组件”，组件内部负责自己的结构、样式和行为，同时又可以被组合、嵌套和复用。  
+   这样做的直接好处是：修改或复用某一部分时，只需关注对应组件即可，避免整页代码纠缠在一起。
+
+2. **状态驱动：数据变化带动界面更新**  
+   传统方式下，当数据发生变化时（例如排行榜分数更新），开发者往往需要手动找到对应的界面元素，逐条更新内容。  
+   在框架中，我们只需要更新组件内部维护的“状态”，框架就会自动计算出哪些地方需要重新渲染，并完成界面更新。这种“数据驱动界面”的方式，大大减少了手工操作和出错概率。
+
+3. **统一规范：结构清晰，便于协同与自动生成**  
+   现代前端框架通常对文件组织、组件命名、数据流转等方面提供明确约定。  
+   对于 AI 而言，这种稳定、一致的结构更加友好，有利于自动生成质量更高、逻辑更清晰的代码，也更便于后续维护和扩展。
+
+![](images/image11.png)
+
+### 4. 在 Vibe Coding 中如何利用这些能力？
+
+在 Vibe Coding 的实践中，我们并不要求每一位用户都深度掌握 HTML、CSS、JavaScript 或某一前端框架的所有细节。
+
+更现实的目标是：
+
+- 在概念层面，理解“前端页面是由浏览器执行一组规则生成的”，这组规则主要由 HTML、CSS 和 JavaScript 组成，它们本质上都是代码；
+- 知道现代前端框架（如 React）是在这三者之上，对页面结构和交互逻辑的一种进一步组织方式，有助于 AI 更稳定地生成可维护的前端代码。
+
+基于这些认识，在与 AI 协作时，我们可以给出更具指向性的指令，例如：
+
+> “请使用 React 帮我实现一个包含排行榜的页面，右侧展示分数列表，点击某一行时在下方显示该玩家的详细信息，整体风格简洁、现代。”
+
+在这种模式下，**你不必亲自完成每一行代码的书写**，而是通过理解基本概念与角色分工，扮演好“提出需求、检查结果、反复迭代”的角色，让 AI 负责具体实现细节，从而大幅降低前端开发的门槛。
+
+## 附录 2：到底什么是 Vibe Coding
+
+> 💡 什么是 Vibe Coding？计算机科学家 [Andrej Karpathy](https://karpathy.ai/)（OpenAI 的联合创始人之一，特斯拉前 AI 负责人）于 2025 年 2 月提出了 **vibe coding** 一词。这个概念指的是一种依赖于 LLM 的编码方法，**允许程序员通过提供自然语言描述而不是手动编写代码来生成可工作的代码。**
+
+![1767350588191](images/1767350588191.png)
+
+从字面上看，Vibe Coding 可以理解为一种“用说的方式来做开发”。它的核心变化在于：你不再需要自己一行一行写代码、查语法、调 Bug，而是直接用自然语言描述你想要的东西，例如：
+
+“我需要一个登录页面，上面有手机号输入框和验证码输入框。”
+“登录成功后，跳转到首页，并在右上角显示用户名。”
+“给我一个简单的贪吃蛇小游戏，可以用键盘方向键控制。”
+大语言模型（LLM）会把这类描述自动翻译成真正可以运行的代码，并生成对应的页面、逻辑和数据结构。你看到效果后，再用自然语言提出修改意见，例如“按钮再大一点”“背景换成深色”“得分记录下来并显示排行榜”，AI 会继续按你的要求调整实现。
+
+在这种模式下，你不需要先学会编程语言，再去写代码；而是把主要精力放在：说清楚要做什么、看到结果后判断“哪里不对”、再提出新的修改。AI 则负责把这些高层的想法落成具体实现，从而显著减少机械、重复的编码工作。
+
+你可以点击这里查看更多关于 vibe coding 的细节：[https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
+
+你可以点击这里查看更多关于 Karpathy 的分享内容：[https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
+
+### 如何假装自己是 Vibe Coding 大师
+
+实际上，在真正的 vibe coding 过程中，我们通常不会使用很多复杂的提示词。也许我们在开始时需要为整个程序提供一个具体且适度复杂的提示词，但在那之后的每一步，你可能只需要以下类型的提示词：
+
+```JSON
+"代码里有个 bug，请修复它。"
+"我不要部分代码，给我完整的修改后的代码。"
+"你的代码还是有问题。"
+"请再次修改并给我完整的修正后的代码。"
+"刚才还能运行，为什么现在不能运行了？"
+"你没理解我的意思吗？不要改我原来的代码。"
+"不要添加任何调试功能。"
+"不要做我没让你做的事。"
+"我让你实现的功能在哪里？"
+"你听不懂我说的话吗？"
+"我只要一个函数。"
+"我告诉过你参考我之前的代码。"
+"请不要添加不必要的注释。"
+"请不要修改我原始代码的基本逻辑。"
+"帮我修改代码。"
+"基于我的代码修改..."
+"不要改我的变量名！！！"
+"不要改原来的函数名！"
+"不要乱动我的变量。"
+"不要添加额外的功能。"
+"不要只生成框架，生成完整的代码。"
+```
+
+这听起来可能有点夸张，但实际上，这些就是我们在日常工作中可能使用的提示词。由于大语言模型的**上下文长度限制**，或者有时因为它们的**指令遵循能力**不是很强，模型可能会忘记对话早些时候讨论的内容。在 vibe coding 中，我们倾向使用长上下文的模型，并且使用指令遵循能力强的模型，我们可以通过这两者的排行或者指标来判断其是不是好模型。
+
+或者，由于训练数据集的风格，大模型倾向于以其训练数据的风格回答。例如，有些人说话很严肃，有些人喜欢添加很多修饰，而有些大模型喜欢在代码中添加很多注释或不必要的模块。
+
+## 附录 3：模型上下文
+
+模型上下文可以理解为 AI 的短期记忆。它指的是在当前一次对话或一次任务中，模型能够“看到”和“记住”的所有文本内容，包括你之前输入的问题、系统提供的说明、相关资料等。
+
+正是因为有上下文，AI 才能理解你在接着前面的内容继续提问，才能进行一轮一轮、看起来连贯自然的对话。如果没有上下文，你的每一句话在模型看来都像是一次全新的提问，它无法知道你之前说过什么，也就谈不上延续对话。
+
+每个模型都有自己的有效上下文长度（context window）。这个长度通常用 token（可以粗略理解为“字词片段”的单位）来衡量，目前主流模型大多在 32k～128k token 之间。上下文越长，模型一次能“读”的内容就越多，例如：
+
+- 一次性读完一篇较长的论文或报告
+- 在同一轮对话中引用多篇资料、多个案例
+- 让模型记住之前几轮的复杂讨论结论
+
+当你输入的内容接近或超过模型的上下文限制时，往往会出现一些常见现象：
+
+- 模型开始遗忘前面长文本中的细节或关键信息
+- 对话进行到后面，话题逐渐偏离最初目标
+- 对同一材料的不同问答之间，引用的内容不一致
+
+这些现象并不是模型突然“变笨”，而是上下文容量被用满或接近用满后产生的自然结果。
+
+在实际使用中，我们既希望上下文尽可能长，又要意识到：
+
+- 上下文越长，占用的算力资源越多
+- 对应的调用成本（费用）也会随之增加
+
+因此，在设计 AI 应用时，需要在让模型看得足够多和控制成本、提升效率之间做平衡。例如：
+
+- 对真正需要长期保留的信息进行提炼后再交给模型
+- 对不再需要的细节信息，避免一遍又一遍原样塞入上下文
+- 使用外部知识库等方式，把“长期记忆”交给系统，而不是强行塞进模型上下文中
+
+## 附录 4：指令遵循能力
+
+指令遵循能力指的是：模型在理解你的指令之后，能否准确、完整地按照你的要求执行。它不仅包括能回答问题，还包括能按指定格式、风格、步骤完成任务。
+
+例如，下面这些都是对模型有明确要求的指令：
+
+- 将这篇文章总结为三个要点
+- 用正式、礼貌的语气写一封回复邮件
+- 把这个词翻译成英文，并各造一个例句
+- 从文章中提取作者、时间和主要事件
+
+一个指令遵循能力强的模型，通常具备以下特征：
+
+- 按要求的数量输出内容  
+  例如要求总结三个要点，就不会给出五条。
+- 覆盖所有指定的要素  
+  例如要求提取作者、时间和事件，就不会遗漏其中任何一项。
+- 遵守指定的格式和语气  
+  例如要求使用正式语气，就不会输出过于口语化的回复。
+- 不做不必要的额外延伸  
+  例如只要求翻译和造句，就不会额外输出一大段无关解释。
+
+在实际应用中，强指令遵循能力非常重要，原因包括：
+
+- 提高稳定性：同样的指令在不同时间、多次运行时，输出结构和行为模式更加一致，不容易随意发挥
+- 提高可复现性：当你把一段提示词配置到产品或流程中时，可以预期模型大致会怎样响应，方便测试和迭代
+- 便于系统集成：当模型输出符合预期格式时，更容易与后端程序、工作流或其他工具自动对接
+
+因此，在选择和评估一个大语言模型时，除了关注它是否聪明、知识覆盖是否广之外，还需要特别关注它的指令遵循能力。对于工业级应用来说，能否稳定而准确地执行指令，往往比偶尔给出一次惊艳回答更重要。
--- a/Show More
+++ b/Show More