diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue
index 3832a8b..0d3f086 100644
--- a/docs/.vitepress/theme/components/HomeFeatures.vue
+++ b/docs/.vitepress/theme/components/HomeFeatures.vue
@@ -103,22 +103,22 @@ const i18n = {
       sub: '从前端到后端，从数据库到上线。',
       cards: [
         {
-          title: '全栈开发',
-          headline: '独立完成前后端。',
-          desc: '从数据库设计到 API 开发，再到前端组件化，完整构建一个现代化 Web 应用。',
-          link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
+          title: '全栈路径总览',
+          headline: '先看清全局再动手。',
+          desc: '一页看懂 Stage 2：前端、后端、数据库与部署如何串成完整链路。',
+          link: '/zh-cn/stage-2/'
         },
         {
-          title: '真实项目',
-          headline: '拒绝玩具代码。',
-          desc: '深入理解用户鉴权、数据存储、文件上传等核心业务逻辑。',
-          link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/'
+          title: '真实数据项目',
+          headline: '连上真正的数据库。',
+          desc: '在 Supabase 上设计数据表和权限，用真实读写操作支撑你的产品数据层。',
+          link: '/zh-cn/stage-2/backend/2.2-database-supabase/'
         },
         {
           title: '部署上线',
           headline: '让世界看到你的作品。',
-          desc: '学习服务器配置、域名解析和自动化部署，打通产品落地的最后一公里。',
-          link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/'
+          desc: '使用 CloudBase、Vercel、Zeabur 等平台，一口气打通从代码到公网访问的完整流程。',
+          link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/'
         }
       ]
     },
