diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
index e29fc1d..a6fcfb1 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
@@ -1,85 +1,155 @@
 <!--
-  ApiConceptDemo.vue
-  目标：互动演示 API 必须写清楚的 4 个要点
+  ApiConceptDemo.vue - 互动点餐版
+  目标：通过"点菜"的过程演示 API 的三个核心要素
 -->
 <template>
   <div class="demo">
-    <div class="title">📋 API 必须写清楚的 4 件事</div>
-    <p class="subtitle">点每一项看看是什么意思</p>
-
-    <div class="cards">
-      <div
-        v-for="item in items"
-        :key="item.id"
-        :class="['card', { active: selectedId === item.id }]"
-        @click="select(item.id)"
-      >
-        <div class="card-icon">{{ item.icon }}</div>
-        <div class="card-title">{{ item.title }}</div>
-        <div class="card-hint">{{ item.hint }}</div>
-      </div>
+    <div class="header">
+      <span class="icon">🍳</span>
+      <span class="title">互动演示：向 AI 厨房点菜</span>
     </div>
 
-    <div class="detail" v-if="selected">
-      <div class="detail-header">
-        <span class="detail-icon">{{ selected.icon }}</span>
-        <span class="detail-title">{{ selected.title }}</span>
+    <div class="stepper">
+      <!-- Step 1: Endpoint -->
+      <div class="step-group">
+        <div class="step-label">1. 跟谁说？(Endpoint)</div>
+        <select v-model="endpoint" class="control">
+          <option value="/kitchen/chef">👨‍🍳 主厨 (/kitchen/chef)</option>
+          <option value="/kitchen/bar">🍸 调酒师 (/kitchen/bar)</option>
+        </select>
       </div>
-      <div class="detail-body">
-        <div class="detail-desc">{{ selected.desc }}</div>
-        <div class="detail-example">
-          <strong>例子：</strong>
-          <code>{{ selected.example }}</code>
+
+      <!-- Step 2: Method -->
+      <div class="step-group">
+        <div class="step-label">2. 怎么说？(Method)</div>
+        <div class="toggle-group">
+          <button 
+            :class="['toggle-btn', { active: method === 'GET' }]"
+            @click="method = 'GET'"
+          >
+            GET (看看有什么)
+          </button>
+          <button 
+            :class="['toggle-btn', { active: method === 'POST' }]"
+            @click="method = 'POST'"
+          >
+            POST (我要下单)
+          </button>
         </div>
       </div>
+
+      <!-- Step 3: Params -->
+      <div class="step-group" v-if="method === 'POST'">
+        <div class="step-label">3. 点什么？(Body)</div>
+        <div class="params-editor">
+          { "food": 
+          <select v-model="food" class="inline-select">
+            <option value="steak">🥩 牛排</option>
+            <option value="pasta">🍝 意面</option>
+            <option value="salad">🥗 沙拉</option>
+          </select>
+          }
+        </div>
+      </div>
+      <div class="step-group" v-else>
+        <div class="step-label">3. 查什么？(Params)</div>
+        <div class="params-editor">
+          ?type=
+          <select v-model="menuType" class="inline-select">
+            <option value="today">📅 今日特供</option>
+            <option value="all">📜 全部菜单</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Action -->
+      <button class="send-btn" @click="sendRequest" :disabled="loading">
+        {{ loading ? '🍳 正在做...' : '🚀 发送请求' }}
+      </button>
+    </div>
+
+    <!-- Result -->
+    <div class="result-box" v-if="response">
+      <div class="result-header">
+        <span class="badge" :class="response.status === 200 ? 'success' : 'error'">
+          {{ response.status }} {{ response.statusText }}
+        </span>
+      </div>
+      <div class="result-content">
+        {{ response.data }}
+      </div>
+      <div class="result-explanation">
+        💡 <strong>解释：</strong> {{ response.explanation }}
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, watch } from 'vue'
 
-const selectedId = ref('entry')
+const endpoint = ref('/kitchen/chef')
+const method = ref('GET')
+const food = ref('steak')
+const menuType = ref('today')
+const loading = ref(false)
+const response = ref(null)
 
-const items = [
-  {
-    id: 'entry',
-    icon: '📍',
-    title: '入口在哪',
-    hint: '网址 / 函数名',
-    desc: '你要调用的"按钮"在哪里。是 HTTP 网址，还是代码里的函数名？',
-    example: 'GET /api/users/{id}'
-  },
-  {
-    id: 'params',
-    icon: '📝',
-    title: '要填什么',
-    hint: '需要哪些参数',
-    desc: '调用这个 API 时，你需要提供哪些信息？哪些是必填的，哪些是可选的？',
-    example: 'id（必填）、page（可选）'
-  },
-  {
-    id: 'response',
-    icon: '✅',
-    title: '会得到什么',
-    hint: '返回什么数据',
-    desc: '成功的时候，API 会返回什么数据？有哪些字段，分别代表什么意思？',
-    example: '{ id, name, email }'
-  },
-  {
-    id: 'error',
-    icon: '⚠️',
-    title: '失败怎么说',
-    hint: '错误提示',
-    desc: '调用失败的时候会返回什么错误信息？你应该怎么处理这些错误？',
-    example: '401 没权限、404 找不到、429 太频繁'
-  }
-]
+// Reset response when inputs change
+watch([endpoint, method, food, menuType], () => {
+  response.value = null
+})
 
