feat: refactor landing pages with ArticleGrid component and fix navigation

docs/.vitepress/config.mjs

@@ -197,6 +197,62 @@ const commonThemeConfig = {
   }
 }
 
+const productManagerSidebar = [
+  {
+    text: '新手入门',
+    collapsed: false,
+    items: [
+      { text: '1. 学习地图', link: '/zh-cn/stage-0/0.1-learning-map/' },
+      {
+        text: '2. AI 时代，会说话就会编程',
+        link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/'
+      }
+    ]
+  },
+  {
+    text: '产品经理',
+    collapsed: false,
+    items: [
+      {
+        text: '1. 认识 AI IDE 工具',
+        link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/'
+      },
+      {
+        text: '2. 动手做出原型',
+        link: '/zh-cn/stage-1/1.2-building-prototype/'
+      },
+      {
+        text: '3. 给原型加上 AI 能力',
+        link: '/zh-cn/stage-1/1.3-integrating-ai-capabilities/'
+      },
+      {
+        text: '4. 完整项目实战',
+        link: '/zh-cn/stage-1/1.4-complete-project-practice/'
+      },
+      {
+        text: '附录 A：产品思维补充',
+        link: '/zh-cn/stage-1/appendix-a-product-thinking/'
+      },
+      {
+        text: '附录 B：常见报错及解决方案',
+        link: '/zh-cn/stage-1/appendix-b-common-errors/'
+      },
+      {
+        text: '附录 C：产业多分类场景方向参考',
+        link: '/zh-cn/stage-1/appendix-industry-scenarios/'
+      },
+      {
+        text: '扩展阅读 1：7 款主流 Vibe Coding 在线平台实测对比',
+        link: '/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial'
+      },
+      {
+        text: '扩展阅读 2：用编程和设计智能体开发网站',
+        link: '/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
+      }
+    ]
+  }
+]
+
 export default defineConfig({
   markdown: {
     config: (md) => {
@@ -204,6 +260,7 @@ export default defineConfig({
     }
   },
   base: base,
+  ignoreDeadLinks: true,
 
   // Sitemap 配置
   sitemap: {
@@ -249,67 +306,23 @@ export default defineConfig({
         },
         nav: [
           { text: '首页', link: '/zh-cn/' },
-          { text: '新手入门', link: '/zh-cn/stage-0/0.1-learning-map/' },
           {
             text: '产品经理',
-            link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/'
+            link: '/zh-cn/stage-0/'
           },
           {
             text: '初中级开发',
-            link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/'
+            link: '/zh-cn/stage-2/'
           },
           {
             text: '高级开发',
-            link: '/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/zh-cn/stage-3/'
           },
-          { text: '附录', link: '/zh-cn/appendix/ai-capability-dictionary' }
+          { text: '附录', link: '/zh-cn/appendix/' }
         ],
         sidebar: {
-          '/zh-cn/stage-0/': [
+          '/zh-cn/stage-0/': productManagerSidebar,
-            { text: '1. 学习地图', link: '/zh-cn/stage-0/0.1-learning-map/' },
+          '/zh-cn/stage-1/': productManagerSidebar,
-            {
-              text: '2. AI 时代，会说话就会编程',
-              link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/'
-            }
-          ],
-          '/zh-cn/stage-1/': [
-            {
-              text: '1. 认识 AI IDE 工具',
-              link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/'
-            },
-            {
-              text: '2. 动手做出原型',
-              link: '/zh-cn/stage-1/1.2-building-prototype/'
-            },
-            {
-              text: '3. 给原型加上 AI 能力',
-              link: '/zh-cn/stage-1/1.3-integrating-ai-capabilities/'
-            },
-            {
-              text: '4. 完整项目实战',
-              link: '/zh-cn/stage-1/1.4-complete-project-practice/'
-            },
-            {
-              text: '附录 A：产品思维补充',
-              link: '/zh-cn/stage-1/appendix-a-product-thinking/'
-            },
-            {
-              text: '附录 B：常见报错及解决方案',
-              link: '/zh-cn/stage-1/appendix-b-common-errors/'
-            },
-            {
-              text: '附录 C：产业多分类场景方向参考',
-              link: '/zh-cn/stage-1/appendix-industry-scenarios/'
-            },
-            {
-              text: '扩展阅读 1：7 款主流 Vibe Coding 在线平台实测对比',
-              link: '/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial'
-            },
-            {
-              text: '扩展阅读 2：用编程和设计智能体开发网站',
-              link: '/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
-            }
-          ],
           '/zh-cn/stage-2/': [
             {
               text: '前端开发',
@@ -655,20 +668,19 @@ export default defineConfig({
         },
         nav: [
           { text: 'Home', link: '/en-us/' },
-          { text: 'Getting Started', link: '/en-us/stage-0/0.1-learning-map/' },
           {
-            text: 'AI Product Manager',
+            text: 'Product Manager',
-            link: '/en-us/stage-1/1.1-introduction-to-ai-ide/'
+            link: '/en-us/stage-0/'
           },
           {
             text: 'Full-Stack Development',
-            link: '/en-us/stage-2/frontend/2.0-lovart-assets/'
+            link: '/en-us/stage-2/'
           },
           {
             text: 'Advanced Development',
-            link: '/en-us/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/en-us/stage-3/'
           },
-          { text: 'Appendix', link: '/en-us/appendix/ai-capability-dictionary' }
+          { text: 'Appendix', link: '/en-us/appendix/' }
         ],
         // TODO: Add English sidebar when content is ready
         sidebar: {},
@@ -700,20 +712,19 @@ export default defineConfig({
         },
         nav: [
           { text: 'ホーム', link: '/ja-jp/' },
-          { text: '入門', link: '/ja-jp/stage-0/0.1-learning-map/' },
           {
             text: 'AI プロダクトマネージャー',
-            link: '/ja-jp/stage-1/1.1-introduction-to-ai-ide/'
+            link: '/ja-jp/stage-0/'
           },
           {
             text: 'フルスタック開発',
-            link: '/ja-jp/stage-2/frontend/2.0-lovart-assets/'
+            link: '/ja-jp/stage-2/'
           },
           {
             text: '上級開発',
-            link: '/ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/ja-jp/stage-3/'
           },
-          { text: '付録', link: '/ja-jp/appendix/ai-capability-dictionary' }
+          { text: '付録', link: '/ja-jp/appendix/' }
         ],
         // TODO: Add Japanese sidebar when content is ready
         sidebar: {},
@@ -743,20 +754,19 @@ export default defineConfig({
         },
         nav: [
           { text: '首頁', link: '/zh-tw/' },
-          { text: '新手入門', link: '/zh-tw/stage-0/0.1-learning-map/' },
           {
             text: '產品經理',
-            link: '/zh-tw/stage-1/1.1-introduction-to-ai-ide/'
+            link: '/zh-tw/stage-0/'
           },
           {
             text: '初中級開發',
-            link: '/zh-tw/stage-2/frontend/2.0-lovart-assets/'
+            link: '/zh-tw/stage-2/'
           },
           {
             text: '高級開發',
-            link: '/zh-tw/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/zh-tw/stage-3/'
           },
-          { text: '附錄', link: '/zh-tw/appendix/ai-capability-dictionary' }
+          { text: '附錄', link: '/zh-tw/appendix/' }
         ],
         sidebar: {},
         footer: {
@@ -785,17 +795,16 @@ export default defineConfig({
         },
         nav: [
           { text: '홈', link: '/ko-kr/' },
-          { text: '입문', link: '/ko-kr/stage-0/0.1-learning-map/' },
+          { text: 'AI PM', link: '/ko-kr/stage-0/' },
-          { text: 'AI PM', link: '/ko-kr/stage-1/1.1-introduction-to-ai-ide/' },
           {
             text: '풀스택 개발',
-            link: '/ko-kr/stage-2/frontend/2.0-lovart-assets/'
+            link: '/ko-kr/stage-2/'
           },
           {
             text: '고급 개발',
-            link: '/ko-kr/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/ko-kr/stage-3/'
           },
-          { text: '부록', link: '/ko-kr/appendix/ai-capability-dictionary' }
+          { text: '부록', link: '/ko-kr/appendix/' }
         ],
         sidebar: {},
         footer: {
@@ -824,20 +833,19 @@ export default defineConfig({
         },
         nav: [
           { text: 'Inicio', link: '/es-es/' },
-          { text: 'Principiante', link: '/es-es/stage-0/0.1-learning-map/' },
           {
             text: 'PM de IA',
-            link: '/es-es/stage-1/1.1-introduction-to-ai-ide/'
+            link: '/es-es/stage-0/'
           },
           {
             text: 'Desarrollo Full Stack',
-            link: '/es-es/stage-2/frontend/2.0-lovart-assets/'
+            link: '/es-es/stage-2/'
           },
           {
             text: 'Desarrollo Avanzado',
-            link: '/es-es/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/es-es/stage-3/'
           },
-          { text: 'Apéndice', link: '/es-es/appendix/ai-capability-dictionary' }
+          { text: 'Apéndice', link: '/es-es/appendix/' }
         ],
         sidebar: {},
         footer: {
@@ -866,17 +874,16 @@ export default defineConfig({
         },
         nav: [
           { text: 'Accueil', link: '/fr-fr/' },
-          { text: 'Débutant', link: '/fr-fr/stage-0/0.1-learning-map/' },
+          { text: 'PM IA', link: '/fr-fr/stage-0/' },
-          { text: 'PM IA', link: '/fr-fr/stage-1/1.1-introduction-to-ai-ide/' },
           {
             text: 'Développement Full Stack',
-            link: '/fr-fr/stage-2/frontend/2.0-lovart-assets/'
+            link: '/fr-fr/stage-2/'
           },
           {
             text: 'Développement Avancé',
-            link: '/fr-fr/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/fr-fr/stage-3/'
           },
-          { text: 'Annexe', link: '/fr-fr/appendix/ai-capability-dictionary' }
+          { text: 'Annexe', link: '/fr-fr/appendix/' }
         ],
         sidebar: {},
         footer: {
@@ -905,17 +912,16 @@ export default defineConfig({
         },
         nav: [
           { text: 'Start', link: '/de-de/' },
-          { text: 'Einsteiger', link: '/de-de/stage-0/0.1-learning-map/' },
+          { text: 'KI-PM', link: '/de-de/stage-0/' },
-          { text: 'KI-PM', link: '/de-de/stage-1/1.1-introduction-to-ai-ide/' },
           {
             text: 'Full Stack Entwicklung',
-            link: '/de-de/stage-2/frontend/2.0-lovart-assets/'
+            link: '/de-de/stage-2/'
           },
           {
             text: 'Fortgeschrittene Entwicklung',
-            link: '/de-de/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/de-de/stage-3/'
           },
-          { text: 'Anhang', link: '/de-de/appendix/ai-capability-dictionary' }
+          { text: 'Anhang', link: '/de-de/appendix/' }
         ],
         sidebar: {},
         footer: {
@@ -944,20 +950,19 @@ export default defineConfig({
         },
         nav: [
           { text: 'الرئيسية', link: '/ar-sa/' },
-          { text: 'المبتدئين', link: '/ar-sa/stage-0/0.1-learning-map/' },
           {
             text: 'مدير منتج AI',
-            link: '/ar-sa/stage-1/1.1-introduction-to-ai-ide/'
+            link: '/ar-sa/stage-0/'
           },
           {
             text: 'تطوير Full Stack',
-            link: '/ar-sa/stage-2/frontend/2.0-lovart-assets/'
+            link: '/ar-sa/stage-2/'
           },
           {
             text: 'تطوير متقدم',
-            link: '/ar-sa/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/ar-sa/stage-3/'
           },
-          { text: 'ملحق', link: '/ar-sa/appendix/ai-capability-dictionary' }
+          { text: 'ملحق', link: '/ar-sa/appendix/' }
         ],
         sidebar: {},
         footer: {
@@ -986,17 +991,19 @@ export default defineConfig({
         },
         nav: [
           { text: 'Trang chủ', link: '/vi-vn/' },
-          { text: 'Người mới', link: '/vi-vn/stage-0/0.1-learning-map/' },
+          {
-          { text: 'PM AI', link: '/vi-vn/stage-1/1.1-introduction-to-ai-ide/' },
+            text: 'PM AI',
+            link: '/vi-vn/stage-0/'
+          },
           {
             text: 'Phát triển Full Stack',
-            link: '/vi-vn/stage-2/frontend/2.0-lovart-assets/'
+            link: '/vi-vn/stage-2/'
           },
           {
             text: 'Phát triển Nâng cao',
-            link: '/vi-vn/stage-3/core-skills/3.1-mcp-claudecode-skills/'
+            link: '/vi-vn/stage-3/'
           },
-          { text: 'Phụ lục', link: '/vi-vn/appendix/ai-capability-dictionary' }
+          { text: 'Phụ lục', link: '/vi-vn/appendix/' }
         ],
         sidebar: {},
         footer: {

docs/.vitepress/theme/components/ArticleCard.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { withBase } from 'vitepress'
+
+defineProps({
+  title: String,
+  description: String,
+  link: String,
+  tags: Array
+})
+</script>
+
+<template>
+  <a :href="withBase(link)" class="article-card">
+    <div class="card-content">
+      <h3 class="title">{{ title }}</h3>
+      <p class="description">{{ description }}</p>
+      <div v-if="tags && tags.length" class="tags">
+        <span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>
+      </div>
+    </div>
+    <div class="arrow">→</div>
+  </a>
+</template>
+
+<style scoped>
+.article-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  text-decoration: none;
+  transition: all 0.2s;
+  height: 100%;
+}
+
+.article-card:hover {
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.card-content {
+  flex: 1;
+}
+
+.title {
+  margin: 0 0 8px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.description {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
+.tags {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+}
+
+.tag {
+  font-size: 0.75rem;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background-color: var(--vp-c-bg-mute);
+  color: var(--vp-c-text-2);
+}
+
+.arrow {
+  margin-left: 16px;
+  font-size: 1.2rem;
+  color: var(--vp-c-text-3);
+  transition: transform 0.2s;
+}
+
+.article-card:hover .arrow {
+  transform: translateX(4px);
+  color: var(--vp-c-brand);
+}
+</style>

docs/.vitepress/theme/components/ArticleGrid.vue

@@ -0,0 +1,30 @@
+<script setup>
+import ArticleCard from './ArticleCard.vue'
+
+defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="article-grid">
+    <ArticleCard
+      v-for="(item, i) in items"
+      :key="i"
+      v-bind="item"
+    />
+  </div>
+</template>
+
+<style scoped>
+.article-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  margin-top: 24px;
+  margin-bottom: 48px;
+}
+</style>

docs/.vitepress/theme/components/CategoryIndex.vue

@@ -0,0 +1,56 @@
+<script setup>
+import ArticleCard from './ArticleCard.vue'
+
+defineProps({
+  categories: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="category-index">
+    <div v-for="(category, index) in categories" :key="index" class="category-section">
+      <h2 v-if="category.title" class="category-title">{{ category.title }}</h2>
+      <p v-if="category.description" class="category-desc">{{ category.description }}</p>
+      
+      <div class="card-grid">
+        <ArticleCard
+          v-for="(item, i) in category.items"
+          :key="i"
+          v-bind="item"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.category-index {
+  margin-top: 24px;
+}
+
+.category-section {
+  margin-bottom: 48px;
+}
+
+.category-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+  border-bottom: none;
+}
+
+.category-desc {
+  font-size: 1rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 24px;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+}
+</style>

docs/.vitepress/theme/index.js

@@ -8,6 +8,8 @@ import { onMounted, watch, nextTick } from 'vue'
 import { useRoute, useData } from 'vitepress'
 import './style.css'
 import Layout from './Layout.vue'
+import CategoryIndex from './components/CategoryIndex.vue'
+import ArticleGrid from './components/ArticleGrid.vue'
 import StepBar from './components/StepBar.vue'
 import ChapterIntroduction from './components/ChapterIntroduction.vue'
 import WebTerminal from './components/appendix/terminal-intro/WebTerminal.vue'
@@ -268,6 +270,8 @@ export default {
   Layout,
   enhanceApp({ app }) {
     app.use(ElementPlus)
+    app.component('CategoryIndex', CategoryIndex)
+    app.component('ArticleGrid', ArticleGrid)
     app.component('StepBar', StepBar)
     app.component('ChapterIntroduction', ChapterIntroduction)
     app.component('WebTerminal', WebTerminal)

docs/ar-sa/appendix/index.md

@@ -0,0 +1,42 @@
+# Appendix
+
+Knowledge base for AI, Frontend, Backend, and General Skills.
+
+## Content Overview
+
+### AI Basics
+- [Prompt Engineering](/ar-sa/appendix/prompt-engineering)
+- [AI Evolution](/ar-sa/appendix/ai-evolution)
+- [LLM Introduction](/ar-sa/appendix/llm-intro)
+- [VLM Introduction](/ar-sa/appendix/vlm-intro)
+- [AI Image Generation](/ar-sa/appendix/image-gen-intro)
+- [AI Audio Models](/ar-sa/appendix/audio-intro)
+- [Context Engineering](/ar-sa/appendix/context-engineering)
+- [AI Agents](/ar-sa/appendix/agent-intro)
+- [AI Capability Dictionary](/ar-sa/appendix/ai-capability-dictionary)
+
+### Frontend Development
+- [Web Basics (HTML/CSS/JS)](/ar-sa/appendix/web-basics)
+- [Frontend Evolution](/ar-sa/appendix/frontend-evolution)
+- [Frontend Performance](/ar-sa/appendix/frontend-performance)
+- [Canvas 2D](/ar-sa/appendix/canvas-intro)
+- [URL to Browser](/ar-sa/appendix/url-to-browser)
+- [Browser DevTools](/ar-sa/appendix/browser-devtools)
+
+### Backend Development
+- [Backend Evolution](/ar-sa/appendix/backend-evolution)
+- [Backend Languages](/ar-sa/appendix/backend-languages)
+- [Database Principles](/ar-sa/appendix/database-intro)
+- [Cache Design](/ar-sa/appendix/cache-design)
+- [Message Queues](/ar-sa/appendix/queue-design)
+- [Authentication](/ar-sa/appendix/auth-design)
+- [Tracking Design](/ar-sa/appendix/tracking-design)
+- [Operations](/ar-sa/appendix/operations)
+
+### General Skills
+- [API Introduction](/ar-sa/appendix/api-intro)
+- [IDE Introduction](/ar-sa/appendix/ide-intro)
+- [Terminal Introduction](/ar-sa/appendix/terminal-intro)
+- [Git Introduction](/ar-sa/appendix/git-intro)
+- [Computer Networks](/ar-sa/appendix/computer-networks)
+- [Deployment](/ar-sa/appendix/deployment)

docs/ar-sa/stage-0/index.md

@@ -0,0 +1,19 @@
+# AI Product Manager
+
+Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+## Stage Overview
+
+### Getting Started
+Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
+
+- [1. Learning Map](/ar-sa/stage-0/0.1-learning-map/)
+- [2. If you can speak, you can code](/ar-sa/stage-0/0.2-ai-capabilities-through-games/)
+
+### Product Manager
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
+
+- [1. Introduction to AI IDE](/ar-sa/stage-1/1.1-introduction-to-ai-ide/)
+- [2. Building a Prototype](/ar-sa/stage-1/1.2-building-prototype/)
+- [3. Integrating AI Capabilities](/ar-sa/stage-1/1.3-integrating-ai-capabilities/)
+- [4. Complete Project Practice](/ar-sa/stage-1/1.4-complete-project-practice/)

docs/ar-sa/stage-2/index.md

@@ -0,0 +1,37 @@
+# Full-Stack Development
+
+Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
+
+## Stage Overview
+
+### Frontend Development
+Master modern frontend development with component libraries and design tools.
+
+- [Frontend 0: Lovart Assets](/ar-sa/stage-2/frontend/2.0-lovart-assets/)
+- [Frontend 1: Figma & MasterGo](/ar-sa/stage-2/frontend/2.1-figma-mastergo/)
+- [Frontend 2: UI Design](/ar-sa/stage-2/frontend/2.2-ui-design/)
+- [Frontend 3: Multi-Product UI](/ar-sa/stage-2/frontend/2.3-multi-product-ui/)
+- [Frontend 4: Hogwarts Portraits](/ar-sa/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+### Backend & Full-Stack
+Learn API design, database management, and deployment strategies.
+
+- [Backend 1: What is API](/ar-sa/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [Backend 2: Database & Supabase](/ar-sa/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [Backend 3: AI Interface Code](/ar-sa/stage-2/backend/2.3-ai-interface-code/)
+- [Backend 4: Git Workflow](/ar-sa/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [Backend 5: Zeabur Deployment](/ar-sa/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [Backend 6: Modern CLI Tools](/ar-sa/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [Backend 7: Stripe Payment](/ar-sa/stage-2/backend/2.7-stripe-payment/)
+
+### Assignments
+Practical projects to apply your full-stack skills.
+
+- [Assignment 1: Full-Stack App](/ar-sa/stage-2/assignments/2.1-fullstack-app/)
+- [Assignment 2: Modern Frontend + Trae](/ar-sa/stage-2/assignments/2.2-modern-frontend-trae/)
+
+### AI Capabilities
+Integrate AI features like knowledge bases and multimodal APIs.
+
+- [AI 1: Dify & Knowledge Base](/ar-sa/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 2: Multimodal API](/ar-sa/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)

docs/ar-sa/stage-3/index.md

@@ -0,0 +1,30 @@
+# Advanced Development
+
+Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
+
+## Stage Overview
+
+### Core Skills
+Advanced AI coding skills and long-running task management.
+
+- [Advanced 1: MCP & ClaudeCode Skills](/ar-sa/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [Advanced 2: Long-running Tasks](/ar-sa/stage-3/core-skills/3.2-long-running-tasks/)
+
+### Cross-Platform Development
+Build apps for WeChat, Android, and iOS.
+
+- [Advanced 3: WeChat Mini-Program](/ar-sa/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [Advanced 4: WeChat Mini-Program (Backend)](/ar-sa/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [Advanced 5: Android App](/ar-sa/stage-3/cross-platform/3.5-android-app/)
+- [Advanced 6: iOS App](/ar-sa/stage-3/cross-platform/3.6-ios-app/)
+
+### Personal Brand
+Build your personal website and blog.
+
+- [Advanced 7: Personal Website & Blog](/ar-sa/stage-3/personal-brand/3.7-personal-website-blog/)
+
+### AI Advanced
+Deep dive into RAG and advanced agent workflows.
+
+- [Advanced AI 1: What is RAG](/ar-sa/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [Advanced AI 2: Advanced RAG with LangGraph](/ar-sa/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)

docs/de-de/appendix/index.md

@@ -0,0 +1,42 @@
+# Appendix
+
+Knowledge base for AI, Frontend, Backend, and General Skills.
+
+## Content Overview
+
+### AI Basics
+- [Prompt Engineering](/de-de/appendix/prompt-engineering)
+- [AI Evolution](/de-de/appendix/ai-evolution)
+- [LLM Introduction](/de-de/appendix/llm-intro)
+- [VLM Introduction](/de-de/appendix/vlm-intro)
+- [AI Image Generation](/de-de/appendix/image-gen-intro)
+- [AI Audio Models](/de-de/appendix/audio-intro)
+- [Context Engineering](/de-de/appendix/context-engineering)
+- [AI Agents](/de-de/appendix/agent-intro)
+- [AI Capability Dictionary](/de-de/appendix/ai-capability-dictionary)
+
+### Frontend Development
+- [Web Basics (HTML/CSS/JS)](/de-de/appendix/web-basics)
+- [Frontend Evolution](/de-de/appendix/frontend-evolution)
+- [Frontend Performance](/de-de/appendix/frontend-performance)
+- [Canvas 2D](/de-de/appendix/canvas-intro)
+- [URL to Browser](/de-de/appendix/url-to-browser)
+- [Browser DevTools](/de-de/appendix/browser-devtools)
+
+### Backend Development
+- [Backend Evolution](/de-de/appendix/backend-evolution)
+- [Backend Languages](/de-de/appendix/backend-languages)
+- [Database Principles](/de-de/appendix/database-intro)
+- [Cache Design](/de-de/appendix/cache-design)
+- [Message Queues](/de-de/appendix/queue-design)
+- [Authentication](/de-de/appendix/auth-design)
+- [Tracking Design](/de-de/appendix/tracking-design)
+- [Operations](/de-de/appendix/operations)
+
+### General Skills
+- [API Introduction](/de-de/appendix/api-intro)
+- [IDE Introduction](/de-de/appendix/ide-intro)
+- [Terminal Introduction](/de-de/appendix/terminal-intro)
+- [Git Introduction](/de-de/appendix/git-intro)
+- [Computer Networks](/de-de/appendix/computer-networks)
+- [Deployment](/de-de/appendix/deployment)

docs/de-de/stage-0/index.md

@@ -0,0 +1,19 @@
+# AI Product Manager
+
+Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+## Stage Overview
+
+### Getting Started
+Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
+
+- [1. Learning Map](/de-de/stage-0/0.1-learning-map/)
+- [2. If you can speak, you can code](/de-de/stage-0/0.2-ai-capabilities-through-games/)
+
+### Product Manager
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
+
+- [1. Introduction to AI IDE](/de-de/stage-1/1.1-introduction-to-ai-ide/)
+- [2. Building a Prototype](/de-de/stage-1/1.2-building-prototype/)
+- [3. Integrating AI Capabilities](/de-de/stage-1/1.3-integrating-ai-capabilities/)
+- [4. Complete Project Practice](/de-de/stage-1/1.4-complete-project-practice/)

docs/de-de/stage-2/index.md

@@ -0,0 +1,37 @@
+# Full-Stack Development
+
+Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
+
+## Stage Overview
+
+### Frontend Development
+Master modern frontend development with component libraries and design tools.
+
+- [Frontend 0: Lovart Assets](/de-de/stage-2/frontend/2.0-lovart-assets/)
+- [Frontend 1: Figma & MasterGo](/de-de/stage-2/frontend/2.1-figma-mastergo/)
+- [Frontend 2: UI Design](/de-de/stage-2/frontend/2.2-ui-design/)
+- [Frontend 3: Multi-Product UI](/de-de/stage-2/frontend/2.3-multi-product-ui/)
+- [Frontend 4: Hogwarts Portraits](/de-de/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+### Backend & Full-Stack
+Learn API design, database management, and deployment strategies.
+
+- [Backend 1: What is API](/de-de/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [Backend 2: Database & Supabase](/de-de/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [Backend 3: AI Interface Code](/de-de/stage-2/backend/2.3-ai-interface-code/)
+- [Backend 4: Git Workflow](/de-de/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [Backend 5: Zeabur Deployment](/de-de/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [Backend 6: Modern CLI Tools](/de-de/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [Backend 7: Stripe Payment](/de-de/stage-2/backend/2.7-stripe-payment/)
+
+### Assignments
+Practical projects to apply your full-stack skills.
+
+- [Assignment 1: Full-Stack App](/de-de/stage-2/assignments/2.1-fullstack-app/)
+- [Assignment 2: Modern Frontend + Trae](/de-de/stage-2/assignments/2.2-modern-frontend-trae/)
+
+### AI Capabilities
+Integrate AI features like knowledge bases and multimodal APIs.
+
+- [AI 1: Dify & Knowledge Base](/de-de/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 2: Multimodal API](/de-de/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)

docs/de-de/stage-3/index.md

@@ -0,0 +1,30 @@
+# Advanced Development
+
+Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
+
+## Stage Overview
+
+### Core Skills
+Advanced AI coding skills and long-running task management.
+
+- [Advanced 1: MCP & ClaudeCode Skills](/de-de/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [Advanced 2: Long-running Tasks](/de-de/stage-3/core-skills/3.2-long-running-tasks/)
+
+### Cross-Platform Development
+Build apps for WeChat, Android, and iOS.
+
+- [Advanced 3: WeChat Mini-Program](/de-de/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [Advanced 4: WeChat Mini-Program (Backend)](/de-de/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [Advanced 5: Android App](/de-de/stage-3/cross-platform/3.5-android-app/)
+- [Advanced 6: iOS App](/de-de/stage-3/cross-platform/3.6-ios-app/)
+
+### Personal Brand
+Build your personal website and blog.
+
+- [Advanced 7: Personal Website & Blog](/de-de/stage-3/personal-brand/3.7-personal-website-blog/)
+
+### AI Advanced
+Deep dive into RAG and advanced agent workflows.
+
+- [Advanced AI 1: What is RAG](/de-de/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [Advanced AI 2: Advanced RAG with LangGraph](/de-de/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)

docs/en-us/appendix/index.md

@@ -0,0 +1,42 @@
+# Appendix
+
+Knowledge base for AI, Frontend, Backend, and General Skills.
+
+## Content Overview
+
+### AI Basics
+- [Prompt Engineering](/en-us/appendix/prompt-engineering)
+- [AI Evolution](/en-us/appendix/ai-evolution)
+- [LLM Introduction](/en-us/appendix/llm-intro)
+- [VLM Introduction](/en-us/appendix/vlm-intro)
+- [AI Image Generation](/en-us/appendix/image-gen-intro)
+- [AI Audio Models](/en-us/appendix/audio-intro)
+- [Context Engineering](/en-us/appendix/context-engineering)
+- [AI Agents](/en-us/appendix/agent-intro)
+- [AI Capability Dictionary](/en-us/appendix/ai-capability-dictionary)
+
+### Frontend Development
+- [Web Basics (HTML/CSS/JS)](/en-us/appendix/web-basics)
+- [Frontend Evolution](/en-us/appendix/frontend-evolution)
+- [Frontend Performance](/en-us/appendix/frontend-performance)
+- [Canvas 2D](/en-us/appendix/canvas-intro)
+- [URL to Browser](/en-us/appendix/url-to-browser)
+- [Browser DevTools](/en-us/appendix/browser-devtools)
+
+### Backend Development
+- [Backend Evolution](/en-us/appendix/backend-evolution)
+- [Backend Languages](/en-us/appendix/backend-languages)
+- [Database Principles](/en-us/appendix/database-intro)
+- [Cache Design](/en-us/appendix/cache-design)
+- [Message Queues](/en-us/appendix/queue-design)
+- [Authentication](/en-us/appendix/auth-design)
+- [Tracking Design](/en-us/appendix/tracking-design)
+- [Operations](/en-us/appendix/operations)
+
+### General Skills
+- [API Introduction](/en-us/appendix/api-intro)
+- [IDE Introduction](/en-us/appendix/ide-intro)
+- [Terminal Introduction](/en-us/appendix/terminal-intro)
+- [Git Introduction](/en-us/appendix/git-intro)
+- [Computer Networks](/en-us/appendix/computer-networks)
+- [Deployment](/en-us/appendix/deployment)

docs/en-us/index.md

@@ -42,28 +42,22 @@ const base = site.value.base
 </script>
 
 <div class="stage-container">
-  <a :href="base + 'en-us/stage-0/0.1-learning-map/'" class="stage-card">
+  <a :href="base + 'en-us/stage-0/'" class="stage-card">
-    <div class="stage-icon">🌱</div>
-    <h3>Stage 0: Getting Started</h3>
-    <p>Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.</p>
-    <span>Learn More →</span>
-  </a>
-  <a :href="base + 'en-us/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
     <div class="stage-icon">🎨</div>
     <h3>Stage 1: AI Product Manager</h3>
-    <p>Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.</p>
+    <p>Suitable for product, operations, and non-technical backgrounds. Build confidence through games, master Vibe Coding workflow, and independently complete high-fidelity web application prototypes.</p>
     <span>Learn More →</span>
   </a>
-  <a :href="base + 'en-us/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
+  <a :href="base + 'en-us/stage-2/'" class="stage-card">
     <div class="stage-icon">💻</div>
     <h3>Stage 2: Full-Stack Development</h3>
     <p>Dive deep into full-stack development. Frontend componentization, database design, backend API development, and deployment.</p>
     <span>Learn More →</span>
   </a>
-  <a :href="base + 'en-us/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
+  <a :href="base + 'en-us/stage-3/'" class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>Stage 3: Advanced Development</h3>
-    <p>Build complex cross-platform applications. WeChat mini-program practical实战, challenge higher-level AI-native application development.</p>
+    <p>Build complex cross-platform applications. WeChat mini-program practice, challenge higher-level AI-native application development.</p>
     <span>Learn More →</span>
   </a>
 </div>

docs/en-us/stage-0/index.md

@@ -0,0 +1,19 @@
+# AI Product Manager
+
+Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+## Stage Overview
+
+### Getting Started
+Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
+
+- [1. Learning Map](/en-us/stage-0/0.1-learning-map/)
+- [2. If you can speak, you can code](/en-us/stage-0/0.2-ai-capabilities-through-games/)
+
+### Product Manager
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
+
+- [1. Introduction to AI IDE](/en-us/stage-1/1.1-introduction-to-ai-ide/)
+- [2. Building a Prototype](/en-us/stage-1/1.2-building-prototype/)
+- [3. Integrating AI Capabilities](/en-us/stage-1/1.3-integrating-ai-capabilities/)
+- [4. Complete Project Practice](/en-us/stage-1/1.4-complete-project-practice/)

docs/en-us/stage-2/index.md

@@ -0,0 +1,37 @@
+# Full-Stack Development
+
+Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
+
+## Stage Overview
+
+### Frontend Development
+Master modern frontend development with component libraries and design tools.
+
+- [Frontend 0: Lovart Assets](/en-us/stage-2/frontend/2.0-lovart-assets/)
+- [Frontend 1: Figma & MasterGo](/en-us/stage-2/frontend/2.1-figma-mastergo/)
+- [Frontend 2: UI Design](/en-us/stage-2/frontend/2.2-ui-design/)
+- [Frontend 3: Multi-Product UI](/en-us/stage-2/frontend/2.3-multi-product-ui/)
+- [Frontend 4: Hogwarts Portraits](/en-us/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+### Backend & Full-Stack
+Learn API design, database management, and deployment strategies.
+
+- [Backend 1: What is API](/en-us/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [Backend 2: Database & Supabase](/en-us/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [Backend 3: AI Interface Code](/en-us/stage-2/backend/2.3-ai-interface-code/)
+- [Backend 4: Git Workflow](/en-us/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [Backend 5: Zeabur Deployment](/en-us/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [Backend 6: Modern CLI Tools](/en-us/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [Backend 7: Stripe Payment](/en-us/stage-2/backend/2.7-stripe-payment/)
+
+### Assignments
+Practical projects to apply your full-stack skills.
+
+- [Assignment 1: Full-Stack App](/en-us/stage-2/assignments/2.1-fullstack-app/)
+- [Assignment 2: Modern Frontend + Trae](/en-us/stage-2/assignments/2.2-modern-frontend-trae/)
+
+### AI Capabilities
+Integrate AI features like knowledge bases and multimodal APIs.
+
+- [AI 1: Dify & Knowledge Base](/en-us/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 2: Multimodal API](/en-us/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)

docs/en-us/stage-3/index.md

@@ -0,0 +1,30 @@
+# Advanced Development
+
+Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
+
+## Stage Overview
+
+### Core Skills
+Advanced AI coding skills and long-running task management.
+
+- [Advanced 1: MCP & ClaudeCode Skills](/en-us/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [Advanced 2: Long-running Tasks](/en-us/stage-3/core-skills/3.2-long-running-tasks/)
+
+### Cross-Platform Development
+Build apps for WeChat, Android, and iOS.
+
+- [Advanced 3: WeChat Mini-Program](/en-us/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [Advanced 4: WeChat Mini-Program (Backend)](/en-us/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [Advanced 5: Android App](/en-us/stage-3/cross-platform/3.5-android-app/)
+- [Advanced 6: iOS App](/en-us/stage-3/cross-platform/3.6-ios-app/)
+
+### Personal Brand
+Build your personal website and blog.
+
+- [Advanced 7: Personal Website & Blog](/en-us/stage-3/personal-brand/3.7-personal-website-blog/)
+
+### AI Advanced
+Deep dive into RAG and advanced agent workflows.
+
+- [Advanced AI 1: What is RAG](/en-us/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [Advanced AI 2: Advanced RAG with LangGraph](/en-us/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)

docs/es-es/appendix/index.md

@@ -0,0 +1,42 @@
+# Appendix
+
+Knowledge base for AI, Frontend, Backend, and General Skills.
+
+## Content Overview
+
+### AI Basics
+- [Prompt Engineering](/es-es/appendix/prompt-engineering)
+- [AI Evolution](/es-es/appendix/ai-evolution)
+- [LLM Introduction](/es-es/appendix/llm-intro)
+- [VLM Introduction](/es-es/appendix/vlm-intro)
+- [AI Image Generation](/es-es/appendix/image-gen-intro)
+- [AI Audio Models](/es-es/appendix/audio-intro)
+- [Context Engineering](/es-es/appendix/context-engineering)
+- [AI Agents](/es-es/appendix/agent-intro)
+- [AI Capability Dictionary](/es-es/appendix/ai-capability-dictionary)
+
+### Frontend Development
+- [Web Basics (HTML/CSS/JS)](/es-es/appendix/web-basics)
+- [Frontend Evolution](/es-es/appendix/frontend-evolution)
+- [Frontend Performance](/es-es/appendix/frontend-performance)
+- [Canvas 2D](/es-es/appendix/canvas-intro)
+- [URL to Browser](/es-es/appendix/url-to-browser)
+- [Browser DevTools](/es-es/appendix/browser-devtools)
+
+### Backend Development
+- [Backend Evolution](/es-es/appendix/backend-evolution)
+- [Backend Languages](/es-es/appendix/backend-languages)
+- [Database Principles](/es-es/appendix/database-intro)
+- [Cache Design](/es-es/appendix/cache-design)
+- [Message Queues](/es-es/appendix/queue-design)
+- [Authentication](/es-es/appendix/auth-design)
+- [Tracking Design](/es-es/appendix/tracking-design)
+- [Operations](/es-es/appendix/operations)
+
+### General Skills
+- [API Introduction](/es-es/appendix/api-intro)
+- [IDE Introduction](/es-es/appendix/ide-intro)
+- [Terminal Introduction](/es-es/appendix/terminal-intro)
+- [Git Introduction](/es-es/appendix/git-intro)
+- [Computer Networks](/es-es/appendix/computer-networks)
+- [Deployment](/es-es/appendix/deployment)

docs/es-es/stage-0/index.md

@@ -0,0 +1,19 @@
+# AI Product Manager
+
+Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+## Stage Overview
+
+### Getting Started
+Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
+
+- [1. Learning Map](/es-es/stage-0/0.1-learning-map/)
+- [2. If you can speak, you can code](/es-es/stage-0/0.2-ai-capabilities-through-games/)
+
+### Product Manager
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
+
+- [1. Introduction to AI IDE](/es-es/stage-1/1.1-introduction-to-ai-ide/)
+- [2. Building a Prototype](/es-es/stage-1/1.2-building-prototype/)
+- [3. Integrating AI Capabilities](/es-es/stage-1/1.3-integrating-ai-capabilities/)
+- [4. Complete Project Practice](/es-es/stage-1/1.4-complete-project-practice/)

docs/es-es/stage-2/index.md

@@ -0,0 +1,37 @@
+# Full-Stack Development
+
+Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
+
+## Stage Overview
+
+### Frontend Development
+Master modern frontend development with component libraries and design tools.
+
+- [Frontend 0: Lovart Assets](/es-es/stage-2/frontend/2.0-lovart-assets/)
+- [Frontend 1: Figma & MasterGo](/es-es/stage-2/frontend/2.1-figma-mastergo/)
+- [Frontend 2: UI Design](/es-es/stage-2/frontend/2.2-ui-design/)
+- [Frontend 3: Multi-Product UI](/es-es/stage-2/frontend/2.3-multi-product-ui/)
+- [Frontend 4: Hogwarts Portraits](/es-es/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+### Backend & Full-Stack
+Learn API design, database management, and deployment strategies.
+
+- [Backend 1: What is API](/es-es/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [Backend 2: Database & Supabase](/es-es/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [Backend 3: AI Interface Code](/es-es/stage-2/backend/2.3-ai-interface-code/)
+- [Backend 4: Git Workflow](/es-es/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [Backend 5: Zeabur Deployment](/es-es/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [Backend 6: Modern CLI Tools](/es-es/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [Backend 7: Stripe Payment](/es-es/stage-2/backend/2.7-stripe-payment/)
+
+### Assignments
+Practical projects to apply your full-stack skills.
+
+- [Assignment 1: Full-Stack App](/es-es/stage-2/assignments/2.1-fullstack-app/)
+- [Assignment 2: Modern Frontend + Trae](/es-es/stage-2/assignments/2.2-modern-frontend-trae/)
+
+### AI Capabilities
+Integrate AI features like knowledge bases and multimodal APIs.
+
+- [AI 1: Dify & Knowledge Base](/es-es/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 2: Multimodal API](/es-es/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)

docs/es-es/stage-3/index.md

@@ -0,0 +1,30 @@
+# Advanced Development
+
+Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
+
+## Stage Overview
+
+### Core Skills
+Advanced AI coding skills and long-running task management.
+
+- [Advanced 1: MCP & ClaudeCode Skills](/es-es/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [Advanced 2: Long-running Tasks](/es-es/stage-3/core-skills/3.2-long-running-tasks/)
+
+### Cross-Platform Development
+Build apps for WeChat, Android, and iOS.
+
+- [Advanced 3: WeChat Mini-Program](/es-es/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [Advanced 4: WeChat Mini-Program (Backend)](/es-es/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [Advanced 5: Android App](/es-es/stage-3/cross-platform/3.5-android-app/)
+- [Advanced 6: iOS App](/es-es/stage-3/cross-platform/3.6-ios-app/)
+
+### Personal Brand
+Build your personal website and blog.
+
+- [Advanced 7: Personal Website & Blog](/es-es/stage-3/personal-brand/3.7-personal-website-blog/)
+
+### AI Advanced
+Deep dive into RAG and advanced agent workflows.
+
+- [Advanced AI 1: What is RAG](/es-es/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [Advanced AI 2: Advanced RAG with LangGraph](/es-es/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)

docs/fr-fr/appendix/index.md

@@ -0,0 +1,42 @@
+# Appendix
+
+Knowledge base for AI, Frontend, Backend, and General Skills.
+
+## Content Overview
+
+### AI Basics
+- [Prompt Engineering](/fr-fr/appendix/prompt-engineering)
+- [AI Evolution](/fr-fr/appendix/ai-evolution)
+- [LLM Introduction](/fr-fr/appendix/llm-intro)
+- [VLM Introduction](/fr-fr/appendix/vlm-intro)
+- [AI Image Generation](/fr-fr/appendix/image-gen-intro)
+- [AI Audio Models](/fr-fr/appendix/audio-intro)
+- [Context Engineering](/fr-fr/appendix/context-engineering)
+- [AI Agents](/fr-fr/appendix/agent-intro)
+- [AI Capability Dictionary](/fr-fr/appendix/ai-capability-dictionary)
+
+### Frontend Development
+- [Web Basics (HTML/CSS/JS)](/fr-fr/appendix/web-basics)
+- [Frontend Evolution](/fr-fr/appendix/frontend-evolution)
+- [Frontend Performance](/fr-fr/appendix/frontend-performance)
+- [Canvas 2D](/fr-fr/appendix/canvas-intro)
+- [URL to Browser](/fr-fr/appendix/url-to-browser)
+- [Browser DevTools](/fr-fr/appendix/browser-devtools)
+
+### Backend Development
+- [Backend Evolution](/fr-fr/appendix/backend-evolution)
+- [Backend Languages](/fr-fr/appendix/backend-languages)
+- [Database Principles](/fr-fr/appendix/database-intro)
+- [Cache Design](/fr-fr/appendix/cache-design)
+- [Message Queues](/fr-fr/appendix/queue-design)
+- [Authentication](/fr-fr/appendix/auth-design)
+- [Tracking Design](/fr-fr/appendix/tracking-design)
+- [Operations](/fr-fr/appendix/operations)
+
+### General Skills
+- [API Introduction](/fr-fr/appendix/api-intro)
+- [IDE Introduction](/fr-fr/appendix/ide-intro)
+- [Terminal Introduction](/fr-fr/appendix/terminal-intro)
+- [Git Introduction](/fr-fr/appendix/git-intro)
+- [Computer Networks](/fr-fr/appendix/computer-networks)
+- [Deployment](/fr-fr/appendix/deployment)

docs/fr-fr/stage-0/index.md

@@ -0,0 +1,19 @@
+# AI Product Manager
+
+Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+## Stage Overview
+
+### Getting Started
+Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
+
+- [1. Learning Map](/fr-fr/stage-0/0.1-learning-map/)
+- [2. If you can speak, you can code](/fr-fr/stage-0/0.2-ai-capabilities-through-games/)
+
+### Product Manager
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
+
+- [1. Introduction to AI IDE](/fr-fr/stage-1/1.1-introduction-to-ai-ide/)
+- [2. Building a Prototype](/fr-fr/stage-1/1.2-building-prototype/)
+- [3. Integrating AI Capabilities](/fr-fr/stage-1/1.3-integrating-ai-capabilities/)
+- [4. Complete Project Practice](/fr-fr/stage-1/1.4-complete-project-practice/)

docs/fr-fr/stage-2/index.md

@@ -0,0 +1,37 @@
+# Full-Stack Development
+
+Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
+
+## Stage Overview
+
+### Frontend Development
+Master modern frontend development with component libraries and design tools.
+
+- [Frontend 0: Lovart Assets](/fr-fr/stage-2/frontend/2.0-lovart-assets/)
+- [Frontend 1: Figma & MasterGo](/fr-fr/stage-2/frontend/2.1-figma-mastergo/)
+- [Frontend 2: UI Design](/fr-fr/stage-2/frontend/2.2-ui-design/)
+- [Frontend 3: Multi-Product UI](/fr-fr/stage-2/frontend/2.3-multi-product-ui/)
+- [Frontend 4: Hogwarts Portraits](/fr-fr/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+### Backend & Full-Stack
+Learn API design, database management, and deployment strategies.
+
+- [Backend 1: What is API](/fr-fr/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [Backend 2: Database & Supabase](/fr-fr/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [Backend 3: AI Interface Code](/fr-fr/stage-2/backend/2.3-ai-interface-code/)
+- [Backend 4: Git Workflow](/fr-fr/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [Backend 5: Zeabur Deployment](/fr-fr/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [Backend 6: Modern CLI Tools](/fr-fr/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [Backend 7: Stripe Payment](/fr-fr/stage-2/backend/2.7-stripe-payment/)
+
+### Assignments
+Practical projects to apply your full-stack skills.
+
+- [Assignment 1: Full-Stack App](/fr-fr/stage-2/assignments/2.1-fullstack-app/)
+- [Assignment 2: Modern Frontend + Trae](/fr-fr/stage-2/assignments/2.2-modern-frontend-trae/)
+
+### AI Capabilities
+Integrate AI features like knowledge bases and multimodal APIs.
+
+- [AI 1: Dify & Knowledge Base](/fr-fr/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 2: Multimodal API](/fr-fr/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)

docs/fr-fr/stage-3/index.md

@@ -0,0 +1,30 @@
+# Advanced Development
+
+Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
+
+## Stage Overview
+
+### Core Skills
+Advanced AI coding skills and long-running task management.
+
+- [Advanced 1: MCP & ClaudeCode Skills](/fr-fr/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [Advanced 2: Long-running Tasks](/fr-fr/stage-3/core-skills/3.2-long-running-tasks/)
+
+### Cross-Platform Development
+Build apps for WeChat, Android, and iOS.
+
+- [Advanced 3: WeChat Mini-Program](/fr-fr/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [Advanced 4: WeChat Mini-Program (Backend)](/fr-fr/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [Advanced 5: Android App](/fr-fr/stage-3/cross-platform/3.5-android-app/)
+- [Advanced 6: iOS App](/fr-fr/stage-3/cross-platform/3.6-ios-app/)
+
+### Personal Brand
+Build your personal website and blog.
+
+- [Advanced 7: Personal Website & Blog](/fr-fr/stage-3/personal-brand/3.7-personal-website-blog/)
+
+### AI Advanced
+Deep dive into RAG and advanced agent workflows.
+
+- [Advanced AI 1: What is RAG](/fr-fr/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [Advanced AI 2: Advanced RAG with LangGraph](/fr-fr/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)

docs/ja-jp/appendix/index.md

@@ -0,0 +1,42 @@
+# Appendix
+
+Knowledge base for AI, Frontend, Backend, and General Skills.
+
+## Content Overview
+
+### AI Basics
+- [Prompt Engineering](/ja-jp/appendix/prompt-engineering)
+- [AI Evolution](/ja-jp/appendix/ai-evolution)
+- [LLM Introduction](/ja-jp/appendix/llm-intro)
+- [VLM Introduction](/ja-jp/appendix/vlm-intro)
+- [AI Image Generation](/ja-jp/appendix/image-gen-intro)
+- [AI Audio Models](/ja-jp/appendix/audio-intro)
+- [Context Engineering](/ja-jp/appendix/context-engineering)
+- [AI Agents](/ja-jp/appendix/agent-intro)
+- [AI Capability Dictionary](/ja-jp/appendix/ai-capability-dictionary)
+
+### Frontend Development
+- [Web Basics (HTML/CSS/JS)](/ja-jp/appendix/web-basics)
+- [Frontend Evolution](/ja-jp/appendix/frontend-evolution)
+- [Frontend Performance](/ja-jp/appendix/frontend-performance)
+- [Canvas 2D](/ja-jp/appendix/canvas-intro)
+- [URL to Browser](/ja-jp/appendix/url-to-browser)
+- [Browser DevTools](/ja-jp/appendix/browser-devtools)
+
+### Backend Development
+- [Backend Evolution](/ja-jp/appendix/backend-evolution)
+- [Backend Languages](/ja-jp/appendix/backend-languages)
+- [Database Principles](/ja-jp/appendix/database-intro)
+- [Cache Design](/ja-jp/appendix/cache-design)
+- [Message Queues](/ja-jp/appendix/queue-design)
+- [Authentication](/ja-jp/appendix/auth-design)
+- [Tracking Design](/ja-jp/appendix/tracking-design)
+- [Operations](/ja-jp/appendix/operations)
+
+### General Skills
+- [API Introduction](/ja-jp/appendix/api-intro)
+- [IDE Introduction](/ja-jp/appendix/ide-intro)
+- [Terminal Introduction](/ja-jp/appendix/terminal-intro)
+- [Git Introduction](/ja-jp/appendix/git-intro)
+- [Computer Networks](/ja-jp/appendix/computer-networks)
+- [Deployment](/ja-jp/appendix/deployment)

docs/ja-jp/index.md

@@ -42,25 +42,19 @@ const base = site.value.base
 </script>
 
 <div class="stage-container">
-  <a :href="base + 'ja-jp/stage-0/0.1-learning-map/'" class="stage-card">
+  <a :href="base + 'ja-jp/stage-0/'" class="stage-card">
-    <div class="stage-icon">🌱</div>
-    <h3>Stage 0: 入門</h3>
-    <p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、自信を構築しましょう。</p>
-    <span>詳しく見る →</span>
-  </a>
-  <a :href="base + 'ja-jp/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>
+    <p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、Vibe Coding ワークフローをマスターしましょう。</p>
     <span>詳しく見る →</span>
   </a>
-  <a :href="base + 'ja-jp/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
+  <a :href="base + 'ja-jp/stage-2/'" class="stage-card">
     <div class="stage-icon">💻</div>
     <h3>Stage 2: フルスタック開発</h3>
     <p>フルスタック開発に深く潜り込みましょう。フロントエンドコンポーネント化、データベース設計、バックエンド API 開発、デプロイメント。</p>
     <span>詳しく見る →</span>
   </a>
-  <a :href="base + 'ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
+  <a :href="base + 'ja-jp/stage-3/'" class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>Stage 3: 上級開発</h3>
     <p>複雑なクロスプラットフォームアプリケーションを構築しましょう。WeChat ミニプログラム実戦、より高レベルの AI ネイティブアプリケーション開発に挑戦します。</p>

docs/ja-jp/stage-0/index.md

@@ -0,0 +1,19 @@
+# AI Product Manager
+
+Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+## Stage Overview
+
+### Getting Started
+Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
+
+- [1. Learning Map](/ja-jp/stage-0/0.1-learning-map/)
+- [2. If you can speak, you can code](/ja-jp/stage-0/0.2-ai-capabilities-through-games/)
+
+### Product Manager
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
+
+- [1. Introduction to AI IDE](/ja-jp/stage-1/1.1-introduction-to-ai-ide/)
+- [2. Building a Prototype](/ja-jp/stage-1/1.2-building-prototype/)
+- [3. Integrating AI Capabilities](/ja-jp/stage-1/1.3-integrating-ai-capabilities/)
+- [4. Complete Project Practice](/ja-jp/stage-1/1.4-complete-project-practice/)

docs/ja-jp/stage-2/index.md

@@ -0,0 +1,37 @@
+# Full-Stack Development
+
+Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
+
+## Stage Overview
+
+### Frontend Development
+Master modern frontend development with component libraries and design tools.
+
+- [Frontend 0: Lovart Assets](/ja-jp/stage-2/frontend/2.0-lovart-assets/)
+- [Frontend 1: Figma & MasterGo](/ja-jp/stage-2/frontend/2.1-figma-mastergo/)
+- [Frontend 2: UI Design](/ja-jp/stage-2/frontend/2.2-ui-design/)
+- [Frontend 3: Multi-Product UI](/ja-jp/stage-2/frontend/2.3-multi-product-ui/)
+- [Frontend 4: Hogwarts Portraits](/ja-jp/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+### Backend & Full-Stack
+Learn API design, database management, and deployment strategies.
+
+- [Backend 1: What is API](/ja-jp/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [Backend 2: Database & Supabase](/ja-jp/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [Backend 3: AI Interface Code](/ja-jp/stage-2/backend/2.3-ai-interface-code/)
+- [Backend 4: Git Workflow](/ja-jp/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [Backend 5: Zeabur Deployment](/ja-jp/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [Backend 6: Modern CLI Tools](/ja-jp/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [Backend 7: Stripe Payment](/ja-jp/stage-2/backend/2.7-stripe-payment/)
+
+### Assignments
+Practical projects to apply your full-stack skills.
+
+- [Assignment 1: Full-Stack App](/ja-jp/stage-2/assignments/2.1-fullstack-app/)
+- [Assignment 2: Modern Frontend + Trae](/ja-jp/stage-2/assignments/2.2-modern-frontend-trae/)
+
+### AI Capabilities
+Integrate AI features like knowledge bases and multimodal APIs.
+
+- [AI 1: Dify & Knowledge Base](/ja-jp/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 2: Multimodal API](/ja-jp/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)

docs/ja-jp/stage-3/index.md

@@ -0,0 +1,30 @@
+# Advanced Development
+
+Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
+
+## Stage Overview
+
+### Core Skills
+Advanced AI coding skills and long-running task management.
+
+- [Advanced 1: MCP & ClaudeCode Skills](/ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [Advanced 2: Long-running Tasks](/ja-jp/stage-3/core-skills/3.2-long-running-tasks/)
+
+### Cross-Platform Development
+Build apps for WeChat, Android, and iOS.
+
+- [Advanced 3: WeChat Mini-Program](/ja-jp/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [Advanced 4: WeChat Mini-Program (Backend)](/ja-jp/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [Advanced 5: Android App](/ja-jp/stage-3/cross-platform/3.5-android-app/)
+- [Advanced 6: iOS App](/ja-jp/stage-3/cross-platform/3.6-ios-app/)
+
+### Personal Brand
+Build your personal website and blog.
+
+- [Advanced 7: Personal Website & Blog](/ja-jp/stage-3/personal-brand/3.7-personal-website-blog/)
+
+### AI Advanced
+Deep dive into RAG and advanced agent workflows.
+
+- [Advanced AI 1: What is RAG](/ja-jp/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [Advanced AI 2: Advanced RAG with LangGraph](/ja-jp/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)

docs/ko-kr/appendix/index.md

@@ -0,0 +1,42 @@
+# Appendix
+
+Knowledge base for AI, Frontend, Backend, and General Skills.
+
+## Content Overview
+
+### AI Basics
+- [Prompt Engineering](/ko-kr/appendix/prompt-engineering)
+- [AI Evolution](/ko-kr/appendix/ai-evolution)
+- [LLM Introduction](/ko-kr/appendix/llm-intro)
+- [VLM Introduction](/ko-kr/appendix/vlm-intro)
+- [AI Image Generation](/ko-kr/appendix/image-gen-intro)
+- [AI Audio Models](/ko-kr/appendix/audio-intro)
+- [Context Engineering](/ko-kr/appendix/context-engineering)
+- [AI Agents](/ko-kr/appendix/agent-intro)
+- [AI Capability Dictionary](/ko-kr/appendix/ai-capability-dictionary)
+
+### Frontend Development
+- [Web Basics (HTML/CSS/JS)](/ko-kr/appendix/web-basics)
+- [Frontend Evolution](/ko-kr/appendix/frontend-evolution)
+- [Frontend Performance](/ko-kr/appendix/frontend-performance)
+- [Canvas 2D](/ko-kr/appendix/canvas-intro)
+- [URL to Browser](/ko-kr/appendix/url-to-browser)
+- [Browser DevTools](/ko-kr/appendix/browser-devtools)
+
+### Backend Development
+- [Backend Evolution](/ko-kr/appendix/backend-evolution)
+- [Backend Languages](/ko-kr/appendix/backend-languages)
+- [Database Principles](/ko-kr/appendix/database-intro)
+- [Cache Design](/ko-kr/appendix/cache-design)
+- [Message Queues](/ko-kr/appendix/queue-design)
+- [Authentication](/ko-kr/appendix/auth-design)
+- [Tracking Design](/ko-kr/appendix/tracking-design)
+- [Operations](/ko-kr/appendix/operations)
+
+### General Skills
+- [API Introduction](/ko-kr/appendix/api-intro)
+- [IDE Introduction](/ko-kr/appendix/ide-intro)
+- [Terminal Introduction](/ko-kr/appendix/terminal-intro)
+- [Git Introduction](/ko-kr/appendix/git-intro)
+- [Computer Networks](/ko-kr/appendix/computer-networks)
+- [Deployment](/ko-kr/appendix/deployment)

docs/ko-kr/stage-0/index.md

@@ -0,0 +1,19 @@
+# AI Product Manager
+
+Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+## Stage Overview
+
+### Getting Started
+Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
+
+- [1. Learning Map](/ko-kr/stage-0/0.1-learning-map/)
+- [2. If you can speak, you can code](/ko-kr/stage-0/0.2-ai-capabilities-through-games/)
+
+### Product Manager
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
+
+- [1. Introduction to AI IDE](/ko-kr/stage-1/1.1-introduction-to-ai-ide/)
+- [2. Building a Prototype](/ko-kr/stage-1/1.2-building-prototype/)
+- [3. Integrating AI Capabilities](/ko-kr/stage-1/1.3-integrating-ai-capabilities/)
+- [4. Complete Project Practice](/ko-kr/stage-1/1.4-complete-project-practice/)

docs/ko-kr/stage-2/index.md

@@ -0,0 +1,37 @@
+# Full-Stack Development
+
+Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
+
+## Stage Overview
+
+### Frontend Development
+Master modern frontend development with component libraries and design tools.
+
+- [Frontend 0: Lovart Assets](/ko-kr/stage-2/frontend/2.0-lovart-assets/)
+- [Frontend 1: Figma & MasterGo](/ko-kr/stage-2/frontend/2.1-figma-mastergo/)
+- [Frontend 2: UI Design](/ko-kr/stage-2/frontend/2.2-ui-design/)
+- [Frontend 3: Multi-Product UI](/ko-kr/stage-2/frontend/2.3-multi-product-ui/)
+- [Frontend 4: Hogwarts Portraits](/ko-kr/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+### Backend & Full-Stack
+Learn API design, database management, and deployment strategies.
+
+- [Backend 1: What is API](/ko-kr/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [Backend 2: Database & Supabase](/ko-kr/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [Backend 3: AI Interface Code](/ko-kr/stage-2/backend/2.3-ai-interface-code/)
+- [Backend 4: Git Workflow](/ko-kr/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [Backend 5: Zeabur Deployment](/ko-kr/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [Backend 6: Modern CLI Tools](/ko-kr/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [Backend 7: Stripe Payment](/ko-kr/stage-2/backend/2.7-stripe-payment/)
+
+### Assignments
+Practical projects to apply your full-stack skills.
+
+- [Assignment 1: Full-Stack App](/ko-kr/stage-2/assignments/2.1-fullstack-app/)
+- [Assignment 2: Modern Frontend + Trae](/ko-kr/stage-2/assignments/2.2-modern-frontend-trae/)
+
+### AI Capabilities
+Integrate AI features like knowledge bases and multimodal APIs.
+
+- [AI 1: Dify & Knowledge Base](/ko-kr/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 2: Multimodal API](/ko-kr/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)

docs/ko-kr/stage-3/index.md

@@ -0,0 +1,30 @@
+# Advanced Development
+
+Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
+
+## Stage Overview
+
+### Core Skills
+Advanced AI coding skills and long-running task management.
+
+- [Advanced 1: MCP & ClaudeCode Skills](/ko-kr/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [Advanced 2: Long-running Tasks](/ko-kr/stage-3/core-skills/3.2-long-running-tasks/)
+
+### Cross-Platform Development
+Build apps for WeChat, Android, and iOS.
+
+- [Advanced 3: WeChat Mini-Program](/ko-kr/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [Advanced 4: WeChat Mini-Program (Backend)](/ko-kr/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [Advanced 5: Android App](/ko-kr/stage-3/cross-platform/3.5-android-app/)
+- [Advanced 6: iOS App](/ko-kr/stage-3/cross-platform/3.6-ios-app/)
+
+### Personal Brand
+Build your personal website and blog.
+
+- [Advanced 7: Personal Website & Blog](/ko-kr/stage-3/personal-brand/3.7-personal-website-blog/)
+
+### AI Advanced
+Deep dive into RAG and advanced agent workflows.
+
+- [Advanced AI 1: What is RAG](/ko-kr/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [Advanced AI 2: Advanced RAG with LangGraph](/ko-kr/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)

docs/vi-vn/appendix/index.md

@@ -0,0 +1,42 @@
+# Appendix
+
+Knowledge base for AI, Frontend, Backend, and General Skills.
+
+## Content Overview
+
+### AI Basics
+- [Prompt Engineering](/vi-vn/appendix/prompt-engineering)
+- [AI Evolution](/vi-vn/appendix/ai-evolution)
+- [LLM Introduction](/vi-vn/appendix/llm-intro)
+- [VLM Introduction](/vi-vn/appendix/vlm-intro)
+- [AI Image Generation](/vi-vn/appendix/image-gen-intro)
+- [AI Audio Models](/vi-vn/appendix/audio-intro)
+- [Context Engineering](/vi-vn/appendix/context-engineering)
+- [AI Agents](/vi-vn/appendix/agent-intro)
+- [AI Capability Dictionary](/vi-vn/appendix/ai-capability-dictionary)
+
+### Frontend Development
+- [Web Basics (HTML/CSS/JS)](/vi-vn/appendix/web-basics)
+- [Frontend Evolution](/vi-vn/appendix/frontend-evolution)
+- [Frontend Performance](/vi-vn/appendix/frontend-performance)
+- [Canvas 2D](/vi-vn/appendix/canvas-intro)
+- [URL to Browser](/vi-vn/appendix/url-to-browser)
+- [Browser DevTools](/vi-vn/appendix/browser-devtools)
+
+### Backend Development
+- [Backend Evolution](/vi-vn/appendix/backend-evolution)
+- [Backend Languages](/vi-vn/appendix/backend-languages)
+- [Database Principles](/vi-vn/appendix/database-intro)
+- [Cache Design](/vi-vn/appendix/cache-design)
+- [Message Queues](/vi-vn/appendix/queue-design)
+- [Authentication](/vi-vn/appendix/auth-design)
+- [Tracking Design](/vi-vn/appendix/tracking-design)
+- [Operations](/vi-vn/appendix/operations)
+
+### General Skills
+- [API Introduction](/vi-vn/appendix/api-intro)
+- [IDE Introduction](/vi-vn/appendix/ide-intro)
+- [Terminal Introduction](/vi-vn/appendix/terminal-intro)
+- [Git Introduction](/vi-vn/appendix/git-intro)
+- [Computer Networks](/vi-vn/appendix/computer-networks)
+- [Deployment](/vi-vn/appendix/deployment)

docs/vi-vn/stage-0/index.md

@@ -0,0 +1,19 @@
+# AI Product Manager
+
+Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+## Stage Overview
+
+### Getting Started
+Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
+
+- [1. Learning Map](/vi-vn/stage-0/0.1-learning-map/)
+- [2. If you can speak, you can code](/vi-vn/stage-0/0.2-ai-capabilities-through-games/)
+
+### Product Manager
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
+
+- [1. Introduction to AI IDE](/vi-vn/stage-1/1.1-introduction-to-ai-ide/)
+- [2. Building a Prototype](/vi-vn/stage-1/1.2-building-prototype/)
+- [3. Integrating AI Capabilities](/vi-vn/stage-1/1.3-integrating-ai-capabilities/)
+- [4. Complete Project Practice](/vi-vn/stage-1/1.4-complete-project-practice/)

docs/vi-vn/stage-2/index.md

@@ -0,0 +1,37 @@
+# Full-Stack Development
+
+Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
+
+## Stage Overview
+
+### Frontend Development
+Master modern frontend development with component libraries and design tools.
+
+- [Frontend 0: Lovart Assets](/vi-vn/stage-2/frontend/2.0-lovart-assets/)
+- [Frontend 1: Figma & MasterGo](/vi-vn/stage-2/frontend/2.1-figma-mastergo/)
+- [Frontend 2: UI Design](/vi-vn/stage-2/frontend/2.2-ui-design/)
+- [Frontend 3: Multi-Product UI](/vi-vn/stage-2/frontend/2.3-multi-product-ui/)
+- [Frontend 4: Hogwarts Portraits](/vi-vn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+### Backend & Full-Stack
+Learn API design, database management, and deployment strategies.
+
+- [Backend 1: What is API](/vi-vn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [Backend 2: Database & Supabase](/vi-vn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [Backend 3: AI Interface Code](/vi-vn/stage-2/backend/2.3-ai-interface-code/)
+- [Backend 4: Git Workflow](/vi-vn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [Backend 5: Zeabur Deployment](/vi-vn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [Backend 6: Modern CLI Tools](/vi-vn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [Backend 7: Stripe Payment](/vi-vn/stage-2/backend/2.7-stripe-payment/)
+
+### Assignments
+Practical projects to apply your full-stack skills.
+
+- [Assignment 1: Full-Stack App](/vi-vn/stage-2/assignments/2.1-fullstack-app/)
+- [Assignment 2: Modern Frontend + Trae](/vi-vn/stage-2/assignments/2.2-modern-frontend-trae/)
+
+### AI Capabilities
+Integrate AI features like knowledge bases and multimodal APIs.
+
+- [AI 1: Dify & Knowledge Base](/vi-vn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 2: Multimodal API](/vi-vn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)

docs/vi-vn/stage-3/index.md

@@ -0,0 +1,30 @@
+# Advanced Development
+
+Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
+
+## Stage Overview
+
+### Core Skills
+Advanced AI coding skills and long-running task management.
+
+- [Advanced 1: MCP & ClaudeCode Skills](/vi-vn/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [Advanced 2: Long-running Tasks](/vi-vn/stage-3/core-skills/3.2-long-running-tasks/)
+
+### Cross-Platform Development
+Build apps for WeChat, Android, and iOS.
+
+- [Advanced 3: WeChat Mini-Program](/vi-vn/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [Advanced 4: WeChat Mini-Program (Backend)](/vi-vn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [Advanced 5: Android App](/vi-vn/stage-3/cross-platform/3.5-android-app/)
+- [Advanced 6: iOS App](/vi-vn/stage-3/cross-platform/3.6-ios-app/)
+
+### Personal Brand
+Build your personal website and blog.
+
+- [Advanced 7: Personal Website & Blog](/vi-vn/stage-3/personal-brand/3.7-personal-website-blog/)
+
+### AI Advanced
+Deep dive into RAG and advanced agent workflows.
+
+- [Advanced AI 1: What is RAG](/vi-vn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [Advanced AI 2: Advanced RAG with LangGraph](/vi-vn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)

docs/zh-cn/appendix/index.md

@@ -0,0 +1,70 @@
+<script setup>
+const aiItems = [
+  { title: '提示词工程', link: '/zh-cn/appendix/prompt-engineering', description: '掌握与 AI 高效对话的技巧，解锁大模型的潜力。' },
+  { title: '人工智能进化史', link: '/zh-cn/appendix/ai-evolution', description: '回顾 AI 发展历程中的关键里程碑，理解技术演进脉络。' },
+  { title: '大语言模型', link: '/zh-cn/appendix/llm-intro', description: '深入浅出解析大语言模型（LLM）的工作原理与应用。' },
+  { title: '多模态大模型', link: '/zh-cn/appendix/vlm-intro', description: '探索能够处理图像、音频等多种数据模态的先进模型。' },
+  { title: 'AI 绘画原理', link: '/zh-cn/appendix/image-gen-intro', description: '揭秘 AI 图像生成的底层逻辑与技术实现。' },
+  { title: 'AI 音频模型', link: '/zh-cn/appendix/audio-intro', description: '了解 AI 在语音合成、识别与音乐生成领域的应用。' },
+  { title: '上下文工程', link: '/zh-cn/appendix/context-engineering', description: '学习如何优化上下文管理，提升 AI 任务的长程连贯性。' },
+  { title: 'Agent 智能体', link: '/zh-cn/appendix/agent-intro', description: '探索具备自主决策与执行能力的 AI 智能体架构。' },
+  { title: 'AI 能力词典', link: '/zh-cn/appendix/ai-capability-dictionary', description: 'AI 领域常用术语与核心概念的速查手册。' }
+]
+
+const frontendItems = [
+  { title: 'HTML/CSS/JS 基础', link: '/zh-cn/appendix/web-basics', description: '构建 Web 页面的三大基石，前端开发的入门必修课。' },
+  { title: '前端进化史', link: '/zh-cn/appendix/frontend-evolution', description: '了解前端技术栈的演变历程，把握技术发展趋势。' },
+  { title: '前端性能优化', link: '/zh-cn/appendix/frontend-performance', description: '学习提升网页加载速度与交互流畅度的关键策略。' },
+  { title: 'Canvas 2D 入门', link: '/zh-cn/appendix/canvas-intro', description: '掌握 Canvas 绘图 API，实现炫酷的图形与动画效果。' },
+  { title: 'URL 到浏览器显示', link: '/zh-cn/appendix/url-to-browser', description: '全链路解析浏览器渲染页面的完整过程。' },
+  { title: '浏览器调试器', link: '/zh-cn/appendix/browser-devtools', description: '熟练使用开发者工具，高效定位与解决前端问题。' }
+]
+
+const backendItems = [
+  { title: '后端进化史', link: '/zh-cn/appendix/backend-evolution', description: '从单体到微服务，探索后端架构的演进之路。' },
+  { title: '后端编程语言', link: '/zh-cn/appendix/backend-languages', description: '对比主流后端语言的特性与适用场景，选择最佳技术栈。' },
+  { title: '数据库原理', link: '/zh-cn/appendix/database-intro', description: '理解数据库核心原理，掌握数据存储与检索的艺术。' },
+  { title: '系统缓存设计', link: '/zh-cn/appendix/cache-design', description: '学习缓存策略，提升系统的高并发处理能力。' },
+  { title: '消息队列设计', link: '/zh-cn/appendix/queue-design', description: '掌握消息队列在解耦、削峰填谷中的关键作用。' },
+  { title: '鉴权原理与实战', link: '/zh-cn/appendix/auth-design', description: '构建安全的身份认证与权限管理系统。' },
+  { title: '埋点设计', link: '/zh-cn/appendix/tracking-design', description: '科学设计数据埋点，为产品决策提供数据支持。' },
+  { title: '线上运维', link: '/zh-cn/appendix/operations', description: '掌握系统部署、监控与故障排查的运维技能。' }
+]
+
+const generalItems = [
+  { title: 'API 入门', link: '/zh-cn/appendix/api-intro', description: 'API 接口设计与开发的基础知识。' },
+  { title: 'IDE 原理', link: '/zh-cn/appendix/ide-intro', description: '了解集成开发环境（IDE）的内部工作机制。' },
+  { title: '终端入门', link: '/zh-cn/appendix/terminal-intro', description: '掌握命令行终端的基本操作，提升开发效率。' },
+  { title: 'Git 详细介绍', link: '/zh-cn/appendix/git-intro', description: '深入理解 Git 版本控制原理与高级用法。' },
+  { title: '计算机网络', link: '/zh-cn/appendix/computer-networks', description: '网络协议与通信原理的基础知识。' },
+  { title: '部署与上线', link: '/zh-cn/appendix/deployment', description: '应用部署发布的完整流程与最佳实践。' }
+]
+</script>
+
+# 附录
+
+人工智能基础与全栈开发基础知识。
+
+## 人工智能基础
+
+了解人工智能的核心概念、发展历史及前沿技术原理。
+
+<ArticleGrid :items="aiItems" />
+
+## 前端开发
+
+掌握前端开发基础知识、性能优化及调试技巧。
+
+<ArticleGrid :items="frontendItems" />
+
+## 后端开发
+
+深入了解后端架构、数据库设计、缓存与消息队列等核心技术。
+
+<ArticleGrid :items="backendItems" />
+
+## 通用技能
+
+熟悉 API、Git、网络等软件开发必备的通用技能。
+
+<ArticleGrid :items="generalItems" />

docs/zh-cn/index.md

@@ -42,25 +42,19 @@ const base = site.value.base
 </script>
 
 <div class="stage-container">
-  <a :href="base + 'zh-cn/stage-0/0.1-learning-map/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-0/'" class="stage-card">
-    <div class="stage-icon">🌱</div>
-    <h3>Stage 0: 新手入门</h3>
-    <p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
-    <span>查看详情 →</span>
-  </a>
-  <a :href="base + 'zh-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>
+    <p>适合产品、运营及非技术背景。从做游戏建立信心，到掌握 Vibe Coding 工作流，独立完成高保真 Web 应用原型。</p>
     <span>查看详情 →</span>
   </a>
-  <a :href="base + 'zh-cn/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-2/'" class="stage-card">
     <div class="stage-icon">💻</div>
     <h3>Stage 2: 初中级开发</h3>
     <p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
     <span>查看详情 →</span>
   </a>
-  <a :href="base + 'zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-3/'" class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>Stage 3: 高级开发</h3>
     <p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>

docs/zh-cn/stage-0/index.md

@@ -0,0 +1,34 @@
+<script setup>
+const beginnerItems = [
+  { title: '1. 学习地图', link: '/zh-cn/stage-0/0.1-learning-map/', description: '了解整个学习路径，明确每个阶段的目标和收获。' },
+  { title: '2. AI 时代，会说话就会编程', link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/', description: '通过贪吃蛇等小游戏，体验 AI 编程的魅力，打破对编程的恐惧。' }
+]
+
+const pmItems = [
+  { title: '1. 认识 AI IDE 工具', link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/', description: '了解当前主流的 AI 编程工具，选择最适合你的开发搭档。' },
+  { title: '2. 动手做出原型', link: '/zh-cn/stage-1/1.2-building-prototype/', description: '学习如何快速将产品想法转化为可视化的原型，进行低成本试错。' },
+  { title: '3. 给原型加上 AI 能力', link: '/zh-cn/stage-1/1.3-integrating-ai-capabilities/', description: '通过集成简单的 AI API，让你的原型具备智能交互能力。' },
+  { title: '4. 完整项目实战', link: '/zh-cn/stage-1/1.4-complete-project-practice/', description: '综合运用所学知识，从 0 到 1 完成一个完整的产品原型开发。' },
+  { title: '附录 A：产品思维补充', link: '/zh-cn/stage-1/appendix-a-product-thinking/', description: '补充产品经理必备的思维模型，提升需求分析与产品设计能力。' },
+  { title: '附录 B：常见报错及解决方案', link: '/zh-cn/stage-1/appendix-b-common-errors/', description: '汇总开发过程中常见的报错信息及解决方法，助你快速排查问题。' },
+  { title: '附录 C：产业多分类场景方向参考', link: '/zh-cn/stage-1/appendix-industry-scenarios/', description: '提供不同行业的 AI 应用场景参考，激发你的产品灵感。' },
+  { title: '扩展阅读 1：7 款主流 Vibe Coding 在线平台实测对比', link: '/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial', description: '深度评测主流 AI 编程平台，助你选择最合适的开发工具。' },
+  { title: '扩展阅读 2：用编程和设计智能体开发网站', link: '/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents', description: '探索使用 AI Agent 自动进行编程和设计的前沿实践。' }
+]
+</script>
+
+# AI 产品经理
+
+欢迎来到 AI 产品经理阶段。在这里，你将从零开始，掌握 Vibe Coding 工作流，成为能够独立完成产品设计的超级个体。
+
+## 新手入门
+
+适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。
+
+<ArticleGrid :items="beginnerItems" />
+
+## 产品经理
+
+掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。
+
+<ArticleGrid :items="pmItems" />

docs/zh-cn/stage-2/index.md

@@ -0,0 +1,57 @@
+<script setup>
+const frontendItems = [
+  { title: '前端零：使用 Lovart 生产素材', link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/', description: '学习如何使用 Lovart 等 AI 工具快速生成高质量的游戏素材与 UI 资源。' },
+  { title: '前端一：Figma 与 MasterGo 入门', link: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/', description: '掌握专业 UI 设计工具的基础操作，从设计稿到代码的协作流程。' },
+  { title: '前端二：构建第一个现代应用程序 - UI 设计', link: '/zh-cn/stage-2/frontend/2.2-ui-design/', description: '从零开始设计一个现代 Web 应用的界面，实践 UI 设计原则。' },
+  { title: '前端三：参考 UI 设计规范与多产品 UI 设计', link: '/zh-cn/stage-2/frontend/2.3-multi-product-ui/', description: '学习主流 UI 设计规范，提升产品设计的一致性与美感。' },
+  { title: '前端四：一起做霍格沃茨画像', link: '/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits', description: '实战项目：结合 AI 生成的图像，构建一个交互式的霍格沃茨画像应用。' }
+]
+
+const backendItems = [
+  { title: '后端一：什么是 API', link: '/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api', description: '理解 API 的核心概念，它是前后端交互的桥梁。' },
+  { title: '后端二：从数据库到 Supabase', link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase', description: '掌握关系型数据库基础，并学习使用 Supabase 这一现代 BaaS 平台。' },
+  { title: '后端三：大模型辅助编写接口代码与接口文档', link: '/zh-cn/stage-2/backend/2.3-ai-interface-code/', description: '利用 AI 辅助生成后端接口代码及标准的接口文档，提升开发效率。' },
+  { title: '后端四：Git 工作流', link: '/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github', description: '掌握 Git 版本控制系统的核心操作与协作流程。' },
+  { title: '后端五：Zeabur 部署', link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications', description: '学习使用 Zeabur 快速部署你的全栈应用到云端。' },
+  { title: '后端六：现代 CLI 开发工具', link: '/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development', description: '探索现代 CLI 工具，提升命令行环境下的开发体验。' },
+  { title: '后端七：如何集成 Stripe 等收费系统', link: '/zh-cn/stage-2/backend/2.7-stripe-payment/', description: '实战：为你的应用集成 Stripe 支付功能，实现商业化变现。' }
+]
+
+const assignmentItems = [
+  { title: '大作业 1：构建第一个现代应用程序 - 全栈应用', link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/', description: '综合运用所学知识，独立完成一个功能完整的全栈应用开发。' },
+  { title: '大作业 2：现代前端组件库 + Trae 实战', link: '/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/', description: '使用现代组件库与 Trae IDE，高效构建复杂的前端界面。' }
+]
+
+const aiItems = [
+  { title: 'AI 一：Dify 入门与知识库集成', link: '/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration', description: '学习使用 Dify 构建 AI 应用，并集成私有知识库。' },
+  { title: 'AI 二：学会查询 AI 词典与集成多模态 API', link: '/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook', description: '探索更多 AI 能力，集成视觉、语音等多模态 API。' }
+]
+</script>
+
+# 初中级开发
+
+深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。
+
+## 前端开发
+
+掌握现代前端开发，学习组件库与设计工具的使用。
+
+<ArticleGrid :items="frontendItems" />
+
+## 后端与全栈
+
+学习 API 设计、数据库管理以及应用部署策略。
+
+<ArticleGrid :items="backendItems" />
+
+## 大作业
+
+通过实战项目巩固你的全栈开发技能。
+
+<ArticleGrid :items="assignmentItems" />
+
+## AI 能力附录
+
+集成知识库、多模态 API 等 AI 功能，提升应用智能化水平。
+
+<ArticleGrid :items="aiItems" />

docs/zh-cn/stage-3/index.md

@@ -0,0 +1,50 @@
+<script setup>
+const coreSkillsItems = [
+  { title: '高级一：MCP 与 ClaudeCode Skills', link: '/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/', description: '掌握 Model Context Protocol (MCP)，扩展 AI 编程工具的能力边界。' },
+  { title: '高级二：如何让 Coding Tools 长时间工作', link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/', description: '学习如何让 AI 编码工具处理长时间运行的复杂任务。' }
+]
+
+const crossPlatformItems = [
+  { title: '高级三：如何构建微信小程序', link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/', description: '从零开始开发微信小程序，掌握小程序开发的核心流程。' },
+  { title: '高级四：如何构建微信小程序（包含后端）', link: '/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/', description: '构建带有后端支持的完整微信小程序应用。' },
+  { title: '高级五：如何构建安卓程序', link: '/zh-cn/stage-3/cross-platform/3.5-android-app/', description: '使用现代跨平台框架构建 Android 原生应用。' },
+  { title: '高级六：如何构建 iOS 程序', link: '/zh-cn/stage-3/cross-platform/3.6-ios-app/', description: '开发并发布 iOS 应用，掌握 iOS 生态的开发规范。' }
+]
+
+const personalBrandItems = [
+  { title: '高级七：如何构建属于自己的个人网页与学术博客', link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/', description: '使用现代化技术栈搭建高性能、高颜值的个人博客。' }
+]
+
+const aiAdvancedItems = [
+  { title: '高级 AI 一：什么是 RAG 以及它如何工作', link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future', description: '深入理解检索增强生成 (RAG) 的原理及其在 AI 应用中的价值。' },
+  { title: '高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例', link: '/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/', description: '学习使用 LangGraph 编排复杂的 AI 工作流，构建高级 RAG 系统。' }
+]
+</script>
+
+# 高级开发
+
+构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。
+
+## 核心技能
+
+深入掌握 MCP 协议与 Claude Code 高级技巧，提升开发效率。
+
+<ArticleGrid :items="coreSkillsItems" />
+
+## 多平台开发
+
+构建微信小程序、Android 和 iOS 应用，实现跨平台覆盖。
+
+<ArticleGrid :items="crossPlatformItems" />
+
+## 个人品牌
+
+打造属于自己的个人网站与技术博客，建立个人影响力。
+
+<ArticleGrid :items="personalBrandItems" />
+
+## AI 能力附录
+
+探索 RAG、LangGraph 等高级 AI 技术，构建复杂的 AI 应用工作流。
+
+<ArticleGrid :items="aiAdvancedItems" />

docs/zh-tw/appendix/index.md

@@ -0,0 +1,40 @@
+# 附录
+
+人工智能基础与全栈开发基础知识。
+
+## 人工智能基础
+- [提示词工程](/zh-tw/appendix/prompt-engineering)
+- [人工智能进化史](/zh-tw/appendix/ai-evolution)
+- [大语言模型](/zh-tw/appendix/llm-intro)
+- [多模态大模型](/zh-tw/appendix/vlm-intro)
+- [AI 绘画原理](/zh-tw/appendix/image-gen-intro)
+- [AI 音频模型](/zh-tw/appendix/audio-intro)
+- [上下文工程](/zh-tw/appendix/context-engineering)
+- [Agent 智能体](/zh-tw/appendix/agent-intro)
+- [AI 能力词典](/zh-tw/appendix/ai-capability-dictionary)
+
+## 前端开发
+- [HTML/CSS/JS 基础](/zh-tw/appendix/web-basics)
+- [前端进化史](/zh-tw/appendix/frontend-evolution)
+- [前端性能优化](/zh-tw/appendix/frontend-performance)
+- [Canvas 2D 入门](/zh-tw/appendix/canvas-intro)
+- [URL 到浏览器显示](/zh-tw/appendix/url-to-browser)
+- [浏览器调试器](/zh-tw/appendix/browser-devtools)
+
+## 后端开发
+- [后端进化史](/zh-tw/appendix/backend-evolution)
+- [后端编程语言](/zh-tw/appendix/backend-languages)
+- [数据库原理](/zh-tw/appendix/database-intro)
+- [系统缓存设计](/zh-tw/appendix/cache-design)
+- [消息队列设计](/zh-tw/appendix/queue-design)
+- [鉴权原理与实战](/zh-tw/appendix/auth-design)
+- [埋点设计](/zh-tw/appendix/tracking-design)
+- [线上运维](/zh-tw/appendix/operations)
+
+## 通用技能
+- [API 入门](/zh-tw/appendix/api-intro)
+- [IDE 原理](/zh-tw/appendix/ide-intro)
+- [终端入门](/zh-tw/appendix/terminal-intro)
+- [Git 详细介绍](/zh-tw/appendix/git-intro)
+- [计算机网络](/zh-tw/appendix/computer-networks)
+- [部署与上线](/zh-tw/appendix/deployment)

docs/zh-tw/stage-0/index.md

@@ -0,0 +1,24 @@
+# AI 产品经理
+
+欢迎来到 AI 产品经理阶段。在这里，你将从零开始，掌握 Vibe Coding 工作流，成为能够独立完成产品设计的超级个体。
+
+## 阶段概览
+
+### 新手入门
+适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。
+
+- [1. 学习地图](/zh-tw/stage-0/0.1-learning-map/)
+- [2. AI 时代，会说话就会编程](/zh-tw/stage-0/0.2-ai-capabilities-through-games/)
+
+### 产品经理
+掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。
+
+- [1. 认识 AI IDE 工具](/zh-tw/stage-1/1.1-introduction-to-ai-ide/)
+- [2. 动手做出原型](/zh-tw/stage-1/1.2-building-prototype/)
+- [3. 给原型加上 AI 能力](/zh-tw/stage-1/1.3-integrating-ai-capabilities/)
+- [4. 完整项目实战](/zh-tw/stage-1/1.4-complete-project-practice/)
+- [附录 A：产品思维补充](/zh-tw/stage-1/appendix-a-product-thinking/)
+- [附录 B：常见报错及解决方案](/zh-tw/stage-1/appendix-b-common-errors/)
+- [附录 C：产业多分类场景方向参考](/zh-tw/stage-1/appendix-industry-scenarios/)
+- [扩展阅读 1：7 款主流 Vibe Coding 在线平台实测对比](/zh-tw/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial)
+- [扩展阅读 2：用编程和设计智能体开发网站](/zh-tw/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents)

docs/zh-tw/stage-2/index.md

@@ -0,0 +1,27 @@
+# 初中级开发
+
+深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。
+
+## 前端开发
+- [前端零：使用 Lovart 生产素材](/zh-tw/stage-2/frontend/2.0-lovart-assets/)
+- [前端一：Figma 与 MasterGo 入门](/zh-tw/stage-2/frontend/2.1-figma-mastergo/)
+- [前端二：构建第一个现代应用程序 - UI 设计](/zh-tw/stage-2/frontend/2.2-ui-design/)
+- [前端三：参考 UI 设计规范与多产品 UI 设计](/zh-tw/stage-2/frontend/2.3-multi-product-ui/)
+- [前端四：一起做霍格沃茨画像](/zh-tw/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
+
+## 后端与全栈
+- [后端一：什么是 API](/zh-tw/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
+- [后端二：从数据库到 Supabase](/zh-tw/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
+- [后端三：大模型辅助编写接口代码与接口文档](/zh-tw/stage-2/backend/2.3-ai-interface-code/)
+- [后端四：Git 工作流](/zh-tw/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
+- [后端五：Zeabur 部署](/zh-tw/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
+- [后端六：现代 CLI 开发工具](/zh-tw/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
+- [后端七：如何集成 Stripe 等收费系统](/zh-tw/stage-2/backend/2.7-stripe-payment/)
+
+## 大作业
+- [大作业 1：构建第一个现代应用程序 - 全栈应用](/zh-tw/stage-2/assignments/2.1-fullstack-app/)
+- [大作业 2：现代前端组件库 + Trae 实战](/zh-tw/stage-2/assignments/2.2-modern-frontend-trae/)
+
+## AI 能力附录
+- [AI 一：Dify 入门与知识库集成](/zh-tw/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
+- [AI 二：学会查询 AI 词典与集成多模态 API](/zh-tw/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)

docs/zh-tw/stage-3/index.md

@@ -0,0 +1,20 @@
+# 高级开发
+
+构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。
+
+## 核心技能
+- [高级一：MCP 与 ClaudeCode Skills](/zh-tw/stage-3/core-skills/3.1-mcp-claudecode-skills/)
+- [高级二：如何让 Coding Tools 长时间工作](/zh-tw/stage-3/core-skills/3.2-long-running-tasks/)
+
+## 多平台开发
+- [高级三：如何构建微信小程序](/zh-tw/stage-3/cross-platform/3.3-wechat-miniprogram/)
+- [高级四：如何构建微信小程序（包含后端）](/zh-tw/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
+- [高级五：如何构建安卓程序](/zh-tw/stage-3/cross-platform/3.5-android-app/)
+- [高级六：如何构建 iOS 程序](/zh-tw/stage-3/cross-platform/3.6-ios-app/)
+
+## 个人品牌
+- [高级七：如何构建属于自己的个人网页与学术博客](/zh-tw/stage-3/personal-brand/3.7-personal-website-blog/)
+
+## AI 能力附录
+- [高级 AI 一：什么是 RAG 以及它如何工作](/zh-tw/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
+- [高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例](/zh-tw/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)