From de86489421c1a6a44146afef5f81845f66844f12 Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Thu, 26 Feb 2026 09:33:06 +0800
Subject: [PATCH] feat(i18n): add AI history components internationalization
 support

- Add useI18n composable and ai-history locale files
- Refactor 10 AI history Vue components to support i18n (GPTEvolutionDemo, AIErasComparisonDemo, AiEvolutionDemo, etc.)
- Add English version of AI history appendix article
- Add English translations for stage-1 appendix-articles:
  - vibe-coding-tools-snake-game-tutorial.md
  - vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
- Use relative paths to reference Chinese version images
- Update appendix sidebar config to use English AI history link
---
 docs/.vitepress/config.mjs                    |   2 +-
 .../ai-history/AIErasComparisonDemo.vue       |  79 +--
 .../appendix/ai-history/AiEvolutionDemo.vue   |  35 +-
 .../ai-history/AttentionMechanismDemo.vue     |  22 +-
 .../ai-history/BackpropagationDemo.vue        |  26 +-
 .../DiscriminativeVsGenerativeDemo.vue        |  25 +-
 .../appendix/ai-history/FoundationDemo.vue    |  23 +-
 .../appendix/ai-history/GPTEvolutionDemo.vue  |  20 +-
 .../NeuralNetworkVisualizationDemo.vue        |  40 +-
 .../appendix/ai-history/PerceptronDemo.vue    |  22 +-
 docs/.vitepress/theme/composables/useI18n.js  |  44 ++
 .../.vitepress/theme/locales/ai-history/en.js | 123 +++++
 .../theme/locales/ai-history/index.js         |   7 +
 .../theme/locales/ai-history/zh-cn.js         | 123 +++++
 .../8-artificial-intelligence/ai-history.md   | 190 +++++++
 .../vibe-coding-tools-snake-game-tutorial.md  | 473 ++++++++++++++++++
 ...ebsite-with-ai-coding-and-design-agents.md | 337 +++++++++++++
 17 files changed, 1451 insertions(+), 140 deletions(-)
 create mode 100644 docs/.vitepress/theme/composables/useI18n.js
 create mode 100644 docs/.vitepress/theme/locales/ai-history/en.js
 create mode 100644 docs/.vitepress/theme/locales/ai-history/index.js
 create mode 100644 docs/.vitepress/theme/locales/ai-history/zh-cn.js
 create mode 100644 docs/en/appendix/8-artificial-intelligence/ai-history.md
 create mode 100644 docs/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
 create mode 100644 docs/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md

diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index b02a31e..b098eb9 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -806,7 +806,7 @@ const appendixSidebarEn = [
     items: [
       {
         text: 'AI History & Concepts',
-        link: '/zh-cn/appendix/8-artificial-intelligence/ai-history'
+        link: '/en/appendix/8-artificial-intelligence/ai-history'
       },
       {
         text: 'Neural Networks',
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AIErasComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AIErasComparisonDemo.vue
index 6432ff2..4618fca 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/AIErasComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/AIErasComparisonDemo.vue
@@ -2,28 +2,28 @@
   <div class="demo-card">
     <div class="era-container">
       <div class="era-header">
-        🌟 AI 发展阶段与核心范式全景对比
+        {{ t('erasComparison.header') }}
       </div>
       <div class="era-grid">
-        <div v-for="era in eras" :key="era.name" class="era-item" :style="{ borderTopColor: era.color }">
-          <div class="e-icon" :style="{ background: era.color }">{{ era.icon }}</div>
-          <div class="e-name" :style="{ color: era.color }">{{ era.name }}</div>
+        <div v-for="(era, i) in localEras" :key="i" class="era-item" :style="{ borderTopColor: eraStyles[i]?.color }">
+          <div class="e-icon" :style="{ background: eraStyles[i]?.color }">{{ eraStyles[i]?.icon }}</div>
+          <div class="e-name" :style="{ color: eraStyles[i]?.color }">{{ era.name }}</div>
           <div class="e-time">{{ era.time }}</div>
-          
+
           <div class="e-section">
-            <div class="e-label">驱动方式</div>
+            <div class="e-label">{{ t('erasComparison.driverLabel') }}</div>
             <div class="e-value">{{ era.driver }}</div>
           </div>
-          
+
           <div class="e-section">
-            <div class="e-label">核心机制</div>
+            <div class="e-label">{{ t('erasComparison.mechanismLabel') }}</div>
             <div class="e-value">
               <span class="highlight">{{ era.mechanism }}</span>
             </div>
           </div>
-          
+
           <div class="e-section">
-            <div class="e-label">典型代表</div>
+            <div class="e-label">{{ t('erasComparison.examplesLabel') }}</div>
             <div class="e-tags">
               <span v-for="tag in era.examples" :key="tag" class="e-tag">{{ tag }}</span>
             </div>
@@ -35,52 +35,19 @@
 </template>
 
 <script setup>
-const eras = [
-  {
-    name: '规则系统时代',
-    time: '1960s - 1980s',
-    icon: '📜',
-    color: '#059669', // emerald
-    driver: '人类硬编码知识',
-    mechanism: 'If-Then 逻辑推演',
-    examples: ['Dendral', '深蓝 (Deep Blue)']
-  },
-  {
-    name: '传统机器学习',
-    time: '1990s - 2000s',
-    icon: '📊',
-    color: '#d97706', // amber
-    driver: '人工特征工程 + 统计学',
-    mechanism: '寻找数学决策边界',
-    examples: ['支持向量机 (SVM)', '随机森林']
-  },
-  {
-    name: '深度学习革命',
-    time: '2010s',
-    icon: '🧠',
-    color: '#dc2626', // red
-    driver: '大数据 + 算力爬升',
-    mechanism: '神经网络自动提取特征',
-    examples: ['AlexNet (CNN)', 'AlphaGo (RL)']
-  },
-  {
-    name: '大语言模型 (LLM)',
-    time: '2018 - 至今',
-    icon: '💬',
-    color: '#7c3aed', // violet
-    driver: '海量无标注数据 + 暴力计算',
-    mechanism: '预测下一个词 + 涌现常识',
-    examples: ['GPT-4', 'Claude 3']
-  },
-  {
-    name: '智能体 (Agentic AI)',
-    time: '现在 - 未来',
-    icon: '🤖',
-    color: '#0284c7', // light blue
-    driver: '大模型大脑 + 环境感知',
-    mechanism: '自主规划 + 工具调用',
-    examples: ['AI 程序员', '具身智能']
-  }
+import { computed } from 'vue'
+import { useI18n } from '../../../composables/useI18n.js'
+import { aiHistoryLocale } from '../../../locales/ai-history/index.js'
+
+const { t, messages } = useI18n(aiHistoryLocale)
+const localEras = computed(() => messages.value.erasComparison?.eras ?? [])
+
+const eraStyles = [
+  { icon: '📜', color: '#059669' },
+  { icon: '📊', color: '#d97706' },
+  { icon: '🧠', color: '#dc2626' },
+  { icon: '💬', color: '#7c3aed' },
+  { icon: '🤖', color: '#0284c7' },
 ]
 </script>
 
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue
index e78a8e7..3d4eab6 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue
@@ -1,29 +1,36 @@
 <template>
   <div class="demo-card">
     <div class="timeline-visual">
-      <div v-for="era in eras" :key="era.label" class="era" :style="{ flex: era.flex, background: era.bg }">
-        <div class="era-label">{{ era.label }}</div>
-        <div class="era-years">{{ era.years }}</div>
+      <div v-for="(era, i) in eras" :key="i" class="era" :style="{ flex: era.flex, background: era.bg }">
+        <div class="era-label">{{ localeEras[i]?.label ?? era.label }}</div>
+        <div class="era-years">{{ localeEras[i]?.years ?? era.years }}</div>
       </div>
     </div>
     <div class="legend">
-      <span class="legend-item"><span class="dot" style="background:#059669"></span>技术浪潮</span>
-      <span class="legend-item"><span class="dot" style="background:#94a3b8"></span>❄️ AI 寒冬</span>
-      <span class="legend-item"><span class="dot" style="background:#7c3aed"></span>大模型时代</span>
+      <span class="legend-item"><span class="dot" style="background:#059669"></span>{{ t('aiEvolution.legend.wave') }}</span>
+      <span class="legend-item"><span class="dot" style="background:#94a3b8"></span>{{ t('aiEvolution.legend.winter') }}</span>
+      <span class="legend-item"><span class="dot" style="background:#7c3aed"></span>{{ t('aiEvolution.legend.llm') }}</span>
     </div>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useI18n } from '../../../composables/useI18n.js'
+import { aiHistoryLocale } from '../../../locales/ai-history/index.js'
+
+const { t, messages } = useI18n(aiHistoryLocale)
+const localeEras = computed(() => messages.value.aiEvolution?.eras ?? [])
+
 const eras = [
-  { label: '理论奠基', years: '1940s-50s', flex: 1.5, bg: 'linear-gradient(135deg, #dbeafe, #bfdbfe)' },
-  { label: '第一次浪潮', years: '1960s-70s', flex: 1.5, bg: 'linear-gradient(135deg, #d1fae5, #a7f3d0)' },
-  { label: '❄️ 寒冬 I', years: '1974-80', flex: 0.7, bg: 'linear-gradient(135deg, #e2e8f0, #cbd5e1)' },
-  { label: '第二次浪潮', years: '1980s', flex: 1, bg: 'linear-gradient(135deg, #d1fae5, #a7f3d0)' },
-  { label: '❄️ 寒冬 II', years: '1987-93', flex: 0.7, bg: 'linear-gradient(135deg, #e2e8f0, #cbd5e1)' },
-  { label: 'ML 崛起', years: '1990s-2000s', flex: 1.5, bg: 'linear-gradient(135deg, #d1fae5, #6ee7b7)' },
-  { label: '深度学习', years: '2010s', flex: 1.2, bg: 'linear-gradient(135deg, #a7f3d0, #34d399)' },
-  { label: '大模型时代', years: '2018+', flex: 1.2, bg: 'linear-gradient(135deg, #c4b5fd, #a78bfa)' },
+  { flex: 1.5, bg: 'linear-gradient(135deg, #dbeafe, #bfdbfe)' },
+  { flex: 1.5, bg: 'linear-gradient(135deg, #d1fae5, #a7f3d0)' },
+  { flex: 0.7, bg: 'linear-gradient(135deg, #e2e8f0, #cbd5e1)' },
+  { flex: 1, bg: 'linear-gradient(135deg, #d1fae5, #a7f3d0)' },
+  { flex: 0.7, bg: 'linear-gradient(135deg, #e2e8f0, #cbd5e1)' },
+  { flex: 1.5, bg: 'linear-gradient(135deg, #d1fae5, #6ee7b7)' },
+  { flex: 1.2, bg: 'linear-gradient(135deg, #a7f3d0, #34d399)' },
+  { flex: 1.2, bg: 'linear-gradient(135deg, #c4b5fd, #a78bfa)' },
 ]
 </script>
 
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue
index 24cb76a..4e26cf1 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue
@@ -2,7 +2,7 @@
   <div class="demo-card">
     <div class="attention-layout">
       <div class="sentence-col">
-        <div class="col-label">处理「<strong>他</strong>」时的注意力分配：</div>
+        <div class="col-label" v-html="colLabel"></div>
         <div class="sentence-box">
           <span v-for="(word, i) in sentence" :key="i" class="word-token" :class="{ focus: i === focusIdx }">{{ word }}</span>
         </div>
@@ -18,16 +18,26 @@
       </div>
     </div>
     <div class="caption">
-      「他」虽在句中间，模型却把 65% 注意力精准投向句首的「小明」，跨越距离识别代词指代
+{{ t('attention.caption') }}
     </div>
   </div>
 </template>
 
 <script setup>
-const sentence = ['小明', '把', '苹果', '给了', '他', '的', '母亲']
-const focusIdx = 4
-const attn = [0.65, 0.05, 0.10, 0.10, 0.05, 0.03, 0.02]
-const weights = sentence.map((word, i) => ({ word, w: attn[i] }))
+import { computed } from 'vue'
+import { useI18n } from '../../../composables/useI18n.js'
+import { aiHistoryLocale } from '../../../locales/ai-history/index.js'
+
+const { t, messages } = useI18n(aiHistoryLocale)
+
+const attnData = computed(() => messages.value.attention ?? {})
+const sentence = computed(() => attnData.value.sentence ?? [])
+const focusIdx = computed(() => attnData.value.focusIdx ?? 4)
+const rawWeights = computed(() => attnData.value.weights ?? [])
+const weights = computed(() => sentence.value.map((word, i) => ({ word, w: rawWeights.value[i] ?? 0 })))
+const focusWord = computed(() => sentence.value[focusIdx.value] ?? '')
+const colLabel = computed(() => (attnData.value.colLabel ?? '').replace('{word}', focusWord.value))
+
 const barColor = (v) => v > 0.5 ? '#dc2626' : v > 0.15 ? '#d97706' : v > 0.06 ? '#059669' : 'var(--vp-c-divider)'
 </script>
 
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
index 48b7621..8b455f4 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="demo-card">
     <div class="bp-flow">
-      <div v-for="(step, i) in steps" :key="i" class="step-block" :style="{ borderTopColor: step.color }">
-        <div class="step-num" :style="{ background: step.color }">{{ i + 1 }}</div>
+      <div v-for="(step, i) in localSteps" :key="i" class="step-block" :style="{ borderTopColor: stepColors[i] }">
+        <div class="step-num" :style="{ background: stepColors[i] }">{{ i + 1 }}</div>
         <div class="step-icon">{{ step.icon }}</div>
         <div class="step-name">{{ step.name }}</div>
         <div class="step-desc">{{ step.desc }}</div>
       </div>
     </div>
     <div class="loss-visual">
-      <div class="loss-label">Loss（误差）随训练轮次下降：</div>
+      <div class="loss-label">{{ t('backprop.lossLabel') }}</div>
       <svg viewBox="0 0 320 130" class="loss-svg">
         <!-- Axes -->
         <line x1="40" y1="110" x2="300" y2="110" stroke="var(--vp-c-text-3)" stroke-width="1.5" />
@@ -21,12 +21,12 @@
         <polygon points="37,15 40,10 43,15" fill="var(--vp-c-text-3)" />
 
         <!-- Y Label -->
-        <text x="30" y="25" text-anchor="end" class="ax-text">高</text>
-        <text x="30" y="105" text-anchor="end" class="ax-text">低</text>
+        <text x="30" y="25" text-anchor="end" class="ax-text">{{ t('backprop.axisHigh') }}</text>
+        <text x="30" y="105" text-anchor="end" class="ax-text">{{ t('backprop.axisLow') }}</text>
         <text x="20" y="65" text-anchor="middle" transform="rotate(-90 20 65)" class="ax-title">Loss</text>
         
         <!-- X Label -->
-        <text x="300" y="125" text-anchor="end" class="ax-title">训练轮次 (Epochs)</text>
+        <text x="300" y="125" text-anchor="end" class="ax-title">{{ t('backprop.axisEpochs') }}</text>
 
         <!-- Loss 曲线 -->
         <polyline :points="lossPoints" fill="none" stroke="var(--vp-c-brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
@@ -36,12 +36,14 @@
 </template>
 
 <script setup>
-const steps = [
-  { icon: '➡️', name: '前向传播', desc: '数据流过网络，得出预测', color: '#3b82f6' },
-  { icon: '📐', name: '计算误差', desc: '预测值 vs 正确答案，算 Loss', color: '#d97706' },
-  { icon: '⬅️', name: '反向传播', desc: '逐层追溯每个权重的"责任"', color: '#dc2626' },
-  { icon: '⚙️', name: '更新权重', desc: '按责任微调，减少下次误差', color: '#059669' },
-]
+import { computed } from 'vue'
+import { useI18n } from '../../../composables/useI18n.js'
+import { aiHistoryLocale } from '../../../locales/ai-history/index.js'
+
+const { t, messages } = useI18n(aiHistoryLocale)
+const localSteps = computed(() => messages.value.backprop?.steps ?? [])
+
+const stepColors = ['#3b82f6', '#d97706', '#dc2626', '#059669']
 const lossPoints = (() => {
   const pts = []
   for (let i = 0; i <= 50; i++) {
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
index 521a9ca..e152251 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
@@ -1,24 +1,31 @@
 <template>
   <div class="demo-card">
     <div class="schools-grid">
-      <div v-for="s in schools" :key="s.name" class="school-card" :style="{ borderTopColor: s.color }">
+      <div v-for="(s, i) in schoolStyles" :key="i" class="school-card" :style="{ borderTopColor: s.color }">
         <div class="card-head">
           <span class="school-icon">{{ s.icon }}</span>
-          <span class="school-name" :style="{ color: s.color }">{{ s.name }}</span>
+          <span class="school-name" :style="{ color: s.color }">{{ localeItems[i]?.name }}</span>
         </div>
-        <div class="school-idea">{{ s.idea }}</div>
-        <div class="school-rep">代表：{{ s.rep }}</div>
-        <div class="school-status">{{ s.status }}</div>
+        <div class="school-idea">{{ localeItems[i]?.idea }}</div>
+        <div class="school-rep">{{ t('schools.repLabel') }}：{{ localeItems[i]?.rep }}</div>
+        <div class="school-status">{{ localeItems[i]?.status }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-const schools = [
-  { name: '符号主义', icon: '📜', color: '#059669', idea: '智能 = 符号推理 / If-Then 规则', rep: '专家系统、深蓝', status: '→ 与连接主义融合（神经符号 AI）' },
-  { name: '连接主义', icon: '🧠', color: '#7c3aed', idea: '智能 = 神经元网络 + 海量数据', rep: 'AlphaGo、GPT 系列', status: '→ 主导大模型时代，当前主流' },
-  { name: '行为主义', icon: '🎮', color: '#d97706', idea: '智能 = 与环境互动 / 强化学习', rep: 'AlphaGo（RL 部分）', status: '→ 与连接主义融合（深度强化学习）' },
+import { computed } from 'vue'
+import { useI18n } from '../../../composables/useI18n.js'
+import { aiHistoryLocale } from '../../../locales/ai-history/index.js'
+
+const { t, messages } = useI18n(aiHistoryLocale)
+const localeItems = computed(() => messages.value.schools?.items ?? [])
+
+const schoolStyles = [
+  { icon: '📜', color: '#059669' },
+  { icon: '🧠', color: '#7c3aed' },
+  { icon: '🎮', color: '#d97706' },
 ]
 </script>
 
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/FoundationDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/FoundationDemo.vue
index 6810473..16015d7 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/FoundationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/FoundationDemo.vue
@@ -1,18 +1,27 @@
 <template>
   <div class="demo-card">
-    <div class="demo-label">符号主义的核心思路 ── 把知识写成规则</div>
+    <div class="demo-label">{{ t('foundation.label') }}</div>
     <div class="code-block">
-      <div class="code-line"><span class="kw">IF</span>  体温 &gt; 38.5°C  <span class="kw">AND</span>  白细胞计数 &gt; 11000</div>
-      <div class="code-line indent"><span class="kw">THEN</span>  诊断 = <span class="str">"细菌感染"</span></div>
-      <div class="code-line"><span class="kw">IF</span>  诊断 = <span class="str">"细菌感染"</span>  <span class="kw">AND</span>  对青霉素不过敏</div>
-      <div class="code-line indent"><span class="kw">THEN</span>  治疗方案 = <span class="str">"青霉素 400mg / 每日两次"</span></div>
-      <div class="code-line comment">// 早期医疗专家系统（MYCIN，1977）就是由 450+ 条这样的规则组成的</div>
+      <div v-for="(line, i) in foundationLines" :key="i" class="code-line" :class="{ indent: line.indent }">
+        <template v-for="(p, j) in line.parts" :key="j">
+          <span v-if="p.kw" class="kw">{{ p.kw }}</span>
+          <span v-else-if="p.str" class="str">{{ p.str }}</span>
+          <template v-else>{{ p.text }}</template>
+        </template>
+      </div>
+      <div class="code-line comment">{{ t('foundation.comment') }}</div>
     </div>
-    <div class="demo-caption">人类专家把经验翻译成一条条 IF-THEN 规则，机器逐条匹配执行</div>
+    <div class="demo-caption">{{ t('foundation.caption') }}</div>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useI18n } from '../../../composables/useI18n.js'
+import { aiHistoryLocale } from '../../../locales/ai-history/index.js'
+
+const { t, messages } = useI18n(aiHistoryLocale)
+const foundationLines = computed(() => messages.value.foundation?.lines ?? [])
 </script>
 
 <style scoped>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue
index 00e1509..3d8a6bf 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="demo-card">
     <div class="gpt-grid">
-      <div v-for="m in models" :key="m.name" class="gpt-card" :style="{ borderTopColor: m.color }">
+      <div v-for="(m, i) in models" :key="i" class="gpt-card" :style="{ borderTopColor: modelColors[i] }">
         <div class="card-top">
-          <span class="gpt-name" :style="{ color: m.color }">{{ m.name }}</span>
+          <span class="gpt-name" :style="{ color: modelColors[i] }">{{ m.name }}</span>
           <span class="gpt-year">{{ m.year }}</span>
         </div>
         <div class="param-val">{{ m.params }}</div>
         <div class="param-bar-bg">
-          <div class="param-bar" :style="{ width: m.barWidth, background: m.color }"></div>
+          <div class="param-bar" :style="{ width: m.barWidth, background: modelColors[i] }"></div>
         </div>
         <div class="gpt-key">{{ m.key }}</div>
       </div>
@@ -17,12 +17,14 @@
 </template>
 
 <script setup>
-const models = [
-  { name: 'GPT-1', year: '2018', params: '1.17 亿', barWidth: '2%', color: '#94a3b8', key: '预训练+微调范式确立' },
-  { name: 'GPT-2', year: '2019', params: '15 亿', barWidth: '6%', color: '#3b82f6', key: 'Zero-shot 零样本泛化' },
-  { name: 'GPT-3', year: '2020', params: '1750 亿', barWidth: '45%', color: '#7c3aed', key: '⚡ 涌现！上下文学习' },
-  { name: 'GPT-4', year: '2023', params: '~1.8 万亿', barWidth: '100%', color: '#dc2626', key: '多模态 + 复杂推理' },
-]
+import { computed } from 'vue'
+import { useI18n } from '../../../composables/useI18n.js'
+import { aiHistoryLocale } from '../../../locales/ai-history/index.js'
+
+const { messages } = useI18n(aiHistoryLocale)
+const models = computed(() => messages.value.gptEvolution ?? [])
+
+const modelColors = ['#94a3b8', '#3b82f6', '#7c3aed', '#dc2626']
 </script>
 
 <style scoped>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue
index 40abcb6..443bd5f 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue
@@ -7,12 +7,12 @@
           <g v-for="layer in layers" :key="layer.idx">
             <circle v-for="n in layer.nodes" :key="n.id" :cx="n.x" :cy="n.y" r="15" :fill="layer.fill" :stroke="layer.stroke" stroke-width="2" />
           </g>
-          <text v-for="layer in layers" :key="'l-'+layer.idx" :x="layer.x" y="194" text-anchor="middle" :fill="layer.stroke" class="lbl">{{ layer.name }}</text>
+          <text v-for="(layer, i) in layers" :key="'l-'+layer.idx" :x="layer.x" y="194" text-anchor="middle" :fill="layer.stroke" class="lbl">{{ localLayers[i]?.name }}</text>
         </svg>
       </div>
       <div class="layer-cards">
-        <div v-for="info in layerInfo" :key="info.name" class="layer-card" :style="{ borderLeftColor: info.color }">
-          <div class="lc-title" :style="{ color: info.color }">{{ info.name }}</div>
+        <div v-for="(info, i) in localLayers" :key="i" class="layer-card" :style="{ borderLeftColor: layerColors[i]?.color }">
+          <div class="lc-title" :style="{ color: layerColors[i]?.color }">{{ info.name }}</div>
           <div class="lc-desc">{{ info.desc }}</div>
         </div>
       </div>
@@ -21,27 +21,33 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useI18n } from '../../../composables/useI18n.js'
+import { aiHistoryLocale } from '../../../locales/ai-history/index.js'
+
+const { messages } = useI18n(aiHistoryLocale)
+const localLayers = computed(() => messages.value.neuralNet?.layers ?? [])
+
 const W = 380, H = 185
-const layerDef = [
-  { name: '输入层', count: 3, xFrac: 0.13, color: '#3b82f6', fill: '#dbeafe' },
-  { name: '隐藏层', count: 4, xFrac: 0.5,  color: '#7c3aed', fill: '#ede9fe' },
-  { name: '输出层', count: 2, xFrac: 0.87, color: '#059669', fill: '#d1fae5' },
+const layerColors = [
+  { color: '#3b82f6', fill: '#dbeafe' },
+  { color: '#7c3aed', fill: '#ede9fe' },
+  { color: '#059669', fill: '#d1fae5' },
 ]
-const layers = layerDef.map((l, idx) => {
-  const x = l.xFrac * W
-  const gap = Math.min(46, (H - 36) / (l.count - 1 || 1))
-  const startY = (H - gap * (l.count - 1)) / 2
-  return { idx, x, name: l.name, fill: l.fill, stroke: l.color, nodes: Array.from({ length: l.count }, (_, i) => ({ id: `${idx}-${i}`, x, y: startY + i * gap })) }
+const layerCounts = [3, 4, 2]
+const xFracs = [0.13, 0.5, 0.87]
+
+const layers = layerColors.map((l, idx) => {
+  const x = xFracs[idx] * W
+  const count = layerCounts[idx]
+  const gap = Math.min(46, (H - 36) / (count - 1 || 1))
+  const startY = (H - gap * (count - 1)) / 2
+  return { idx, x, fill: l.fill, stroke: l.color, nodes: Array.from({ length: count }, (_, i) => ({ id: `${idx}-${i}`, x, y: startY + i * gap })) }
 })
 const connections = []
 for (let li = 0; li < layers.length - 1; li++) {
   layers[li].nodes.forEach(a => { layers[li + 1].nodes.forEach(b => { connections.push({ id: `${a.id}-${b.id}`, x1: a.x, y1: a.y, x2: b.x, y2: b.y }) }) })
 }
-const layerInfo = [
-  { name: '输入层', desc: '原始像素 / 数值信号', color: '#3b82f6' },
-  { name: '隐藏层（可叠加多层）', desc: '底层识别边缘 → 中层识别形状 → 高层识别语义概念', color: '#7c3aed' },
-  { name: '输出层', desc: '最终分类或预测结果', color: '#059669' },
-]
 </script>
 
 <style scoped>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue
index b4e2e41..e73992c 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue
@@ -2,13 +2,13 @@
   <div class="demo-card">
     <div class="perceptron-layout">
       <div class="inputs-col">
-        <div v-for="inp in inputs" :key="inp.label" class="input-node">
+        <div v-for="(inp, i) in inputs" :key="i" class="input-node">
           <span class="node-circle">{{ inp.val }}</span>
-          <span class="node-label">{{ inp.label }}</span>
+          <span class="node-label">{{ featureLabels[i] }}</span>
         </div>
       </div>
       <div class="weights-col">
-        <div v-for="inp in inputs" :key="inp.label" class="weight-arrow">
+        <div v-for="(inp, i) in inputs" :key="i" class="weight-arrow">
           <span class="arrow">→</span>
           <span class="w-tag">×{{ inp.weight }}</span>
         </div>
@@ -18,7 +18,7 @@
           <div class="n-sym">Σ</div>
           <div class="n-val">{{ sum }}</div>
         </div>
-        <span class="bias-tag">偏置 {{ bias }}</span>
+        <span class="bias-tag">{{ t('perceptron.biasLabel') }} {{ bias }}</span>
       </div>
       <div class="act-col">
         <span class="arrow big">→</span>
@@ -28,19 +28,23 @@
       <div class="output-col">
         <div class="output-node" :class="{ on: output === 1 }">
           <span class="out-val">{{ output }}</span>
-          <span class="out-lbl">{{ output ? '激活' : '静默' }}</span>
+          <span class="out-lbl">{{ output ? t('perceptron.activated') : t('perceptron.silent') }}</span>
         </div>
       </div>
     </div>
-    <div class="caption">
-      ① 输入特征&emsp;② 乘以权重（重要性）&emsp;③ 求和 + 偏置&emsp;④ 超过阈值就激活输出 1，否则输出 0
-    </div>
+    <div class="caption">{{ t('perceptron.caption') }}</div>
   </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
-const inputs = [{ label: '特征 x₁', val: 1, weight: 0.6 }, { label: '特征 x₂', val: 0, weight: 0.4 }]
+import { useI18n } from '../../../composables/useI18n.js'
+import { aiHistoryLocale } from '../../../locales/ai-history/index.js'
+
+const { t, messages } = useI18n(aiHistoryLocale)
+const featureLabels = computed(() => messages.value.perceptron?.features ?? [])
+
+const inputs = [{ val: 1, weight: 0.6 }, { val: 0, weight: 0.4 }]
 const bias = -0.3
 const sum = computed(() => Number((inputs.reduce((s, i) => s + i.val * i.weight, 0) + bias).toFixed(2)))
 const output = computed(() => sum.value > 0 ? 1 : 0)
diff --git a/docs/.vitepress/theme/composables/useI18n.js b/docs/.vitepress/theme/composables/useI18n.js
new file mode 100644
index 0000000..2df5a4b
--- /dev/null
+++ b/docs/.vitepress/theme/composables/useI18n.js
@@ -0,0 +1,44 @@
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+
+const langMap = {
+  'zh-CN': 'zh-cn',
+  'en-US': 'en',
+  'ja-JP': 'ja-jp',
+  'zh-TW': 'zh-tw',
+  'ko-KR': 'ko-kr',
+  'es-ES': 'es-es',
+  'fr-FR': 'fr-fr',
+  'de-DE': 'de-de',
+  'ar-SA': 'ar-sa',
+  'vi-VN': 'vi-vn'
+}
+
+/**
+ * Lightweight i18n composable for VitePress Vue components.
+ *
+ * @param {Record<string, Record<string, any>>} messages
+ *   Locale map, e.g. { 'zh-cn': { title: '标题' }, en: { title: 'Title' } }
+ * @returns {{ t: (key: string) => any, locale: import('vue').ComputedRef<string> }}
+ */
+export function useI18n(messages) {
+  const { lang } = useData()
+
+  const locale = computed(() => langMap[lang.value] || 'zh-cn')
+
+  const current = computed(
+    () => messages[locale.value] || messages['zh-cn'] || {}
+  )
+
+  const t = (key) => {
+    const keys = key.split('.')
+    let val = current.value
+    for (const k of keys) {
+      val = val?.[k]
+      if (val === undefined) return key
+    }
+    return val
+  }
+
+  return { t, locale, messages: current }
+}
diff --git a/docs/.vitepress/theme/locales/ai-history/en.js b/docs/.vitepress/theme/locales/ai-history/en.js
new file mode 100644
index 0000000..191b6b2
--- /dev/null
+++ b/docs/.vitepress/theme/locales/ai-history/en.js
@@ -0,0 +1,123 @@
+// AI History – English locale
+export default {
+  // AiEvolutionDemo
+  aiEvolution: {
+    eras: [
+      { label: 'Foundations', years: '1940s-50s' },
+      { label: '1st Wave', years: '1960s-70s' },
+      { label: '❄️ Winter I', years: '1974-80' },
+      { label: '2nd Wave', years: '1980s' },
+      { label: '❄️ Winter II', years: '1987-93' },
+      { label: 'ML Rise', years: '1990s-2000s' },
+      { label: 'Deep Learning', years: '2010s' },
+      { label: 'LLM Era', years: '2018+' }
+    ],
+    legend: {
+      wave: 'Tech Wave',
+      winter: '❄️ AI Winter',
+      llm: 'LLM Era'
+    }
+  },
+
+  // DiscriminativeVsGenerativeDemo
+  schools: {
+    repLabel: 'Examples',
+    items: [
+      {
+        name: 'Symbolism',
+        idea: 'Intelligence = symbolic reasoning / If-Then rules',
+        rep: 'Expert Systems, Deep Blue',
+        status: '→ Merging with connectionism (neuro-symbolic AI)'
+      },
+      {
+        name: 'Connectionism',
+        idea: 'Intelligence = neural networks + massive data',
+        rep: 'AlphaGo, GPT series',
+        status: '→ Dominates the LLM era, current mainstream'
+      },
+      {
+        name: 'Behaviorism',
+        idea: 'Intelligence = interaction with environment / RL',
+        rep: 'AlphaGo (RL component)',
+        status: '→ Merging with connectionism (deep RL)'
+      }
+    ]
+  },
+
+  // FoundationDemo
+  foundation: {
+    label: 'Core idea of Symbolism — encoding knowledge as rules',
+    lines: [
+      { parts: [{ kw: 'IF' }, { text: '  temperature > 38.5°C  ' }, { kw: 'AND' }, { text: '  WBC count > 11000' }] },
+      { indent: true, parts: [{ kw: 'THEN' }, { text: '  diagnosis = ' }, { str: '"bacterial infection"' }] },
+      { parts: [{ kw: 'IF' }, { text: '  diagnosis = ' }, { str: '"bacterial infection"' }, { text: '  ' }, { kw: 'AND' }, { text: '  no penicillin allergy' }] },
+      { indent: true, parts: [{ kw: 'THEN' }, { text: '  treatment = ' }, { str: '"penicillin 400mg / twice daily"' }] }
+    ],
+    comment: '// The early medical expert system MYCIN (1977) consisted of 450+ rules like these',
+    caption: 'Human experts translate experience into IF-THEN rules; the machine matches and executes them one by one'
+  },
+
+  // PerceptronDemo
+  perceptron: {
+    features: ['Feature x₁', 'Feature x₂'],
+    biasLabel: 'Bias',
+    activated: 'Fire',
+    silent: 'Silent',
+    caption: '① Input features\u2003② Multiply by weights (importance)\u2003③ Sum + bias\u2003④ Fires output 1 if above threshold, otherwise 0'
+  },
+
+  // BackpropagationDemo
+  backprop: {
+    steps: [
+      { icon: '➡️', name: 'Forward Pass', desc: 'Data flows through the network to produce a prediction' },
+      { icon: '📐', name: 'Compute Loss', desc: 'Prediction vs. ground truth → calculate loss' },
+      { icon: '⬅️', name: 'Backpropagation', desc: 'Trace back each weight\'s "responsibility" layer by layer' },
+      { icon: '⚙️', name: 'Update Weights', desc: 'Adjust proportionally to reduce future error' }
+    ],
+    lossLabel: 'Loss decreases over training epochs:',
+    axisHigh: 'High',
+    axisLow: 'Low',
+    axisEpochs: 'Training Epochs'
+  },
+
+  // NeuralNetworkVisualizationDemo
+  neuralNet: {
+    layers: [
+      { name: 'Input Layer', desc: 'Raw pixels / numerical signals' },
+      { name: 'Hidden Layers (stackable)', desc: 'Low → edges; Mid → shapes; High → semantic concepts' },
+      { name: 'Output Layer', desc: 'Final classification or prediction' }
+    ]
+  },
+
+  // AttentionMechanismDemo
+  attention: {
+    colLabel: 'Attention distribution when processing "{word}":',
+    sentence: ['John', 'gave', 'the', 'apple', 'to', 'his', 'mother'],
+    focusIdx: 5,
+    weights: [0.62, 0.08, 0.03, 0.10, 0.05, 0.07, 0.05],
+    caption: '"his" sits mid-sentence, yet the model directs 62% attention to "John" at the start — resolving the pronoun across distance'
+  },
+
+  // GPTEvolutionDemo
+  gptEvolution: [
+    { name: 'GPT-1', year: '2018', params: '117 M', barWidth: '2%', key: 'Pre-train + fine-tune paradigm' },
+    { name: 'GPT-2', year: '2019', params: '1.5 B', barWidth: '6%', key: 'Zero-shot generalization' },
+    { name: 'GPT-3', year: '2020', params: '175 B', barWidth: '45%', key: '⚡ Emergence! In-context learning' },
+    { name: 'GPT-4', year: '2023', params: '~1.8 T', barWidth: '100%', key: 'Multimodal + complex reasoning' }
+  ],
+
+  // AIErasComparisonDemo
+  erasComparison: {
+    header: '🌟 AI Development Stages & Core Paradigms at a Glance',
+    driverLabel: 'Driver',
+    mechanismLabel: 'Core Mechanism',
+    examplesLabel: 'Key Examples',
+    eras: [
+      { name: 'Rule-Based Era', time: '1960s - 1980s', driver: 'Human-coded knowledge', mechanism: 'If-Then logical deduction', examples: ['Dendral', 'Deep Blue'] },
+      { name: 'Classical ML', time: '1990s - 2000s', driver: 'Manual feature engineering + statistics', mechanism: 'Finding mathematical decision boundaries', examples: ['SVM', 'Random Forest'] },
+      { name: 'Deep Learning Revolution', time: '2010s', driver: 'Big data + GPU compute', mechanism: 'Neural nets auto-extract features', examples: ['AlexNet (CNN)', 'AlphaGo (RL)'] },
+      { name: 'Large Language Models', time: '2018 - present', driver: 'Massive unlabeled data + brute-force compute', mechanism: 'Next-token prediction + emergent knowledge', examples: ['GPT-4', 'Claude 3'] },
+      { name: 'Agentic AI', time: 'Now - future', driver: 'LLM brain + environment perception', mechanism: 'Autonomous planning + tool use', examples: ['AI Programmer', 'Embodied AI'] }
+    ]
+  }
+}
diff --git a/docs/.vitepress/theme/locales/ai-history/index.js b/docs/.vitepress/theme/locales/ai-history/index.js
new file mode 100644
index 0000000..0f21c29
--- /dev/null
+++ b/docs/.vitepress/theme/locales/ai-history/index.js
@@ -0,0 +1,7 @@
+import zhCn from './zh-cn.js'
+import en from './en.js'
+
+export const aiHistoryLocale = {
+  'zh-cn': zhCn,
+  en
+}
diff --git a/docs/.vitepress/theme/locales/ai-history/zh-cn.js b/docs/.vitepress/theme/locales/ai-history/zh-cn.js
new file mode 100644
index 0000000..25f49bb
--- /dev/null
+++ b/docs/.vitepress/theme/locales/ai-history/zh-cn.js
@@ -0,0 +1,123 @@
+// AI 简史 – 中文语言包
+export default {
+  // AiEvolutionDemo
+  aiEvolution: {
+    eras: [
+      { label: '理论奠基', years: '1940s-50s' },
+      { label: '第一次浪潮', years: '1960s-70s' },
+      { label: '❄️ 寒冬 I', years: '1974-80' },
+      { label: '第二次浪潮', years: '1980s' },
+      { label: '❄️ 寒冬 II', years: '1987-93' },
+      { label: 'ML 崛起', years: '1990s-2000s' },
+      { label: '深度学习', years: '2010s' },
+      { label: '大模型时代', years: '2018+' }
+    ],
+    legend: {
+      wave: '技术浪潮',
+      winter: '❄️ AI 寒冬',
+      llm: '大模型时代'
+    }
+  },
+
+  // DiscriminativeVsGenerativeDemo
+  schools: {
+    repLabel: '代表',
+    items: [
+      {
+        name: '符号主义',
+        idea: '智能 = 符号推理 / If-Then 规则',
+        rep: '专家系统、深蓝',
+        status: '→ 与连接主义融合（神经符号 AI）'
+      },
+      {
+        name: '连接主义',
+        idea: '智能 = 神经元网络 + 海量数据',
+        rep: 'AlphaGo、GPT 系列',
+        status: '→ 主导大模型时代，当前主流'
+      },
+      {
+        name: '行为主义',
+        idea: '智能 = 与环境互动 / 强化学习',
+        rep: 'AlphaGo（RL 部分）',
+        status: '→ 与连接主义融合（深度强化学习）'
+      }
+    ]
+  },
+
+  // FoundationDemo
+  foundation: {
+    label: '符号主义的核心思路 ── 把知识写成规则',
+    lines: [
+      { parts: [{ kw: 'IF' }, { text: '  体温 > 38.5°C  ' }, { kw: 'AND' }, { text: '  白细胞计数 > 11000' }] },
+      { indent: true, parts: [{ kw: 'THEN' }, { text: '  诊断 = ' }, { str: '"细菌感染"' }] },
+      { parts: [{ kw: 'IF' }, { text: '  诊断 = ' }, { str: '"细菌感染"' }, { text: '  ' }, { kw: 'AND' }, { text: '  对青霉素不过敏' }] },
+      { indent: true, parts: [{ kw: 'THEN' }, { text: '  治疗方案 = ' }, { str: '"青霉素 400mg / 每日两次"' }] }
+    ],
+    comment: '// 早期医疗专家系统（MYCIN，1977）就是由 450+ 条这样的规则组成的',
+    caption: '人类专家把经验翻译成一条条 IF-THEN 规则，机器逐条匹配执行'
+  },
+
+  // PerceptronDemo
+  perceptron: {
+    features: ['特征 x₁', '特征 x₂'],
+    biasLabel: '偏置',
+    activated: '激活',
+    silent: '静默',
+    caption: '① 输入特征\u2003② 乘以权重（重要性）\u2003③ 求和 + 偏置\u2003④ 超过阈值就激活输出 1，否则输出 0'
+  },
+
+  // BackpropagationDemo
+  backprop: {
+    steps: [
+      { icon: '➡️', name: '前向传播', desc: '数据流过网络，得出预测' },
+      { icon: '📐', name: '计算误差', desc: '预测值 vs 正确答案，算 Loss' },
+      { icon: '⬅️', name: '反向传播', desc: '逐层追溯每个权重的"责任"' },
+      { icon: '⚙️', name: '更新权重', desc: '按责任微调，减少下次误差' }
+    ],
+    lossLabel: 'Loss（误差）随训练轮次下降：',
+    axisHigh: '高',
+    axisLow: '低',
+    axisEpochs: '训练轮次 (Epochs)'
+  },
+
+  // NeuralNetworkVisualizationDemo
+  neuralNet: {
+    layers: [
+      { name: '输入层', desc: '原始像素 / 数值信号' },
+      { name: '隐藏层（可叠加多层）', desc: '底层识别边缘 → 中层识别形状 → 高层识别语义概念' },
+      { name: '输出层', desc: '最终分类或预测结果' }
+    ]
+  },
+
+  // AttentionMechanismDemo
+  attention: {
+    colLabel: '处理「{word}」时的注意力分配：',
+    sentence: ['小明', '把', '苹果', '给了', '他', '的', '母亲'],
+    focusIdx: 4,
+    weights: [0.65, 0.05, 0.10, 0.10, 0.05, 0.03, 0.02],
+    caption: '「他」虽在句中间，模型却把 65% 注意力精准投向句首的「小明」，跨越距离识别代词指代'
+  },
+
+  // GPTEvolutionDemo
+  gptEvolution: [
+    { name: 'GPT-1', year: '2018', params: '1.17 亿', barWidth: '2%', key: '预训练+微调范式确立' },
+    { name: 'GPT-2', year: '2019', params: '15 亿', barWidth: '6%', key: 'Zero-shot 零样本泛化' },
+    { name: 'GPT-3', year: '2020', params: '1750 亿', barWidth: '45%', key: '⚡ 涌现！上下文学习' },
+    { name: 'GPT-4', year: '2023', params: '~1.8 万亿', barWidth: '100%', key: '多模态 + 复杂推理' }
+  ],
+
+  // AIErasComparisonDemo
+  erasComparison: {
+    header: '🌟 AI 发展阶段与核心范式全景对比',
+    driverLabel: '驱动方式',
+    mechanismLabel: '核心机制',
+    examplesLabel: '典型代表',
+    eras: [
+      { name: '规则系统时代', time: '1960s - 1980s', driver: '人类硬编码知识', mechanism: 'If-Then 逻辑推演', examples: ['Dendral', '深蓝 (Deep Blue)'] },
+      { name: '传统机器学习', time: '1990s - 2000s', driver: '人工特征工程 + 统计学', mechanism: '寻找数学决策边界', examples: ['支持向量机 (SVM)', '随机森林'] },
+      { name: '深度学习革命', time: '2010s', driver: '大数据 + 算力爬升', mechanism: '神经网络自动提取特征', examples: ['AlexNet (CNN)', 'AlphaGo (RL)'] },
+      { name: '大语言模型 (LLM)', time: '2018 - 至今', driver: '海量无标注数据 + 暴力计算', mechanism: '预测下一个词 + 涌现常识', examples: ['GPT-4', 'Claude 3'] },
+      { name: '智能体 (Agentic AI)', time: '现在 - 未来', driver: '大模型大脑 + 环境感知', mechanism: '自主规划 + 工具调用', examples: ['AI 程序员', '具身智能'] }
+    ]
+  }
+}
diff --git a/docs/en/appendix/8-artificial-intelligence/ai-history.md b/docs/en/appendix/8-artificial-intelligence/ai-history.md
new file mode 100644
index 0000000..ebfd17e
--- /dev/null
+++ b/docs/en/appendix/8-artificial-intelligence/ai-history.md
@@ -0,0 +1,190 @@
+---
+title: 'A Brief History of AI: From Symbolic Logic to Hundred-Billion-Parameter Large Models'
+description: "Over 70 years, AI has experienced three waves and two winters, ultimately converging into today's era of large models."
+---
+
+# A Brief History of AI: From Symbolic Logic to Hundred-Billion-Parameter Large Models
+
+Over 70 years, AI has experienced **three waves and two winters** — from the logical deduction of symbolism, to the neural networks of connectionism, to the reinforcement learning of behaviorism — ultimately converging into today's era of large models. Understanding AI's history helps us see the true source of the "intelligence" behind modern large models.
+
+<AiEvolutionDemo />
+<DiscriminativeVsGenerativeDemo />
+
+---
+
+## I. Theoretical Foundations & the Birth of Symbolism (1940s–1950s)
+
+Before computers became widespread, pioneers were already asking: "Can machines think like humans?" Research in this period focused on mathematical modeling of brain neurons, exploration of computation theory, and automation of logical reasoning. The 1956 Dartmouth Conference officially declared "Artificial Intelligence" as an independent discipline.
+
+<FoundationDemo />
+
+### 1.1 Core Theories & Milestone Events
+
+- **The First Vision of Neural Networks (1943)**: Neurophysiologist Warren McCulloch and mathematician Walter Pitts proposed the **MP neuron model**. They were the first to abstract the workings of human brain neurons into simple mathematical formulas, proving that "neural networks are computable" — the ancestor of every deep network today.
+- **Turing's Ultimate Question (1950)**: Alan Turing, the father of computer science, published a history-changing paper *Computing Machinery and Intelligence*, proposing the famous **Turing Test**. He sidestepped the philosophical debate of "what is intelligence" and offered a pragmatic operational standard: if a machine can fool a human in conversation into thinking it's a person, it possesses intelligence.
+- **The Discipline Is Born (1956)**: At the Dartmouth summer workshop, young scholars including John McCarthy and Marvin Minsky gathered together. McCarthy coined the term "Artificial Intelligence" in the proposal — and that year became known as Year Zero of AI.
+
+::: tip Symbolism
+In early AI research, **symbolism** held absolute dominance. Since computers of the time ran on logic circuits, scholars naturally assumed: **the essence of intelligence is symbolic manipulation**.
+If we encode the world's knowledge into symbols the computer can understand (concepts, rules) and process them with a logic inference engine (IF-THEN rules), the machine can think like a human. This was a **top-down** approach, heavily dependent on human expert knowledge input.
+:::
+
+---
+
+## II. The Golden Age of Symbolism & the First AI Wave (1960s–1970s)
+
+In the first decade or so after its birth, AI enjoyed a period of blind optimism. Researchers believed that since machines could already prove mathematical theorems, writing programs to solve any human problem was just around the corner.
+
+### 2.1 The Glory Days of Expert Systems
+
+The crowning achievement of symbolism was the **Expert System**. By feeding top experts' "rules of thumb" into a computer, the system could perform high-level diagnosis or decision-making in specific vertical domains.
+
+| Expert System | Year | Historical Significance |
+| --- | --- | --- |
+| **Dendral** | 1965 | **The first expert system** — it could infer chemical molecular structures from mass spectrometry data, matching human chemists in performance. |
+| **MYCIN** | 1977 | Diagnosed blood infections and recommended antibiotics with 69% accuracy, outperforming many non-specialist doctors of the time. |
+| **XCON** | 1980 | The most commercially successful early expert system, helping DEC auto-configure computer systems based on customer needs, saving the company $40 million per year. |
+
+Yet behind the glory of expert systems lay an insurmountable chasm.
+
+### 2.2 The First AI Winter (1974–1980)
+
+Over time, people discovered that "translating human knowledge into rules" was a dead end. Three fatal limitations of symbolism ultimately led to a complete withdrawal of research funding:
+
+**Knowledge Acquisition Bottleneck**: Some knowledge humans can't even articulate (e.g., how to recognize a cat) — known as "Polanyi's Paradox." Expert systems could only hard-code explicitly expressible rules and couldn't learn automatically.
+
+**Combinatorial Explosion & Brittleness**: Real-world situations are too numerous to enumerate; without common sense, the system collapses the moment it encounters anything outside its rule base.
+
+**Insufficient Compute & Funding Cuts**: The hardware of the time simply couldn't support explosive logical inference, and DARPA slashed R&D budgets.
+
+---
+
+## III. Expert Systems & the Second AI Wave (1980s)
+
+By the 1980s, with the spread of microcomputers and specialized LISP machines, expert systems once again attracted commercial attention. The Japanese government even launched the ambitious "Fifth Generation Computer Project," attempting to build machines that could understand natural language — triggering a global panic-driven investment frenzy.
+
+### 3.1 The Boom and Bust of Commercial Applications
+
+In this era, nearly every major multinational was developing its own **expert system** (a program that translates human expert experience into thousands of IF-THEN rules). However, maintaining these systems became excruciating. Once rule bases exceeded tens of thousands of entries, adding one new rule often caused conflicts with ten existing ones. As general-purpose PCs exploded in performance in the late 1980s, expensive and closed proprietary AI machines became utterly uncompetitive.
+
+::: warning The Second AI Winter (1987–1993)
+In 1987, the AI hardware market collapsed entirely. The "Fifth Generation Computer Project" was abandoned for being too detached from practical hardware architecture. Companies' investments in expert systems went up in smoke, and AI research plunged into another trough — "artificial intelligence" even became a pejorative term in academia, synonymous with grant fraud.
+:::
+
+### 3.2 Connectionism Hibernating in the Dark
+
+Through these two boom-bust cycles, a completely different school of thought had been quietly developing — **Connectionism**, what we now call **neural networks**.
+
+<PerceptronDemo />
+
+Connectionism was proposed as early as 1958 by Frank Rosenblatt in the form of the **Perceptron**. It mimics the brain by adjusting connection weights between neurons to learn. Rather than teaching the machine explicit "rules," you show it massive "examples" and let it generalize on its own. However, in 1969, Minsky's book *Perceptrons* mathematically proved the limitations of single-layer networks (inability to solve even the simple XOR problem). This kept connectionism on the bench throughout symbolism's golden age — until the wheel of history turned to the 1990s.
+
+---
+
+## IV. The Rise of Machine Learning & the Revival of Connectionism (1990s–2000s)
+
+Entering the 1990s, AI underwent an important pragmatic shift. Instead of debating how to achieve "magical human-like intelligence," the focus moved to using **rigorous statistical methods** to solve real-world classification and prediction problems. This was the rise of traditional **Machine Learning (ML)**.
+
+### 4.1 From Rigid Rules to "Finding Mathematical Boundaries"
+
+In 1997, IBM's "Deep Blue" defeated world chess champion Garry Kasparov, winning a spectacular victory for symbolism. But academia immediately recognized this was merely a triumph of "brute-force compute + massive hard-coded rules" — Deep Blue didn't truly understand chess.
+
+Meanwhile, classical ML algorithms like **Support Vector Machines (SVM)**, decision trees, and random forests rose to prominence, dominating the field for over a decade.
+
+If the old expert systems told the computer: "If the email contains 'you won,' then it's spam," then **machine learning's approach was: humans first define key features (feature engineering)** — such as "email length," "special word frequency," "sender credibility" — then feed tens of thousands of labeled emails to the computer. In this multi-dimensional space, the **SVM** acts like a mathematician with a ruler, using kernel functions to draw the "widest, safest mathematical boundary" between normal and spam emails.
+
+Despite SVM's success on many tasks, it had a fatal weakness: **Feature Engineering was entirely dependent on humans.** To recognize a cat in an image, human scientists had to teach the machine to "first extract edges," then "look for triangular ears." The machine couldn't find the cat on its own! This meant model capability was firmly capped by human cognition.
+
+### 4.2 Backpropagation Brings Neural Networks Back to Life
+
+The true foundation of deep learning was laid during this period:
+
+<BackpropagationDemo />
+
+During this hibernation, Geoffrey Hinton and others further clarified the core value of **Backpropagation**: when a multi-layer neural network makes an incorrect prediction, the error can ripple backward layer by layer, telling each hidden neuron: "Here's exactly how much responsibility you bear for this mistake — fix it next time!"
+
+This finally broke the 1960s shackles on neural networks, making networks with hidden layers viable. But with too little data and too weak hardware (not even decent GPUs), neural networks still couldn't fully defeat traditional ML models like SVM. That is, until **three ignition points** converged.
+
+---
+
+## V. The Deep Learning Revolution & Connectionism Takes the Lead (2010s)
+
+In the 2010s, with the maturation of **big data (e.g., the ImageNet project)**, the **explosion of compute (GPUs applied to massively parallel computation)**, and **algorithmic improvements (solving the vanishing gradient problem)**, "deep learning" dramatically opened the curtain on the third AI wave.
+
+**What fundamentally distinguishes deep learning from traditional ML? The hallmark is: automatic feature extraction (representation learning).** Given enough layers (dozens to hundreds), a neural network can ingest raw pixels directly — its lower layers learn to recognize lines, middle layers learn to recognize fur textures, and upper layers directly identify "cat." In this revolution, humans finally relinquished control and let the network discover the most important visual, audio, and textual features on its own.
+
+### 5.1 Comprehensive Breakthroughs in Vision & Competition
+
+In 2012, **AlexNet** (a classic Convolutional Neural Network, CNN), developed by Hinton's team, entered the famous ImageNet image classification competition. While others were still painstakingly extracting hand-crafted visual features, AlexNet delivered a devastating blow — slashing the error rate from 26% to 15.3%, shocking the entire traditional computer vision community. In the years that followed, virtually no paper that didn't use deep learning could be accepted at top conferences.
+
+In the following years, AI technology advanced at breakneck speed:
+
+<NeuralNetworkVisualizationDemo />
+
+| Year | Landmark Achievement | Lasting Impact |
+| --- | --- | --- |
+| **2014** | **GAN (Generative Adversarial Network)** proposed | Two networks in an adversarial game (one forges, one detects), giving AI the ability to generate stunningly realistic images. |
+| **2015** | **ResNet (Residual Network)** introduced | Innovatively added "shortcut" connections, solving the problem of networks becoming untrainable as they grow deeper — enabling hundreds or thousands of layers. |
+| **2016** | **AlphaGo** defeats Lee Sedol | The pinnacle of deep learning combined with **reinforcement learning**, shattering the claim that "machines can never beat humans at Go" and making headlines worldwide. |
+
+::: tip Behaviorism & Reinforcement Learning
+AlphaGo represents a victory for another school — **Behaviorism**. It holds that intelligence arises from dynamic interaction between an agent and its environment, like training a dog to sit: reward correct behavior, punish mistakes. Through endless self-play in a vast virtual environment, AlphaGo discovered strategies that even top human players had never conceived.
+:::
+
+### 5.2 Transformer: The Cradle of Large Models
+
+In 2017, the gears of destiny began to turn. Google published the paper *Attention Is All You Need*, proposing an entirely new deep learning architecture — the **Transformer**.
+
+<AttentionMechanismDemo />
+
+Previously, when processing a sentence (e.g., with RNN models), AI could only read words one by one from left to right, easily forgetting earlier words by the time it reached the end. The Transformer's **Self-Attention mechanism** shattered this limitation: it lets the AI "see the entire sentence at once" and, upon encountering the word "apple," automatically determine from context whether it refers to the fruit or Steve Jobs' company.
+
+It is inherently suited for parallel computation, can consume unlimited data, and can be stacked to enormous scale. At this moment, the foundation for Large Language Models (LLMs) was complete.
+
+---
+
+## VI. The Large Model Era & the Dawn of General Intelligence (2018–Present)
+
+When the Transformer met unlimited compute and massive data, the historical paradigm of AI development was forever changed. Scientists discovered an astonishing phenomenon: the attention-based architecture seemed insatiable. Previous deep learning models hit intelligence ceilings, but the Transformer could perfectly leverage GPUs' massive parallelism — the more data and the deeper the network, the better it performed, seemingly without limit.
+
+### 6.1 The "Pre-train + Fine-tune" Paradigm: From Specialist to Generalist
+
+Originally, building AI meant "one task, one small model": a dedicated translation model for translation, a dedicated chatbot model for chat — like training craftsmen who each know only one trade. But in 2018, with OpenAI's **GPT-1** and Google's **BERT**, a new paradigm emerged: **"scale is all you need."**
+
+First comes **Pre-training**, which constitutes 99% of a large language model's core intelligence. Scientists poured trillions of words from the entire internet — articles, classic literature, computer code, encyclopedic knowledge — into a massive Transformer network. And the training task? Simply **"next-word prediction."**
+
+To predict the next word in human language with extraordinary precision, the model is forced to internalize and compress the operating principles of the entire world within its hundreds of billions of neural parameters! It doesn't just master subject-verb-object grammar and learn that "apple" is a red fruit — it grasps the logic behind "Newton discovered gravity because of a falling apple." Like a child who never deliberately studied a grammar textbook but, through reading millions of books, automatically gained the ability to understand the complex world.
+
+<GPTEvolutionDemo />
+
+From GPT-2 (1.5 billion parameters) to GPT-3 (175 billion parameters), scientists were stunned to discover **Emergent Abilities** — when a model grows large enough, quantitative change triggers terrifying qualitative change. Without any deliberate training, the massive model spontaneously "figured out" logical reasoning, code writing, and in-context learning. No human needed to explicitly teach it through code.
+
+### 6.2 The Generative AI Explosion & ChatGPT's Nuclear Moment
+
+With a pre-trained model brimming with world knowledge, one final step remained to create the perfect personal AI assistant: **Fine-tuning**. The pre-trained model was only accustomed to blindly continuing text — it couldn't understand user "instructions" or conduct proper Q&A interactions.
+
+In November 2022, OpenAI ingeniously introduced **RLHF (Reinforcement Learning from Human Feedback)**. They hired large teams of experts to score and correct the model's responses. It was like taking a brilliant but unfiltered genius and establishing clear communication boundaries and etiquette guidelines, forcibly shaping it into a gentle, organized, and well-mannered conversational assistant. Thus, **ChatGPT** was born.
+
+Overnight, AI was no longer a dry laboratory toy — it became a universal intelligent brain in every ordinary person's hands.
+
+What followed was a magnificent multimodal era:
+* **2023: Unlocking multiple senses.** Image generation models like Midjourney and Stable Diffusion reshaped the digital art industry. **GPT-4**, released the same year, combined advanced visual understanding with long-range logical reasoning.
+* **2024 onward: Simulating the physical world.** With the release of realistic video generation models like Sora, and real-time end-to-end voice models with full emotional nuance, AI expanded from pure text processing to comprehensive perception of the complete world — including 3D space, light and shadow, and subtle vocal emotions.
+
+---
+
+## VII. The Convergence of AI's Three Schools & Future Outlook
+
+Looking back over these 70 years — from making machines prove mathematical theorems (symbolism), to finding statistical boundaries (classical ML), to winning at Go through trial and error (behaviorism/reinforcement learning), to large models that devour massive data and develop emergent common sense (the ultimate form of connectionism) — the development of artificial intelligence has never stopped.
+
+Today's large models appear to have abandoned the manual coding of rigid "rules" (symbolism's original intent), but in reality, within the implicit parameters of their thousands of layers, they have learned and encapsulated "dark rules" far deeper than human logic. The **Chain of Thought** long-range reasoning in today's large pre-trained models — isn't that the rebirth of the symbolic school's pursuit of logical verification and rigorous step-by-step reasoning, now reincarnated within neural networks?
+
+**Standing at the summit of the large model era and looking ahead, the path toward Artificial General Intelligence (AGI) is advancing along several profoundly broad avenues of exploration:**
+
+1. **Toward a Unified Neural Hub (Native Multimodality):** Future models will no longer be Frankenstein-like assemblies of "text model + voice model." Architectures like GPT-4o use a single super-network to simultaneously ingest, perceive, and understand text, images, video streams, and ultra-low-latency emotionally rich 3D audio waveforms.
+2. **Embodied AI:** When a supremely intelligent "brain" is imprisoned in a silicon data center, it cannot verify truth from the physical world. Through integration with Boston Dynamics-style humanoid robots, super AI may grow hands and, through physical trial and error, learn the same objective physical laws we live by.
+3. **Agentic AI:** Most LLMs today remain at the stage of "passive text calculators answering one question at a time." In the AI Agent era, large models are granted **the power to act independently**. Give a single natural language instruction (e.g., "Research and plan all flights, hotels for seeing the Northern Lights in Norway next week, and generate a calendar schedule"), and the AI Agent will autonomously decompose it into dozens of sub-tasks, open virtual browsers, call real airline search APIs, perform complex verification and comparison. They are no longer passive echo chambers waiting for keystrokes — they are tireless digital workforces.
+
+In this spiraling technological journey, history is always strikingly similar but never repeats. We are witnessing the most exhilarating cross-section of history — the transition from "force-feeding algorithms with rigid rules" to "letting machines autonomously define the laws of the world."
+
+<AIErasComparisonDemo />
diff --git a/docs/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
new file mode 100644
index 0000000..1525ade
--- /dev/null
+++ b/docs/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -0,0 +1,473 @@
+# Seven AI Programming Tools Comparison
+
+## Chapter Introduction
+
+With so many AI programming tools available, which one is right for you? This chapter provides an in-depth横向 evaluation of 7 major Web Vibe Coding platforms including Lovable, Replit, and Z.ai through a unified hands-on task—developing a "Snake + AI Poem Writing" game. We'll compare them from multiple dimensions including beginner-friendliness, code controllability, and deployment convenience, helping you quickly choose the best development assistant tool.
+
+---
+
+# 1. Building a Snake Game with Vibe Coding: Complete Hands-On Tutorial
+
+This article introduces an emerging software development practice—"Vibe Coding," which uses artificial intelligence to accelerate the application building process.
+
+Next, we will successively introduce the core concepts of Vibe Coding, explain what AI Agents are, and provide practical prompt writing methods. Finally, we will provide a complete hands-on tutorial on building a "Snake" game from scratch, along with detailed comparison evaluations of multiple mainstream Vibe Coding platforms to help you choose the best tool combination for yourself.
+
+## What You Will Learn:
+
+- **What is Vibe Coding:** Understand its definition, workflow, and key advantages.
+- **The Role of AI Agents:** Understand how AI Agents work and how they differ from traditional programs.
+- **How to Write Good Prompts:** Master clear and specific prompt writing to achieve better results.
+- **Vibe Coding Tools:** Get to know the mainstream AI programming and design platforms.
+- **Platform Comparison:** Evaluate and compare the advantages and disadvantages of 7 different AI Agent platforms from a beginner's perspective.
+- **UI/UX Tools:** Learn how to integrate UI/UX tools like Figma and Mastergo into your overall workflow.
+
+## 1. Introduction
+
+In previous lessons, we've been using z.ai's full-stack development model to complete programming tasks.
+
+However, have we ever thought: its core is actually "AI Agent" (different from ordinary chat-based AI, and much more intelligent)? This is because it doesn't just chat with you—it can also think (when you give it a task, it first makes a plan), and actively take actions (like calling web searches, executing computer commands, opening web pages, etc.). We will introduce this in detail later.
+
+## 1. What is Vibe Coding?
+
+Vibe Coding is a new software development method that uses AI to accelerate the application development process. It is not a replacement for traditional programming, but rather a more "conversational" programming model. This concept was proposed by AI researcher Andrej Karpathy: in this workflow, developers no longer write code line by line, but mainly guide AI Agents to generate, optimize, and debug applications.
+
+The core idea of Vibe Coding shifts from **"code-first"** to **"intent-first"**. You no longer need to start from the first line of code, but describe the desired outcome in natural language.
+
+A typical Vibe Coding workflow is an iterative loop:
+
+- **Describe the Goal:** First describe the feature you want to implement in a sentence or paragraph, for example: "Make a simple Snake game with a Python backend that can generate poems."
+- **AI Generates Code:** The AI Agent parses your requirements and generates the first version of the code, including the basic structure, frontend pages, and backend logic.
+- **Run and Observe:** Run the generated code, check if it works as expected, and discover bugs or shortcomings.
+- **Feedback and Iterate:** If there are errors or the results are unsatisfactory, continue giving instructions in the conversation, for example: "The snake moves too slowly, speed it up," or "The API Key in the `.env` file isn't being read correctly, please fix the backend code."
+- **Repeat:** Continuously iterate through the "describe → generate → run → feedback" loop until the application reaches a satisfactory state.
+
+### Main Advantages of Vibe Coding:
+
+- **Lower Barrier:** Allows designers, entrepreneurs, students, and others without programming experience to participate in application development through natural language.
+- **Faster Prototyping:** Significantly reduces the time from idea to Minimum Viable Product (MVP).
+- **Improved Efficiency:** Automatically handles a large amount of repetitive, mechanical coding work (like template code), allowing developers to focus on architecture design and problem abstraction.
+- **Encourages Experimentation:** Promotes a approach of quick output then continuous improvement, making it easier to try new ideas and features.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)
+
+---
+
+## 2. What is an AI Agent?
+
+So what exactly is an AI Agent? Simply put, an AI Agent is an AI system that can **perceive environments, make decisions, and take actions** to achieve specific goals. Compared to simple chatbots that only respond to prompts, AI Agents have the following key characteristics:
+
+### 2.1 Core Capabilities of AI Agents
+
+| Capability | Description | Example |
+|------------|-------------|---------|
+| **Planning** | Break down complex tasks into multiple steps | When asked to "build a blog," automatically creates subtasks: design database, write API, build frontend, etc. |
+| **Tool Use** | Call external tools to extend capabilities | Use browser to search for information, execute code, read/write files |
+| **Memory** | Retain context and learn from interactions | Remember user preferences, reference previous conversation history |
+| **Reflection** | Evaluate action results and adjust strategies | When code fails, analyze the error and try alternative solutions |
+
+### 2.2 AI Agent vs. Traditional Programs
+
+Let's compare AI Agents with traditional programs:
+
+| Dimension | Traditional Programs | AI Agents |
+|-----------|----------------------|-----------|
+| **Logic** | Hard-coded by developers | Learned from vast amounts of data |
+| **Input** | Structured data (JSON, database) | Natural language, any form |
+| **Output** | Determined results | Generative, creative content |
+| **Adaptability** | Requires code changes to modify behavior | Can adapt through prompts or fine-tuning |
+
+### 2.3 How AI Agents Work
+
+The working principle of AI Agents can be summarized as a feedback loop:
+
+```
+Goal → Perception → Planning → Action → Evaluation → (Loop)
+```
+
+1. **Goal Setting:** The user provides a task goal in natural language.
+2. **Perception:** The Agent understands the goal and gathers relevant information.
+3. **Planning:** The Agent breaks down the goal into executable steps.
+4. **Action:** The Agent executes the plan, potentially calling various tools.
+5. **Evaluation:** The Agent evaluates the results of the action.
+6. **Loop:** Based on the evaluation, the Agent adjusts and continues the loop until the goal is achieved.
+
+This is similar to how a human developer works: understanding requirements → making a plan → writing code → testing → fixing bugs → iterating.
+
+---
+
+## 3. How to Write Good Prompts
+
+In Vibe Coding, the quality of prompts directly determines the quality of AI output. Here are some practical prompt writing tips:
+
+### 3.1 Basic Principles
+
+1. **Be Specific:** Clearly describe what you want to achieve, avoiding vague expressions.
+   - ❌ "Make a website"
+   - ✅ "Make a personal blog with a header, article list, and comment section"
+
+2. **Provide Context:** Give the AI enough background information so it can generate more relevant code.
+   - ❌ "Write a login function"
+   - ✅ "Write a login function using JWT, storing tokens in localStorage, with a 7-day expiration"
+
+3. **Define Constraints:** Specify technical requirements and limitations.
+   - ❌ "Write an API"
+   - ✅ "Write a RESTful API using Express.js, following REST conventions, returning JSON data"
+
+4. **Iterative Refinement:** Start with simple requirements, then gradually add complexity.
+
+### 3.2 Prompt Structure Template
+
+A good prompt can follow this structure:
+
+```
+[Role/Context] + [Task Description] + [Technical Requirements] + [Expected Output]
+
+Example:
+"As a full-stack developer, create a user registration API using Node.js + Express + MongoDB. 
+The API should validate email format, hash passwords with bcrypt, and return JWT tokens. 
+Provide complete code with error handling and comments."
+```
+
+### 3.3 Common Prompt Patterns
+
+| Pattern | Description | Example |
+|---------|-------------|---------|
+| **Step-by-Step** | Ask AI to break down complex tasks | "First create the database schema, then write the API, finally build the frontend" |
+| **Example-Based** | Provide examples for reference | "Similar to the login page on https://example.com, create a registration page" |
+| **Role-Playing** | Assign a specific role | "As a senior frontend engineer, review this React code and point out performance issues" |
+| **Constraint-Based** | Emphasize constraints | "Use only vanilla JavaScript, no external libraries" |
+
+---
+
+## 4. Hands-On: Building a Snake Game
+
+Now let's put it into practice! We'll build a Snake game with AI poem generation functionality using Vibe Coding.
+
+### 4.1 Project Requirements
+
+**Core Features:**
+1. Classic Snake gameplay—control the snake to eat food, avoid hitting walls or itself
+2. Word collection—when the snake moves, it collects English words appearing on the board
+3. AI poem generation—select collected words to generate poems using DeepSeek API
+4. Data persistence—word collections persist across multiple rounds
+
+**Technical Requirements:**
+- Frontend: HTML5 Canvas game rendering
+- Backend: API service integrated with DeepSeek
+- State Management: Save word inventory across game sessions
+
+### 4.2 Implementation Steps
+
+#### Step 1: Describe the Project
+
+First, describe your project goal to the AI Agent:
+
+> "Create a Snake game web application with the following features:
+> 1. Classic Snake gameplay with keyboard controls
+> 2. Word collection: words appear randomly on the board, snake collects them by eating
+> 3. Word inventory: collected words are displayed in a sidebar
+> 4. AI poetry generation: select words and click 'Generate Poem' to call DeepSeek API and generate a poem
+> 5. Word persistence: used words are removed or decreased from the inventory
+> 6. Navigation: simple tabs or top menu to switch between two pages
+> 7. Shared state: ensure collected words stay synchronized and visible on both pages"
+
+#### Step 2: AI Generates Code
+
+The AI Agent will analyze your requirements and generate the initial code structure:
+
+- Backend: Express.js server, DeepSeek API integration
+- Frontend: HTML5 Canvas game, word inventory management
+- Database: Simple in-memory or file-based storage
+
+#### Step 3: Test and Iterate
+
+Run the code and check if it meets expectations:
+
+- Does the game work correctly?
+- Does word collection function properly?
+- Does the AI poetry generation work?
+- Are there any bugs or issues?
+
+If problems arise, continue refining through conversation:
+
+> "The snake moves too slowly, please increase the speed"
+> "The word inventory isn't displaying correctly, please check the state management"
+> "The API call failed, please add error handling"
+
+### 4.3 Key Technical Points
+
+During development, pay attention to these points:
+
+1. **Game Loop:** Use `requestAnimationFrame` for smooth rendering
+2. **Collision Detection:** Check if the snake head overlaps with food, walls, or itself
+3. **State Management:** Ensure word inventory is synchronized between game page and poetry page
+4. **API Security:** Store API keys in `.env` files, add to `.gitignore` to prevent leakage
+5. **Error Handling:** Add try-catch blocks for API calls, provide user-friendly error messages
+
+### 4.4 Running the Project
+
+**Frontend:**
+```bash
+# If using a simple static file
+open index.html
+
+# If using a development server
+npm run dev
+```
+
+**Backend:**
+```bash
+npm install
+# Set your DeepSeek API key in .env
+echo "DEEPSEEK_API_KEY=your_api_key" > .env
+npm start
+```
+
+- **Display the same shared word inventory.**
+- **User selects some words and clicks **Generate Poem** button.**
+- **Send these words to the backend, where DeepSeek API generates a poem.**
+- **After generating the poem, used words are removed or decreased from the inventory.**
+- **Navigation:** Simple tab or top menu to switch between the two pages.
+- **Shared State:** Ensure collected words stay synchronized and visible on both pages.
+
+- **Example Results**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png)
+
+---
+
+# 5. AI Agent Platform Comparison (Choosing the Best Combination for Simple Projects)
+
+Different Vibe Coding platforms each have their own characteristics and workflows. We tested multiple platforms using the same "Snake game with DeepSeek API" requirements, evaluating their strengths and weaknesses from a beginner's perspective. Here's the summary.
+
+## 1. Comparison Criteria
+
+1. **Goal**
+   Build a Snake (Snake) web application integrated with DeepSeek API.
+
+2. **Game Details**
+   1. The game generates poetry through DeepSeek LLM API.
+   2. The snake eats English words; collected words are retained after the game ends and continue to be used in new rounds. The same word can be collected multiple times and counted separately.
+   3. When a poem is generated, used words are removed from the inventory.
+
+3. **Must-Haves**
+   1. A runnable frontend page containing the Snake game (keyboard control, Canvas rendering).
+   2. Word collection mechanism (words appear on the board, sidebar list updates when snake eats a word).
+   3. Persistence of word inventory across multiple game rounds.
+   4. Backend using DeepSeek API (if no API Key, can return mock poetry first).
+   5. "Generate Poetry" button: clicks to call backend, displays poetry, and updates word inventory based on usage.
+   6. Support for `.env` API Key, and avoiding key leakage through `.gitignore`.
+
+4. **Nice-to-Haves**
+   1. Users can select which words to use for generating poetry.
+   2. Good user experience (e.g., clear sidebar showing word list, well-laid-out poetry display area).
+   3. Add comments in the code for beginners, explaining key logic.
+
+## 2. Code Output Comparison
+
+### 1. Lovable (Web-based)
+
+- **Platform Type:** Web
+- **Key Features & Workflow:** Lovable does very well in integration and collaboration. It automatically handles initialization tasks like connecting to Supabase databases, making the project setup process very smooth. You only need to describe your project requirements, and the Agent will help connect various services and build the basic structure.
+- **Suitable Users:** For beginners trying Vibe Coding for the first time, Lovable is a very friendly choice. It simplifies the complexity of multi-service integration, allowing you to focus on prompts and iteration rather than environment configuration. Thanks to high automation, you can quickly get a runnable prototype.
+- **Prompt Process:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png)
+- **Snake Game Results:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png)
+
+- **Price:** Relatively expensive, but if you have a school email, you can verify as a student to use it at half price.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png)
+
+### 2. Cursor (IDE)
+
+- **Platform Type:** Desktop App (PC)
+- **Key Features & Workflow:** Cursor is a proprietary IDE with integrated AI capabilities, supporting Windows, macOS, and Linux. It embeds features like code generation, intelligent rewriting, and codebase queries directly into the development environment. Compared to web tools, it's closer to a traditional local development experience. Since it's a local environment, different computers have varying configurations, and occasionally you'll encounter environment-related issues. The benefit is that the project is on your machine—no need to separately download or configure a runtime environment, as Cursor handles many tedious steps for you.
+- **Suitable Users:** For users with some programming foundation, Cursor is a very powerful and familiar environment. However, for complete beginners with no foundation, you'll need to understand project structure, dependency management, and file organization concepts yourself, which has a steeper learning curve. More suitable for developers who want to add AI assistants to traditional coding workflows.
+- **Prompt Process:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png)
+- **Snake Game Results:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png)
+
+- **Price:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png)
+
+### 3. Z.ai (Web-based)
+
+- **Platform Type:** Web
+- **Key Features & Workflow:** Z.ai's usage is relatively straightforward, but a clear challenge is: you need to **manually copy and paste the generated code**. The platform lacks a real-time preview window, making it difficult to see the code running effect immediately.
+- **Suitable Users:** This platform requires a more "hands-on" approach to use. The lack of automation means you must interact directly with the code, which can actually be a kind of training for those who want to deeply understand AI output. However, frequent copy-pasting brings efficiency problems and error risks. More suitable for students who want to see "raw AI output code" rather than those seeking a one-click experience.
+- **Prompt Process:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png)
+- **Snake Game Results:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png)
+
+- **Price:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png)
+
+### 4. Replit (Web-based)
+
+- **Platform Type:** Web
+- **Key Features & Workflow:** Replit is an all-in-one online development and deployment environment—you can write code, run programs, and generate online access links directly in the browser. Before starting coding, it gives you a clear action plan; it also provides a visual editor where you can directly modify the UI in the preview window, and the source code automatically syncs. This allows you to verify at any time whether the AI output matches expectations, greatly reducing the number of back-and-forth modifications.
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png)
+
+- **Suitable Users:** Replit is very beginner-friendly. It simplifies the complete loop from coding to deployment—no need to separately configure servers or hosting services. Collaboration features are also strong, making it suitable for classmates working on projects together or having others help review code remotely.
+- **Prompt Process:** During the build process, the AI didn't fully understand the requirements at first—about 3 rounds of iteration were needed before the final output reached the ideal result.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png)
+- **Snake Game Results:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png)
+
+- **Price:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png)
+
+### 5. Bolt.new (Web-based)
+
+- **Platform Type:** Web
+- **Key Features & Workflow:** Bolt.new is similar to Lovable, featuring a Web + AI development environment. It can automatically generate project scaffolding and offers real-time preview. Compared to Lovable, Bolt.new provides more development control, allowing you to directly modify files in the browser and configure build tools.
+- **Suitable Users:** For developers who want more control but don't want to set up a local environment, Bolt.new offers a good balance. It allows you to get started quickly while having the flexibility to customize configurations.
+- **Prompt Process:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)
+- **Snake Game Results:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)
+
+- **Price:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png)
+
+### 6. Claude Dev (Web-based)
+
+- **Platform Type:** Web (VS Code in browser)
+- **Key Features & Workflow:** Claude Dev is essentially a browser-based version of Cursor, providing a full VS Code-like development environment in the web. It supports file management, terminal, and various extensions. The advantage is that you don't need to install anything—just open the browser to start coding.
+- **Suitable Users:** For users who like Cursor's workflow but don't want to install desktop software, or those who need to code on different devices, Claude Dev is a great alternative.
+- **Prompt Process:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)
+- **Snake Game Results:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png)
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png)
+
+- **Price:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png)
+
+### 7. GitHub Copilot (IDE Plugin)
+
+- **Platform Type:** IDE Plugin (VS Code, JetBrains, etc.)
+- **Key Features & Workflow:** GitHub Copilot is not a complete development platform but an AI coding assistant that integrates into your existing IDE. It provides code suggestions, auto-completion, and can help explain and refactor code. It works locally without sending code to the cloud, offering better privacy and security.
+- **Suitable Users:** For developers who already have a development environment set up and want to enhance productivity with AI assistance. Not suitable for complete beginners who haven't set up a local environment yet.
+- **Prompt Process:** Copilot works differently—it provides inline suggestions as you type, rather than generating entire projects through conversations. You can write comments or function names, and Copilot will suggest implementations.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)
+- **Snake Game Results:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png)
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png)
+
+- **Price:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png)
+
+## 3. Summary and Recommendations
+
+### 3.1 Platform Comparison Summary
+
+| Platform | Type | Beginner Friendliness | Code Control | Deployment | Price |
+|----------|------|---------------------|--------------|------------|-------|
+| Lovable | Web | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | High |
+| Cursor | Desktop | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | Free/Paid |
+| Z.ai | Web | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ | Free |
+| Replit | Web | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | Free/Paid |
+| Bolt.new | Web | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Free/Paid |
+| Claude Dev | Web | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ | Free/Paid |
+| Copilot | Plugin | ⭐⭐ | ⭐⭐⭐⭐⭐ | N/A | Paid |
+
+### 3.2 Selection Recommendations
+
+- **Complete Beginners:** Try **Lovable** or **Replit**—they offer the smoothest experience with minimal setup.
+- **Those with Programming Foundation:** **Cursor** or **Claude Dev** provide the most control.
+- **Students on a Budget:** **Z.ai** or free tiers of **Replit/Bolt.new** are good choices.
+- **Those Seeking Balance:** **Bolt.new** offers a good balance between ease of use and control.
+
+### 3.3 Future Trends
+
+Vibe Coding is rapidly evolving. We can expect:
+
+1. **More Powerful Agents:** Future AI Agents will have stronger reasoning and planning capabilities.
+2. **Deeper Integration:** Seamless integration with more development tools and services.
+3. **Lower Barriers:** Even non-technical users can create complex applications.
+4. **New Workflows:** Emergence of new development patterns beyond traditional coding.
+
+---
+
+## 6. AI Design Tools: Integrating Figma into Your Workflow
+
+In addition to AI programming tools, AI-powered design tools are also becoming essential for Vibe Coding workflows. This section introduces how to integrate tools like Figma into your development process.
+
+### 6.1 Common AI Design Tools
+
+| Tool | Features | Suitable For |
+|------|----------|---------------|
+| **Figma (with AI)** | AI-powered design features, auto-layout, component suggestions | UI/UX Design |
+| **Mastergo** | Chinese-localized, AI-assisted design, collaboration features | Chinese market products |
+| **Uizard** | AI-powered wireframe to design conversion | Rapid prototyping |
+| **Galileo AI** | Text-to-UI generation | Quick idea visualization |
+
+### 6.2 Integrating Design Tools with Vibe Coding
+
+The typical workflow is:
+
+1. **Design Phase:** Use AI design tools to create UI mockups
+2. **handoff:** Export design specs or use plugins to integrate with development
+3. **Implementation:** AI Agent reads design specs and implements code
+
+### 6.3 Hands-On: Using Figma with Vibe Coding
+
+**Step 1: Create Design in Figma**
+- Use Figma's AI features to quickly generate layouts
+- Or manually design and use AI assistance for improvements
+
+**Step 2: handoff to Development**
+- Use Figma's "Developer Mode" to inspect specs
+- Or use plugins like "Anima" to export code
+
+**Step 3: Vibe Coding Implementation**
+- Describe the design to your AI Agent
+- The Agent generates code that matches the design
+
+### 6.4 Practical Tips
+
+1. **Keep Designs Simple:** Start with simple designs, add complexity gradually
+2. **Use Design Systems:** Establish consistent component libraries
+3. **Leverage AI Features:** Make full use of AI-assisted design features
+4. **Iterate Quickly:** Rapidly iterate based on AI-generated suggestions
+
+---
+
+## 7. Summary
+
+This chapter covered:
+
+1. **Vibe Coding Concept:** A new development paradigm that uses AI to accelerate application building
+2. **AI Agent Technology:** The core capabilities and working principles of AI Agents
+3. **Prompt Engineering:** Techniques for writing effective prompts
+4. **Hands-On Practice:** Building a complete Snake game with AI poetry generation
+5. **Platform Comparison:** Detailed evaluation of 7 major Vibe Coding platforms
+6. **Design Tool Integration:** How to incorporate AI design tools into your workflow
+
+Vibe Coding represents the future of software development. As AI technology continues to advance, the barrier to software development will become increasingly lower. We encourage everyone to embrace this new paradigm and start their Vibe Coding journey!
+
+**Next Steps:**
+- Choose a platform and start your first Vibe Coding project
+- Practice prompt writing skills
+- Explore AI design tools
+- Join the Vibe Coding community to learn from others
+
+Happy Vibe Coding! 🚀
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png)
diff --git a/docs/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
new file mode 100644
index 0000000..3400d53
--- /dev/null
+++ b/docs/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -0,0 +1,337 @@
+# Designing Websites with Design and Programming Agents
+
+## Chapter Introduction
+
+This chapter demonstrates how design and development can work together perfectly through AI. You will play the role of a product manager, directing the "Design Agent" to complete logo design, color schemes, and page layouts, then collaborate with the "Programming Agent" to transform visual mockups into runnable code. Experience full-chain AI-powered development from creative conception to website launch, making one person equivalent to an entire team.
+
+---
+
+# 1. Getting Started Guide
+
+## 1. Tutorial Introduction
+
+Let's use AI Design Agents and Coding Agents to build a complete website from scratch.
+
+- **Design Agent**: Responsible for creating logos, web page layouts, color schemes, and other visual elements
+- **Coding Agent**: Writes actual code (HTML/CSS/JS, etc.) based on the requirements and layouts you provide in prompts to build a runnable website
+
+## 2. Design Agents vs. Coding Agents
+
+- **Design Agent**: AI that generates images, page mockups, or design styles based on the prompts you provide.
+  - Mastergo
+  - Lovart
+  - Figma MCP
+- **Coding Agent**: AI that writes actual code (HTML/CSS/JS, etc.) based on the functionality and layout you request in prompts.
+  - Z.AI
+  - Trae
+  - Cursor
+  - Lovable
+
+---
+
+# 2. Using Design Agent to Create Logo
+
+## 1. Key Elements to Consider When Designing a Logo
+
+The logo is one of the key elements that determine your website's first impression. To get satisfactory results from AI Design Agents, you need to clearly describe the type of logo you want in your prompt.
+
+1. **Brand Name / Text**
+
+- Text that must appear in the logo (e.g., website title, brand name, etc.).
+
+2. **Style (Mood / Atmosphere)**
+
+- The overall feeling or atmosphere the logo wants to convey.
+- _Examples: minimalist, cute, simple, modern, vintage, futuristic, etc._
+
+3. **Color Scheme** (Optional)
+
+- It's best if the logo's colors match the overall tone of the entire website.
+- You can specify specific hex color codes, or general color tones (cool, warm, etc.).
+- _Examples: **`#171721`** (black), **`#FF7130`** (orange)._
+
+4. **Form (Shape / Structure)**
+
+- Clearly state if the logo needs a specific shape or composition.
+- _Examples: text inside a circle, icon + text combination, icon-focused logo, etc._
+
+5. **Icon / Symbol Elements** (Optional)
+
+- Graphics or symbols you want to appear in the logo.
+- _Examples: book icon, lightning symbol, AI-related graphics, abstract geometric shapes, etc._
+
+## 2. Writing Logo Design Prompts
+
+**Example Prompts**
+
+```
+"Please design a minimalist-style logo for me, with the brand name 'My First Website'.
+Use black (#171721) and orange (#FF7130), and place the text inside a circle."
+```
+
+```
+"Design a logo with the brand name 'AIID'.
+The overall style should be futuristic, clean, and simple, with blue and white as the main colors.
+Combine abstract graphics symbolizing AI with the text, and export as a PNG with a transparent background."
+```
+
+## 3. Requesting Design from Agent
+
+- Input the above prompts → Compare multiple designs generated by the Agent.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png)
+
+## 4. Finalizing the Logo
+
+- Choose your favorite version from the drafts and download it.
+
+---
+
+# 3. Planning Your Website Structure
+
+## 1. Understanding Basic Sections
+
+Before actually starting to build the website, it's very important to plan which menus (sections) to include. The menu design depends on what you want visitors to see and what actions you want them to take.
+Generally, websites are usually composed of basic sections like **Home / About / Contact**.
+
+## 2. Draw Your Own Structural Sketch (Optional)
+
+You can first write out a simple menu structure based on the website's goals.
+
+---
+
+# 4. Using Design Agent to Create Page Layout
+
+## 1. Page Layout Design Prompts
+
+**Example Prompts**
+
+```
+"Please create a website layout with the following requirements:
+- Color scheme: black (#171721) background, white text, orange (#FF7130) accents
+- Sections: Home, About, Services, Contact
+- Home: Hero section with large headline, CTA button, and service highlights
+- About: Company introduction with team member photos
+- Services: Grid layout showing services offered
+- Contact: Simple contact form with email and social media links
+- Style: Modern, minimalist, with smooth scroll animations"
+```
+
+```
+"Design a landing page for an AI tools collection website.
+- Primary colors: purple (#7C3AED) and dark gray (#1F2937)
+- Hero: Centered title 'AI Tools Hub', subtitle, and 'Explore Now' button
+- Features: 3-column grid showing tool categories
+- Each card should have an icon, title, and brief description
+- Footer: Copyright and social links
+- Include responsive design considerations"
+```
+
+## 2. Requesting Layout Design from Agent
+
+- Input your requirements → Agent generates layout mockups → Refine based on feedback
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png)
+
+## 3. Creating Color Palette
+
+**Example Prompt**
+
+```
+"Create a color palette for a tech blog website.
+- Primary: Deep blue
+- Accent: Vibrant orange
+- Background: Light gray for readability
+- Text: Dark gray for contrast
+Please provide hex codes for each color and explain their usage."
+```
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png)
+
+## 4. Selecting Typography
+
+**Example Prompt**
+
+```
+"Recommend font pairings for a modern tech website.
+- Heading font: Something bold and distinctive
+- Body font: Clean and readable
+Please suggest specific Google Fonts."
+```
+
+---
+
+# 5. Integrating Design with Coding Agent
+
+## 1. Preparing Design Specs
+
+Before handing off to the Coding Agent, prepare:
+
+1. **Logo file** (PNG with transparent background)
+2. **Color codes** (Hex values for primary, secondary, accent colors)
+3. **Typography** (Font names, sizes, weights)
+4. **Layout description** (Section structure, spacing, responsive behavior)
+
+## 2. Writing Coding Prompts
+
+**Example Prompt**
+
+```
+"Build a responsive website based on the following specifications:
+
+**Brand**
+- Logo: [attach logo file]
+- Name: My First Website
+
+**Colors**
+- Primary Background: #171721 (dark)
+- Text: #FFFFFF (white)
+- Accent: #FF7130 (orange)
+
+**Sections**
+1. Home - Hero with headline 'Welcome to My First Website', subtitle, and 'Get Started' button
+2. About - Brief company introduction (2-3 sentences)
+3. Services - 3 service cards in a row
+4. Contact - Simple form with name, email, message fields
+
+**Requirements**
+- Use semantic HTML5
+- Include CSS animations for smooth transitions
+- Mobile responsive (stack sections on mobile)
+- Use CSS flexbox/grid for layout
+- Add subtle hover effects on buttons and cards
+
+Please create index.html with embedded CSS and basic JavaScript for mobile menu."
+```
+
+## 3. Iterating with Coding Agent
+
+- Initial code → Test and review → Provide feedback → Refine until satisfied
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png)
+
+---
+
+# 6. Practical Example: Building a Personal Portfolio
+
+## 1. Project Overview
+
+Let's build a personal portfolio website with:
+- Clean, modern design
+- About section with photo
+- Skills showcase
+- Project portfolio grid
+- Contact form
+
+## 2. Step-by-Step Implementation
+
+### Step 1: Design Phase
+
+**Logo Design Prompt**
+```
+"Design a minimalist logo for a personal portfolio.
+Brand name: 'John Doe'
+Style: Clean, professional, modern
+Colors: Dark blue (#1E3A8A) and white
+Format: PNG with transparent background"
+```
+
+**Layout Design Prompt**
+```
+"Create a personal portfolio website layout:
+- Single page with smooth scroll
+- Dark theme with blue accents
+- Sections: Hero (with photo placeholder), About, Skills, Projects, Contact
+- Modern, professional aesthetic
+- Include responsive mobile view"
+```
+
+### Step 2: Development Phase
+
+**Coding Prompt**
+```
+"Create a personal portfolio website with these specs:
+
+**Visual Design**
+- Dark theme: #0F172A background, #F8FAFC text
+- Accent color: #3B82F6 (blue)
+- Font: Inter from Google Fonts
+
+**Sections**
+1. Hero: Name, title, brief tagline, 'View Work' CTA button
+2. About: Photo placeholder (200x200 circle), 2-paragraph bio
+3. Skills: Grid of skill tags (HTML, CSS, JavaScript, React, Node.js)
+4. Projects: 3-column grid with project cards (image, title, description, link)
+5. Contact: Form with name, email, message fields and submit button
+
+**Technical**
+- Responsive: Single column on mobile, 3 columns for projects
+- Smooth scroll between sections
+- Hover effects on buttons and project cards
+- Form validation with JavaScript
+
+Output as a single index.html file with embedded CSS and JS."
+```
+
+### Step 3: Refinement
+
+Based on test results, iterate:
+- "Add more projects to the portfolio"
+- "Change accent color to green (#10B981)"
+- "Add a navigation bar that stays fixed at top"
+
+---
+
+# 7. Best Practices
+
+## 1. Design-Coding Handoff Tips
+
+1. **Be Specific**: Provide exact colors, dimensions, and spacing
+2. **Use References**: Share example websites you like
+3. **Iterate Incrementally**: Start simple, add complexity later
+4. **Test Responsiveness**: Check how it looks on different screen sizes
+
+## 2. Prompt Optimization
+
+| Tip | Do | Don't |
+|-----|-----|-------|
+| **Clarity** | "Use #FF5733 for buttons" | "Make it pop" |
+| **Context** | "For a SaaS landing page..." | Just "make a website" |
+| **Constraints** | "Max 3 colors, no animations" | "Make it beautiful" |
+| **Feedback** | "The hero section is too tall, reduce padding" | "Fix it" |
+
+## 3. Common Workflow Patterns
+
+1. **Design-First**: Design complete → Code implementation
+2. **Parallel**: Design and code simultaneously with iteration
+3. **Iterative**: Quick prototype → Refine design → Enhance code
+
+---
+
+# 8. Summary
+
+This chapter covered:
+
+1. **Design Agents**: How to use AI for logo and layout design
+2. **Coding Agents**: How to convert designs into functional code
+3. **Integration Workflow**: Complete process from design to deployment
+4. **Practical Examples**: Step-by-step portfolio website creation
+5. **Best Practices**: Tips for effective AI collaboration
+
+The combination of Design Agents and Coding Agents represents a powerful workflow that can significantly accelerate website development. By clearly communicating your vision and iterating based on feedback, you can create professional websites efficiently.
+
+**Key Takeaways:**
+- Start with clear requirements and design specs
+- Use specific, actionable prompts
+- Iterate based on testing and feedback
+- Leverage both design and coding AI tools together
+
+**Next Steps:**
+- Try creating your own website using this workflow
+- Experiment with different Design Agents (Mastergo, Figma)
+- Explore advanced Coding Agent features (Cursor, Lovable)
+- Build a complete project portfolio using AI assistance
+
+Happy building! 🚀
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png)