-const selected = computed(() => items.find(i => i.id === selectedId.value))
+function sendRequest() {
+  loading.value = true
+  response.value = null
 
-function select(id) {
-  selectedId.value = id
+  setTimeout(() => {
+    loading.value = false
+    
+    // Logic for different combinations
+    if (endpoint.value === '/kitchen/bar') {
+      if (method.value === 'GET') {
+        response.value = {
+          status: 200,
+          statusText: 'OK',
+          data: { menu: ['Mojito', 'Martini', 'Beer'] },
+          explanation: '你问调酒师有哪些酒，他给了你酒单。'
+        }
+      } else {
+        response.value = {
+          status: 400,
+          statusText: 'Bad Request',
+          data: { error: "Bar only serves drinks, not food!" },
+          explanation: '你试图向调酒师点菜（牛排/意面），他拒绝了你。你应该去 /kitchen/chef 点菜，或者只点酒。'
+        }
+      }
+      return
+    }
+
+    // Chef logic
+    if (method.value === 'GET') {
+      response.value = {
+        status: 200,
+        statusText: 'OK',
+        data: { specials: ['Spicy Chicken', 'Tofu Soup'] },
+        explanation: '你问主厨今天有什么特供，他告诉了你。'
+      }
+    } else {
+      // POST to Chef
+      const foodMap = {
+        steak: '🥩 滋滋作响的牛排',
+        pasta: '🍝 香气扑鼻的意面',
+        salad: '🥗 新鲜健康的沙拉'
+      }
+      response.value = {
+        status: 200,
+        statusText: 'Created',
+        data: { dish: foodMap[food.value], message: "Enjoy your meal!" },
+        explanation: `你向主厨下了单 (${food.value})，主厨为你做好了菜。`
+      }
+    }
+  }, 600)
 }
 </script>
 
@@ -87,136 +157,148 @@ function select(id) {
 .demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
-  margin: 16px 0;
+  margin: 24px 0;
+  overflow: hidden;
 }
 
-.title {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  color: var(--vp-c-text-2);
-  margin-bottom: 20px;
-}
-
-.cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.card {
+.header {
+  padding: 12px 20px;
   background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 12px;
-  padding: 16px;
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+}
+
+.stepper {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.step-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.step-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.control, .inline-select {
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.toggle-group {
+  display: flex;
+  background: var(--vp-c-divider);
+  padding: 2px;
+  border-radius: 8px;
+  width: fit-content;
+}
+
+.toggle-btn {
+  padding: 6px 16px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
   cursor: pointer;
   transition: all 0.2s;
 }
 
-.card:hover {
-  border-color: var(--vp-c-brand-1);
-  transform: translateY(-2px);
-}
-
-.card.active {
-  border-color: var(--vp-c-brand-1);
-  background: #f0f9ff;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.card-icon {
-  font-size: 32px;
-  margin-bottom: 8px;
-}
-
-.card-title {
-  font-weight: bold;
-  font-size: 16px;
-  margin-bottom: 4px;
-  color: var(--vp-c-text-1);
-}
-
-.card-hint {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-}
-
-.detail {
+.toggle-btn.active {
   background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-brand-1);
-  border-radius: 12px;
-  padding: 20px;
-  animation: fadeIn 0.3s ease;
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.detail-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.detail-icon {
-  font-size: 28px;
-}
-
-.detail-title {
-  font-size: 20px;
-  font-weight: bold;
-  color: var(--vp-c-text-1);
-}
-
-.detail-body {
-  line-height: 1.8;
-}
-
-.detail-desc {
-  font-size: 15px;
-  color: var(--vp-c-text-1);
-  margin-bottom: 16px;
-}
-
-.detail-example {
-  background: var(--vp-c-bg-soft);
-  padding: 16px;
-  border-radius: 8px;
-  border-left: 4px solid var(--vp-c-brand-1);
-}
-
-.detail-example strong {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: var(--vp-c-text-1);
-}
-
-.detail-example code {
-  display: block;
-  background: #1e293b;
-  color: #e2e8f0;
+.params-editor {
+  font-family: monospace;
+  background: var(--vp-c-bg);
   padding: 12px;
   border-radius: 6px;
-  font-family: 'Monaco', 'Menlo', monospace;
-  font-size: 13px;
-  line-height: 1.6;
+  border: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.send-btn {
+  margin-top: 8px;
+  background: var(--vp-c-brand-1);
+  color: white;
+  border: none;
+  padding: 12px;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.send-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.result-box {
+  margin: 0 20px 20px;
+  background: #1e293b;
+  border-radius: 8px;
+  overflow: hidden;
+  color: #e2e8f0;
+  font-family: monospace;
+  animation: slideDown 0.3s ease;
+}
+
+.result-header {
+  padding: 8px 12px;
+  background: rgba(0,0,0,0.3);
+  display: flex;
+  align-items: center;
+}
+
+.badge {
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.badge.success { background: #22c55e; color: #fff; }
+.badge.error { background: #ef4444; color: #fff; }
+
+.result-content {
+  padding: 16px;
   white-space: pre-wrap;
 }
+
+.result-explanation {
+  padding: 12px;
+  background: #334155;
+  font-family: var(--vp-font-family-base);
+  font-size: 13px;
+  border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
index 00ba3c0..56da8e1 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
@@ -1,194 +1,231 @@
 <!--
-  ApiDocumentDemo.vue - 简化版
-  目标：用简单的示例展示如何阅读 API 文档
+  ApiDocumentDemo.vue - 翻译版
+  目标：一键把"黑话"翻译成"人话"
 -->
 <template>
   <div class="demo">
-    <div class="title">📖 怎么读 API 文档？</div>
-    <p class="subtitle">找到这 3 个信息就够了</p>
+    <div class="header">
+      <div class="title-area">
+        <span class="icon">📖</span>
+        <span class="title">API 文档翻译机</span>
+      </div>
+      <button class="translate-btn" @click="isHuman = !isHuman">
+        {{ isHuman ? '🔄 还原回黑话' : '✨ 翻译成人话' }}
+      </button>
+    </div>
 
-    <div class="doc-example">
-      <div class="doc-header">API 文档示例</div>
-      <div class="doc-body">
-        <div class="section">
-          <div class="section-title">📍 1️⃣ 入口在哪</div>
-          <div class="section-content">
-            <code>GET /api/users/{id}</code>
-            <p class="hint">这就是你要调用的"按钮"</p>
-          </div>
+    <div class="doc-container">
+      <!-- 模拟 API 文档 -->
+      <div class="api-doc">
+        <div class="doc-row method-row">
+          <span class="label">Method:</span>
+          <span class="value method" :class="{ human: isHuman }">
+            {{ isHuman ? '我要下单 (POST)' : 'POST' }}
+          </span>
         </div>
 
-        <div class="section">
-          <div class="section-title">📝 2️⃣ 要填什么</div>
-          <div class="section-content">
-            <div class="param">
-              <span class="param-name">id</span>
-              <span class="param-desc">用户编号（必填）</span>
+        <div class="doc-row url-row">
+          <span class="label">Endpoint:</span>
+          <span class="value url" :class="{ human: isHuman }">
+            {{ isHuman ? '去哪里找厨师' : 'https://api.deepseek.com/chat' }}
+          </span>
+        </div>
+
+        <div class="doc-row headers-row">
+          <span class="label">Headers:</span>
+          <div class="code-block" :class="{ human: isHuman }">
+            <div class="line">
+              <span class="key">{{ isHuman ? '我是谁:' : 'Authorization:' }}</span>
+              <span class="val">{{ isHuman ? ' 这是我的会员卡号' : ' Bearer sk-8f9s...' }}</span>
+            </div>
+            <div class="line">
+              <span class="key">{{ isHuman ? '用什么语言:' : 'Content-Type:' }}</span>
+              <span class="val">{{ isHuman ? ' 标准格式(JSON)' : ' application/json' }}</span>
             </div>
-            <p class="hint">你需要提供这个参数</p>
           </div>
         </div>
 
-        <div class="section">
-          <div class="section-title">✅ 3️⃣ 会得到什么</div>
-          <div class="section-content">
-            <pre><code>{
-  "id": "123",
-  "name": "张三",
-  "email": "zhang@example.com"
-}</code></pre>
-            <p class="hint">成功时返回的数据格式</p>
+        <div class="doc-row body-row">
+          <span class="label">Body:</span>
+          <div class="code-block" :class="{ human: isHuman }">
+            <div class="line">{</div>
+            <div class="line indent">
+              <span class="key">"model":</span>
+              <span class="val">"deepseek-chat",</span>
+              <span class="comment" v-if="isHuman"> // 选个聪明的厨师</span>
+            </div>
+            <div class="line indent">
+              <span class="key">"messages":</span>
+              <span class="val">[...]</span>
+              <span class="comment" v-if="isHuman"> // 我要说的话</span>
+            </div>
+            <div class="line">}</div>
+          </div>
+        </div>
+
+        <div class="doc-row response-row">
+          <span class="label">Response:</span>
+          <div class="code-block" :class="{ human: isHuman }">
+             <div class="line">
+              <span class="key">{{ isHuman ? '状态:' : 'Status:' }}</span>
+              <span class="status-ok">{{ isHuman ? '搞定了 (200)' : '200 OK' }}</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
-
-    <div class="tips">
-      <p><strong>💡 小贴士：</strong></p>
-      <ul>
-        <li>先确认这个 API 是不是你需要的</li>
-        <li>再看要填什么参数（必填 vs 可选）</li>
-        <li>最后看返回什么、失败会怎样</li>
-      </ul>
-    </div>
   </div>
 </template>
 
 <script setup>
-// 无需脚本逻辑
+import { ref } from 'vue'
+
+const isHuman = ref(false)
 </script>
 
 <style scoped>
 .demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
-  margin: 16px 0;
+  margin: 24px 0;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
+}
+
+.header {
+  padding: 16px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-area {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.icon {
+  font-size: 24px;
 }
 
 .title {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
+  font-weight: 600;
+  font-size: 16px;
 }
 
-.subtitle {
-  color: var(--vp-c-text-2);
-  margin-bottom: 16px;
+.translate-btn {
+  background: var(--vp-c-brand-1);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
 }
 
-.doc-example {
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 12px;
-  overflow: hidden;
-  margin-bottom: 16px;
+.translate-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
 }
 
-.doc-header {
-  background: var(--vp-c-bg-soft);
-  padding: 12px 16px;
-  font-weight: bold;
-  font-size: 14px;
-  border-bottom: 1px solid var(--vp-c-divider);
+.doc-container {
+  padding: 20px;
 }
 
-.doc-body {
-  padding: 16px;
-}
-
-.section {
-  margin-bottom: 16px;
-  padding: 12px;
-  background: var(--vp-c-bg-soft);
+.api-doc {
+  background: #1e293b;
   border-radius: 8px;
+  padding: 20px;
+  color: #e2e8f0;
+  font-family: monospace;
+  font-size: 14px;
 }
 
-.section:last-child {
+.doc-row {
+  display: flex;
+  margin-bottom: 16px;
+  align-items: flex-start;
+}
+
+.doc-row:last-child {
   margin-bottom: 0;
 }
 
-.section-title {
+.label {
+  width: 80px;
+  color: #94a3b8;
   font-weight: bold;
-  font-size: 14px;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
+  flex-shrink: 0;
+  padding-top: 2px;
 }
 
-.section-content {
-  margin-left: 0;
+.value {
+  color: #38bdf8;
+  transition: all 0.3s;
 }
 
-code {
-  background: #1e293b;
-  color: #e2e8f0;
-  padding: 4px 8px;
+.method {
+  font-weight: bold;
+  color: #eab308;
+}
+
+.method.human {
+  color: #fbbf24;
+  background: rgba(251, 191, 36, 0.1);
+  padding: 2px 6px;
   border-radius: 4px;
-  font-family: 'Monaco', 'Menlo', monospace;
-  font-size: 13px;
 }
 
-.hint {
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--vp-c-text-2);
+.url.human {
+  color: #38bdf8;
+  background: rgba(56, 189, 248, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.code-block {
+  flex: 1;
+  background: #0f172a;
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid #334155;
+  transition: all 0.3s;
+}
+
+.code-block.human {
+  background: #1e293b;
+  border-color: #64748b;
+}
+
+.line {
+  line-height: 1.6;
+}
+
+.indent {
+  padding-left: 20px;
+}
+
+.key {
+  color: #94a3b8;
+}
+
+.val {
+  color: #a5f3fc;
+}
+
+.comment {
+  color: #22c55e;
   font-style: italic;
 }
 
-.param {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.param-name {
-  background: #dbeafe;
-  color: #1e40af;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-family: 'Monaco', 'Menlo', monospace;
-  font-size: 12px;
+.status-ok {
+  color: #22c55e;
   font-weight: bold;
 }
-
-.param-desc {
-  font-size: 13px;
-  color: var(--vp-c-text-1);
-}
-
-pre {
-  background: #1e293b;
-  border-radius: 6px;
-  padding: 12px;
-  overflow-x: auto;
-  margin: 8px 0;
-}
-
-pre code {
-  background: transparent;
-  padding: 0;
-  color: #e2e8f0;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.tips {
-  background: var(--vp-c-bg);
-  padding: 16px;
-  border-radius: 8px;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--vp-c-text-2);
-}
-
-.tips ul {
-  margin: 8px 0 0 20px;
-}
-
-.tips li {
-  margin: 4px 0;
-}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
index 00db03f..6f587e5 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
@@ -1,57 +1,82 @@
 <!--
-  ApiPlayground.vue - 简化版
-  目标：用最简单的演示展示 API 调用的各种情况
+  ApiPlayground.vue - 闯关版
+  目标：通过"通关"的方式让用户体验 401/404/200
 -->
 <template>
   <div class="demo">
-    <div class="title">🎮 练习场：试试调用 API</div>
-    <p class="subtitle">体验一下成功和失败的情况</p>
+    <div class="header">
+      <span class="icon">🎮</span>
+      <span class="title">练手场：搞崩它，再修好它</span>
+    </div>
 
     <div class="playground">
-      <div class="controls">
-        <div class="control-group">
-          <label>🔑 钥匙（API Key）：</label>
-          <button
-            :class="['toggle', { active: hasKey }]"
-            @click="hasKey = !hasKey"
-          >
-            {{ hasKey ? '✅ 有钥匙' : '❌ 没有钥匙' }}
+      <!-- 控制台 -->
+      <div class="console">
+        <div class="console-header">
+          <div class="dots">
+            <span></span><span></span><span></span>
+          </div>
+          <span class="console-title">API Console</span>
+        </div>
+        
+        <div class="console-body">
+          <div class="input-group">
+            <label>METHOD</label>
+            <select v-model="method" class="method-select" :class="method">
+              <option value="GET">GET</option>
+              <option value="POST">POST</option>
+            </select>
+          </div>
+
+          <div class="input-group">
+            <label>URL</label>
+            <div class="url-input-wrapper">
+              <span class="host">https://api.game.com</span>
+              <input v-model="path" type="text" class="url-input" placeholder="/users/1" />
+            </div>
+          </div>
+
+          <div class="input-group">
+            <label>HEADERS</label>
+            <div class="code-editor">
+              Authorization: <input v-model="token" placeholder="(空)" class="code-input" />
+            </div>
+          </div>
+
+          <button class="send-btn" @click="sendRequest" :disabled="loading">
+            {{ loading ? 'Sending...' : 'SEND REQUEST' }}
           </button>
         </div>
-
-        <div class="control-group">
-          <label>📍 用户 ID：</label>
-          <input
-            v-model="userId"
-            class="input"
-            placeholder="例如：u_123"
-          />
-        </div>
-
-        <button class="call-btn" :disabled="calling" @click="callApi">
-          {{ calling ? '调用中...' : '🚀 调用 API' }}
-        </button>
       </div>
 
-      <div class="result-area">
-        <div v-if="!result" class="placeholder">
-          还没有结果。点一下"调用 API"试试！
-        </div>
-        <div v-else class="result" :class="result.type">
-          <div class="result-header">
-            {{ result.type === 'success' ? '✅ 成功' : '❌ 失败' }}
-          </div>
-          <div class="result-body">{{ result.message }}</div>
+      <!-- 任务区 -->
+      <div class="mission-panel">
+        <div class="mission-title">👇 点这些按钮试错</div>
+        <div class="scenarios">
+          <button class="scenario-btn error-401" @click="loadScenario('401')">
+            1. 没带钥匙 (401)
+          </button>
+          <button class="scenario-btn error-404" @click="loadScenario('404')">
+            2. 找错人了 (404)
+          </button>
+          <button class="scenario-btn success-200" @click="loadScenario('200')">
+            3. 成功通关 (200)
+          </button>
         </div>
       </div>
 
-      <div class="tips">
-        <p><strong>💡 玩法建议：</strong></p>
-        <ul>
-          <li>试试把"钥匙"改成"没有钥匙"，看看会发生什么</li>
-          <li>试试把 ID 改成 <code>u_404</code>，看看会怎样</li>
-          <li>连续快速点击，看看"限流"提示</li>
-        </ul>
+      <!-- 结果区 -->
+      <div class="result-area" v-if="result">
+        <div class="status-bar" :class="result.statusClass">
+          <span class="status-code">{{ result.code }}</span>
+          <span class="status-text">{{ result.text }}</span>
+        </div>
+        <div class="response-preview">
+          {{ result.data }}
+        </div>
+        <div class="result-tip">
+          <strong>💡 现象解析：</strong> {{ result.tip }}
+        </div>
       </div>
     </div>
   </div>
@@ -60,71 +85,77 @@
 <script setup>
 import { ref } from 'vue'
 
-const hasKey = ref(true)
-const userId = ref('u_123')
-const calling = ref(false)
+const method = ref('GET')
+const path = ref('/secret-treasure')
+const token = ref('')
+const loading = ref(false)
 const result = ref(null)
-const callCount = ref([])
-const now = ref(Date.now())
 
-function callApi() {
-  calling.value = true
+function loadScenario(type) {
   result.value = null
-
-  // 模拟限流
-  const currentTime = Date.now()
-  callCount.value = callCount.value.filter(t => currentTime - t < 2000)
-  callCount.value.push(currentTime)
-
-  if (callCount.value.length >= 4) {
-    setTimeout(() => {
-      result.value = {
-        type: 'error',
-        message: '太频繁了！请慢一点再试（限流）'
-      }
-      calling.value = false
-    }, 300)
-    return
+  if (type === '401') {
+    method.value = 'GET'
+    path.value = '/secret-treasure'
+    token.value = '' // Empty token
+  } else if (type === '404') {
+    method.value = 'GET'
+    path.value = '/nothing-here'
+    token.value = 'Bearer my-secret-key'
+  } else if (type === '200') {
+    method.value = 'GET'
+    path.value = '/secret-treasure'
+    token.value = 'Bearer my-secret-key'
   }
+}
 
+function sendRequest() {
+  loading.value = true
+  result.value = null
+  
   setTimeout(() => {
-    // 检查钥匙
-    if (!hasKey.value) {
+    loading.value = false
+    
+    // Logic
+    if (path.value === '/nothing-here') {
       result.value = {
-        type: 'error',
-        message: '没有钥匙！你没有权限调用这个 API（401 未授权）'
+        code: 404,
+        text: 'Not Found',
+        statusClass: 'error',
+        data: 'Error: The resource "/nothing-here" does not exist.',
+        tip: '请求的路径不存在。服务器无法找到对应的资源，因此返回 404 状态码。'
       }
-      calling.value = false
       return
     }
 
-    // 检查用户 ID
-    const id = userId.value.trim()
-    if (!id) {
+    if (!token.value || token.value.trim() === '') {
       result.value = {
-        type: 'error',
-        message: '你还没填用户 ID！'
+        code: 401,
+        text: 'Unauthorized',
+        statusClass: 'error',
+        data: 'Error: Missing authentication token.',
+        tip: '请求头中缺少鉴权 Token。服务器无法识别身份，因此拒绝访问并返回 401。'
       }
-      calling.value = false
       return
     }
 
-    if (id === 'u_404') {
+    if (path.value === '/secret-treasure') {
       result.value = {
-        type: 'error',
-        message: '找不到这个用户！ID 不存在（404）'
+        code: 200,
+        text: 'OK',
+        statusClass: 'success',
+        data: '🎉 Congratulations! You found the secret treasure: [Gold, Diamond, Ruby]',
+        tip: '请求成功。路径正确且鉴权通过，服务器正常返回了数据。'
+      }
+    } else {
+       result.value = {
+        code: 404,
+        text: 'Not Found',
+        statusClass: 'error',
+        data: 'Error: Resource not found.',
+        tip: '路径错误。'
       }
-      calling.value = false
-      return
     }
-
-    // 成功
-    result.value = {
-      type: 'success',
-      message: `成功获取用户信息：\nID: ${id}\n姓名: 张三\n邮箱: zhang@example.com`
-    }
-    calling.value = false
-  }, 800)
+  }, 500)
 }
 </script>
 
@@ -132,175 +163,227 @@ function callApi() {
 .demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
-  margin: 16px 0;
+  margin: 24px 0;
+  overflow: hidden;
 }
 
-.title {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  color: var(--vp-c-text-2);
-  margin-bottom: 16px;
+.header {
+  padding: 12px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
 }
 
 .playground {
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 12px;
   padding: 20px;
 }
 
-.controls {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.console {
+  background: #1e293b;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
 }
 
-.control-group {
+.console-header {
+  background: #0f172a;
+  padding: 8px 12px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.control-group label {
-  font-weight: bold;
-  font-size: 14px;
-  min-width: 120px;
+.dots {
+  display: flex;
+  gap: 6px;
 }
 
-.toggle {
-  padding: 8px 16px;
-  border: 2px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  cursor: pointer;
+.dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #334155;
+}
+.dots span:nth-child(1) { background: #ef4444; }
+.dots span:nth-child(2) { background: #eab308; }
+.dots span:nth-child(3) { background: #22c55e; }
+
+.console-title {
+  color: #94a3b8;
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.console-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.input-group label {
+  display: block;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: bold;
+  margin-bottom: 6px;
+  font-family: monospace;
+}
+
+.method-select {
+  background: #334155;
+  color: #fff;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.method-select.GET { color: #22c55e; }
+.method-select.POST { color: #eab308; }
+
+.url-input-wrapper {
+  display: flex;
+  align-items: center;
+  background: #0f172a;
+  border-radius: 4px;
+  border: 1px solid #334155;
+  padding-left: 12px;
+}
+
+.host {
+  color: #64748b;
   font-size: 13px;
-  font-weight: bold;
-  transition: all 0.2s;
+  font-family: monospace;
 }
 
-.toggle.active {
-  border-color: #22c55e;
-  background: #dcfce7;
-  color: #166534;
-}
-
-.input {
+.url-input {
   flex: 1;
-  padding: 8px 12px;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  font-size: 14px;
-  background: var(--vp-c-bg-soft);
+  background: transparent;
+  border: none;
+  color: #fff;
+  padding: 8px;
+  font-family: monospace;
+  font-size: 13px;
 }
 
-.call-btn {
-  width: 100%;
-  padding: 12px 20px;
-  background: var(--vp-c-brand-1);
+.code-editor {
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 4px;
+  padding: 8px 12px;
+  color: #eab308;
+  font-family: monospace;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+}
+
+.code-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #fff;
+  margin-left: 8px;
+  font-family: monospace;
+}
+
+.send-btn {
+  background: #3b82f6;
   color: white;
   border: none;
-  border-radius: 8px;
-  font-size: 16px;
+  padding: 10px;
+  border-radius: 4px;
   font-weight: bold;
   cursor: pointer;
+  font-family: monospace;
   transition: all 0.2s;
 }
 
-.call-btn:hover:not(:disabled) {
-  opacity: 0.9;
+.send-btn:hover {
+  background: #2563eb;
 }
 
-.call-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.result-area {
-  min-height: 120px;
+.mission-panel {
   margin-bottom: 20px;
 }
 
-.placeholder {
-  padding: 20px;
-  text-align: center;
+.mission-title {
+  font-size: 13px;
   color: var(--vp-c-text-2);
-  font-style: italic;
+  margin-bottom: 10px;
+  font-weight: 600;
 }
 
-.result {
-  border: 2px solid;
-  border-radius: 8px;
-  overflow: hidden;
+.scenarios {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
-.result.success {
-  border-color: #22c55e;
-  background: #f0fdf4;
+.scenario-btn {
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  background: var(--vp-c-bg);
+  transition: all 0.2s;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 
-.result.error {
-  border-color: #ef4444;
-  background: #fef2f2;
+.scenario-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-.result-header {
-  padding: 12px 16px;
+.error-401 { color: #ef4444; border-color: rgba(239,68,68,0.2); }
+.error-404 { color: #f97316; border-color: rgba(249,115,22,0.2); }
+.success-200 { color: #22c55e; border-color: rgba(34,197,94,0.2); }
+
+.result-area {
+  animation: slideUp 0.3s ease;
+}
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: 6px 6px 0 0;
   font-weight: bold;
+  font-family: monospace;
+}
+
+.status-bar.success { background: #dcfce7; color: #166534; }
+.status-bar.error { background: #fee2e2; color: #991b1b; }
+
+.response-preview {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 16px;
+  font-family: monospace;
+  font-size: 13px;
+  border-left: 1px solid #334155;
+  border-right: 1px solid #334155;
+}
+
+.result-tip {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-top: none;
+  padding: 12px;
+  border-radius: 0 0 6px 6px;
   font-size: 14px;
 }
 
-.result.success .result-header {
-  background: #dcfce7;
-  color: #166534;
-}
-
-.result.error .result-header {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.result-body {
-  padding: 12px 16px;
-  font-size: 13px;
-  white-space: pre-line;
-  line-height: 1.6;
-}
-
-.tips {
-  background: var(--vp-c-bg-soft);
-  padding: 16px;
-  border-radius: 8px;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.tips p {
-  margin-bottom: 8px;
-}
-
-.tips ul {
-  margin: 0;
-  padding-left: 20px;
-}
-
-.tips li {
-  margin: 4px 0;
-}
-
-.tips code {
-  background: #1e293b;
-  color: #e2e8f0;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'Monaco', 'Menlo', monospace;
-  font-size: 12px;
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
index ca09088..3619743 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
@@ -1,30 +1,40 @@
 <!--
-  ApiQuickStartDemo.vue - 简化版
-  目标：用最简单的交互展示 API 调用流程
+  ApiQuickStartDemo.vue - 演示版
+  目标：展示最简单的 API 调用流程
 -->
 <template>
   <div class="demo">
-    <div class="title">🎮 试试看：调用一次 API</div>
-    <p class="subtitle">点一下按钮，看看会发生什么</p>
+    <div class="header">
+      <span class="icon">💡</span>
+      <span class="title">试试看：获取一条技术格言</span>
+    </div>
+    
+    <div class="content">
+      <div class="action-area">
+        <button class="call-btn" :disabled="calling" @click="callApi">
+          <span v-if="!calling">📡 发起 API 请求</span>
+          <span v-else>🔄 请求处理中...</span>
+        </button>
+      </div>
 
-    <div class="box">
-      <button class="call-btn" :disabled="calling" @click="callApi">
-        {{ calling ? '调用中...' : '🔘 点我调用 API' }}
-      </button>
-
-      <div class="result" v-if="result">
-        <div class="success" v-if="result.success">
-          ✅ 成功！API 返回了：{{ result.data }}
+      <div class="result-area" v-if="result || calling">
+        <div class="loading-dots" v-if="calling">
+          <span>.</span><span>.</span><span>.</span>
         </div>
-        <div class="error" v-else>
-          ❌ 失败了：{{ result.error }}
+        <div class="response-card" v-else-if="result">
+          <div class="response-header">
+            <span class="status-badge success">200 OK</span>
+            <span class="time">耗时: 230ms</span>
+          </div>
+          <div class="response-body">
+            {{ result.data }}
+          </div>
         </div>
       </div>
     </div>
 
-    <div class="explain">
-      <p><strong>你看：</strong>你只需要点一下按钮（调用 API），就会得到结果。</p>
-      <p>这就是 API 的本质：<strong>按约定把请求交给对方，对方按约定把结果给你</strong>。</p>
+    <div class="footer">
+      <p>👆 <strong>流程演示：</strong> 点击按钮 -> 发送请求 -> 服务器处理 -> 返回数据。</p>
     </div>
   </div>
 </template>
@@ -35,15 +45,24 @@ import { ref } from 'vue'
 const calling = ref(false)
 const result = ref(null)
 
+const quotes = [
+  "Talk is cheap. Show me the code. — Linus Torvalds",
+  "Programs must be written for people to read, and only incidentally for machines to execute. — Abelson & Sussman",
+  "Truth can only be found in one place: the code. — Robert C. Martin",
+  "Simplicity is the soul of efficiency. — Austin Freeman",
+  "Code is like humor. When you have to explain it, it’s bad. — Cory House"
+]
+
 function callApi() {
   calling.value = true
   result.value = null
 
-  // 模拟 API 调用
+  // 模拟 API 网络延迟
   setTimeout(() => {
+    const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]
     result.value = {
       success: true,
-      data: 'Hello from API!'
+      data: randomQuote
     }
     calling.value = false
   }, 800)
@@ -54,79 +73,125 @@ function callApi() {
 .demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
-  margin: 16px 0;
+  margin: 24px 0;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+
+.header {
+  padding: 16px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon {
+  font-size: 24px;
 }
 
 .title {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
+  font-weight: 600;
+  font-size: 16px;
 }
 
-.subtitle {
-  color: var(--vp-c-text-2);
-  margin-bottom: 16px;
-}
-
-.box {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
-  text-align: center;
+.content {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  min-height: 160px;
+  justify-content: center;
 }
 
 .call-btn {
-  background: var(--vp-c-brand-1);
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
   color: white;
   border: none;
-  padding: 12px 24px;
+  padding: 12px 32px;
   font-size: 16px;
-  font-weight: bold;
-  border-radius: 8px;
+  font-weight: 600;
+  border-radius: 50px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.5);
 }
 
 .call-btn:hover:not(:disabled) {
-  opacity: 0.9;
-  transform: scale(1.05);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px -1px rgba(59, 130, 246, 0.6);
 }
 
 .call-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+  opacity: 0.7;
+  cursor: wait;
+  transform: scale(0.98);
 }
 
-.result {
-  margin-top: 16px;
-  padding: 12px;
+.result-area {
+  width: 100%;
+  max-width: 400px;
+}
+
+.response-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  font-size: 14px;
+  padding: 16px;
+  animation: slideUp 0.3s ease-out;
 }
 
-.success {
+.response-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.status-badge {
   background: #dcfce7;
   color: #166534;
-  border: 1px solid #86efac;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: bold;
 }
 
-.error {
-  background: #fee2e2;
-  color: #991b1b;
-  border: 1px solid #fca5a5;
+.response-body {
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--vp-c-text-1);
 }
 
-.explain {
-  margin-top: 16px;
-  padding: 12px;
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  font-size: 14px;
-  line-height: 1.6;
+.loading-dots span {
+  animation: blink 1.4s infinite both;
+  font-size: 24px;
+  margin: 0 2px;
+}
+
+.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
+.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+.footer {
+  padding: 12px 20px;
+  background: rgba(0,0,0,0.02);
+  border-top: 1px solid var(--vp-c-divider);
+  font-size: 13px;
   color: var(--vp-c-text-2);
+  text-align: center;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes blink {
+  0% { opacity: 0.2; }
+  20% { opacity: 1; }
+  100% { opacity: 0.2; }
 }
 </style>
diff --git a/docs/zh-cn/appendix/api-intro.md b/docs/zh-cn/appendix/api-intro.md
index 8c5fc24..508c672 100644
--- a/docs/zh-cn/appendix/api-intro.md
+++ b/docs/zh-cn/appendix/api-intro.md
@@ -1,382 +1,152 @@
-# API 入门（0 基础版）
+# API 入门：怎么跟计算机"说人话"？
 
-> 💡 **学习指南**：本章节无需编程基础，通过交互式演示和生动比喻带你深入理解 API 的核心概念。我们将从"餐厅点餐"这个生活场景讲起，一步步揭开 API 的神秘面纱。
+> 💡 **写在前面**：这一章不教写代码，只教**"怎么跟别人的软件打交道"**。
+> 
+> 你可能听说过 "API" 这个词一万次了，但它到底是个啥？别被它的英文全称吓到，把它当成**"连接器"**或者**"传声筒"**就好。
 
 <ApiQuickStartDemo />
 
-## 0. 引言：从餐厅点餐到软件协作
+## 0. 为什么需要 API？
 
-想象一下，你走进一家餐厅：
+想象一下，你想用 DeepSeek 的 AI 能力，但 DeepSeek 的核心程序跑在他们自家机房的超级电脑里。
+你总不能直接跑去他们机房，插上键盘敲代码吧？
 
-1. **你**（顾客）拿着菜单，告诉服务员："我要一份宫保鸡丁，加辣。"
-2. **服务员**（接口）把你的要求记下来，送到厨房。
-3. **厨房**（对方的系统）根据要求做菜。
-4. **服务员**把做好的菜端给你。
+所以，DeepSeek 需要开一个**"窗口"**，让你在千里之外也能用上他们的 AI。
 
-在这个过程中，**你不需要知道**：
-- 厨房有几个厨师
-- 他们用什么锅铲炒菜
-- 蔬菜是从哪个市场买的
-- 厨师今天心情好不好
-
-**你只需要知道**：
-- 怎么点菜（喊服务员或填单子）
-- 要告诉对方什么（菜名、口味要求）
-- 会得到什么（你点的菜）
-
-**这就是 API 的本质**：它就像餐厅的**服务员**，是你和"对方的系统"之间的**桥梁**。
-
-> **API（Application Programming Interface）** = **应用之间的"接口/入口"**：你按约定把请求交给对方，对方按约定把结果给你。
+这个**"窗口"**，就是 **API**。
 
 ---
 
-## 1. 核心：API 的三个关键问题
+## 1. 核心概念：餐厅里的潜规则
 
-就像去餐厅点菜一样，使用 API 时你只需要搞清楚 3 个问题：
+为了让你秒懂，我们还是得请出那位经典的**"服务员"**。
+但这次我们换个角度：**你是一个只会吃、不会做的顾客**（就像我们只会用 AI、不会写 AI 模型一样）。
 
-### 1.1 怎么点菜？（入口在哪里）
+### 1.1 你面临的三个问题
 
-你首先得知道"怎么叫服务员"。在软件世界里，入口通常有两种：
+当你走进一家外国餐厅（陌生的软件系统），你只想吃饱，但你面临三个问题：
 
-- **HTTP API**：像一个"网址"，你发送网络请求过去
-  - 例如：`https://api.example.com/getUser`
-- **SDK/API**：像一个"函数名"，你在代码里直接调用
-  - 例如：`getUserInfo(userId)`
+1.  **跟谁说？**（谁是服务员？）
+2.  **怎么说？**（用中文还是英文？要填单子还是直接喊？）
+3.  **结果咋样？**（菜上了还是卖完了？）
 
-### 1.2 要说什么？（你要填什么信息）
+在 API 的世界里，这三个问题对应了三个术语：
 
-你不能只说"我要菜"，你得告诉服务员：
-- 你要什么菜？（模型名称）
-- 有什么要求？（提示词、参数）
-- 你是谁？（API Key，相当于会员卡）
+| 餐厅里的问题 | 计算机里的术语 | 黑话 (行话) |
+| :--- | :--- | :--- |
+| **跟谁说？** | **Endpoint (端点)** | "接口地址"、"URL" |
+| **怎么说？** | **Request (请求)** | "传参"、"Payload" |
+| **结果咋样？** | **Response (响应)** | "返回值"、"返回包" |
 
-### 1.3 会得到什么？（成功/失败的结果）
+### 1.2 互动演示：点一道 AI 料理
 
-服务员可能会端来：
-- ✅ 你点的菜（成功返回的数据）
-- ❌ "不好意思，这道菜卖完了"（错误提示，比如 404、500）
+别光看字，来亲自试一下"点菜"的感觉。
+下面这个小工具模拟了你向 AI **"点一道笑话"** 的过程。
 
 <ApiConceptDemo />
 
-### 1.4 API 的核心价值：把复杂度藏起来
-
-回到餐厅的比喻：
-
-**餐厅**需要做的事情（实现细节）：
-- 采购食材、处理库存
-- 安排厨师、协调后厨
-- 控制火候、调味摆盘
-- 清洗餐具、打扫卫生
-
-**顾客**完全不需要知道这些！顾客只需要：
-- 看菜单点菜
-- 等菜上桌
-- 享用美食
-
-**API 就像菜单和服务员**，它把"怎么做"的复杂度全部藏起来，只暴露"怎么用"的简单接口。
-
-这就带来两个好处：
-1. **简化使用**：调用者不需要理解内部实现
-2. **灵活变更**：餐厅换了厨师、改了做法，但菜单不变，顾客完全无感
-
 ---
 
-## 2. 两种常见的 API 形式
+## 2. 两种"点菜"流派：外卖 vs 堂食
 
-在现实世界里，你会遇到两种"点菜方式"：
+你在教程里经常会看到两种调用方式：**HTTP** 和 **SDK**。
+很多新手会被绕晕，其实它们就是**"点外卖"**和**"堂食"**的区别。
 
-### 2.1 外卖配送（HTTP API）
+### 2.1 HTTP API（点外卖）
 
-你不用亲自去餐厅，只需要：
-1. 打开外卖 APP（找到入口：网址）
-2. 选好菜品、填好地址（准备请求：参数）
-3. 等外卖员送到（接收响应：数据）
+这是最原始、最通用的方式。就像**填一张外卖单子**。
 
-**HTTP API** 就是这种方式：通过网络发送请求，等待返回结果。
+*   **特点**：**死板但通用**。
+*   **怎么做**：你需要严格按照格式，填好地址（URL）、选好菜（参数）、贴好邮票（API Key），然后通过网络发出去。
+*   **谁在用**：所有编程语言都能用，甚至你在浏览器地址栏里敲一行字也是一种 HTTP 请求。
 
-**流程是这样的**：
-```
-你的电脑 → 发送请求 → 网络传输 → 对方服务器
-                        ↓
-                  处理你的请求
-                        ↓
-你的电脑 ← 接收结果 ← 网络传输 ← 对方服务器
-```
+### 2.2 SDK（堂食/VIP服务）
 
-<RequestResponseFlow />
+SDK (Software Development Kit) 就像是餐厅派给你的**专属管家**。
 
-**举个例子**：调用 AI 模型生成文本
-- 你发送："帮我写一首关于春天的诗"
-- 对方处理：调用大语言模型生成
-- 你接收：返回生成的诗歌
-
-### 2.2 餐堂堂食（SDK/API）
-
-你走进餐厅，直接对服务员说：
-- "来一份宫保鸡丁"
-
-**SDK（软件开发工具包）** 就像是餐厅的"服务员"，它已经在餐厅里了，你只需要说话（调用函数），它会帮你：
-- 把要求转达给厨房（内部帮你调用 HTTP API）
-- 处理各种复杂细节（鉴权、重试、数据格式）
-- 最后把结果整理好给你
-
-**所以你会听到两种说法**：
-- "调用这个服务的 API"（通常指 HTTP API，像外卖）
-- "调用这个 SDK 的 API"（通常指函数接口，像堂食）
-
----
-
-## 3. 真实世界：怎么和 AI 服务"对话"
-
-让我们看一个真实的例子：调用 AI 模型。
-
-**场景**：你想让 AI 帮你写一段产品文案。
-
-### 3.1 用 HTTP API 的方式（外卖模式）
-
-就像发外卖订单一样，你需要：
-
-```bash
-# 1. 打开外卖 APP（找到网址）
-curl https://api.openai.com/v1/chat/completions
-
-# 2. 选好菜品、填好地址（带上你的信息和要求）
---header 'Authorization: Bearer 你的API密钥'  # 你的会员卡
---header 'Content-Type: application/json'     # 说明你点的是菜单（JSON格式）
-
-# 3. 告诉服务员你要什么（请求内容）
---data '{
-  "model": "gpt-4",           # 选哪个厨师
-  "messages": [               # 你的要求
-    { "role": "system", "content": "你是一个营销文案专家" },
-    { "role": "user", "content": "帮我为这款智能手表写一段吸引人的产品文案" }
-  ]
-}'
-
-# 4. 等待配送（接收响应）
-# 返回：{"choices": [{"message": {"content": "生成的文案..."}}]}
-```
-
-### 3.2 用 SDK 的方式（堂食模式）
-
-就像走进餐厅直接点餐：
-
-```javascript
-// 安装 SDK（相当于走进餐厅）
-import OpenAI from 'openai';
-
-// 创建"服务员"（初始化客户端）
-const client = new OpenAI({
-  apiKey: '你的API密钥'  # 你的会员卡
-});
-
-// 直接点菜（调用函数）
-const response = await client.chat.completions.create({
-  model: 'gpt-4',           # 选哪个厨师
-  messages: [               # 你的要求
-    { role: 'system', content: '你是一个营销文案专家' },
-    { role: 'user', content: '帮我为这款智能手表写一段吸引人的产品文案' }
-  ]
-});
-
-// 享用美食（使用结果）
-console.log(response.choices[0].message.content);
-```
-
-**看出来了吗？** SDK 的方式更简单，因为它帮你处理了很多细节！
+*   **特点**：**省心但挑人**。
+*   **怎么做**：你不需要自己填单子、贴邮票。你只需要跟管家说："来份宫保鸡丁"。管家会自己在后台帮你填单子、发请求、处理报错。
+*   **谁在用**：通常针对特定语言（比如 Python 版管家、Node.js 版管家）。
 
 <RealWorldApiDemo />
 
-### 3.3 两种方式的对比
-
-| 特点 | HTTP API（外卖） | SDK API（堂食） |
-|------|------------------|-----------------|
-| **使用门槛** | 需要理解网络请求、数据格式 | 只需会调用函数 |
-| **灵活性** | 更灵活，任何语言都能用 | 通常限定特定语言 |
-| **复杂度** | 你要处理很多细节（鉴权、错误等） | SDK 帮你处理细节 |
-| **典型场景** | 跨语言调用、学习原理 | 日常开发、快速集成 |
+> **新手建议**：能用 SDK 就用 SDK，**把麻烦事留给别人，把时间留给自己**。
 
 ---
 
-## 4. 进阶：GET 和 POST 有什么区别？
+## 3. 进阶：GET 和 POST 到底有啥区别？
 
-> 🎯 **新手提示**：这一节可以暂时跳过。等你熟悉了基本调用，再回来了解也不迟。
+在看文档时，你总能看到这俩词。
+其实很简单，就看**"你是否想改变世界"**。
 
-<details>
-<summary>点我展开：进阶内容（用人话讲）</summary>
+### 3.1 GET：只看不买
 
-在 HTTP API 的世界里，你会经常看到 **GET** 和 **POST** 这两个词。它们就像两种不同的"点菜方式"。
+*   **含义**：**获取**信息。
+*   **场景**：刷朋友圈、看新闻、查天气。
+*   **特点**：你做这件事一万次，服务器里的数据也不会变（除了访问量+1）。
+*   **比喻**：你看菜单，看一眼是看，看一百眼还是看，菜单不会变。
 
-### 4.1 GET：像看菜单（只看不吃）
+### 3.2 POST：搞点事情
 
-**特点**：
-- 只是想"获取"信息，不会改变服务器状态
-- 就像在餐厅看菜单，你看一遍菜单，厨房的菜不会被消耗
-- **可以安全重试**：看一遍菜单没看清，再看一遍，没问题
-
-**例子**：
-- 查询用户信息：`GET /api/user/123`
-- 搜索商品：`GET /api/products?keyword=手机`
-- 获取文章列表：`GET /api/articles`
-
-### 4.2 POST：像下单（会真的执行）
-
-**特点**：
-- 会"创建"或"修改"服务器上的数据
-- 就像你下了单，厨房真的开始做菜了
-- **不能随意重试**：下错了单，再下一遍，你就点了双份！
-
-**例子**：
-- 创建用户：`POST /api/users`（会真的创建一个新用户）
-- 下单购买：`POST /api/orders`（会真的扣钱、发货）
-- 发表评论：`POST /api/comments`（会真的保存一条评论）
+*   **含义**：**提交**信息。
+*   **场景**：发朋友圈、注册账号、**让 AI 写文章**。
+*   **特点**：你做这件事，服务器里就会**多出**一条记录，或者**生成**一段新的内容。
+*   **比喻**：你下单点菜。你下一次单，厨房就得忙活一次，你的钱包就得瘪一次。
 
 <ApiMethodDemo />
 
-### 4.3 还有哪些方法？（简单了解）
-
-除了 GET 和 POST，还有：
-- **PUT**：更新（替换整个资源）
-- **PATCH**：打补丁（更新部分字段）
-- **DELETE**：删除
-
-**新手建议**：先学会用 GET 和 POST，其他的慢慢来。
-
-</details>
-
 ---
 
-## 5. 怎么读 API 文档？（像看菜单一样简单）
+## 4. 怎么看 API 文档？
 
-API 文档就像餐厅的**菜单 + 说明书**，告诉你：
-- 有哪些菜可以点（提供哪些功能）
-- 每道菜是什么（接口说明）
-- 怎么点（怎么调用）
-- 什么价格（返回什么数据）
-- 有没有忌口/限量（注意事项）
+文档就像**"说明书 + 菜单"**。
+你不需要从头读到尾，只需要学会**"查字典"**。
+
+### 4.1 文档里的"藏宝图"
+
+打开任何一个 API 文档（比如 OpenAI 或 DeepSeek），你只需要找这几样东西：
+
+1.  **Base URL**：根地址（餐厅在哪？）。
+2.  **Authentication**：怎么证明你是会员？（通常是加个 `Authorization: Bearer sk-...` 头）。
+3.  **Endpoints**：具体的菜品列表。
+    *   `/v1/chat/completions` -> 对话（最常用的）
+    *   `/v1/images/generations` -> 画图
+4.  **Parameters**：必填项有哪些？
+    *   `model`: 选哪个厨师？
+    *   `messages`: 你想聊啥？
 
 <ApiDocumentDemo />
 
-### 5.1 阅读 API 文档的 5 步法
+### 4.2 常见的"餐厅黑话"（状态码）
 
-就像看菜单点菜一样，按这个流程来：
+服务员（API）回复你的时候，通常会先喊一个数字代码：
 
-**第 1 步：确认这道菜是不是你要的**
-- 这个接口能做什么？
-- 符合你的需求吗？
-
-**第 2 步：找到"点菜入口"**
-- HTTP API：网址（URL）是什么？
-- SDK：函数名是什么？
-
-**第 3 步：看看要填什么信息**
-- **必填项**：就像"必须选辣度/份量"，不填不行
-- **可选项**：就像"要不要加葱花"，可以不填
-- **默认值**：就像"默认中辣"，你不填就按这个来
-
-**第 4 步：看看会端上来什么**
-- 成功时返回什么数据？
-- 字段代表什么意思？
-- 可能是空的吗？
-
-**第 5 步：了解"餐厅规则"**
-- 没钱了会怎样？（余额不足）
-- 点太快会怎样？（限流/Rate Limit）
-- 菜卖完了会怎样？（404 资源不存在）
-- 厨房出错会怎样？（500 服务器错误）
-
-### 5.2 常见的状态码（就像餐厅的回复）
-
-| 状态码 | 含义 | 餐厅类比 |
-|--------|------|----------|
-| **200** | 成功 | "这是您的菜，请慢用" |
-| **400** | 请求错误 | "您点的菜我们有，但您填的信息有问题" |
-| **401** | 未授权 | "请先出示会员卡" |
-| **403** | 禁止访问 | "您的会员卡等级不够，点不了这道菜" |
-| **404** | 资源不存在 | "对不起，您点的菜卖完了" |
-| **429** | 请求过多 | "您点太快了，请稍后再试" |
-| **500** | 服务器错误 | "厨房出故障了，请稍后再试" |
+*   **200 OK**：菜齐了，慢用。（成功）
+*   **400 Bad Request**：你点的菜菜单上没有，或者你没填辣度。（你填错了）
+*   **401 Unauthorized**：会员卡过期了，或者假卡。（没权限）
+*   **404 Not Found**：找不到这道菜，或者找不到这家店。（地址错了）
+*   **429 Too Many Requests**：你点太快了，厨师炒不过来了。（限流）
+*   **500 Internal Server Error**：厨房炸了，不是你的锅。（服务器崩了）
 
 ---
 
-## 6. 实战：用"模拟 API"练出手感
+## 5. 练手场：弄坏它也没关系
 
-理论讲完了，该动手了！在真实世界里，你会用 Postman、curl 或代码去调用 API。但这里我们准备了一个"练习场"，不用担心网络问题、CORS 错误，专注于练出核心手感。
+光说不练假把式。
+这里有个模拟 API。你可以随便填参数、随便改地址，看看会发生什么。
+试着触发一下 **401**（假装没带钱）或者 **404**（瞎填地址）。
 
 <ApiPlayground />
 
-### 6.1 建议按顺序试试这些"场景"
-
-就像去餐厅"踩点"一样，试试各种情况：
-
-**场景 1：忘带会员卡**
-- 把"登录/钥匙"改成"没有"
-- 观察返回什么错误（通常是 401）
-
-**场景 2：点太快被限流**
-- 连续快速点击"调用"按钮
-- 观察返回什么错误（通常是 429）
-
-**场景 3：点菜信息填错了**
-- 选 POST 创建用户
-- 把 Body 改成非法的 JSON 格式
-- 观察返回什么错误（通常是 400）
-
-**场景 4：点的菜卖完了**
-- 把用户 ID 改成 `u_404`（不存在的用户）
-- 观察返回什么错误（通常是 404）
-
-### 6.2 练习目标
-
-通过这些练习，你要掌握：
-1. **能看懂成功响应**：知道返回的数据在哪里
-2. **能看懂错误提示**：知道为什么失败、怎么改
-3. **有手感**：知道调用 API 的基本流程
-
 ---
 
-## 7. 总结：记住这三句话就够了
+## 6. 总结
 
-### 7.1 API 的三种形式
+别把 API 想得太高大上。
+在 AI 编程的时代，你只需要记住：
 
-| 类型 | 比喻 | 特点 |
-|------|------|------|
-| **HTTP API** | 外卖配送 | 通过网络调用，你发请求它回结果 |
-| **SDK API** | 餐厅堂食 | 通过函数调用，它内部帮你发请求 |
-| **库 API** | 自己做菜 | 本地函数，不走网络 |
+1.  **API 就是传声筒**：帮你把话传给 AI 模型。
+2.  **SDK 是好管家**：能用管家就别自己跑腿。
+3.  **看文档找三样**：地址、密钥、参数。
 
-### 7.2 核心记忆点
-
-1. **API = 接口**：就像餐厅的服务员，是你和对方系统的桥梁
-2. **调用三要素**：入口（网址/函数名）、参数（要告诉什么）、返回（会得到什么）
-3. **学会读文档**：就像看菜单，先确认能不能用，再看怎么用
-
-### 7.3 下一步建议
-
-现在你已经理解了 API 的基本概念，可以去：
-- 读一读真实的 API 文档（比如 OpenAI、DeepSeek 的文档）
-- 用 Postman 或 curl 试试真实的 API 调用
-- 在你的项目里接入第一个 API
-
----
-
-## 8. 名词速查表
-
-> 💡 **使用建议**：不用背！遇到不懂的词回来查就行。你只要会"看文档、会填参数、能看懂成功/失败"，就已经能开始用 API 了。
-
-| 名词 | 英文 | 解释 |
-|------|------|------|
-| **API** | Application Programming Interface | 软件对外公开的接口/入口，像餐厅的服务员 |
-| **HTTP API** | HTTP API | 通过网络调用的接口，像外卖配送 |
-| **SDK** | Software Development Kit | 软件开发工具包，像餐厅的服务员（帮你处理细节） |
-| **URL** | Uniform Resource Locator | 你要访问的"网址"，像餐厅的地址 |
-| **参数** | Parameter | 你要告诉对方的信息，像点菜时的要求（辣度、份量） |
-| **请求** | Request | 你发给对方的要求，像点菜单 |
-| **响应** | Response | 对方给你的结果，像端上来的菜 |
-| **状态码** | Status Code | 成功/失败的数字提示，200=成功，4xx=你错了，5xx=服务器错了 |
-| **API Key** | API Key | 调用 API 的密钥，像餐厅的会员卡 |
-| **限流** | Rate Limit | 限制调用频率，像餐厅说"您点太快了" |
-| **GET/POST** | HTTP Methods | 请求方法，GET=获取信息（看菜单），POST=创建/修改（下单） |
-| **JSON** | JavaScript Object Notation | 数据格式，像菜单上的格式（统一的排版） |
-| **Header** | Header | 请求头，像点菜单上的备注栏（放会员卡等信息） |
-| **Body** | Body | 请求体，像点菜单的详细内容（具体的菜品要求） |
+这就够了。剩下的，交给 IDE 去写吧。
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png
new file mode 100644
index 0000000..b9ee094
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png
new file mode 100644
index 0000000..4850098
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png
new file mode 100644
index 0000000..463d40b
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png
new file mode 100644
index 0000000..721d1dd
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png
new file mode 100644
index 0000000..b33255e
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png
new file mode 100644
index 0000000..9e7c8bb
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png
new file mode 100644
index 0000000..ec3a5ec
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png
new file mode 100644
index 0000000..cf5d1ed
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-43-10.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-43-10.png
new file mode 100644
index 0000000..a3b1089
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-43-10.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png
new file mode 100644
index 0000000..55b45eb
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png
new file mode 100644
index 0000000..bca3561
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png
new file mode 100644
index 0000000..5dd2cd5
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png
new file mode 100644
index 0000000..8556ff9
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png
new file mode 100644
index 0000000..0ec4fa1
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png
new file mode 100644
index 0000000..08c7bee
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png
new file mode 100644
index 0000000..0b730d2
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png
new file mode 100644
index 0000000..9a26d56
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png
new file mode 100644
index 0000000..375c1de
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-35-27.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-35-27.png
new file mode 100644
index 0000000..2246b10
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-35-27.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png
new file mode 100644
index 0000000..7e4c3a8
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png
new file mode 100644
index 0000000..291129b
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-16-58-51.png b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-16-58-51.png
new file mode 100644
index 0000000..184aeb0
Binary files /dev/null and b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/images/index-2026-01-20-16-58-51.png differ
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md
index 66450bc..560b749 100644
--- a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md
+++ b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md
@@ -7,9 +7,9 @@ description: '在已有 Web 原型中接入真实的 AI 能力：理解 API 的
 const duration = '约 <strong>1 天</strong>'
 </script>
 
-# 初级四：给原型加上 AI 能力
+# 初级四：为原型注入 AI 能力
 
-## 本章导读
+## 章节导读
 
 <ChapterIntroduction :duration="duration" :tags="['API', '文本模型', '文生图', '原型集成']" coreOutput="原型接入 1 个文本模型 + 1 个图像模型（可选）" expectedOutput="可调用真实 API 的 AI 原型">
 
@@ -19,19 +19,6 @@ const duration = '约 <strong>1 天</strong>'
 
 </ChapterIntroduction>
 
-::: warning 🔐 安全与费用提醒
-- **API Key 相当于密码**：它能代表“你本人”去调用接口，并且会产生费用。拿到你 Key 的人，不需要再问你确认，也能直接调用。
-  - 不要发群、不要截图公开、不要贴到评论区/论坛。
-  - 不要写进代码并提交到 Git（尤其是公开仓库）；一旦提交，哪怕你后来删掉，历史记录里也可能还在。
-  - 如果你怀疑 Key 泄露了：立刻去平台把 Key 删除/禁用，然后重新生成一个新的。
-- **原型阶段可以先跑通，但不要把 Key 放在前端公开代码里**：如果你的网页里直接写了 Key（哪怕你觉得“别人看不到”），只要页面能打开，别人就有机会从浏览器里把 Key 找出来。
-  - 原型阶段：你可以先让功能跑通，理解流程即可。
-  - 要上线/交付：务必用后端来保存 Key，并由后端去调用 API（初中级开发中会详细展开）。
-- **费用是按用量算的**：调用一次就可能消耗一点额度；图片/视频通常比文字更贵。
-  - 建议先用免费额度或小额充值完成验证。
-  - 测试时尽量用短输入、小图片、少次数；确认没问题再逐步加量。
-:::
-
 <div style="margin: 50px 0;">
   <ClientOnly>
     <StepBar :active="0" :items="[
@@ -44,379 +31,496 @@ const duration = '约 <strong>1 天</strong>'
   </ClientOnly>
 </div>
 
-## 1. API 基础
+# 1. API 基础概念
 
-如果你已经跑通了“生成文字”和“生成图片”，这一节可以先跳过；等你遇到报错、或者想更稳地改代码时，再回来看会更有用。
+前面提到，我们的目标是「把 AI 能力接进来」，让原型不再是静态演示，而是能调用真实 AI 服务的工具。要实现这一点，关键就在于理解并使用 API（应用程序编程接口）。
 
-API 可以简单理解为：**你按对方要求的格式“发一个问题”，对方就按同样的格式“回一个结果”**。
+API 是计算机领域的一个重要抽象概念，我们可以简单理解为：**你按对方要求的格式"发一个问题"，对方就按同样的格式"回一个结果"**。
 
-- **你发出去的内容**：通常包括“密钥（API Key）”和“你要生成什么”
-- **对方回给你的内容**：成功就给结果；失败会告诉你原因（比如“密钥不对”“余额不足”“参数写错”）
+- **你发出去的内容**：通常包括"密钥（API Key）"和"你要生成什么"
+- **对方回给你的内容**：成功就给结果；失败会告诉你原因（比如"密钥不对""余额不足""参数写错"）
 
-::: info 💡 学习建议
-建议你先把第 2/3 章的例子跑通一次。跑通之后再回来看这一节，你会更容易理解 Key、请求结构、模型名这些概念，也更容易定位常见报错（例如余额不足、密钥无效、参数写错）。
+具体来说，你需要掌握以下核心要素：
+
+1. **API Key**：你的"通行证"，也是"钱包钥匙"。别人拿到它，就可以替你调用接口并产生费用。
+2. **Endpoint（接口路径）**：API 请求的具体路径，告诉服务器你要访问哪个功能。完整的请求地址通常由"基础 URL + Endpoint路径"构成。例如：
+   - 文本生成：基础URL (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = 完整URL `https://api.service.com/v1/chat/completions`
+   - 图像生成：基础URL (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = 完整URL `https://api.service.com/v1/images/generations`
+3. **调用/请求**：向 AI 服务发送任务并获取结果的过程
+4. **请求内容**：你发给AI的具体内容，比如你想让AI写的文章主题、生成的图片描述等。
+5. **响应结果**：AI处理完后返回给你的内容，比如生成的文章、图片等。
+6. **错误处理**：当出现问题时（如API Key错误、请求太频繁等），知道如何排查解决。
+
+
+::: info ℹ️ 什么是 API
+对于 API 的更深入的解释，请看附录：[API 入门](/zh-cn/appendix/api-intro)。
+
+::: warning 🔐 **API 安全注意事项**
+API Key 是你请求 AI 服务的「通行证」，它是一串密码字符串，用于身份验证和计费。
+
+由于 API Key 直接关联账户和费用，务必注意：
+- 绝对**不要分享到群聊、截图上传网络**或发布在公开论坛
+- **不要硬编码到代码中**并提交到 Git 仓库（尤其是公开仓库）
+- 如怀疑 Key 已泄露，**立即更换新 Key**
+
+我们会在下面的内容中**直接把 API KEY 粘贴到 AI IDE 中进行操作**，**在正规的项目里不要这么做！！**，由于我们是练习可以这么做。（等你更加熟练后，你能够让 AI 生成一个配置文件，你只需要把 API KEY 放入配置文件即可）
 :::
 
-### 1.1 原型接入的黄金公式
+# 2. 接入文本生成 API：DeepSeek
 
-在原型阶段，你只要记住一句话就够了：
 
-> **拿到 API Key + 找到官方示例 + 让 AI IDE 帮你接到按钮上。**
+虽然 API 涉及这些技术概念，但在原型开发阶段，实际操作可以非常简单高效。核心思路就是：
 
-无论你接入的是文字模型还是图片模型，你做的事情本质上都一样：当用户点击按钮时，前端整理输入并发起请求；接口返回结果后，再把结果展示到页面上。
+> **找到官方示例、拿到 API Key、让 AI IDE 帮你接到按钮上。**
 
-### 1.2 你至少要认识的 3 个词
-
-1. **API Key**：你的“通行证”，也是“钱包钥匙”。别人拿到它，就可以替你调用接口并产生费用。
-2. **Endpoint（请求地址）**：你把请求发到哪里（例如 `.../chat/completions`、`.../images/generations`）。
-3. **Model（模型名）**：你希望使用哪一个模型（同一家服务里通常会提供多个可选模型）。
-
-如果你想看更详细的 0 基础解释，可以看附录：[《API 入门（0 基础版）》](/zh-cn/appendix/api-intro)。
-
-## 2. 接入文本 API（生成文字）
+掌握了这些概念后，你会发现无论是接入文字模型还是图像模型，其本质流程都是一样的：当用户点击按钮时，前端整理输入并发起请求；接口返回结果后，再把结果展示到页面上。接下来，我们就通过实际操作来验证这一点。
 
 在 `1.2 动手做出原型` 里，你已经做出了一个可交互的原型。接下来我们要做的，是把原型里“看起来像 AI 的功能”变成真正可用的能力：**当用户点击按钮时，原型会向外部的 AI 服务发出请求，并把返回的文字展示出来。**
 
-这一节我们先用一个例子“快速跑通一次”，再把整条接入链条讲清楚。你照着做，0 基础也能完成。
 
-### 2.1 5 分钟接入文字 API：以 DeepSeek 为例
+::: info ℹ️ 原理延伸
+如果你想了解更多原理相关的内容，请查看附录：[大语言模型（LLM）入门](/zh-cn/appendix/llm-intro)。
+::: details 了解更多：DeepSeek 是什么？
 
-先说明：你现在**不需要写复杂代码，也不需要懂原理**。这 5 分钟要做的事很单纯：
+**杭州深度求索人工智能基础技术研究有限公司**（Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.），以 DeepSeek 为商号，是一家**开发大语言模型（LLMs）的中国人工智能（AI）公司**。DeepSeek 总部位于浙江杭州，由中国对冲基金幻方量化（High-Flyer）拥有并资助。DeepSeek 由幻方量化的联合创始人梁文锋于 2023 年 7 月创立，他也同时担任这两家公司的 CEO。该公司于 2025 年 1 月推出了同名聊天机器人及其 DeepSeek-R1 模型。
 
-> **把 DeepSeek 的“密钥 + 官方示例”复制到 AI IDE 里，让 AI IDE 帮你把上一节原型的“生成文案”按钮改成真实调用，然后你再点按钮测试。**
+让我们看看 DeepSeek 在 GPQA 基准排名中与其他顶级模型的表现对比。值得注意的是，DeepSeek 是一个开源（每个人都可以从互联网下载模型）模型，而其他常见模型如 Grok、Google Gemini 和 ChatGPT 都是闭源的。正如我们所见，DeepSeek 已经很大程度上接近了第一梯队的模型。
 
-你可以把它当成 4 步小任务（按顺序做）：
+![](images/index-2026-01-20-14-16-48.png)
 
-1. **拿到密钥（API Key）**：去 DeepSeek 平台创建一个 API Key（它相当于“通行证”）。
-2. **找到官方示例**：在 DeepSeek 文档里找到“生成文字”的示例（通常可以直接复制）。
-3. **复制粘贴到 AI IDE**：把 **API Key + 官方示例** 粘贴进 AI IDE，并告诉它：我要改的是上一节原型里的“生成标题/生成卖点/一键改写”按钮。
-4. **回到页面点一下测试**：打开原型，输入一点内容，点击按钮，能看到生成结果就算跑通。
-
-为了让你“更好对齐到上一节的项目”，你可以边打开原型边做这一小节：
-
-> 上一节课项目：[1.2 动手做出原型（电商素材工作台）](/zh-cn/stage-1/1.2-building-prototype/)
->
-> 你只需要找到里面的“生成标题/生成卖点/一键改写”这类按钮，把它从“假数据”升级成“真实调用”。
-
-你在素材工作台里，通常会看到这样的流程：
-
-- 输入商品信息（商品名、卖点、目标人群、风格）
-- 点击“生成标题/生成卖点”
-- 页面出现一段可复制的文字结果
-
-建议你对 AI IDE 这样说（把方括号里的内容换成你项目实际页面名称/按钮文字）：
-
-```text
-我有一个上一节做的电商素材工作台原型。
-
-现在我需要把 [生成标题/生成卖点文案/一键改写] 这个按钮接入真实的文本 API：
-1) 点击按钮时，读取页面上的输入（商品名/卖点/风格等），拼成一段提示词；
-2) 调用 DeepSeek（或你看到我提供的文本 API）的接口拿到生成结果；
-3) 把结果显示回页面（替换掉原来的 mock 文本），并加上“加载中/失败提示”； 
-4) 告诉我改了哪些文件，以及怎么验证。
-```
-
-<!-- TODO: 插入截图：DeepSeek 平台创建 API Key 的页面 -->
-<!-- TODO: 插入截图：DeepSeek 文档示例（可复制的那段） -->
-<!-- TODO: 插入截图：AI IDE 对话（说明“我要接入上一节的哪个按钮/页面”） -->
-<!-- TODO: 插入截图：原型接入成功（点击按钮后出现生成文案） -->
-<!-- TODO: 插入截图：素材工作台页面（文案输入区 + “生成标题/生成卖点”按钮） -->
-<!-- TODO: 插入截图：接入成功后的页面（展示生成文案结果） -->
-
-### 2.2 文本 API 的接入链条（0 基础版）
-
-把“文字 AI”接进原型，通常就 6 步：
-
-1. **确定入口**：用户在哪里点一下，就应该开始“生成文字”？（例如“生成标题/生成卖点/一键改写”按钮）
-2. **收集输入**：用户在页面上填了什么？（商品名、卖点、风格、字数、语气……）
-3. **拼出请求内容**：把这些输入拼成一段清楚的话（也就是“提示词”），作为你发给 AI 的内容
-4. **发出请求**：把“密钥 + 官方示例”接到代码里，让它真的去请求 AI
-5. **把结果显示出来**：把返回的文字写回页面（例如显示在文本框/卡片里）
-6. **加上“加载中/报错提示”**：请求需要时间，失败也很正常，给用户一个清晰反馈
-
-你会发现：这条链路里，最难的不是“写代码”，而是第 1～3 步的“把需求变成输入”。这些步骤越清楚，后面的代码就越顺。
-
-<!-- TODO: 插入截图：原型中“生成文案/改写/总结”的入口（来自上一节的原型页面） -->
-
-### 2.3 实操：接入 DeepSeek 文本 API（含截图）
-
-这一小节更“细一点”，把你在 AI IDE 里需要说清楚的话写出来。你照着做就行。
-
-**目标**：你需要先拿到 DeepSeek 的密钥，再从文档里复制一份可运行的请求示例，把它交给 AI IDE 生成代码改造，最后回到页面进行一次真实调用测试。
-
-你可以按下面的顺序来：
-
-1. **准备两样东西**
-   - **DeepSeek API Key**（在平台创建）
-   - **DeepSeek 文档里的“生成文字示例”**（复制即可）
-2. **告诉 AI IDE：要改哪个“入口”**
-   - 入口就是你原型里那个按钮/页面（例如“生成标题/生成卖点/一键改写”）
-   - 你可以补一句：原来是“写死/假数据”，现在要换成真实调用
-3. **把“密钥 + 示例 + 入口说明”粘贴给 AI IDE**
-   - 让它直接改项目，并要求它告诉你：改了哪些文件、怎么验证
-4. **你自己回到页面再次测试**
-   - 输入一条商品信息，点击“生成”，确认页面出现了真实返回的文字结果
-   - 如果失败：把报错提示原样复制回 AI IDE，让它继续修复
-
-::: details 了解更多：DeepSeek 是什么？（可跳过）
-
-> 提示：文档里可能会出现 “LLM” 这个词。你可以先把它理解为“能生成文字的 AI 模型”，不影响你把 API 接进原型。
-
-![](images/image16.png)
-
-你不需要先理解这些背景才能“接入 API”。但如果你想知道它为什么常被拿来举例，可以简单记两点：
-
-- DeepSeek 是一家做大语言模型（LLM）的公司。
-- 课程里使用它的原因很朴素：**文档清晰 + 接入路径典型**，适合练一次“从 Key 到按钮”的小闭环。
-
-![](images/image17.png)
+GPQA 是“研究生级 Google-Proof 问答基准”的缩写，这是一个用于科学问答任务的研究生级基准。以下是详细介绍。
 
+GPQA 包含 448 个多项选择题，涵盖生物学、物理学和化学的子领域，如量子力学、有机化学、分子生物学等。这些问题由 61 位持有博士学位或正在攻读博士学位的专家编写，并经过了严格的验证过程。
 :::
 
-### 如何获取 DeepSeek API
+跟着这 3 步走，就能实现大模型生成 API 的快速集成：
 
-我们将尝试根据我们已有的信息，让 AI IDE 直接将 DeepSeek API 集成到项目中。
+1. **在 DeepSeek 平台创建一个 API Key**
+2. **在 DeepSeek 文档中找到文本生成示例**（通常有现成代码可直接复制）
+3. **打开 AI IDE，把 API Key + 官方示例粘贴进去**，告诉 AI 要实现什么功能：
+   > 帮我接入这个大模型的 API ，支持这个应用的文案生成任务
 
-首先，我们需要在 DeepSeek 开放平台注册一个账户。
+接下来我们进行演示，你可以跟随操作走一遍全流程。首先注册 [DeepSeek](https://platform.deepseek.com/usage) 账号并创建一个 API Key，并且充值少量费用进行验证。
 
-注册入口：<https://platform.deepseek.com/sign_up>
+![](images/index-2026-01-20-13-57-41.png)
 
-然后，你会看到像这样的网页界面：
+![](images/index-2026-01-20-13-58-13.png)
 
-![](images/image18.png)
+点击“API KEYS”并在屏幕下方找到“create new API key”。你最终会得到一个像 sk-8573341c39fc44315aadc071c53rh7d2 这样的 API key。
 
-要使用 API，我们需要先充值一点调用额度。10 元人民币通常足够你完成一轮接入与测试。
-
-![](images/image19.png)
-
-点击 “API KEYS”，并在屏幕下方找到 “create new API key”。你最终会得到一个类似 `sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` 的 API Key。
-
-![](images/image20.png)
+![](images/index-2026-01-20-13-58-32.png)
 
 一旦你获得了密钥，你就拥有了调用模型的权限。
 
-此时，你可以直接阅读 [API 文档](https://api-docs.deepseek.com/)，它通常提供 curl 或 Python 等调用示例。
+此时，你可以直接阅读 [API](https://api-docs.deepseek.com/) 文档，它通常提供 curl 或 Python 的调用示例。
 
-![](images/image21.png)
+![](images/index-2026-01-20-13-58-56.png)
 
-找到示例后，你可以将文档中与「鉴权」和「请求结构」相关的内容复制到 AI IDE，并要求它把 DeepSeek 接入你的项目（例如把“文案生成”“智能改写”“总结”等功能，替换成真实 API 调用）。
+找到示例后，你可以将文档中的所有内容以及密钥复制到 AI IDE 的对话框中，要求它帮你集成大语言模型到之前已经开发的原型中。
 
-你可以直接把下面这段话（按你的项目实际情况改一下）发给 AI IDE，减少沟通成本：
+![](images/index-2026-01-20-13-59-31.png)
 
-```text
-我在上一章已经做了一个可运行的 Web 原型。现在我需要把“文案生成/改写/总结”等功能接入真实的文本 API（生成文字）。
+使用提示词参考如下：
 
-请你根据我提供的 DeepSeek API Key 和官方文档示例：
-1) 找到项目中触发文案生成的入口（按钮/表单/页面），把原来的 mock 逻辑替换为真实 API 调用；
-2) 把 API Key 放到安全的位置（先不要硬编码到前端源码里；如果不得不临时放，也要提醒我风险）；
-3) 告诉我你改动了哪些文件，以及如何验证（例如在页面上输入什么，点哪个按钮，能看到什么返回）。
+```
+参考这个调用方法，帮我支持文案生成功能，可以基于商品信息点击后生成对应抖音电商文案，多种风格。
+
+以下参考资料：
+api key：sk-8573341c39aefa1efe
+api 请求参考：
+curl  \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
+  -d '{
+        "model": "deepseek-chat",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+经过一段时间的 AI 代码生成，我们很容易得到对应的文案生成按钮进行测试，如果你找不到入口，可以让 AI IDE 告诉你从什么页面可以点到该页面，如果实在找不到，可以让 AI IDE 直接基于你的想法重构改进，得到最后的文案生成结果。
+
+![](images/index-2026-01-20-14-23-23.png)
+
+![](images/index-2026-01-20-14-26-35.png)
+
+当然，此处你可能想问，我怎么知道真正调用了大模型而不只是内置了固定的回复？你可以输入自定义的文案，让大模型根据你及时指定的自定义分析，生成对应的文案。
+
+如果发现每次不一样并且合乎逻辑，你可以放心认为此时已经正常调用 API 生成。你也可以在 [API 使用管理平台](https://platform.deepseek.com/usage)查看是否成功调用（虽然可能需要等几分钟才能看到）。
+
+# 3. 接入图像转文字 API：Qwen3 VL
+::: info ℹ️ 原理延伸
+如果你想了解更多原理相关的内容，请查看附录：[视觉语言模型（VLM）入门](/zh-cn/appendix/vlm-intro)。      
+
+::: details 了解更多：Qwen3 VL 是什么？
+
+**Qwen3 VL** 是阿里云通义千问团队推出的多模态视觉语言模型系列中的最新版本。VL 代表「Vision-Language」，即视觉语言模型。它能够理解图像内容，并根据图像生成文字描述、回答关于图像的问题、提取图像信息等。
+
+![](images/index-2026-01-20-14-48-27.png)
+![](images/index-2026-01-20-14-48-41.png)
+
+**Qwen3 VL 的主要能力包括：**
+
+- **图像理解**：能够识别图片中的物体、场景、人物、文字等内容
+- **视觉问答**：根据用户提问，准确回答关于图像的问题
+- **图像描述**：生成详细或简洁的图像文字描述
+- **多图理解**：支持同时处理多张图像，进行对比分析
+- **文本提取**：从图像中提取文字内容（OCR 能力）
+
+**为什么选择 Qwen3 VL？**
+
+相比上一代模型，Qwen3 VL 在图像理解准确性上有显著提升，支持更长、更复杂的图像分析任务。它在中文理解方面表现优异，API 调用成本相对较低，性价比较高。此外，它的上下文窗口更大，能处理更复杂的视觉推理任务。
+
+**典型应用场景：**
+
+- 电商：商品图片自动生成标题、描述、卖点
+- 内容创作：根据素材图自动生成文案或配图建议
+- 办公：图片内容提取、报表自动识别
+- 教育：图片题目自动解析、知识点提取
+
+:::
+
+在前面的部分我们说明了如何接入文字生成 API， 但对于前面的应用场景我们会发现一个问题，我们上传的是一张图片，如果只用大语言模型，它没办法很好的理解图片中的内容，生成的结果很可能会有差别。
+
+我们希望有一个模型能够帮助我们把一个图片变成文字描述，这就需要用到视觉语言模型（VLM）。在案例中，我们将会使用视觉语言模型生成商品的卖点描述，提升用户体验。
+
+为了方便，我们使用[云平台 SiliconFlow](https://cloud.siliconflow.cn/me) 提供的 API 接口进行图生文 API 的接入。
+
+::: details 了解更多：什么是 Siliconflow
+**硅基流动（SiliconFlow）** 是国内知名的 AI 模型聚合平台，提供多种主流大语言模型和视觉语言模型的 API 接口服务。
+
+**平台特点：**
+
+- **多模型支持**：集成多种主流 AI 模型，包括 DeepSeek、Qwen、Llama 系列等开源模型
+- **技术优化**：针对开源模型进行推理优化，提供低延迟、高并发的 API 服务
+- **接口兼容**：提供兼容 OpenAI 格式的 API 接口，便于现有应用集成
+- **按需付费**：支持按调用量计费的方式使用
+
+SiliconFlow 在开源大模型的推理服务方面较为成熟，是使用国产开源 AI 模型的常见选择之一。
+:::
+
+进入到 SiliconFlow 平台的首页，我们可以看到有很多模型可以选择，左上角找到筛选器，点击展开筛选器，选择视觉标签，我们能看到很多图片转文本模型，比如智谱 GLM-4.6V，或者是 Qwen3-VL。
+
+![](images/index-2026-01-20-15-05-04.png)
+
+我们可以选择任意一个进行测试，这里以 `Qwen/Qwen3-VL-8B-Instruct` 为例。
+
+![](images/index-2026-01-20-15-07-44.png)
+
+进入 [ SiliconFlow 平台](https://cloud.siliconflow.cn/me/account/ak)，在 API 密钥中点击「新建 API 密钥」，创建一个新的 API Key。
+
+你可以直接使用下面的代码作为参考代码，和生成的 API Key 一起，发送给 AI IDE ，进行功能集成。
+
+::: details 图片转文字参考代码
+
+```python
+from openai import OpenAI
+from typing import Dict, Any, List
+import base64
+import os
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
+MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
+
+def encode_image(image_path: str) -> str:
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+
+def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
+    response = client.chat.completions.create(
+        model=MODEL_NAME,
+        messages=messages,
+        max_tokens=512,
+        temperature=0.7,
+        top_p=0.7,
+        frequency_penalty=0.5,
+        stream=False,
+        n=1
+    )
+    return response.choices[0].message.content
+
+def caption_image(image_path: str) -> str:
+    base64_image = encode_image(image_path)
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Please describe this image in detail."
+                },
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
+                }
+            ]
+        }
+    ]
+    
+    client = OpenAI(
+        api_key=SILICONFLOW_API_KEY,
+        base_url=SILICONFLOW_BASE_URL
+    )
+    
+    return get_vlm_completion(client, messages)
+
+image_path = "images.jpg"
+caption = caption_image(image_path)
+```
+:::
+
+在这个场景中，我们直接尝试让 AI IDE 帮我们实现将上传的图片，自动生成电商卖点文本、关键词的功能，如下所示：
+
+```
+基于下面的图生文接口 API ，帮我们实现将上传的图片，自动生成电商卖点文本、关键词的功能
+
+<此处省略代码，你需要自行粘贴密钥和参考代码>
 ```
 
-<!-- TODO: 插入截图：AI IDE 对话中粘贴 API Key + 文档示例 + 上面这段说明 -->
+最后得到生成结果：
+![](images/index-2026-01-20-15-34-36.png)
 
-![](images/image22.png)
+![](images/index-2026-01-20-15-35-41.png)
 
-![](images/image23.png)
+# 4. 接入图像生成 API：Qwen Image / Qwen Image Edit
 
-自动集成通常可以在很短时间内完成。完成后，你可以让 AI IDE 明确回答两件事：
+在前面的部分我们主要和文本相关的任务打交道，接下来我们将尝试接入图片生成的功能，支持从文字描述生成图片，或者对图片进行修改。
 
-- **它把“调用 AI”的代码放在了哪里**
-- **现在请求的是不是 DeepSeek（看“请求地址”和“模型名称”即可）**
+::: info ℹ️ 原理延伸
+如果你想了解更多原理相关的内容，请查看附录：[图像生成入门](/zh-cn/appendix/image-gen-intro)。
 
-![](images/image24.png)
+::: details 了解更多：Qwen Image / Qwen Image Edit 是什么？
 
-或者，你也可以要求 AI IDE 帮你定位项目中“调用文字生成”的部分。
+**Qwen Image**（也称通义万相）是阿里云通义团队推出的图像生成模型系列，主要包括两大模型：
 
-为了独立确认是否真的在调用 DeepSeek，你可以直接让 AI IDE 帮你定位调用点，例如：
+**1. Qwen Image——文生图（Text-to-Image）模型**
 
-`告诉我项目中所有需要调用文字生成的代码位置，我需要检查是否是 DeepSeek。`
+根据文字描述生成全新的图片。你输入一段提示词，模型会理解你的意图并生成符合描述的图像。
 
-它会返回对应代码位置与请求细节，便于你人工检查（尤其是：请求地址、是否带了密钥、以及模型名称）。
+![](images/index-2026-01-20-14-43-30.png)
 
-![](images/image25.png)
+**主要能力：**
 
-接下来，我们将简要介绍三种常见的“生成图片”的服务。你可以根据自己的预算、可访问性和效果偏好，选择其中一种集成到 AI IDE 中即可。
+- **文生图**：用文字描述生成图片，支持多种风格（写实、卡通、水墨、赛博朋克等）
+- **风格迁移**：将一张图片转换成指定的艺术风格
+- **图像变体**：基于参考图生成相似风格的新图
+- **分辨率提升**：增强图片清晰度和细节
 
-## 3. 接入图片 API（生成图片）：从“提示词”到“图片展示”
+**2. Qwen Image Edit——图生图（Image-to-Image）模型**
 
-如果说大语言模型更擅长“理解与生成文字”，那么图像/视频模型更擅长“把你的描述变成视觉结果”。
+在现有图片上进行编辑和修改。通过自然语言指令，让模型理解你的修改意图并生成结果。
 
-你在抖音、B 站或 YouTube 上看到的很多 “AI 海报 / AI 主图 / AI 角色图”，本质上都是同一条链路：你输入一句提示词，系统发起一次请求，最终返回一张图片。
+**主要能力：**
 
-图片 API 的“接入链条”其实也不复杂。你可以先按 0 基础版本跑通一遍，再去追求更好的效果。
+- **局部替换**：替换图片中的某个物体或人物（如「把背景换成海边」）
+- **元素移除**：去除图片中不需要的元素
+- **风格转换**：给图片添加滤镜或艺术效果
+- **图像扩展**：扩展图片边界，生成新内容
+- **智能修图**：自动美化、调整光影、修复瑕疵
 
-这一节同样先用一个例子“5 分钟跑通一次”，再讲清楚接入链条。
 
-### 3.1 5 分钟接入生图 API：以 SiliconFlow Qwen-Image 为例
+![](images/index-2026-01-20-14-46-17.png)
 
-这一小节的目标只有一个：让你的原型“真的能生成一张图片”，快速跑通链路。
+![](images/index-2026-01-20-14-46-29.png)
 
-同样是 4 步（按顺序做）：
+![](images/index-2026-01-20-14-46-33.png)
 
-1. **拿到密钥（API Key）**：在 SiliconFlow 创建一个 API Key（相当于“通行证”）。
-2. **找到官方示例**：在 SiliconFlow 文档里找到“生成图片”的示例（通常可以直接复制）。
-3. **让 AI IDE 帮你接进原型**：把“密钥 + 官方示例 + 你原型里哪个按钮要生成图片”发给 AI IDE，让它把占位图/假图替换成真实生成。
-4. **验证是否成功**：打开原型，输入一句图片描述（例如“白底电商主图、产品居中、柔光棚拍风格”），点击“生成主图”，能看到图片出来就算跑通。
+**为什么选择 Qwen Image 系列？**
 
-同样，为了对齐到上一节的项目，你可以边打开原型边做这一小节：
+- **中文优化**：对中文提示词理解更准确，适合国内用户
+- **成本低**：相比国际竞品，价格更实惠
+- **速度快**：生成效率高，响应时间短
+- **质量稳定**：在电商、素材场景下表现稳定可靠
+- **风格多样**：支持多种艺术风格和创意效果
 
-> 上一节课项目：[1.2 动手做出原型（电商素材工作台）](/zh-cn/stage-1/1.2-building-prototype/)
->
-> 你只需要找到里面的“生成主图/生成海报/生成配图”这类按钮，把它从“占位图/假图”升级成“真实生成”。
+**典型应用场景：**
 
-在素材工作台里，图片通常对应这样的入口：
+- 电商：生成主图、详情页配图、促销海报
+- 社交媒体：生成头像、表情包、配图
+- 设计：快速出概念图、素材图、背景图
+- 营销：制作广告图、活动 banner、节日海报
 
-- 输入“想要的画面描述”（例如白底、场景、风格、需要的文案）
-- 点击“生成主图/生成海报”
-- 页面出现一张图片（或一组图片）
+**与 Qwen3 VL 的配合：**
 
-你可以对 AI IDE 这样说：
-
-```text
-我有一个上一节做的电商素材工作台原型。
-
-现在我需要把 [生成主图/生成海报/生成配图] 这个按钮接入真实的图片 API：
-1) 点击按钮时，读取页面输入，整理成一句清楚的提示词；
-2) 调用图片生成 API（例如 SiliconFlow Qwen-Image / Recraft / Seedream）；
-3) 拿到返回的图片地址后，把图片显示在页面上；
-4) 加上“生成中/失败提示”，并告诉我怎么验证。
-```
-
-<!-- TODO: 插入截图：SiliconFlow 创建 API Key 的页面 -->
-<!-- TODO: 插入截图：SiliconFlow 图片生成的文档示例（可复制的那段） -->
-<!-- TODO: 插入截图：AI IDE 对话（说明“我要把生图接入上一节的哪个按钮/页面”） -->
-<!-- TODO: 插入截图：原型接入成功（点击按钮后出现生成图片） -->
-<!-- TODO: 插入截图：素材工作台页面（图片提示词输入区 + “生成主图/生成海报”按钮） -->
-<!-- TODO: 插入截图：接入成功后的页面（展示生成图片结果） -->
-
-### 3.2 图片 API 的接入
-
-把“图片 AI”接进原型，通常就 6 步：
-
-1. **确定入口**：用户在哪里点一下，就应该开始“生成图片”？（例如“生成主图/生成海报/生成配图”）
-2. **收集输入**：用户希望图片长什么样？（风格、场景、文字、颜色……）
-3. **准备提示词**：把输入整理成一句清楚的话（例如“白底电商主图、产品居中、柔光棚拍风格”）
-4. **发出请求**：用“密钥 + 官方示例”去请求图片服务
-5. **拿到图片并展示**：通常会返回一个“图片地址”，你把它放到页面里就能看到图片
-6. **加上加载/失败提示**：图片生成更慢，失败也更常见，提示要更清楚
-
-<!-- TODO: 插入截图：原型中“生成图片/生成海报/生成主图”的入口（来自上一节的原型页面） -->
-
-### 3.3 选择一个图片服务接入（示例）
-
-下面给出三个常见选择。建议你先选一个把链路跑通，再根据效果与成本做替换。
-
-| 侧重点 | 推荐先用谁 | 一句话理由 |
-| --- | --- | --- |
-| 想要“通用 + 文字渲染不错”，并且用起来更像“标准 API” | SiliconFlow（Qwen-Image） | 路径清晰，适合练“从示例到接入” |
-| 更偏设计生产（插画/品牌风格/海报/矢量感） | Recraft | 更像“设计工具 + API” |
-| 国内网络更稳定，想走火山引擎生态 | Seedream（Volcengine） | 访问与支付更贴近国内环境 |
-
-::: tip ✅ 选型小原则
-建议你先把“生成图片”按钮跑通。跑通之后，再用同一段提示词切换不同模型做对比，这会比凭感觉讨论“哪个更强”更高效。
-:::
-
-::: details （可选）课程截图：统一云服务的示例
-
-![](images/image20.png)
-![](images/image21.png)
-![](images/image22.png)
+这两个 API 可以串联使用：先用 Qwen3 VL 分析参考图，理解画面内容；再用 Qwen Image 根据分析结果生成新图；最后用 Qwen Image Edit 进行局部优化。这种「理解 → 生成 → 编辑」的流程，是 AI 素材生成的完整链路。
 
 :::
 
-
-
-### 3.4 路线 A：SiliconFlow（Qwen-Image）
-
-在原型里，图片 API 最常见的落点是：**“生成主图 / 生成海报 / 生成配图”**。你需要做的事情很简单：把用户输入整理成一句话，请求图片 API，然后把返回的图片展示出来。
-
-::: details 了解更多：什么是 SiliconFlow / Qwen-Image？（可跳过）
-
-> [Silicon Flow (硅基流动)](https://cloud.siliconflow.com/me/models) 成立于 2023 年 8 月，是一家世界领先的 AI 能力提供商。它提供 SiliconCloud（具有自研推理加速的大模型云平台）和 BizyAir（用于 AI 图像生成的 ComfyUI 插件）等核心产品，为客户提供 AI 基础设施能力，拥有战略合作伙伴关系，并持有顶级行业认证。
->
-> ![](images/image26.png)
-
-> Qwen-Image 是一个强大的图像生成基础模型，能够进行复杂的文本渲染和精确的图像编辑。这是一个 20B MMDiT 图像基础模型，在复杂的文本渲染和精确的图像编辑方面取得了重大进展。实验表明，它在图像生成和编辑方面都具有很强的通用能力，在文本渲染方面表现尤为出色，尤其是中文。
->
-> 从中文到英文，Qwen-Image 可以像 GPT-4o 或 Seedream 模型一样生成高质量的文本。
->
-> ![](images/image27.png)
->
-> ![](images/image28.png)
->
-> ![](images/image29.png)
->
-> ![](images/image30.png)
-
-:::
-
-#### A1. 获取 Key & 文档示例
-
-入口：<https://cloud.siliconflow.com/me/models>
+你可能在抖音、B 站或 YouTube 上看到的很多 “AI 海报 / AI 主图 / AI 角色图”，本质上都是用到这部分介绍的技术。你需要做的事情很简单：把用户输入整理成一句话，请求图片 API，然后把返回的图片展示出来。此时用到的模型叫做图片生成 / 图片编辑模型。
 
 查看 SiliconFlow 的官网。左侧有一个“Playground”部分，你可以在不进行 API 调用的情况下试用不同的模型。在网页顶部有一个“Filters”按钮；点击它可以筛选右侧的模型列表。
 
 如果你选择“Image”，你将只看到当前支持的所有文生图模型。在这种情况下，我们将使用 Qwen/Qwen-Image。
 
-![](images/image31.png)
+![](images/index-2026-01-20-15-52-56.png)
 
-要调用 API，首先我们需要点击左侧设置中的“API Keys”，然后点击“Create API Key”按钮生成一个 API key。记得保存这个 API key。
+一切设置好后，我们需要参考相应的图像生成 API 文档。你可以在官方文档页面找到任何标记为“API Reference”的部分。点击它，然后导航到[图像生成的 API 部分](https://docs.siliconflow.cn/cn/api-reference/images/images-generations)并找到相关的请求示例。
 
-![](images/image32.png)
-
-要查看可用余额，我们需要打开左侧设置中的“Payments”。在这里，你可以看到 1 美元的赠金。但是，如果你想使用 FLUX 文生图模型，你需要先充值账户。
-
-充值/余额：<https://cloud.siliconflow.com/me/account/ak>
-
-![](images/image33.png)
-
-一切设置好后，我们需要参考相应的图像生成 API 文档。你可以在官方文档页面找到任何标记为“API Reference”的部分。点击它，然后导航到图像生成的 API 端点部分并找到相关的请求示例。
-
-文档入口：<https://docs.siliconflow.com/en/userguide/introduction>
-
-![](images/image34.png)
+你可以把下列请求示例和 API KEY 一起发给 AI IDE， 即可实现图像生成的功能。
 
 ```bash
 curl --request POST \
-  --url https://api.siliconflow.com/v1/images/generations \
-  --header 'Authorization: Bearer <YOUR_API_KEY>' \
+  --url https://api.siliconflow.cn/v1/images/generations \
+  --header 'Authorization: Bearer <token>' \
   --header 'Content-Type: application/json' \
-  --data '{
-  "model": "black-forest-labs/FLUX.1-Kontext-max",
+  --data '
+{
+  "model": "Qwen/Qwen-Image-Edit-2509",
   "prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
-}'
+}
+'
+```
+这里的模型可以使用 Qwen/Qwen-Image 或者 Qwen/Qwen-Image-Edit-2509。
+
+但是，我们注意到对于这个 API 来说，只有提示词 prompt，并没有输入图片的接口，没法用来进行图像编辑的操作。
+
+在电商的业务中，我们可能会想让用户上传的衣服能够自动穿在人物身上，又或者是自动生成商品吸引人的售卖图、海报，故而需要用到编辑模型，我们可以用下面的 API 进行图像编辑请求：
+
+::: details 图像编辑参考代码
+
+复制下列代码和 key，一起发送给 AI IDE：
+
+```python
+import requests
+import os
+from typing import Dict, Any, Optional
+
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
+QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
+
+def generate_image_edit(
+    prompt: str,
+    image: Optional[str] = None,
+    image2: Optional[str] = None,
+    image3: Optional[str] = None,
+    negative_prompt: Optional[str] = None,
+    cfg: Optional[float] = 4.0,
+    seed: Optional[int] = None
+) -> Optional[Dict[str, Any]]:
+    payload: Dict[str, Any] = {
+        "model": QWEN_IMAGE_EDIT_MODEL,
+        "prompt": prompt,
+    }
+    if image:
+        payload["image"] = image
+    if image2:
+        payload["image2"] = image2
+    if image3:
+        payload["image3"] = image3
+    if negative_prompt:
+        payload["negative_prompt"] = negative_prompt
+    if cfg is not None:
+        payload["cfg"] = cfg
+    if seed is not None:
+        payload["seed"] = seed
+
+    headers: Dict[str, str] = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"Error generating image: {e}")
+        return None
+
+def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
+    try:
+        response = requests.get(image_url)
+        response.raise_for_status()
+        os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
+        with open(output_path, "wb") as f:
+            f.write(response.content)
+        print(f"Image saved successfully to: {output_path}")
+        return True
+    except requests.exceptions.RequestException as e:
+        print(f"Error downloading image: {e}")
+        return False
+    except Exception as e:
+        print(f"Error saving image: {e}")
+        return False
+        
+prompt: str = "让天空变成傍晚，有月亮和星星，梦幻风格"
+negative_prompt: str = "模糊, 低质量, 扭曲"
+image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
+image2_url: Optional[str] = None
+image3_url: Optional[str] = None
+
+cfg: float = 4.0
+seed: int = 12345
+output_path: str = "edited_image.png"
+
+print(f"Generating edited image with prompt: {prompt}")
+print(f"Input image: {image_url}")
+print(f"CFG: {cfg}, Seed: {seed}")
+print("-" * 50)
+
+result = generate_image_edit(
+    prompt=prompt,
+    image=image_url,
+    image2=image2_url,
+    image3=image3_url,
+    negative_prompt=negative_prompt,
+    cfg=cfg,
+    seed=seed
+)
+
+if result and "images" in result:
+    images = result["images"]
+    if images and len(images) > 0:
+        image_url_result = images[0]["url"]
+        print(f"Image edit generated successfully. URL: {image_url_result}")
+        success = save_image_from_url(image_url_result, output_path)
+        if success:
+            print(f"Image saved to: {output_path}")
+        else:
+            print("Failed to save image to local file")
+    else:
+        print("No images found in response")
+else:
+    print("Image generation failed")
+    if result:
+        print(f"Response: {result}")
+```
+:::
+
+有了图像编辑代码后，我们让 AI IDE 支持电商中常用的图像任务功能：
+
+```
+基于下面 API，帮我实现这个工程中，电商业务的常见功能（例如海报生成、抖音电商首图生成等等）
+
+<此处粘贴 API KEY以及图像编辑代码>
 ```
 
-记得将你打算使用的模型和 API key 填入相应的字段。之后，你可以在计算机的命令行中使用该命令运行直接请求测试。
+实现效果如下:
 
-```bash
-curl --request POST \
-  --url https://api.siliconflow.com/v1/images/generations \
-  --header 'Authorization: Bearer <your_api_key>' \
-  --header 'Content-Type: application/json' \
-  --data '{
-  "model": "Qwen/Qwen-Image",
-  "prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
-}'
+![](images/index-2026-01-20-16-58-51.png)
+
+值得注意的是，由于生成图片可能会经常遇到一些奇怪的问题，建议你需要让 AI IDE 能够显示完整的报错信息，方便复制粘贴进行修改（否则可能会反复显示生成失败但是不知道为什么），例如你可以说：
+
+```
+不要只显示图片生成失败，每次都显示完整的失败原因，比如图片不匹配、请求错误、超时等等！
 ```
 
-![](images/image35.png)
+有时候修改后更新并不会应用到网页中，如果你发现修改后网页一直还在报错（反复多次），也可以试试直接对 AI IDE 说：请你重启这个项目。
 
-#### A2. 让 AI IDE 把它接进你的按钮
+## 更多不同图像服务选型
 
-你可以把「API Key + 官方请求示例 + 你的原型需求」发送给 AI IDE，并要求它帮你创建一个前端测试演示或直接改造当前项目。很快，你就能跑通 SiliconFlow 的基本 API 调用。
+下面给出其他选择。建议你先跑通 Qwen 生图的结果，再根据效果与成本使用下列服务做替换（根据实际使用感受选择）。
 
-<!-- TODO: 插入截图：AI IDE 中说明“我要把图像 API 接到原型的哪个按钮/页面” -->
-
-![](images/image36.png)
-
-### 3.5 路线 B：Recraft（更偏设计生产）
+### Recraft 集成
 
 如果你的原型更偏“设计生产”（例如生成品牌风格插画、营销海报、矢量风格素材），Recraft 往往会更顺手。接入方式与上一节完全一致：**拿到 Key + 找到官方示例 + 让 AI IDE 把示例落到你的按钮/页面里**。
 
-<!-- TODO: 插入截图：原型中 Recraft 的使用入口（例如“生成插画/生成海报”） -->
-
-::: details 了解更多：什么是 Recraft？（可跳过）
+::: details 了解更多：什么是 Recraft？
 
 > Recraft 是一款面向设计师、插画师和营销人员的 AI 工具——于 2022 年在美国成立，总部位于伦敦。它帮助生成/迭代视觉效果（图像、矢量艺术、3D 图形），具有高质量输出（任何文本大小/长度）、精确元素定位和品牌一致性设计等优势。受到 200 个国家/地区 300 多万用户（包括奥美、Netflix）的信任，并已创建了 3.5 亿多张图像，其团队旨在使其成为必备的设计师工具，确保创作者能够控制他们的 AI 辅助工作流程。
 >
@@ -425,9 +529,6 @@ curl --request POST \
 > ![](images/image38.png)
 >
 > ![](images/image39.png)
-:::
-
-#### B1. 获取 Key & 文档示例
 
 首先，我们仍然需要找到 API 入口以获取 API Key：<https://www.recraft.ai/profile/api>
 
@@ -441,27 +542,14 @@ curl --request POST \
 - <https://www.recraft.ai/docs/api-reference/usage>
 - <https://www.recraft.ai/docs/api-reference/guides>
 
-#### B2. 让 AI IDE 把它接进你的按钮
+:::
 
-在这里，我们可以直接复制官方文档中的请求示例，并粘贴到 AI IDE。
 
-![](images/image41.png)
-
-注意：在聊天窗口中，输入你的 API Key 和文档示例通常就足够了；AI IDE 会自动为你构建前端交互与请求代码。
-
-<!-- TODO: 插入截图：AI IDE 粘贴 Recraft 示例并生成代码 -->
-
-如果过程中出现错误，你可以直接将错误信息粘贴到聊天窗口，让 AI IDE 帮你自动解决。
-
-![](images/image42.png)
-
-### 3.6 路线 C：Seedream（火山引擎，国内网络更稳）
+### Seedream即梦 集成
 
 如果你希望使用国内网络更稳定、且效果不错的图像生成服务，可以考虑 Seedream（火山引擎）。思路同样不变：把它当成一个“图片生成 API”，接到你的原型按钮上即可。
 
-<!-- TODO: 插入截图：原型中 Seedream 的使用入口（例如“生成商品主图”） -->
-
-::: details 了解更多：什么是 Seedream 4.0？（可跳过）
+::: details 了解更多：什么是 Seedream 即梦？
 
 模型介绍：<https://seed.bytedance.com/en/seedream4_0>
 
@@ -474,9 +562,6 @@ curl --request POST \
 > ![](images/image45.png)
 >
 > ![](images/image46.png)
-:::
-
-#### C1. 获取 Key & 示例（火山引擎 / Volcengine）
 
 我们将逐步演示如何将 Seedream API 集成到你的项目中（通过 AI IDE 辅助完成）。
 
@@ -514,11 +599,8 @@ curl --request POST \
 
 准备好 API Key 和调用示例后，你可以直接将它们粘贴到 AI IDE 中，让它生成前端交互演示或把能力接入现有原型。
 
-<!-- TODO: 插入截图：AI IDE 粘贴 Seedream 示例并完成接入 -->
-
 ::: warning ⚠️ 重要提示
 这里的默认示例相对复杂。记得禁用 **“添加水印”** 和 **“流式响应”**，以确保不生成水印且不会发生请求失败。
-:::
 
 ![](images/image54.png)
 
@@ -526,64 +608,9 @@ curl --request POST \
 
 ![](images/image55.png)
 
-## 4. 实战接入：把它接进你的工作台（作业）
+:::
 
-到这里，你已经分别跑通了：
-
-- 文本：页面触发一次调用，并把返回的文字结果展示出来
-- 图片：页面触发一次调用，并把返回的图片结果展示出来
-
-接下来要做的，就是把它们“固定”在你的产品原型里。这里追求的不是临时演示，而是你后续会继续迭代的那份代码。
-
-<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
-  <template #header>
-    <div style="font-weight: bold; font-size: 16px;">🚀 挑战任务：让你的工作台“真的在用 AI”</div>
-  </template>
-
-  <p>
-    请你基于上一节完成的「电商素材工作台」原型，完成一次“从原型到真实调用”的小闭环：
-  </p>
-
-  <ul>
-    <li>
-      <strong>必做 1：接入文字生成</strong>
-      <ul>
-        <li>把一个按钮接入真实的文字 API（例如“生成标题 / 生成卖点 / 一键改写”）</li>
-        <li>点击后要能返回真实生成的文字，并展示在页面上（而不是写死的假数据）</li>
-      </ul>
-    </li>
-    <li>
-      <strong>必做 2：接入图片生成</strong>
-      <ul>
-        <li>把一个按钮接入真实的生图 API（例如“生成主图 / 生成海报 / 生成配图”）</li>
-        <li>点击后要能返回真实生成的图片，并展示在页面上（而不是占位图/本地假图）</li>
-      </ul>
-    </li>
-    <li>
-      <strong>必做 3：补齐基础体验</strong>
-      <ul>
-        <li>至少包含“生成中”的提示</li>
-        <li>失败时能给出提示（例如密钥无效、额度不足、网络失败）</li>
-      </ul>
-    </li>
-    <li>
-      <strong>自检清单</strong>
-      <ul>
-        <li>我能在页面上清楚地看到“生成按钮”和“生成结果”</li>
-        <li>点击后不是写死的假数据，而是每次可能都不一样的真实结果</li>
-        <li>报错时我能看懂原因，并知道下一步怎么处理（把报错复制给 AI IDE）</li>
-      </ul>
-    </li>
-    <li>
-      <strong>成果分享（可选）</strong>
-      <ul>
-        <li>截图你的页面（文字结果 + 图片结果）分享给同学/朋友</li>
-      </ul>
-    </li>
-  </ul>
-</el-card>
-
-## 5. 模型选型：如何找到“当前更强”的 AI 模型
+# 附录：如何找到“当前更强”的 AI 模型
 
 文字模型（也常被叫作“大语言模型”）的发展速度非常快，我们总是需要确保我们用的是表现更好的模型之一。通过以下两个网站，你可以很方便地看到“现在大家常用、评价也更好的模型”。
 
@@ -591,7 +618,7 @@ curl --request POST \
 
 此外，你偶尔可能会在这些大模型竞技场中看到神秘的匿名模型（“Unknown Model”）。这通常意味着：有人把“内部测试模型”悄悄放进来做盲测，你可能有机会提前体验到更强的能力。
 
-### 5.1 LMArena
+## LMArena
 
 网站：<https://lmarena.ai/>
 
@@ -605,7 +632,7 @@ LMArena 更适合用来判断“多数人更偏好哪个模型的回答”。投
 
 ![](images/image.png)
 
-### 5.2 Artificial Analysis
+## Artificial Analysis
 
 网站：<https://artificialanalysis.ai/>
 
@@ -623,32 +650,56 @@ Artificial Analysis 更适合把“效果 / 价格 / 速度”放在同一张表
 
 ![](images/index-2026-01-19-23-36-57.png)
 
-## 下一步
+## 总结
+
+在接入各类 AI 服务时，不必把 API 想象得太复杂。把握住以下几个核心概念，基本就能应对大多数场景：
+
+**API 的本质是通信桥梁**。它做的事情很简单：把你的请求发送出去，再把模型的响应带回来。你不需要关心背后发生了什么，只需要正确地组织请求格式。
+
+**SDK 是对 API 的封装**。如果说 API 是 raw 接口，SDK 就是一套现成的工具箱——它把请求签名、错误处理、参数校验这些繁琐的细节都替你做好了。日常开发中，优先选择 SDK 而不是直接调 API，能省去不少麻烦。
+
+**阅读文档时，盯住三样东西就够了**：服务地址（endpoint）、身份凭证（API key）以及调用参数怎么填。把这三点弄清楚，调通只是时间问题。
+
+剩下的工作，IDE 和现代化的开发工具会帮你完成。专注于你的业务逻辑，底层调用的事交给这些成熟的 SDK 和工具链。
+
+## 5. 📚 作业：集成你的第一个 AI 能力
 
 <el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
   <template #header>
-    <div style="font-weight: bold; font-size: 16px;">✅ 里程碑：你的工作台已经“能干活”了</div>
+    <div style="font-weight: bold; font-size: 16px;">🚀 挑战任务：集成 AI 能力到你的工作台</div>
   </template>
 
   <p>
-    你已经把“生成文字”和“生成图片”接入到了真实 API。现在它不是演示页面，而是一个能产出内容的工具。
+    参考本节课的提示词和内容，完成一次完整闭环：
   </p>
 
-  <p>
-    这一步的价值在于：你可以更快产出多版素材，并用同一套流程反复迭代，最后选出更适合投放与转化的版本。
-  </p>
+  <ul>
+    <li>
+      <strong>完整闭环实践</strong>
+      <ul>
+        <li>选择并接入一个 AI 服务（LLM / 文生图 / 图生图）→ 实现前后端交互 → 整合到你的原型中</li>
+      </ul>
+    </li>
+    <li>
+      <strong>成果分享</strong>
+      <ul>
+        <li>截图你的功能页面分享给大家看</li>
+      </ul>
+    </li>
+    <li>
+      <strong>思考题</strong>
+      <ul>
+        <li>为下一节"完整项目实践"预留空间，提前思考：你打算如何把这些 AI 能力组合起来，做出什么有意思的功能？</li>
+      </ul>
+    </li>
+  </ul>
 </el-card>
 
-### 接下来你要解决的是什么问题？
+## 下一步
 
-以“电商素材工作台”为例，你通常会遇到三类真实需求：
+在下一节中，我们将把这些分散的 AI 能力串联起来，结合实际业务场景做一个完整的产品：
 
-1. 你需要为同一个商品产出多版标题和卖点，用来适配不同渠道与不同人群。
-2. 你需要先有主图/海报的草稿方向，才能更快和设计对齐，减少反复沟通。
-3. 你需要从竞品图里提炼出结构与表达方式，再转成你自己的上新文案。
+- 把内容策划、商品上架、数据分析等环节串联成一条完整的业务流程
+- 将本节课学到的 AI 能力（LLM 文案生成、文生图、图像编辑等）嵌入到实际业务节点中
+- 实现一个真正可用的"电商 AI 工作台"，而不是孤立的 demo
 
-### 三个最常见的能力组合（建议按顺序做）
-
-1. **文字生成文字**：让工作台一次生成多版标题/卖点，并支持改写与风格切换，用来做备选与 A/B 测试。
-2. **文字生成图片**：把商品信息整理成提示词，先生成主图/海报草稿，用来快速确定方向。
-3. **图片生成文字**：上传竞品主图或爆款截图，提取卖点与结构，再生成更适合你商品的文案。