@@ -128,23 +128,23 @@ const i18n = {
       sub: '突破时间与设备限制，让 AI 产品随处可见。',
       cards: [
         {
-          title: '多端发布',
-          desc: '一套代码，覆盖 Web、小程序与 App，触达所有用户。',
-          link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
+          title: '跨平台桌面应用',
+          desc: '用 Electron 做语音转文字桌面程序，一次开发同时跑在 Windows、macOS、Linux。',
+          link: '/zh-cn/stage-3/cross-platform/3.10-electron-voice-to-text/'
         },
         {
-          title: 'AI 智能体',
-          desc: '构建具备记忆与规划能力的 Agent，实现自主任务执行。',
-          link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/'
+          title: 'AI 智能体团队',
+          desc: '用 Claude Agent Teams 组建 AI 开发小队，多代理协作完成大型任务。',
+          link: '/zh-cn/stage-3/core-skills/agent-teams/'
         },
         {
-          title: '长效稳定',
-          desc: '掌握异步任务与队列技术，确保 AI 复杂任务稳定完成。',
-          link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
+          title: '长效稳定执行',
+          desc: '用循环脚本和 Ralph 插件管理长时间任务，让 Claude Code 过夜稳定跑完工作。',
+          link: '/zh-cn/stage-3/core-skills/long-running-tasks/'
         },
         {
-          title: '商业闭环',
-          desc: '集成支付与会员系统，将你的 AI 创意转化为商业产品。',
+          title: '个人品牌与输出',
+          desc: '搭建个人网站与技术博客，让你的项目和经验长期沉淀并被更多人看到。',
           link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
         }
       ]
@@ -261,25 +261,25 @@ const i18n = {
       cat: 'Stage 2 · Junior/Mid Dev',
       title:
         'Go Full Stack, <br><span class="highlight">Build Real Apps.</span>',
-      sub: 'Master frontend-backend separation and build commercial-grade projects with DB and API.',
+      sub: 'Understand the full journey from frontend to backend, database and deployment.',
       cards: [
         {
-          title: 'Full Stack',
-          headline: 'Frontend & Backend.',
-          desc: 'From DB design to API and components, build a modern web app completely.',
-          link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
+          title: 'Stage Overview',
+          headline: 'See the whole map first.',
+          desc: 'Start from the Stage 2 overview and understand how frontend, backend and infra fit together.',
+          link: '/zh-cn/stage-2/'
         },
         {
-          title: 'Real Projects',
-          headline: 'No Toy Code.',
-          desc: 'Deep dive into Auth, Storage, File Uploads and core business logic.',
-          link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/'
+          title: 'Real Data Project',
+          headline: 'Backed by a real DB.',
+          desc: 'Design tables and permissions on Supabase and wire them into real read/write flows.',
+          link: '/zh-cn/stage-2/backend/2.2-database-supabase/'
         },
         {
           title: 'Deployment',
-          headline: 'Show the World.',
-          desc: 'Server config, DNS, CI/CD. The last mile of product delivery.',
-          link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/'
+          headline: 'Ship it to the world.',
+          desc: 'Use CloudBase, Vercel and Zeabur to turn local projects into publicly reachable sites.',
+          link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/'
         }
       ]
     },
@@ -287,26 +287,26 @@ const i18n = {
       cat: 'Stage 3 · Senior Dev',
       title:
         'Advanced Practice, <br><span class="highlight">Infinite Possibilities.</span>',
-      sub: 'Mobile Mini-programs & AI Native Apps. Explore the era of LLMs.',
+      sub: 'Cross-platform apps and AI-native workflows, powered by Claude Code.',
       cards: [
         {
-          title: 'WeChat Mini-app',
-          desc: 'Cross-platform dev, reaching millions of users.',
-          link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
+          title: 'Electron Desktop App',
+          desc: 'Build a speech-to-text desktop app that runs on Windows, macOS and Linux from one codebase.',
+          link: '/zh-cn/stage-3/cross-platform/3.10-electron-voice-to-text/'
         },
         {
-          title: 'AI Native Apps',
-          desc: 'RAG, Agent. Explore the limits of LLMs.',
-          link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/'
+          title: 'Agent Teams',
+          desc: 'Use Claude Agent Teams to orchestrate multiple agents like a real dev team.',
+          link: '/zh-cn/stage-3/core-skills/agent-teams/'
         },
         {
-          title: 'Complex Arch',
-          desc: 'Architecture design for high concurrency and stable AI tasks.',
-          link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
+          title: 'Long-running Tasks',
+          desc: 'Design loops and task queues so Claude Code can safely run overnight until work is truly done.',
+          link: '/zh-cn/stage-3/core-skills/long-running-tasks/'
         },
         {
           title: 'Personal Brand',
-          desc: 'Build your own website and academic blog.',
+          desc: 'Build your own website and tech blog to showcase projects and writing.',
           link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
         }
       ]
@@ -791,25 +791,25 @@ const i18n = {
     stage2: {
       cat: 'Stage 2 · Desarrollador Junior/Mid',
       title: 'Full Stack,<br><span class="highlight">Crea Apps Reales.</span>',
-      sub: 'Domina la separación frontend-backend. Crea proyectos de nivel comercial con DB, API e interacciones complejas.',
+      sub: 'De la base de datos al despliegue: conecta frontend, backend y operaciones en un solo recorrido.',
       cards: [
         {
-          title: 'Full Stack',
-          headline: 'Frontend y Backend.',
-          desc: 'Desde el diseño de DB hasta API y componentes, construye una web app moderna completamente.',
-          link: '/es-es/stage-2/'
+          title: 'Mapa de la Etapa',
+          headline: 'Primero entiende el recorrido completo.',
+          desc: 'Revisa la vista general de Stage 2 para ver cómo encajan frontend, backend, DB y despliegue.',
+          link: '/zh-cn/stage-2/'
         },
         {
-          title: 'Proyectos Reales',
-          headline: 'Sin código de juguete.',
-          desc: 'Profundiza en Auth, Almacenamiento, Subida de Archivos y lógica de negocio.',
-          link: '/es-es/stage-2/'
+          title: 'Proyecto con DB real',
+          headline: 'Supabase como base de datos de verdad.',
+          desc: 'Diseña tablas y permisos en Supabase y conéctalos a flujos reales de lectura/escritura.',
+          link: '/zh-cn/stage-2/backend/2.2-database-supabase/'
         },
         {
-          title: 'Despliegue',
-          headline: 'Muestra al mundo.',
-          desc: 'Configuración de servidor, DNS, CI/CD. La última milla de la entrega del producto.',
-          link: '/es-es/stage-2/'
+          title: 'Despliegue en producción',
+          headline: 'Lleva tu app al mundo real.',
+          desc: 'Usa CloudBase, Vercel y Zeabur para convertir tu código local en un sitio público.',
+          link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/'
         }
       ]
     },
@@ -817,27 +817,27 @@ const i18n = {
       cat: 'Stage 3 · Desarrollador Senior',
       title:
         'Práctica Avanzada,<br><span class="highlight">Posibilidades Infinitas.</span>',
-      sub: 'Mini-programas móviles y Apps Nativas de IA. Explora la era de los LLMs.',
+      sub: 'Apps multiplataforma y flujos de trabajo AI-native impulsados por Claude Code.',
       cards: [
         {
-          title: 'WeChat Mini-app',
-          desc: 'Desarrollo multiplataforma, llegando a millones de usuarios.',
-          link: '/es-es/stage-3/'
+          title: 'App de escritorio multiplataforma',
+          desc: 'Crea con Electron una app de voz a texto que funciona en Windows, macOS y Linux con una sola base de código.',
+          link: '/zh-cn/stage-3/cross-platform/3.10-electron-voice-to-text/'
         },
         {
-          title: 'Apps Nativas IA',
-          desc: 'RAG, Agent. Explora los límites de los LLMs.',
-          link: '/es-es/stage-3/'
+          title: 'Equipos de agentes IA',
+          desc: 'Usa Claude Agent Teams para orquestar varios agentes como si fueran un equipo de desarrollo real.',
+          link: '/zh-cn/stage-3/core-skills/agent-teams/'
         },
         {
-          title: 'Arq. Compleja',
-          desc: 'Diseño de arquitectura de alta concurrencia y alta disponibilidad.',
-          link: '/es-es/stage-3/'
+          title: 'Tareas de larga duración',
+          desc: 'Diseña bucles y colas de tareas para que Claude Code pueda trabajar durante horas de forma estable.',
+          link: '/zh-cn/stage-3/core-skills/long-running-tasks/'
         },
         {
-          title: 'Marca Personal',
-          desc: 'Construye tu propio sitio web y blog académico.',
-          link: '/es-es/stage-3/'
+          title: 'Marca personal',
+          desc: 'Construye tu sitio web y blog técnico para dar visibilidad a tus proyectos.',
+          link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
         }
       ]
     },
@@ -1682,57 +1682,57 @@ const stage1Cards = [
 // Stage 2: 初中级开发 (全栈)
 const stage2Cards = [
   {
-    title: '全栈开发',
-    headline: '独立完成前后端。',
-    desc: '从数据库设计到 API 开发，再到前端组件化，完整构建一个现代化 Web 应用。',
+    title: '全栈路径总览',
+    headline: '先看清全局再动手。',
+    desc: '一页看懂 Stage 2：前端、后端、数据库与部署如何串成完整链路。',
     imageColor: '#E0C3FC',
     visualType: 'code',
-    link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
+    link: '/zh-cn/stage-2/'
   },
   {
-    title: '真实项目',
-    headline: '拒绝玩具代码。',
-    desc: '深入理解用户鉴权、数据存储、文件上传等核心业务逻辑。',
+    title: '真实数据项目',
+    headline: '连上真正的数据库。',
+    desc: '在 Supabase 上设计数据表和权限，用真实读写操作支撑你的产品数据层。',
     imageColor: '#8EC5FC',
     visualType: 'server',
-    link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/'
+    link: '/zh-cn/stage-2/backend/2.2-database-supabase/'
   },
   {
     title: '部署上线',
     headline: '让世界看到你的作品。',
-    desc: '学习服务器配置、域名解析和自动化部署，打通产品落地的最后一公里。',
+    desc: '使用 CloudBase、Vercel、Zeabur 等平台，一口气打通从代码到公网访问的完整流程。',
     imageColor: '#96E6A1',
     visualType: 'cloud',
-    link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/'
+    link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/'
   }
 ]
 
 // Stage 3: 高级开发 (小程序 & AI)
 const stage3Cards = [
   {
-    title: '微信小程序',
-    desc: '跨平台开发，触达亿级用户。',
+    title: '跨平台桌面应用',
+    desc: '用 Electron 做语音转文字桌面程序，一次开发同时跑在 Windows、macOS、Linux。',
     tag: 'Stage 3',
     visualType: 'phone',
-    link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
+    link: '/zh-cn/stage-3/cross-platform/3.10-electron-voice-to-text/'
   },
   {
-    title: 'AI 原生应用',
-    desc: 'RAG、Agent，探索 LLM 的无限可能。',
+    title: 'AI 智能体团队',
+    desc: '用 Claude Agent Teams 组建 AI 开发小队，多代理协作完成大型任务。',
     tag: 'Advanced',
     visualType: 'ai',
-    link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/'
+    link: '/zh-cn/stage-3/core-skills/agent-teams/'
   },
   {
-    title: '复杂业务架构',
-    desc: '应对高并发、高可用场景的架构设计。',
+    title: '长效稳定执行',
+    desc: '用循环脚本和 Ralph 插件管理长时间任务，让 Claude Code 过夜稳定跑完工作。',
     tag: 'Architecture',
     visualType: 'arch',
-    link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
+    link: '/zh-cn/stage-3/core-skills/long-running-tasks/'
   },
   {
-    title: '个人品牌',
-    desc: '构建属于自己的个人网页与学术博客。',
+    title: '个人品牌与输出',
+    desc: '搭建个人网站与技术博客，让你的项目和经验长期沉淀并被更多人看到。',
     tag: 'Brand',
     visualType: 'brand',
     link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
diff --git a/docs/.vitepress/theme/components/RelatedArticlesSection.vue b/docs/.vitepress/theme/components/RelatedArticlesSection.vue
new file mode 100644
index 0000000..1396533
--- /dev/null
+++ b/docs/.vitepress/theme/components/RelatedArticlesSection.vue
@@ -0,0 +1,97 @@
+<script setup>
+import NavCard from './NavCard.vue'
+
+defineProps({
+  title: {
+    type: String,
+    default: '继续阅读'
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  items: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <section class="related-section">
+    <div class="related-header">
+      <h2 class="related-title">
+        {{ title }}
+      </h2>
+      <p
+        v-if="description"
+        class="related-description"
+      >
+        {{ description }}
+      </p>
+    </div>
+    <div class="related-grid">
+      <NavCard
+        v-for="(item, index) in items"
+        :key="item.href || index"
+        :href="item.href"
+        :title="item.title"
+        :description="item.description"
+        :icon="item.icon"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.related-section {
+  margin: 44px 0 10px;
+  padding: 22px;
+  border-radius: 28px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: linear-gradient(180deg, rgba(0, 102, 204, 0.04) 0%, rgba(255, 255, 255, 0.98) 100%);
+}
+
+.dark .related-section {
+  border-color: rgba(255, 255, 255, 0.1);
+  background: linear-gradient(180deg, rgba(60, 160, 255, 0.1) 0%, var(--vp-c-bg-soft) 100%);
+}
+
+.related-header {
+  margin-bottom: 14px;
+}
+
+.related-title {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.35;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.related-description {
+  margin: 8px 0 0;
+  font-size: 0.92rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.65;
+}
+
+.related-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+@media (max-width: 900px) {
+  .related-section {
+    margin-top: 36px;
+    padding: 18px;
+    border-radius: 22px;
+  }
+
+  .related-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/data/relatedArticles.js b/docs/.vitepress/theme/data/relatedArticles.js
new file mode 100644
index 0000000..a2333be
--- /dev/null
+++ b/docs/.vitepress/theme/data/relatedArticles.js
@@ -0,0 +1,180 @@
+/**
+ * 统一维护教程“相关文章”映射表：
+ * - key: 文档相对路径（不含 /index.md）
+ * - value: 该文档底部相关文章卡片数组
+ * 页面只负责按 key 读取并渲染，不在页面内重复维护映射数据。
+ */
+export const relatedArticlesMap = {
+  'zh-cn/stage-0/0.1-learning-map': [
+    {
+      href: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/',
+      title: '0.2 用“小游戏”理解 AI 能力边界',
+      description: '先用游戏化方式建立手感，快速理解“什么问题适合交给 AI”。',
+      icon: '🎮'
+    },
+    {
+      href: '/zh-cn/stage-1/1.0-finding-great-idea/',
+      title: '1.0 找到值得做的点子',
+      description: '把“我有想法”变成“我有可验证的产品方向”。',
+      icon: '💡'
+    },
+    {
+      href: '/zh-cn/stage-1/1.2-building-prototype/',
+      title: '1.2 把想法做成可交互原型',
+      description: '从需求拆解到页面落地，快速完成第一版 Demo。',
+      icon: '🧩'
+    },
+    {
+      href: '/zh-cn/stage-2/frontend/2.0-lovart-assets/',
+      title: '2.0 从 NanoBanana 出发做素材 Agent',
+      description: '进入实战阶段，学习构建稳定可复用的素材生产流程。',
+      icon: '🖼️'
+    }
+  ],
+  'zh-cn/stage-0/0.2-ai-capabilities-through-games': [
+    {
+      href: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/',
+      title: '初级二：学会 AI 编程工具',
+      description: '把网页试玩升级到本地 AI IDE，建立完整开发环境。',
+      icon: '💻'
+    },
+    {
+      href: '/zh-cn/stage-1/1.0-finding-great-idea/',
+      title: '初级：找到好点子',
+      description: '从“会用工具”走向“做对方向”，明确真实用户问题。',
+      icon: '💡'
+    },
+    {
+      href: '/zh-cn/stage-0/0.1-learning-map/',
+      title: '返回学习地图',
+      description: '按完整路线查看每个阶段目标与推荐学习顺序。',
+      icon: '🗺️'
+    }
+  ],
+  'zh-cn/stage-1/1.1-introduction-to-ai-ide': [
+    {
+      href: '/zh-cn/stage-1/1.2-building-prototype/',
+      title: '初级三：动手做出原型',
+      description: '从会用 AI IDE 进阶到真正落地业务原型。',
+      icon: '🧩'
+    },
+    {
+      href: '/zh-cn/stage-1/1.3-integrating-ai-capabilities/',
+      title: '初级四：给原型加上 AI 能力',
+      description: '接入真实 API，让页面从“可看”变“可用”。',
+      icon: '🤖'
+    },
+    {
+      href: '/zh-cn/stage-1/appendix-b-common-errors/',
+      title: '附录：常见报错与解决方案',
+      description: '遇到环境、依赖或运行异常时，快速定位并修复。',
+      icon: '🛠️'
+    }
+  ],
+  'zh-cn/stage-1/1.2-building-prototype': [
+    {
+      href: '/zh-cn/stage-1/1.3-integrating-ai-capabilities/',
+      title: '初级四：给原型加上 AI 能力',
+      description: '把静态原型升级为可调用真实模型服务的应用。',
+      icon: '🤖'
+    },
+    {
+      href: '/zh-cn/stage-1/1.4-complete-project-practice/',
+      title: '初级五：完整项目实战',
+      description: '补齐数据、交互与异常处理，完成可演示的完整项目。',
+      icon: '🚀'
+    },
+    {
+      href: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/',
+      title: '进阶：Figma 与 MasterGo 入门',
+      description: '继续强化设计到开发的协作流程，为工程化打基础。',
+      icon: '🎨'
+    }
+  ],
+  'zh-cn/stage-1/1.3-integrating-ai-capabilities': [
+    {
+      href: '/zh-cn/stage-1/1.4-complete-project-practice/',
+      title: '初级五：完整项目实战',
+      description: '把分散能力拼成完整业务链路，做出可展示的成品。',
+      icon: '🧱'
+    },
+    {
+      href: '/zh-cn/stage-2/frontend/2.0-lovart-assets/',
+      title: '初中级：素材生产 Agent',
+      description: '进入更真实的多模型协同流程，搭建可复用的生成系统。',
+      icon: '🖼️'
+    },
+    {
+      href: '/zh-cn/stage-2/backend/2.3-ai-interface-code/',
+      title: '初中级：后端接口设计与开发',
+      description: '把 AI 能力规范地接入后端接口，提升工程可维护性。',
+      icon: '🔌'
+    }
+  ],
+  'zh-cn/stage-1/1.4-complete-project-practice': [
+    {
+      href: '/zh-cn/stage-2/frontend/2.0-lovart-assets/',
+      title: '初中级前端：素材生产 Agent',
+      description: '学习更复杂的多模型素材生产流程，提升视觉资产效率。',
+      icon: '🎯'
+    },
+    {
+      href: '/zh-cn/stage-2/assignments/2.1-fullstack-app/',
+      title: 'Stage 2 大作业：全栈应用实战',
+      description: '把原型能力升级为前后端一体化的可上线应用。',
+      icon: '💻'
+    },
+    {
+      href: '/zh-cn/stage-2/backend/2.2-database-supabase/',
+      title: '初中级后端：从数据库到 Supabase',
+      description: '补齐数据建模、存储与权限能力，迈向工程化开发。',
+      icon: '🗄️'
+    }
+  ],
+  'zh-cn/stage-2/frontend/2.0-lovart-assets': [
+    {
+      href: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/',
+      title: '2.1 Figma 与 MasterGo 入门',
+      description: '把素材放进设计稿，建立从视觉到布局的结构化表达。',
+      icon: '🎨'
+    },
+    {
+      href: '/zh-cn/stage-2/frontend/2.2-ui-design/',
+      title: '2.2 构建第一个现代应用程序 - UI 设计',
+      description: '在统一视觉规范下，完成页面层级、组件和布局设计。',
+      icon: '🧱'
+    },
+    {
+      href: '/zh-cn/stage-2/frontend/2.6-design-to-code/',
+      title: '2.6 从设计原型到项目代码',
+      description: '把设计稿准确转成可维护的前端代码与组件结构。',
+      icon: '💻'
+    },
+    {
+      href: '/zh-cn/stage-2/frontend/2.7-modern-component-library/',
+      title: '2.7 使用现代组件库更新你的界面',
+      description: '利用组件库做工程化提效，让界面一致性更稳定。',
+      icon: '🧩'
+    }
+  ],
+  'zh-cn/stage-2/frontend/2.1-figma-mastergo': [
+    {
+      href: '/zh-cn/stage-2/frontend/2.2-ui-design/',
+      title: '2.2 构建第一个现代应用程序 - UI 设计',
+      description: '继续完善界面结构、视觉层级与交互细节。',
+      icon: '🧱'
+    },
+    {
+      href: '/zh-cn/stage-2/frontend/2.6-design-to-code/',
+      title: '2.6 从设计原型到项目代码',
+      description: '把设计稿系统化转译为可维护的前端代码。',
+      icon: '💻'
+    },
+    {
+      href: '/zh-cn/stage-2/frontend/2.7-modern-component-library/',
+      title: '2.7 使用现代组件库更新你的界面',
+      description: '用组件库统一 UI 规范并提升页面开发效率。',
+      icon: '🧩'
+    }
+  ]
+}
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 2026b2f..3cdb957 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -13,6 +13,7 @@ import NavGrid from './components/NavGrid.vue'
 import NavCard from './components/NavCard.vue'
 import CategoryIndex from './components/CategoryIndex.vue'
 import ArticleGrid from './components/ArticleGrid.vue'
+import RelatedArticlesSection from './components/RelatedArticlesSection.vue'
 import StepBar from './components/StepBar.vue'
 import ChapterIntroduction from './components/ChapterIntroduction.vue'
 import ReadingProgress from './components/ReadingProgress.vue'
@@ -849,6 +850,7 @@ export default {
     app.component('NavCard', NavCard)
     app.component('CategoryIndex', CategoryIndex)
     app.component('ArticleGrid', ArticleGrid)
+    app.component('RelatedArticlesSection', RelatedArticlesSection)
     app.component('StepBar', StepBar)
     app.component('ChapterIntroduction', ChapterIntroduction)
     app.component('ReadingProgress', ReadingProgress)
diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml
index 7ff6d16..e4eab37 100644
--- a/docs/public/sitemap.xml
+++ b/docs/public/sitemap.xml
@@ -3,7 +3,7 @@
          xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/</loc>
-    <lastmod>2026-03-15T13:41:39+08:00</lastmod>
+    <lastmod>2026-03-16T00:53:29+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/"/>
diff --git a/docs/zh-cn/stage-0/0.1-learning-map/index.md b/docs/zh-cn/stage-0/0.1-learning-map/index.md
index e864bf4..edf1a1e 100644
--- a/docs/zh-cn/stage-0/0.1-learning-map/index.md
+++ b/docs/zh-cn/stage-0/0.1-learning-map/index.md
@@ -3,6 +3,12 @@ title: '从创意到 AI 产品 - Easy-Vibe 学习路线图'
 description: '学习 AI 编程完整路线图：从零基础到全栈开发。掌握 Vibe Coding、Claude Code、Cursor 等 AI IDE 工具，学会产品思维、全栈开发和 AI 能力集成。'
 ---
 
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['zh-cn/stage-0/0.1-learning-map'] ?? []
+</script>
+
 # 从创意到 AI 产品
 
 以前做软件，门槛很高：你要懂编程、懂算法，还得有几年的项目经验。
@@ -257,3 +263,9 @@ AI 时代，执行力和想法永远比技术更重要。
 # Reference
 
 - [南京大学 计算机科学与技术系 计算机系统基础 课程实验](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
+
+<RelatedArticlesSection
+  title="接下来可以学什么"
+  description="按“从会用 AI 到会做产品”的路线，继续向前推进。"
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md b/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md
index 21214ac..b6f4f35 100644
--- a/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md
+++ b/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md
@@ -10,7 +10,11 @@
 </div>
 
 <script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
 const duration = '约 <strong>4 小时</strong>，可分多次完成'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-0/0.2-ai-capabilities-through-games'] ?? []
 </script>
 
 ## 本章导读
@@ -752,3 +756,9 @@ z.ai 的回复将会是这样的：
 - 便于系统集成：当模型输出符合预期格式时，更容易与后端程序、工作流或其他工具自动对接
 
 因此，在选择和评估一个大语言模型时，除了关注它是否聪明、知识覆盖是否广之外，还需要特别关注它的指令遵循能力。对于工业级应用来说，能否稳定而准确地执行指令，往往比偶尔给出一次惊艳回答更重要。
+
+<RelatedArticlesSection
+  title="继续学习"
+  description="从“游戏化体验”出发，推荐你继续进入本地开发与产品实践。"
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
index 7cd76a2..1e453b8 100644
--- a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
+++ b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
@@ -4,7 +4,11 @@
 ## 本章导读
 
 <script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
 const duration = '约 <strong>1 天</strong>，可分多次完成'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/1.1-introduction-to-ai-ide'] ?? []
 </script>
 
 <ChapterIntroduction :duration="duration" :tags="['本地开发环境搭建', 'IDE 与 AI IDE', '高效开发技巧']" coreOutput="1 个自创小游戏" expectedOutput="使用 Trae 产出">
@@ -748,6 +752,12 @@ AI 很认真地给了你一段代码，你也老老实实地复制进去了，
   </ol>
 </el-card>
 
+<RelatedArticlesSection
+  title="继续学习"
+  description="建议先进入原型实战，再逐步接入 AI 能力。"
+  :items="relatedArticles"
+/>
+
 # 附录
 
 <el-card id="appendix-nav" shadow="hover" style="margin-top: 40px; margin-bottom: 24px; border-left: 5px solid #E6A23C;">
diff --git a/docs/zh-cn/stage-1/1.2-building-prototype/index.md b/docs/zh-cn/stage-1/1.2-building-prototype/index.md
index b89763a..c215941 100644
--- a/docs/zh-cn/stage-1/1.2-building-prototype/index.md
+++ b/docs/zh-cn/stage-1/1.2-building-prototype/index.md
@@ -4,7 +4,11 @@ description: '体验从业务分析到多页面产品原型实现的完整闭环
 ---
 
 <script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
 const duration = '约 <strong>8 小时</strong>'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/1.2-building-prototype'] ?? []
 </script>
 
 # 初级三：动手做出原型
@@ -593,3 +597,9 @@ AI 一般会输出一个 checklist，你可以根据结果思考是否需要继
 - 为某条内容任务自动生成文案初稿和多个标题备选
 - 根据任务描述自动生成配图草稿（文生图）
 - 对历史内容任务做自动归类和摘要，帮助你规划下一个活动的选题
+
+<RelatedArticlesSection
+  title="继续学习"
+  description="建议按“接入 AI 能力 → 完整项目闭环 → 设计工程化”顺序继续。"
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md
index 6cd44b9..1d3a93a 100644
--- a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md
+++ b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md
@@ -4,7 +4,11 @@ description: '在已有 Web 原型中接入真实的 AI 能力：理解 API 的
 ---
 
 <script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
 const duration = '约 <strong>1 天</strong>'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/1.3-integrating-ai-capabilities'] ?? []
 </script>
 
 # 初级四：为原型注入 AI 能力
@@ -796,3 +800,9 @@ Artificial Analysis 更适合把“效果 / 价格 / 速度”放在同一张表
 - 把内容策划、商品上架、数据分析等环节串联成一条完整的业务流程
 - 将本节课学到的 AI 能力（LLM 文案生成、文生图、图像编辑等）嵌入到实际业务节点中
 - 实现一个真正可用的"电商 AI 工作台"，而不是孤立的 demo
+
+<RelatedArticlesSection
+  title="相关文章"
+  description="从“单点 AI 能力”到“完整产品流程”的推荐学习路径。"
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md b/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md
index c004a91..fd0f513 100644
--- a/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md
+++ b/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md
@@ -4,7 +4,11 @@ description: '走出 Demo 阶段，学习如何完善产品链路、构建逼真
 ---
 
 <script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
 const duration = '约 <strong>3 天</strong>'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/1.4-complete-project-practice'] ?? []
 </script>
 
 # 初级五：完整项目实战
@@ -289,3 +293,9 @@ export const mockProductTasks = [
 在接下来的 Stage 2 中，我们将深入更复杂的全栈开发，学习如何把这个原型变成一个真正能上线、有数据库、有用户系统的商业级应用。
 
 让我们在下一阶段见！
+
+<RelatedArticlesSection
+  title="继续进阶"
+  description="恭喜完成 Stage 1，下面这些章节可以帮助你进入工程化开发。"
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-cn/stage-2/frontend/2.0-lovart-assets/index.md b/docs/zh-cn/stage-2/frontend/2.0-lovart-assets/index.md
index 9af9f13..c6c042c 100644
--- a/docs/zh-cn/stage-2/frontend/2.0-lovart-assets/index.md
+++ b/docs/zh-cn/stage-2/frontend/2.0-lovart-assets/index.md
@@ -1,3 +1,9 @@
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['zh-cn/stage-2/frontend/2.0-lovart-assets'] ?? []
+</script>
+
 # 从 NanoBanana 出发，搭建自己的素材生产Agent
 
 ## 第 1 章：1 分钟生成第一份图片素材
@@ -935,3 +941,9 @@ Markdown 格式
 回头看，这条路其实并不复杂。想清楚你要解决的问题，把长文本交给语言模型去拆解，再把整理好的视觉意图交给绘图模型去呈现，最后把这一整套流程封装成一个属于你自己的小助手。到这里，你已经不只是“在用模型”，而是在搭建一套可以长期陪你工作的系统，而这，才是这套教程最想带给你的东西。
 
 但是你已经做的很棒啦！相信学到这里的你对Vibe Coding已经有初步的掌握了，给自己放个小假休息一下吧！
+
+<RelatedArticlesSection
+  title="相关文章"
+  description="如果你想把“素材生成”真正接入产品流程，可以继续学习这些章节。"
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/index.md b/docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/index.md
index add1f45..2b0545a 100644
--- a/docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/index.md
+++ b/docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/index.md
@@ -1,5 +1,11 @@
 # Figma 与 MasterGo 入门
 
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['zh-cn/stage-2/frontend/2.1-figma-mastergo'] ?? []
+</script>
+
 ::: tip 🎯 核心问题
 **如何从零开始使用现代设计工具创建网页原型？**
 :::
@@ -289,3 +295,9 @@
 
 如果你在完成 [一起做霍格沃茨画像](../2.4-hogwarts-portraits/) 项目，可以先设计界面原型，再导出代码与 AI 对话功能结合。
 :::
+
+<RelatedArticlesSection
+  title="相关文章"
+  description="建议继续学习 UI 设计深化与设计转代码实战。"
+  :items="relatedArticles"
+/>