---
title: '初級二：學會 AI 編程工具'
description: '從網頁 AI 編程走向本地：理解 IDE 與 AI IDE，使用 Trae 在本地完成貪吃蛇實戰，並掌握高效與 AI 對話的技巧。'
---

# 初級二：學會 AI 程式設計工具

## 如何搭配 AI 主動學習

::: tip 💡 最重要的學習原則：有問題，先問 AI
從現在開始，請把 AI 當成你的**第一求助對象**。無論是概念沒聽懂、工具不會裝、指令不會寫、程式報錯，還是不知道下一步該怎麼做，**先問 AI，再自己動手嘗試**。

凡是你原本會問老師、同學或群友的問題，都應該優先問 AI。它回應更快，可以隨時追問，也能結合你的報錯資訊和專案上下文立即給出下一步建議。不要等到卡住很久才想起 AI，也不要只在「讓 AI 寫程式碼」時才使用它。

**真正的 AI 原生學習，不只是用 AI 完成任務，而是讓 AI 參與學習的全過程：遇到問題就問，得到答案就試，出現新問題再繼續問。**
:::

### AI 原生學習閉環

AI 主動學習不是「把任務丟給 AI，自己等結果」，而是讓 AI 幫你縮短等待答案的時間，把更多精力用在**動手、驗證和理解**上。下面這個閉環可以用在本課程的每一章：

```mermaid
flowchart LR
  A["① 遇到問題<br/>說清目標和現象"] --> B["② 立即問 AI<br/>帶上上下文"]
  B --> C["③ 自己動手<br/>照著建議嘗試"]
  C --> D{"結果符合預期嗎？"}
  D -- "還沒有" --> E["④ 把結果或完整報錯<br/>繼續交給 AI"]
  E --> B
  D -- "符合" --> F["⑤ 用自己的話複述<br/>總結為什麼有效"]
  F --> G["形成可以遷移到<br/>新問題的能力"]
```

### 常見問題，可以直接這樣問

| 你遇到的情況 | 可以直接對 AI 說 |
| --- | --- |
| **概念看不懂** | 「我沒有程式設計基礎，請用生活中的類比解釋什麼是 API，再給我一個最小範例。」 |
| **環境不會安裝** | 「我使用 macOS，想執行這個專案。請先檢查需要哪些環境，再一次只帶我完成一步，並解釋這一步的作用。」 |
| **指令執行報錯** | 「這是我執行的指令和完整報錯。請先判斷最可能的原因，再給我最小修改方案；如果資訊不夠，請告訴我還要提供什麼。」 |
| **不知道下一步做什麼** | 「我的目標是做一個貪食蛇，目前已經能顯示遊戲畫面。請告訴我接下來最小的一步，以及完成標準。」 |
| **AI 寫了程式碼但看不懂** | 「先不要繼續改程式碼。請按模組解釋剛才的修改，每一部分解決了什麼問題？」 |
| **有多個方案不會選** | 「請根據我是初學者、希望快速做出可執行版本這兩個條件，對比方案 A 和 B，並明確推薦一個。」 |
| **結果和預期不一樣** | 「我希望頁面是這樣的：……，現在實際是這樣的：……。請比較差異，先只修復最明顯的一處。」 |

::: info 一個通用的提問模板
**我的目標是……；我目前做到……；我嘗試了……；實際結果或完整報錯是……；請先解釋原因，再告訴我下一步最小的操作。**

資訊越具體，AI 越容易給出真正適合你的回答。第一次回答沒解決問題也很正常，把新結果繼續傳給它，這本身就是 AI 原生學習的一部分。
:::

## 本章導讀

<script setup>
import StageAssignmentCard from '@theme/components/StageAssignmentCard.vue'
import { relatedArticlesMap } from '@theme/data/relatedArticles'

const duration = '約 <strong>1 天</strong>，可分多次完成'
const relatedArticles =
  relatedArticlesMap['zh-tw/stage-1/introduction-to-ai-ide'] ?? []
</script>

<ChapterIntroduction :duration="duration" :tags="['本地開發環境搭建', 'IDE 與 AI IDE', '高效開發技巧']" coreOutput="1 個自創小遊戲" expectedOutput="使用 Trae 產出">

前面我們在 z.ai 上體驗了 AI 程式設計，但網頁版有很多限制——<strong>不能隨時儲存</strong>、<strong>不好管理檔案</strong>、也<strong>沒法做複雜專案</strong>。這一章就是幫你把開發環境搬到自己的電腦上，讓你能<strong>真正獨立做東西</strong>。

我們會先搞清楚 <strong>IDE 和 AI IDE 到底有什麼區別</strong>，為什麼後者能讓你<strong>效率翻倍</strong>；然後<strong>手把手教你</strong>用 Trae 在本地做一個貪喫蛇遊戲，走完從安裝到執行的<strong>完整流程</strong>；最後還會分享一些和 AI 對話的<strong>實用技巧</strong>，讓你少走彎路。

學完這一章，你將會<strong>掌握和程式設計師相似的開發流程</strong>。

::: tip 💡 進階提示
如果你有一定的程式設計基礎，想要提前使用更強大的工具，可以結合參考 [現代 CLI Coding 工具](../../stage-2/backend/modern-cli/) 使用命令列方式進行開發。
:::

</ChapterIntroduction>

<div style="margin: 50px 0;">
  <ClientOnly>
    <StepBar :active="0" :items="[
      { title: '環境認知', description: '理解 IDE 與 AI IDE' },
      { title: '本地實戰', description: 'Trae 打造貪喫蛇' },
      { title: '工具詳解', description: '熟悉 IDE 介面' },
      { title: '溝通技巧', description: '高效與 AI 對話' }
    ]" />
  </ClientOnly>
</div>

## 1. 寫程式碼需要什麼環境和工具

### 1.1 思維轉變：遇到問題，先問 AI

在開始介紹各種環境和工具之前，首先提示你需要**轉變你的思維習慣**。

在傳統的程式設計學習中，如果你要安裝 Python、配置 Conda、或者解決 npm 安裝失敗的問題，你通常會開啟搜尋引擎，找到一篇教程，然後按照步驟一步步操作。如果中間報錯了，你可能需要再搜報錯資訊，反覆嘗試。

錯！❌

在 AI 時代，特別是在使用 AI IDE 時，請記住一個核心原則：**任何操作，都可以先問一遍 AI，甚至讓它直接幫你做。**

- **不知道怎麼安裝環境？** 直接在側邊欄問 AI：“我想寫 Python，幫我檢查一下有沒有安裝 Python，如果沒有請幫我安裝。”
- **網路卡住了？** 如果安裝依賴包時一直轉圈或報錯，直接把錯誤丟給 AI：“下載失敗了，是不是網路問題？能不能幫我換個國內的映象源？”
- **命令記不住？** 不需要死記硬背 Git 命令或 Conda 命令，直接告訴 AI：“幫我建立一個新的虛擬環境，名字叫 demo。”

### 1.2 為什麼需要環境和工具

從"試著寫幾行程式碼"到"做可長期維護的專案"，對環境和工具的要求完全不同。

理論上用系統自帶的記事本也能寫程式碼，但問題很快會出現：

- **程式碼全是黑色文字**，關鍵字、字串、註釋混在一起，很難一眼看出結構
- **沒有智慧提示**，每個單詞都要完整手敲，拼錯一個字母就要反覆檢查
- **檔案多了就亂套**，十幾個檔案來回切換，經常找不到要改的那一行在哪
- **出錯只能猜**，程式崩了不知道哪裡出問題，只能一行行列印日誌試錯

因此，你需要一款 IDE（整合開發環境）。它會把程式碼用不同顏色顯示、輸入時自動提示、檔案按專案整理、還能一步步追蹤錯誤，讓開發更高效、更少出錯。

## 2. 什麼是 IDE，為什麼需要 IDE

::: info 預習提示
如果你還不熟悉 IDE 是什麼、各個介面元素有什麼作用，建議先閱讀 [IDE 簡介](/zh-tw/appendix/2-development-tools/ide-basics) 進行預習，瞭解 IDE 的基本概念和常見功能。
:::

在早期程式設計時代，我們只需要簡單文字編輯器和語言處理器即可。但隨著專案複雜度增加，開發者迫切需要一種能高效管理檔案、支援語法高亮和除錯的工具，於是整合開發環境（IDE）應運而生。

你可以把 IDE 理解成專門用來“編輯、管理、執行和除錯”程式碼的程式。早期的 IDE 外觀非常“原始”，幾乎完全透過鍵盤操作。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image1.webp)![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image2.png)

終端介面（Terminal） 圖片來源：https://en.wikipedia.org/wiki/File:Emacs-screenshot.png

知名且功能成熟的“內建 IDE”如 `Vim`，常用於伺服器遠端操作。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image3.webp)

為了更高效，我們需要支援滑鼠操作的現代 IDE，通常包含：

- **原始碼編輯器**：語法高亮、自動補全。
- **構建與執行工具**：內建編譯器/直譯器。
- **偵錯程式**：斷點除錯、變數檢視。

現代 IDE 往往還內建 Git 等工具。最流行的是微軟的 **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)**，它輕量且可擴充套件。雖然也有 JetBrains 全家桶等專業 IDE，但 VS Code 對初學者最友好。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image4.webp)

VS Code 的核心理念是“一切皆外掛”。它透過外掛機制支援各種語言，安裝 Python 外掛就是 Python IDE，安裝 C++ 外掛就是 C++ IDE。不裝外掛時，它只是個高階文字編輯器。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image5.webp)

甚至可以用來編輯 Markdown 文件。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image6.webp)

總之，IDE 是一套幫助開發者高效寫程式碼和執行程式的工具集。

更具體的詳細內容解釋，請檢視[附錄中的 虛擬 IDE 視覺化 IDE 原理部分](/zh-tw/appendix/2-development-tools/ide-basics)。

## 3. AI IDE 和普通 IDE 有什麼不同

普通 IDE（比如原版 VS Code）本質上是一套“工具箱”：  
可以開啟專案、寫程式碼、執行和除錯，也能裝外掛，但前提是你需要自己知道要做什麼、怎麼做：

- 報錯時，自己讀提示、自己查哪一行有問題；
- 想加新頁面或新介面，自己找對應檔案、自己寫程式碼；
- 想配置環境或打包，自己查文件、按步驟操作。

但在 AI IDE 裡，你可以直接使用大語言模型幫助你進行編碼和修改檔案：

- 直接說“做一個登入頁”，它先生成基礎程式碼結構；
- 把報錯資訊和相關程式碼丟給它，讓它先分析原因並給出修改建議；
- 在你確認後，讓它自動新建檔案、批次改程式碼，處理跨檔案的體力活。

例如，你可以選中一段程式碼，讓它“重構一下”或“加註釋”；也可以在側欄裡問“這個專案是怎麼設計的？”，透過 `@檔名` 或 `@整個專案` 指定參考範圍，用一句話自動完成新建檔案、寫程式碼和執行的繁瑣操作。

在最新版 VS Code 中，已經內建了一個大語言模型助手。你可以直接針對整個程式碼倉庫、某個檔案，甚至某個函式與模型對話。你也可以像之前在 Web 端使用自動寫程式碼工具一樣，將需求以提示詞的形式發給內建的編碼 Agent，讓它自動幫你實現所需功能、建立檔案、修改程式碼、配置環境等。

你可以下載安裝 VS Code，在點選右上角的側邊欄入口，開啟 AI 功能區域，體驗這些能力。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image7.webp)

不過，VS Code 並不是 AI 能力最強的 IDE。對於需要大量 AI 輔助編碼的場景，我們往往希望使用“更聰明、效率更高”的工具——好的 AI IDE 能顯著節省寫程式碼和改 Bug 的時間。下面我們會介紹幾款目前比較流行的 AI IDE，你可以根據個人喜好選擇任意一款 AI IDE 使用。

由於 VS Code 是開源的（任何人都可以下載原始碼並自行編譯），目前市面上絕大多數 AI IDE 都是在 VS Code 基礎上二次開發而來。所以你不必擔心要“學習很多種 IDE”——**只要你熟悉了 VS Code 的基本用法**，遷移到這些 AI IDE 並不需要重新學習。

一般而言，對於不同 AI IDE 之間的差異，主要集中在四個方面：價格；可使用的模型種類（部分高階模型在某些地區可能受限）；Agent 的能力（在協助寫程式碼時的智慧程度和執行能力）；以及執行速度與效能。你可以根據實際測試效果進行選用，適合自己的纔是最好的。

> 典型的 AI IDE 一般具備以下核心能力：
>
> - 智慧程式碼生成與補全：在傳統 IDE 中，我們通常是輸入幾個字元來補全變數名或函式名；在現代 AI IDE 中，你可以寫幾行虛擬碼或者簡單說明需求，讓 IDE 自動補全完整的邏輯，甚至根據指令直接生成一大段甚至整塊程式碼。
> - 程式碼理解與問答：IDE 能夠理解並回答關於某段程式碼、某個檔案，甚至整個工程目錄結構的問題。
> - 程式碼重構與最佳化：IDE 可以根據你的意圖，重寫或最佳化指定程式碼片段的實現邏輯。
> - 自動生成測試：IDE 可以自動生成針對不同函式和模組的測試程式碼，方便你進行有針對性的測試。
> - Agent 式任務執行：智慧 Agent 可以自動生成、打包、安裝、執行和修改程式碼，在很多工上可以部分替代初級軟體工程師的工作。

::: details Antigravity

### [Antigravity](https://antigravity.google/)

Antigravity 是 Google 在 2025 年 11 月與 Gemini 3 一同釋出的全新 AI IDE，採用"Agent-First"（智慧體優先）開發模式。與傳統 AI 輔助編碼不同，Antigravity 讓 AI 代理成為"主動執行者"，可直接操作編輯器、終端、瀏覽器等工具，承擔更多"執行""策劃""驗證"的工作。開發者只需提出高層意圖，代理便會自動拆分任務、制定計劃、執行程式碼、執行測試、生成成果。它支援多模型切換，包括 Gemini 3 Pro、Claude Sonnet 4.5 等，目前以公開預覽形式提供，支援 Windows、macOS、Linux 全平臺。
:::

::: details Trae

### [Trae](https://www.trae.ai/)

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image8.webp)

Trae 是位元組跳動推出的一款 AI 程式設計助手，支援 100 多種程式語言，並能整合到主流 IDE 中。它的功能包括：用自然語言生成程式碼、自動除錯、把設計稿轉換為 React/Vue 元件等。在 2025 年 8 月的更新之後，Trae 新增了智慧依賴匯入、重新命名建議、任務清單管理等功能；SOLO 模式也開始支援後端程式碼生成和技術架構文件編輯。
:::

::: details Cursor

### [Cursor](https://cursor.com/)

Cursor 是 Anysphere 開發的一款 AI 程式碼編輯器，基於 VS Code 定製，重點最佳化了大規模程式碼倉庫和多檔案協同的場景。它支援 GPT-4o、Claude 3.7 等模型；2025 年推出的 Claude Max 模式可以處理數百萬行程式碼級別的專案。專業版取消了請求次數限制，非常適合複雜的企業級專案。

目前，Cursor 可以說是“帶前端介面的 AI IDE”中綜合體驗最好的一款之一，使用者數量龐大，功能迭代頻率也很高。它最大的缺點是價格較高——專業版大約需要每月 20 美元。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image9.webp)
:::

::: details Qoder

### [Qoder](https://qoder.com/)

Qoder 是阿里巴巴推出的一款強調“透明協作”和“增強上下文工程能力”的 AI IDE。它透過 Action Flow 支援把任務拆解成多個步驟，並實時跟蹤 AI 的執行過程；還支援多模型動態路由和任務狀態機管理，非常適合在中大型專案中做架構治理和對遺留系統進行“反向工程”分析。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image10.webp)
:::

::: details CodeBuddy

### [CodeBuddy](https://www.codebuddy.com/)

CodeBuddy 是騰訊雲推出的一款 AI 程式設計工具，強調對中文指令的支援以及企業級合規能力。它提供程式碼補全、批次程式碼審查和多模型切換等功能；其中的 Craft 智慧體可以實現多檔案程式碼生成和 API 整合。企業版支援私有化部署，並透過了三級等保認證，適合金融、醫療等對資料安全要求較高的行業。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image11.webp)
:::

::: details VS Code + Cline

### VS Code + [Cline](https://cline.bot/)

Cline 是 VS Code（Visual Studio Code）的一款 AI 程式設計 Agent 外掛，可以透過配置不同的 API 端點來靈活切換所使用的大模型。Cline 支援多模態輸入、MCP 工具擴充套件以及成本監控，所有操作都需要使用者確認後才會執行。它非常適合用於快速驗證想法，或與現有開發流程整合。基礎功能是免費的，企業版則支援在私有環境中部署模型。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image13.webp)

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image14.webp)
:::

::: details Kiro

### [Kiro](https://kiro.dev/)

Kiro 是 AWS（亞馬遜雲科技）推出的 AI 程式設計 IDE，深度整合 Amazon Bedrock 和 AWS 雲服務生態。它支援 Claude、Nova 等多種大模型，特別適合需要與 AWS 雲服務緊密整合的開發場景。Kiro 提供了智慧程式碼生成、自動化測試、以及與 AWS 資源（如 Lambda、S3、DynamoDB）的無縫對接能力，對於雲原生應用開發具有獨特優勢。

> **備註**：如果你想使用 Anthropic Claude 相關的模型，需要使用 Cursor、Kiro 或 Antigravity 作為 IDE 纔行。這些 IDE 與 Anthropic 有官方合作或深度整合，能夠提供更穩定、更完整的 Claude 模型體驗。
:::

<div style="margin: 50px 0;">
  <ClientOnly>
    <StepBar :active="1" :items="[
      { title: '環境認知', description: '理解 IDE 與 AI IDE' },
      { title: '本地實戰', description: 'Trae 打造貪喫蛇' },
      { title: '工具詳解', description: '熟悉 IDE 介面' },
      { title: '溝通技巧', description: '高效與 AI 對話' }
    ]" />
  </ClientOnly>
</div>

## 4. 實戰：用 AI IDE 在本地生成貪喫蛇遊戲

前面講的主要是"概念"和"差異"。這一小節，我們透過一次完整的實戰，把抽象概念落到具體操作上：**新建一個空資料夾 → 用 AI IDE 開啟 → 在側邊欄聊天，讓它用 React 幫你從零生成一個貪喫蛇遊戲。** 這裡以上面介紹的 Trae 為例，首先需要安裝和簡單理解什麼是 Trae。

::: tip 💡 小提示：從網頁到本地的無縫銜接
如果你之前已經在 z.ai 或其他網頁端 AI 程式設計平臺上開發過專案，可以直接將程式碼下載到本地，然後用 AI IDE 開啟繼續開發。這樣既能保留之前的成果，又能享受本地 IDE 更強大的 AI 輔助能力。

操作步驟很簡單：
1. 在 z.ai 等平臺點選下載按鈕，將專案儲存到本地
2. 解壓後用 Trae/Cursor 等 AI IDE 開啟該資料夾
3. 在側邊欄繼續與 AI 對話，迭代最佳化你的專案
:::

### 4.1 準備工作：安裝並瞭解 Trae

#### 4.1.1 什麼是 Trae

Trae 的全稱可以理解為 “The Real AI Engineer”，是一款由位元組跳動開發的自適應 AI 整合開發環境（IDE）。它是在流行的 VS Code 基礎之上構建的，這意味著，如果你之前已經習慣了 VS Code，那麼在使用 Trae 時，無論是介面佈局還是基礎操作都會感到非常熟悉、舒適。

Trae 的核心目標是成為開發者的“智慧程式設計夥伴”。透過深度整合 AI 能力，它可以自動處理大量重複性工作，為你提供更直觀、更高效的開發體驗。它並不僅僅是一個“程式碼補全工具”，而是希望貫穿整個開發工作流，從建立專案、編寫程式碼、除錯、測試到部署都提供幫助。

#### 4.1.2 安裝 Trae

Trae 分為國際版和中國版。國際版需要能夠訪問海外網路，但可以使用 GPT-5 等最新的海外模型；中國版則主要支援國內最新的大模型，例如 GLM、Qwen、Kimi 等。

國際版下載地址：https://www.trae.ai/
中國版下載地址：https://www.trae.cn/

##### Trae 定價與使用方式

::: info 💡 版本選擇提示（零基礎推薦 CN 版）
- **零基礎入門強烈推薦下載中國版（CN 版，trae.cn）**，目前使用體驗更好，且基礎功能免費，無需海外網路
- 如果你需要使用 GPT-5 等海外模型，且網路條件允許，可以選擇國際版
- 如果已有第三方模型的 API Key，接入第三方模型可以靈活控制成本
:::

> 💡 **目前推薦使用 OpenRouter 免費模型進行測試**
> 
> 截至教程編寫時間（2026-02-12），目前仍可免費試用 StepFun 的模型。具體可以參考下面 4.2 章節部分的模型接入方式，接入 `stepfun/step-3.5-flash:free`。

關於 Trae 的費用和使用方式，有以下幾個選項可供選擇：

- **國內版 CN 版（強烈推薦）**：基礎使用免費，目前整體使用效果優於國際版，非常適合零基礎入門。由於使用者較多可能偶爾需要排隊等待。
- **國際版**：訂閱價格大約為每月 3 美元左右，可以訪問 GPT-5 等海外模型，但需要能夠訪問海外網路。
- **第三方模型接入**：如果你已經有國內大模型的 Token API（如 DeepSeek、通義千問、Kimi 等），可以透過 Trae 的第三方模型配置功能將這些 API 接入使用。各大雲服務廠商（如阿里雲、騰訊雲、百度雲等）通常提供 Coding Plan 訂閱計劃，購買後可以以更優惠的價格使用其大模型 API。這樣你可以自由選擇自己喜歡的模型，同時控制使用成本。

建議初學者從國內 CN 版免費版開始體驗（下載地址：https://www.trae.cn/ ），目前 CN 版的使用效果更好且完全免費。如果遇到排隊問題或需要更穩定的服務，可以考慮接入第三方模型併購買對應雲廠商的 Coding Plan 計劃。

#### 4.1.3 Trae 介面簡介

從介面形態上看，Trae 與我們日常使用的 VS Code 高度相似：同樣是左側資源管理器、中間編輯區、右側擴充套件面板的經典三欄佈局。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image17.webp)

右側的側邊欄就是 Copilot 互動視窗，也可以理解為 Agent 視窗。如果你暫時看不到它，可以點選 Trae 右上角的側邊欄圖示將其開啟。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image18.webp)

開啟側邊欄之後，你會看到一個 `Builder` 選項，這就是 Agent 模式。簡單理解，它相當於 z.ai 的“本地版”，可以幫你操作本機環境，安裝執行環境、開啟網頁等。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image19.webp)

點選 “Builder” 後，你會看到 “Chat” 模式和 “Builder with MCP” 模式：

- **Chat 模式**：主要用於和當前資料夾裡的程式碼對話，或者當作普通聊天模型來使用。（你可以透過左上角的 “File” 選單開啟一個資料夾，在這個資料夾中進行編輯操作。在這種情況下，Builder 建立或修改的檔案都只會發生在這個資料夾內部。）
- **Builder with MCP 模式**：為 Agent 提供了更多可用工具（例如把語言模型和其他軟體聯通起來、查詢天氣等）。你可以簡單理解為：MCP 能讓語言模型更方便地呼叫各種外部工具。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image20.png)

在下面的區域，你還會看到模型選擇選項，點選即可修改當前使用的大模型。在中國版中，你可以選擇使用 Kimi k2 或 GLM 等國內模型；如果你使用的是國際版 Trae，還可以選擇 ChatGPT 或 Claude 等海外模型。不過，由於國內大模型發展非常快，Kimi、Qwen、GLM 等在很多工上的實際體驗已經接近 Claude 3.5 或 3.7，對日常開發來說已經完全夠用，這裡不強制要求使用國際版或者國內版進行操作。

**需要注意的是，這裡不推薦使用 Auto 模式（自動選擇模型），如果是國際版，我們推薦使用 Gemini 或者 GPT 模型， 如果是國內版，我們推薦你嘗試 Kimi k2 或 Minimax、GLM 等國內模型，** 不同模型有不同的使用場景，沒有教條式的一定誰比誰好在哪，你可以在不同任務遇到困難無法解決時換一個模型，透過多次測試得到屬於自己的最佳實驗結果。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image21.webp)

以上就是對 Trae 的一個簡單介紹。接下來，我們可以回顧一下之前在 z.ai 中做過的操作，並嘗試在 Trae 中做同樣的事情。

### 4.2 第一步：新建空資料夾並用 AI IDE 開啟

在正式動手之前，我們首先需要準備一個乾淨的專案工作目錄。
以本小節示例為例，可以在本地新建一個名為 snake-game-react 的空資料夾。

隨後，開啟已安裝好的 AI IDE，在啟動介面選擇開啟資料夾或Open Folder，將該空資料夾作為專案根目錄匯入；也可以直接將資料夾拖入 IDE 視窗完成開啟。此時，左側資源管理器中不會出現任何程式碼檔案，表示我們正從一個完全空白的專案狀態開始。

::: details 📚 可選：接入雲服務廠商的 API 或 Coding Plan

本節將介紹如何接入雲服務廠商的 API 或 Coding Plan，以獲得更穩定、更頻繁的模型呼叫。結尾部分會給出 Trae 中接入的截圖。

**什麼是 Coding Plan**

Coding Plan 是各大雲服務廠商推出的訂閱計劃，購買後你可以在一定時期內**無限制或高頻次地使用**該廠商的大模型 API。相比於按 Token 計費的方式，Coding Plan 更像是"包月套餐"——你付一筆固定的費用，就能放心大膽地一直用，不用擔心每次呼叫都要計費。

**為什麼需要購買 Coding Plan**

你可能會問：既然可以直接使用 API 呼叫大模型，為什麼還要購買 Coding Plan 呢？主要有以下原因：**可以一直用**：Coding Plan 最核心的優勢就是你可以隨時、頻繁地呼叫大模型，不用擔心用多了費用爆炸，也不需要頻繁看計費表

**推薦的國內雲服務 Coding Plan**

以下是國內主流雲服務廠商提供的 Coding Plan 推薦選項：

- 智譜 AI（BigModel Plan）：https://bigmodel.cn/glm-coding  
- 火山引擎（位元組雲 AI Plan）：https://www.volcengine.com/activity/codingplan

> 💡 **也可以直接接入大模型 API**
> 除了 Coding Plan，你也可以直接透過 Add Model 接入各大模型的 API。你可以參考下文接入 OpenRouter StepFun 免費 API 的方式，將 API 接入 Trae 進行使用。經測試可滿足基本的程式設計需求。
> 如果需要充值，建議先充值 10 元感受一下能用多久，比如 DeepSeek 等價效比較高的模型

**如何接入 Coding Plan**

接入 Coding Plan 的步驟非常簡單，只需幾分鐘即可完成：

1. 訪問你選擇的雲服務廠商官網（如智譜 AI：https://bigmodel.cn/glm-coding ，火山引擎：https://www.volcengine.com/activity/codingplan）
2. 註冊賬號並登入
3. 找到 "定價" 或 "Coding Plan" 頁面
4. 選擇適合你的套餐並完成支付
5. 支付成功後，你會獲得一個 API Key 或 Plan ID

::: tip 🎯 自定義模型推薦

在 Trae 中接入自定義模型時，我們**預設推薦使用 OpenRouter 方案**。OpenRouter 提供了統一的 API 介面，可以方便地接入多種大語言模型。

**截至 2026 年 2 月 12 日，你還可以使用 StepFun 的免費 API：**

- **`stepfun/step-3.5-flash:free`**：StepFun（階躍星辰）提供的免費模型，同樣支援在 Trae 中直接接入使用。

**其它免費模型：**

- **`openrouter/free`**：這是一個預設使用免費 LLM API 的模型選項，可以直接在 Trae 的 Custom Model 接入中使用（直接寫進模型 ID 即可），無需付費即可體驗 AI 程式設計功能。

這些免費選項非常適合初學者體驗，在正式投入生產環境前，可以先透過這些免費方案熟悉 AI IDE 的工作流程。

**可選：接入大模型呼叫 API（以 DeepSeek 為例）**

1. 訪問 DeepSeek 平臺：https://platform.deepseek.com/usage
2. 註冊賬號並登入
3. 在充值頁面購買 10 元的 Token 包
4. 充值成功後，在 API Keys 頁面建立並複製 API Key
5. 在 Trae 中點選 **"Add Model"**，找到 DeepSeek，選擇對應模型，輸入 API Key 即可使用

透過下列介面，你可以成功新增（注意看選擇模型的選項後【一定要滑動到最底部】，下面有一個“自定義模型“，點選後纔可以輸入模型 ID，此時可以輸入上述推薦的模型 ID 如 `stepfun/step-3.5-flash:free` 直接寫入即可，同時點選下方的獲取 Key 前往官網獲得對應的 API Key 寫入即可正常使用。）

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.webp)

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.webp)
:::

### 4.3 第二步：在側邊欄聊天，讓 AI 用 React 設計貪喫蛇遊戲

接下來，開啟 AI 聊天側邊欄：一般是按 `Ctrl+L` 或點選右側聊天圖示。然後在聊天裡輸入一個足夠清晰的提示：

> 請你用 React 架構實現貪喫蛇遊戲，包含鍵盤控制、喫到食物變長加分、撞牆或撞到自己時顯示“遊戲結束”並支援重新開始。實現後幫我啟動這個專案。如果遇到沒安裝的程式環境就自動安裝沒安裝的環境。

在這個過程中，你需要意識到 AI 不只是聊天模型，它能夠幫助你操作本機環境：建立檔案、安裝依賴、執行啟動命令等。你可以直接用自然語言描述想要達成的目標，由 AI 來決定具體執行哪些命令、如何組織程式碼。

如果執行過程中遇到問題，AI 會在對話裡展示報錯和處理方案，你可以繼續透過對話讓它調整，而不必自己記住所有命令細節。

::: warning ⚠️ 需要注意
例如下圖所示，**有時候 AI Agent 會在執行的過程中暫停，這是因為它需要等待你輸入一些資訊進行互動**，比如輸入建立的名字，或者回車確認指令執行。或者點選指令進行執行。一般情況我們直接回車即可，如果你不確定這步需要做什麼，你可以截圖當前介面詢問大模型應該如何操作。
:::

如圖所示，這裡我們需要點選 Run 進行確認：
![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.webp)

如圖所示，這裡我們只需要輸入 y 即可確認：
![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.webp)

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.webp)

如圖所示，這裡我們正在建立模板，但不知道如何操作，我們可以截圖該部分對大模型進行詢問：

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.webp)

AI Agent 在執行過程中暫停的還有一部分原因是因為此時啟動了一個“服務”，我們的貪喫蛇本身屬於一種“服務”，如果你看到如下命令的網址，則表示 Agent 幫我們執行了一個本地的電腦服務，我們可以訪問對應的網址訪問我們的貪喫蛇，由於服務需要持續啟動，這裡會陷入暫停。我們只需要點選 `Skip` 按鈕即可。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.webp)

在這個過程中，如果你遇到一些術語和看不懂的內容，不用擔心，你可以查閱附錄中的“計算機術語解釋”部分，或者直接向 AI 諮詢，或者及時提問！

如果你在過程中遇到不符預期的現象，例如貪喫蛇撞牆後不會結束遊戲，貪喫蛇點選開始後不會移動，這時你只需要把現象描述給側邊欄 Agent 即可。如果遇到報錯問題，記得截圖或者複製錯誤到側邊欄 Agent，如果多次仍然不能解決問題，請你嘗試更換模型操作。

稍作片刻，我們即可得到類似 z.ai 一樣的結果：

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.webp)

我們可以點選右下角的打勾進行確定程式碼的變更，也可以點選 `Cancel` 按鈕取消變更。或者點選 2 files need review 的地方展開檢視變動後的程式碼。

這裡還值得注意的是，由於修改程式碼並不一定正確，我們還需要知道所有的 IDE 的 Agent 都支援程式碼回退，例如，假設我這裡不小心做了個錯誤的修改操作，或者這次操作的結果讓你感到不滿意，在修改結束後我們可以返回輸入框的部分，點選 Revert 按鈕將操作回退到修改前的狀態，你可以修改輸入的文字進行再一次操作：

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.webp)

### 4.4 第三步（可選）：向 AI 追問程式碼實現細節

當貪喫蛇遊戲已經可以正常執行時，如果你對前端或 React 還不熟，可以繼續在同一個聊天視窗裡，請 AI 用盡量口語化的方式幫你導覽程式碼。你不需要切換工具，也不必刻意去翻文件，只要圍繞當前專案持續發問即可。

一個比較實用的做法是，讓 AI 先整體講一遍“遊戲是怎麼動起來的”，再拆到具體細節。比如你可以直接提問：

> “請從上到下講一遍，這個貪喫蛇遊戲每一步是怎麼動起來的？儘量少用專業術語。”

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.webp)

然後再順著它的回答繼續追問關鍵點，例如：

> “蛇在螢幕上的每一節身體，是用什麼資料結構來記的？能打個比方嗎？”  
> “你是怎麼控制‘隔一段時間動一下’的？這在程式碼裡是哪一段？”  
> “蛇喫到食物時，你做了哪幾步操作？在哪一段邏輯裡判斷喫到了？”  
> “撞牆和撞到自己，分別是在哪些程式碼裡判斷出來的？”

如果你看到某個檔案（比如 `SnakeGame.tsx`）但完全不知道它在幹什麼，也可以直接請 AI 分塊說明：

> “請把 `SnakeGame.tsx` 按功能分幾塊講一下：每一塊大概負責什麼，用通俗一點的說法。”

在這一輪對話中，你可以把不懂的詞一律當成追問入口，比如：

> “你剛才說的‘狀態’具體指什麼？能用一個生活中的例子解釋嗎？”  
> “你說的‘定時器’在這裡主要是幹嘛的？如果把它去掉，會發生什麼？”

透過這種方式，你的目標不是一下子記住所有概念，而是先搞清三件事：這款遊戲裡有哪些核心資料（蛇、食物、分數、遊戲狀態等），這些資料在什麼時機會發生變化（移動、喫到食物、遊戲結束等），以及每一種變化對應的是哪一小段程式碼。只要這三點理順了，你就基本可以看懂這份程式碼的主幹邏輯。

### 4.5 第四步：讓 AI 把畫面變好看一點

這裡先提醒一件對小白很重要的事情：不要只對 AI 說一句“我要把這個畫面變好看”。這種說法對人類設計師都太模糊，更別說對模型了——“好看”是什麼風格、哪些地方需要調整、是排版問題還是配色問題，AI 都無法從你這一句裡讀出來。為了讓 AI 真正做出接近你心裡預期的效果，你需要學會把“我想要好看”這種模糊目標拆成一串具體、可執行的小要求。

比如，很多人一開始會這樣說：

> “我要把這個畫面變好看一點。”

例如，你可以先給出一組整體需求：

> “請幫我把遊戲介面整體美化一下：
>
> - 遊戲區域居中顯示，不要貼在左上角；
> - 換成較淺的背景色，讓蛇和食物更醒目；
> - 把分數放大，放在明顯的位置；
> - 以藍色為主色調，美化一下整體配色和按鈕。”

如果你希望在“遊戲結束”時有更清晰的反饋，可以進一步補充：

> “當遊戲結束時，請在畫面中央顯示‘遊戲結束’，下面有一個‘重新開始’按鈕，可以重置遊戲。”

AI 會根據你的描述，直接修改 React 元件和樣式。儲存後重新整理瀏覽器，你就能看到新的介面。如果效果和你想象的還有差距，可以繼續做小步調整，例如：

> “分數再大一點，顏色更醒目一些。”  
> “遊戲區域再緊湊一點，四周預留一點留白。”  
> “重新開始按鈕改成藍色圓角風格，放在提示下方居中。”

在這個階段，如果某次修改導致報錯，也不需要自己硬查。直接把錯誤資訊複製到聊天視窗，或者配合一段簡要描述，比如“這是我剛才美化介面後出現的錯誤”，讓 AI 在當前專案上下文裡幫你定位和修復。這樣你就可以在“不斷對話、不斷重新整理”的迴圈中，把一個能跑的 Demo 逐步打磨成介面清晰、互動順暢的小型成品。

### 4.6 （可選）參考 z.ai 架構修改貪喫蛇結果

對於 vibe coding 小白來說，最難的事情反而是不知道什麼纔算是“最佳實踐“，不知道怎麼樣的架構纔是最適合的；因為不知道計算機基礎，所以沒辦法很好的引導 AI，解決這個難題的方法是”直接參考“；還記得我們之前說過的 z.ai 中可以檢視程式碼嗎？其實對應 README（專案中用於介紹功能和技術架構的部分）中已經給出了一個最佳架構參考：

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.webp)

我們想要讓本地的結果儘量符合 z.ai 的結果，我們可以複製這個 README 的全部內容，貼上到 Trae 的側邊欄中，讓他根據 README 的架構，修改本地的程式碼。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.webp)

最後我們能得到與 z.ai 高度相似的頁面設計風格：

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.webp)

<div style="margin: 50px 0;">
  <ClientOnly>
    <StepBar :active="2" :items="[
      { title: '環境認知', description: '理解 IDE 與 AI IDE' },
      { title: '本地實戰', description: 'Trae 打造貪喫蛇' },
      { title: '工具詳解', description: '熟悉 IDE 介面' },
      { title: '溝通技巧', description: '高效與 AI 對話' }
    ]" />
  </ClientOnly>
</div>

## 5. 介面上每個按鈕是幹什麼的

在上述操作中，我們已經快速跑通了最小程式生成閉環，但我們仍然對 IDE 不能說得上熟悉。為了徹底熟悉這個之後與我們長期相處的工具。我們會在這一節中對 IDE 的每個細節環節進行深入解釋，首先從介面開始，不同 AI IDE 的介面略有差異，但大部分都延續了 [VS Code 的佈局](https://code.visualstudio.com/docs/getstarted/getting-started)。

![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image32.webp)

其中每個部分的具體作用為：

- **Title Bar（標題欄）**：顯示檔名和視窗控制按鈕。
- **Activity Bar（活動欄）**：切換檔案、搜尋等功能檢視。
- **Side Bar（側邊欄）**：展示檔案列表等具體內容。
- **Editor Groups（編輯區）**：編寫程式碼的核心區域。
- **Breadcrumbs（路徑導航）**：顯示檔案路徑，支援跳轉。
- **Minimap（程式碼縮圖）**：快速預覽和定位程式碼。
- **Panel（底部面板）**：包含終端和輸出視窗。
- **Status Bar（狀態列）**：顯示當前環境狀態。

更具體的詳細內容解釋，請檢視[附錄中的 虛擬 IDE 視覺化 IDE 原理部分](/zh-tw/appendix/2-development-tools/ide-basics)。

<div style="margin: 50px 0;">
  <ClientOnly>
    <StepBar :active="3" :items="[
      { title: '環境認知', description: '理解 IDE 與 AI IDE' },
      { title: '本地實戰', description: 'Trae 打造貪喫蛇' },
      { title: '工具詳解', description: '熟悉 IDE 介面' },
      { title: '溝通技巧', description: '高效與 AI 對話' }
    ]" />
  </ClientOnly>
</div>

## 6. 怎麼跟 AI 說話纔有效

隨著 AI 能力越來越強，我們已經可以把很多“讓程式設計師寫程式碼”的工作交給 AI 來完成。  
但是，在實際使用中你會發現：同樣是用同一個 AI，有的人幾句話就能要到能跑起來的小專案，有的人聊了半天，結果卻完全不是自己想要的，其差別往往不在於“誰更聰明”，而在於——你跟 AI 說話的方式，是不是足夠具體、足夠有步驟。  
本節我們從幾個常見場景出發，介紹一些適合完全小白的提問方式，幫助你更穩定地讓 AI 給出可用的結果。

### 6.1 說清楚你的需求：從“模糊想法”到“具體說明”

很多人第一次用 AI 時，習慣只說一句非常籠統的話，比如：

> “幫我做個網頁。”  
> “幫我寫個小程式。”

在這種情況下，AI 只能自己“腦補”你想要什麼，於是它會隨便給你一個看上去挺完整的東西，但往往和你真正想做的差很多。  
要讓 AI 更聽得懂你的意思，需要把“腦子裡的想法”拆開，用幾句話一步步說清楚。

可以從這幾個方面來補充：

1. **告訴它，你拿這個東西來幹嘛**  
   比如，不要只說“個人網站”，而是說：
   - “我想做一個只包含一頁內容的個人簡介網頁，用來發給招聘的人看。”

2. **告訴它，大概需要哪幾塊內容**  
   不用說專業詞，只要描述你希望頁面上出現什麼，比如：
   - “頁面要有三個部分：最上面是名字和一句自我介紹，中間列出幾條工作經歷，最下面放郵箱和微訊號。”

3. **告訴它，你的水平和限制**  
   讓 AI 按照小白能接受的方式來做，比如：
   - “我完全不會寫程式碼，請只用最簡單的寫法，讓我可以直接複製到一個檔案裡，在瀏覽器裡開啟。”

4. **告訴它，你希望怎麼拿到結果**  
   例如：
   - “請給我一份可以直接儲存為 `index.html` 並在瀏覽器裡開啟的完整程式碼。”

綜合起來，可以讓你對 AI 這樣說：

> “我完全不會寫程式碼，想做一個只包含一頁內容的個人簡介網頁，用來發給招聘的人看。  
> 頁面需要三個部分：上面一行是名字和一句自我介紹，中間是幾條工作經歷，下面是郵箱和微訊號。

當你把這些資訊說清楚之後，AI 就能更接近你真正的需求，而不是隨便給你一個“看起來很厲害但用不上的東西”。

### 6.2 用對節奏：先“能跑起來”，再一點點變複雜

對完全小白來說，最常見的坑是：一上來就想做一個“非常完整”“功能很多”的東西。  
比如：

> “幫我做一個像淘寶那樣的網站。”  
> “幫我做一個可以註冊、登入、下單的系統。”

結果往往是：AI 給你一大團程式碼，你複製之後不是打不開，就是到處報錯；你也看不懂哪裡出了問題，最後只能放棄。

更適合的做法，是**主動控制節奏**，讓 AI 跟著你一步一步來，而不是一次性把所有東西都砸給你。可以按下面這個順序提要求：

1. **第一步：先要一個“最小的例子”**  
   只檢查一件事：能不能在瀏覽器裡看到東西。  
   例如：

   > “請先給我一個最簡單的示例，只要在瀏覽器裡能看到一行‘這是我的主頁’就行。  
   > 再一步步告訴我：檔名該叫什麼，應該怎麼儲存，怎麼開啟。”

2. **第二步：在這個基礎上，慢慢把內容加完整**  
   當你確認“確實能看到那一行字”之後，再說：

   > “在剛才的基礎上，幫我增加一個‘工作經歷’區域，把完整程式碼重新發給我。不要只發改動的部分。”

3. **第三步：結構差不多之後，再考慮好不好看**  
   例如：
   > “現在頁面已經能正常顯示內容了。接下來請幫我稍微美化一下：整體居中，標題大一點，用一個比較舒服的字型。請給出更新後的完整程式碼。”

每加一步，你都先執行一次，確認真的有變化，再讓 AI 往下加。這樣就算哪一步出問題，你也可以很快回到“上一版還正常”的狀態，而不用完全推倒重來。

### 6.3 善用截圖和複製：不會說就“把畫面扔給 AI”

很多完全小白遇到的難點，不在於“不會改程式碼”，而是在於**不知道怎麼把問題說出來**。  
比如：

- 瀏覽器裡突然彈出一大堆英文報錯，你完全看不懂。
- 網頁的排版和你想的不一樣，但你也不知道該用什麼詞來形容。

在這些情況下，不需要硬擠專業術語，最簡單的方式就是——**把你看到的東西原樣丟給 AI**。

可以這樣做：

1. **複製報錯文字**  
   當你看到一串紅色錯誤訊息時，可以直接複製出來，然後說：

   > “這是我執行後出現的完整錯誤資訊。我看不懂這些英文，請先用普通人能聽懂的話解釋一下，這大概是什麼意思。  
   > 然後告訴我，我現在最簡單應該怎麼改。”

2. **給 AI 看截圖**
   如果你覺得"這個頁面看著就是不對"，但又不會描述，可以：
   - 截一張當前頁面的圖；
   - 把你正在用的那份程式碼，一整段複製給 AI；
   - 然後說明：
     > "這是現在頁面的樣子，這是我現在的完整程式碼。
     > 我原本希望它是三列排版，現在變成一列了。請你幫我看一下原因，並給我一份改好後的完整程式碼。"

   ::: tip 💡 關於截圖功能的補充說明

   需要注意的是，**並非所有 AI 模型都支援"看圖片"**。這涉及到兩個不同的概念：

   - **純文字大模型（LLM）**：只能處理文字輸入，無法識別圖片內容。如果你給它發截圖，它要麼拒絕處理，要麼無法正確理解圖片中的資訊。

   - **多模態模型**：能夠同時處理文字、圖片等多種型別的輸入，可以"看懂"你發的截圖，並根據圖片內容給出建議。

   **常見模型的能力參考**（以 Trae 中可選的模型為例）：

   | 模型 | 是否支援圖片輸入 |
   |------|-----------------|
   | Doubao-Seed 系列 | ✅ 支援 |
   | GLM-4.7 / 4.6 | ❌ 不支援 |
   | MiniMax-M2.7 / M2.5 | ❌ 不支援 |
   | DeepSeek-V3.1 | ❌ 不支援 |
   | Kimi-K2.5 | ✅ 支援 |
   | Kimi-K2-0905 | ❌ 不支援 |
   | Qwen-3-Coder | ❌ 不支援 |
   | Gemini 系列 | ✅ 支援 |
   | GPT 系列 | ✅ 支援 |

   **使用建議**：如果你想透過截圖讓 AI 幫你排查介面問題，請先確認你使用的模型支援影象輸入。如果不支援，你可以改用文字描述問題，或者將錯誤資訊複製貼上給 AI。

   :::

3. **遇到喜歡的網頁，想做個類似的**  
   不需要說“這個佈局叫什麼”，直接：
   - 截圖或複製那頁的主要標題、段落；
   - 再說：
     > “我想做一個結構和這個差不多的頁面，不需要一模一樣。  
     > 請幫我用簡單一點的程式碼，搭一個類似的框架出來，然後我再自己把文字換成我的。”

簡單來說：你負責“把看到的東西搬給 AI”，再用最樸素的話說“我希望它變成什麼樣”；剩下的“翻譯成程式碼、解釋名詞、找問題”，交給 AI 來做。

### 6.4 當 AI 生成的程式碼不工作時：一套通用應對方法

在實際練習中，你一定會遇到這種情況：  
AI 很認真地給了你一段程式碼，你也老老實實地複製進去了，但結果要麼是瀏覽器一片空白，要麼完全不是它說的那個效果。  
這並不代表你“學不會”，也不代表 AI 完全錯了，而是你們之間還缺少幾輪“來回確認”。

當程式碼“不工作”時，可以按下面這套固定流程來跟 AI 說：

1. **先把“你做了什麼 + 現在什麼樣”說清楚**  
   避免只說“打不開”“不行”。可以這樣描述：

   > 開啟之後，頁面是完全空白的，沒有顯示你說的那句歡迎文字。
   > 我開啟了 xxxx 頁面，其中沒有剛才我說的部分啊，這不能用

2. **把你現在的完整程式碼發給 AI**  
   很多時候問題出在：複製少了一行、或者上一次和這一次的內容混在一起了。  
   你可以說：

   > “下面是我現在這個檔案裡的全部程式碼。  
   > 請你對比一下有沒有哪裡少了、寫錯了，或者順序不對。  
   > 請直接給我一份修正後的完整程式碼，不要只發一小段。”

3. **如果有錯誤提示，一併給出**  
   比如瀏覽器右上角彈出的錯誤，或者底部的一些紅字。你可以：
   - 把錯誤文字複製出來；
   - 或者截一張圖；
   - 然後說：
     > “這是我看到的錯誤提示。我完全看不懂，請先用簡單的方式說明這大概是什麼問題，再告訴我現在最需要改哪幾行。”

4. **要求對方用“小白模式”一步一步講**  
   你可以直接把自己的情況說清楚，讓它別省略中間步驟：

   > “我完全不會寫程式碼，請你一步一步告訴我：  
   > 第 1 步要改哪一行，  
   > 第 2 步要怎麼儲存，  
   > 第 3 步要怎麼重新開啟或者重新整理頁面。  
   > 每一步都請用完整的句子寫出來。”

5. **最後，請它幫你做“應該看到什麼”的對照**  
   例如：
   > 請先說一下，按照你改好的程式碼，正常情況下我開啟網頁應該看到什麼內容。

只要你按照這套流程來和 AI 互動，大部分“程式碼不工作”的情況，都可以在幾輪來回中解決掉。  
同時，你也會逐漸熟悉常見的問題型別，下次再遇到類似情況就能直接解決。

## 7. 小結與下一步

這一章裡，你完成了一次從“能在網頁裡玩一個 AI 生成的貪喫蛇”，到“能在本地用 AI IDE 自己搭出一個小遊戲”的升級。你大致搞清了三件事：寫程式碼為什麼離不開一個像 VS Code 這樣的 IDE；在這個基礎上，再加上 AI（Trae、Cursor 等）之後，IDE 不再只是工具箱，而是多了一個能聽懂自然語言、幫你新建檔案、裝環境、改程式碼的“實習工程師”；以及 IDE 介面上每一塊區域（左側檔案、底部終端、中間編輯區、右側 AI 面板）分別管什麼，用起來就不再一頭霧水。

更重要的是，你已經實際跑通了一次完整流程：在本地新建空資料夾 → 用 AI IDE 開啟 → 在側邊欄對話裡描述需求 → 讓 AI 生成專案並啟動開發伺服器 → 出現問題時，把“現象 + 全部程式碼 + 報錯截圖”一起丟給 AI，請它用“小白模式”一步步修。這個過程中，你也練習瞭如何寫更有效的提示詞：說清目標、內容結構和自己的水平，控制好節奏，從“先能跑起來”到“再變好看、變好玩”。

下一章，我們會把重點從“會用工具”轉向“做一個真正有人願意用的原型”：從使用者視角出發，設計規則、互動和反饋，然後再讓 AI 幫你把這些想法落成產品雛形。

## 8. 📚 作業：用本地 AI IDE 做一個更復雜的遊戲

<StageAssignmentCard title="用 AI IDE 打造你的專屬遊戲">

<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
  <template #header>
    <div style="font-weight: bold; font-size: 16px;">🚀 挑戰任務：打造你的專屬遊戲</div>
  </template>

  <p>
    你已經用本地 AI IDE 做過一個貪喫蛇。現在請你再挑戰一個更復雜一點的小遊戲，完整走一遍“描述需求 →
    生成專案 → 本地執行 → 除錯迭代”的流程。
  </p>

  <ol>
    <li>
      <strong>選擇一個比貪喫蛇更復雜的遊戲</strong>
      <ul>
        <li>可以是“俄羅斯方塊”“打地鼠”“掃雷”“2048”“飛機大戰”之類</li>
        <li>或者你自己想象的一個簡單原創遊戲</li>
      </ul>
    </li>
    <li>
      <strong>必須用本地 AI IDE 來完成整個過程</strong>
      <ul>
        <li>新建一個空資料夾，用 AI IDE 開啟</li>
        <li>在側邊欄聊天裡描述清楚你的遊戲需求</li>
        <li>讓 AI 負責建立檔案、搭建專案結構和實現主要邏輯</li>
        <li>在本地啟動開發伺服器，確保遊戲可以正常執行</li>
      </ul>
    </li>
    <li>
      <strong>有基本的“可玩性”和反饋</strong>
      <ul>
        <li>至少包含開始、進行中、結束三種狀態</li>
        <li>玩家有明確的操作方式（鍵盤或滑鼠）</li>
        <li>螢幕上有清晰的得分或進度反饋</li>
      </ul>
    </li>
    <li>
      <strong>至少進行 2 輪以上的迭代</strong>
      <ul>
        <li>第一輪讓 AI 做出“能玩”的版本</li>
        <li>第二輪以後，逐步提出具體改進（樣式、難度、互動最佳化等）</li>
      </ul>
    </li>
  </ol>
</el-card>

<RelatedArticlesSection
  title="繼續學習"
  description="建議先進入原型實戰，再逐步接入 AI 能力。"
  :items="relatedArticles"
/>

# 附錄

<el-card id="appendix-nav" shadow="hover" style="margin-top: 40px; margin-bottom: 24px; border-left: 5px solid #E6A23C;">
  <div style="font-weight: bold; margin-bottom: 8px;">附錄導航</div>
  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
    這裡是“隨查隨用”的補充資料：遇到術語看不懂、介面找不到入口時再回來。
  </div>
  <el-row :gutter="16">
    <el-col :span="12">
      <a href="#appendix-1-map" style="text-decoration: none; color: inherit;"><b>附錄一：常見計算機術語速查表</b></a><br/>
      <span style="font-size: 12px; color: #909399">看到不懂的計算機名詞時，來這裡快速查含義，推薦通讀一遍。</span>
    </el-col>
    <el-col :span="12">
      <a href="/zh-tw/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>附錄二：Visual Studio Code 選單欄解析</b></a><br/>
      <span style="font-size: 12px; color: #909399">不知道 AI IDE 的介面有什麼用的時候，拿以下內容和 AI 對話進行查閱，或者直接檢視。</span>
    </el-col>
  </el-row>
  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
    支援：按 Ctrl/⌘+F 搜尋關鍵詞；遇到新詞可複製報錯讓 AI 用“小白模式”解釋。
  </div>
</el-card>

# 附錄一：常見計算機術語速查表

<el-card id="appendix-1-map" shadow="hover" style="margin-top: 40px; margin-bottom: 20px; border-left: 5px solid #409EFF;">
  <div style="font-weight: bold; margin-bottom: 10px;">🗺️ 術語地圖：你將在這裡遇到...</div>
  <el-row :gutter="20">
    <el-col :span="6">
      <a href="#term-tool-ui" style="text-decoration: none; color: inherit;">🖥️ <b>工具介面</b></a><br/>
      <span style="font-size: 12px; color: #909399">IDE / 終端 / 面板</span>
    </el-col>
    <el-col :span="6">
      <a href="#term-network" style="text-decoration: none; color: inherit;">🌐 <b>網路服務</b></a><br/>
      <span style="font-size: 12px; color: #909399">URL / 埠 / 本地</span>
    </el-col>
    <el-col :span="6">
      <a href="#term-frontend-backend" style="text-decoration: none; color: inherit;">⚙️ <b>前後端</b></a><br/>
      <span style="font-size: 12px; color: #909399">API / JSON / 介面</span>
    </el-col>
    <el-col :span="6">
      <a href="#term-code-basic" style="text-decoration: none; color: inherit;">📝 <b>程式碼基礎</b></a><br/>
      <span style="font-size: 12px; color: #909399">變數 / 函式 / 元件</span>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="margin-top: 10px;">
    <el-col :span="6">
      <a href="#term-debug" style="text-decoration: none; color: inherit;">🐞 <b>除錯查錯</b></a><br/>
      <span style="font-size: 12px; color: #909399">Bug / 斷點 / 日誌</span>
    </el-col>
    <el-col :span="6">
      <a href="#term-project" style="text-decoration: none; color: inherit;">📂 <b>專案管理</b></a><br/>
      <span style="font-size: 12px; color: #909399">Git / 倉庫 / 提交</span>
    </el-col>
    <el-col :span="6">
      <a href="#term-ai-tool" style="text-decoration: none; color: inherit;">🤖 <b>AI 工具</b></a><br/>
      <span style="font-size: 12px; color: #909399">Agent / 模型 / Key</span>
    </el-col>
    <el-col :span="6">
      <a href="#term-browser" style="text-decoration: none; color: inherit;">🛠️ <b>瀏覽器</b></a><br/>
      <span style="font-size: 12px; color: #909399">DevTools / 控制檯</span>
    </el-col>
  </el-row>
</el-card>

這一部分不需要刻意背誦，更重要的是先在腦子裡建立一個印象。

</StageAssignmentCard>

## <span id="term-tool-ui">[一、和“工具介面”有關的詞](#appendix-1-map)</span>

### 1. IDE、編輯器、終端

**IDE（整合開發環境）**  
可以把 IDE 想象成“程式設計師的工作臺”：

- 一邊是寫字的桌面（編輯器），
- 一邊有電源插座和按鈕（執行、除錯），
- 抽屜裡有各種小工具（搜尋、版本管理）。  
  VS Code、Trae、Cursor 都屬於 IDE 或基於 IDE 改的工具。

**程式碼編輯器（Editor）**  
更像是“高階記事本”，只負責：

- 讓你打字寫程式碼；
- 用顏色區分不同內容（語法高亮）；
- 給你自動補全。  
  IDE 裡那塊寫程式碼的區域，就是程式碼編輯器。

**終端 / 命令列（Terminal / 命令列視窗）**  
一個黑底白字的視窗，你在裡面**輸入命令**讓電腦幹活：

- 比如：`npm run dev` 表示“幫我啟動開發伺服器”；
- `python main.py` 表示“執行這個 Python 檔案”。  
  可以把它想象成：“你給電腦發一條條簡訊命令，它用文字回覆執行結果”。

### 2. IDE 中幾個常見區域

**活動欄（Activity Bar）**  
最左邊一排豎著的小圖示，像“功能選項卡”：

- 點檔案圖示 → 左邊顯示檔案列表；
- 點放大鏡圖示 → 左邊變成搜尋；
- 點 Git 圖示 → 左邊顯示版本管理。

**側邊欄（Side Bar）**  
活動欄右邊那一大塊區域，專門顯示當前模式下的內容：

- 檔案模式：展示專案裡的檔案和資料夾；
- 搜尋模式：展示搜尋結果列表；
- 原始碼管理模式：展示有哪些檔案被改動。

**編輯區（Editor）**  
中間最大的區域，就是你開啟檔案後實際看到和修改內容的地方；  
上方的標籤頁（Tab）是“當前開啟了哪些檔案”。

**底部面板（Panel）**  
一般在最下方，常見幾種：

- Terminal（終端）：輸入命令跑專案；
- Problems（問題）：列出出錯的檔案和行號；
- Output（輸出）：一些工具列印出來的執行資訊；
- Debug Console（除錯控制檯）：除錯時的輸出。

**狀態列（Status Bar）**  
最下面那條細細的欄：

- 顯示當前檔案是什麼語言（JS、HTML、Python 等）；
- 顯示縮排是“2 個空格”還是“4 個空格”；
- 顯示有沒有錯誤、當前 Git 分支是什麼。  
  可以把它當作“當前編輯環境的一張小體檢單”。

## <span id="term-network">[二、和“網頁 / 網路 / 服務”有關的詞](#appendix-1-map)</span>

### 1. URL、http、埠、本地服務

**URL（網址）**  
就是瀏覽器位址列那一串東西，比如：

- `https://www.trae.cn/`
- `http://localhost:3000/`  
  它就像“網際網路世界裡某個房間的完整地址”。

**HTTP / HTTPS**  
在 URL 開頭看到的 `http://` 或 `https://`：

- HTTP：普通傳輸方式；
- HTTPS：多了一層加密，更安全。  
  你可以先記成：“寫網頁地址時，通常以 `http` 或 `https` 開頭”。

**埠（Port）**  
可以把一臺電腦想象成一棟大樓，埠就是**每個房間的門牌號**：

- `:3000` 表示 3000 號房間；
- 同一臺電腦上，可以同時開多個服務，各佔一個埠。  
  `http://localhost:3000` 就是“訪問我自己電腦上 3000 號房間裡跑著的那個服務”。

**本地（Local / localhost）**  
指的就是你自己的電腦。

- `localhost` 可以理解為“這臺機器自己”。  
  當你訪問 `http://localhost:3000`，其實是在跟自己電腦上執行的程式打交道，而不是上網訪問別人家的伺服器。

**服務（Service / Server）**  
“服務”就是一個**一直在後臺執行、隨時聽你指令**的程式：

- 網頁服務：瀏覽器訪問一個地址時，它返回網頁內容；
- 遊戲服務：負責管理對局、存檔、排行榜等。  
  在終端裡執行 `npm run dev` 啟動專案，本質上就是“在本地開了一個網頁服務”。

## <span id="term-frontend-backend">[三、和“前端 / 後端 / 資料”有關的詞](#appendix-1-map)</span>

### 1. 前端、後端

**前端（Frontend）**  
使用者**看得見、點得到**的部分：

- 網頁上的按鈕、文字、圖片、動畫；
- React / Vue 寫出來的頁面。  
  負責展示介面和響應使用者操作（點選、輸入、拖拽等）。

**後端（Backend）**  
使用者**看不見**、在伺服器上跑的那部分：

- 存和讀資料（使用者資訊、訂單、分數等）；
- 執行業務規則（登入驗證、許可權判斷）。  
  你可以把前端比作“店面和店員”，後端比作“倉庫和賬本系統”。

### 2. 介面、請求、響應、JSON

**介面 / API**  
前端和後端事先約定好的一套“問問題 + 回答案”的規則。

- 前端說：“我用這個地址、這個格式來問你”；
- 後端說：“我用這個格式把結果回給你”。

**請求（Request）**  
前端發給後端的一次“提問”：

- 請求去哪（URL）；
- 用什麼方式（GET、POST 等）；
- 帶了什麼引數（比如使用者 ID）。

**響應（Response）**  
後端給前端的“答覆”：

- 狀態碼（200 成功，404 找不到，500 伺服器出錯）；
- 實際資料（多半是 JSON）。

**JSON**  
一種用**很像 JavaScript 程式碼的寫法**來表示資料的格式，比如：

```json
{
  "name": "Alice",
  "score": 120
}
```

可以理解成“機器版的鍵值對記事本”，前後端經常用它來交換資料。

## <span id="term-code-basic">[四、和“寫程式碼本身”有關的詞](#appendix-1-map)</span>

### 1. 變數、識別符號、狀態

**變數（Variable）**  
“給一塊資料貼上的標籤”。

- 例如把分數這件事記作 `score`；
- 以後用 `score` 這個名字，就能讀寫這塊資料：

```js
let score = 0
score = score + 10
```

**識別符號（Identifier）**  
“你自己起的各種名字”的統稱：

- 變數名：`score`
- 函式名：`moveSnake`
- 元件名：`SnakeGame`  
  就像給資料夾起名“照片”“工作”“賬單”，方便在程式碼裡區分不同“東西”。

**狀態（State）**  
程式當前的“關鍵情況記錄”：

- 遊戲是不是已經結束；
- 蛇現在在第幾格；
- 當前分數是多少。  
  在 React 裡，一般會這麼理解：**狀態一改，介面就要跟著更新**。

### 2. 函式、元件、模組

**函式（Function）**  
把一件“可以反覆做的事”打包起來，起個名字：

```js
function sayHello(name) {
  console.log('Hello, ' + name)
}
```

以後只要寫 `sayHello('Bob')`，就等於把裡面那幾行再次執行一遍。

**元件（Component）**  
前端裡的“可以重複用的一塊小介面 + 小邏輯”：

- 一個按鈕可以是元件；
- 一個頂部導航可以是元件；
- 整個遊戲區域也可以是一個元件。  
  元件之間可以拼裝，就像搭樂高。

**模組（Module）**  
“一組相關程式碼組成的檔案”：

- `snakeLogic.ts` 專門放和“蛇怎麼動”相關的程式碼；
- `score.ts` 專門放算分數的程式碼。  
  模組之間可以互相“匯入 / 匯出”，像不同抽屜裡的工具。

### 3. 語法、程式語言、框架

**語法（Syntax）**  
某門程式語言的“語法規則”和“標點習慣”：

- 字串要加引號；
- 每條語句末尾要不要寫分號；
- 程式碼塊要用 `{}` 包起來。  
  寫錯語法，編譯器 / 直譯器會直接報“語法錯誤”。

**程式語言（Programming Language）**  
和計算機溝通的一整套規則和詞彙，比如：

- JavaScript、Python、Java、C++、Go……  
  不同語言適合做的事情、寫法和工具生態不同。

**框架（Framework）**  
別人幫你“先搭好骨架”的一大套程式碼和套路：

- 前端：React、Vue（幫你處理介面更新、狀態管理等）；
- 後端：Django、Spring Boot 等。  
  你等於是在“現成的骨架上填內容”，比從頭造輪子輕鬆很多。

## <span id="term-debug">[五、和“除錯 / 查錯”有關的詞](#appendix-1-map)</span>

### 1. Bug、報錯、日誌 / console.log

**Bug**  
程式表現和你想的不一樣，就是 bug：

- 本來應該出現按鈕，結果沒有；
- 本來應該加 10 分，結果多加了一堆；
- 頁面一開啟就白屏。

**報錯資訊（Error Message）**  
程式崩了之後，螢幕上 / 終端裡那段“看起來很嚇人”的英文。  
雖然難看，但通常會告訴你：

- 大致是哪裡錯了；
- 哪個檔案、第幾行附近需要檢查。  
  你可以直接複製它，丟給 AI 讓它翻譯和分析。

**日誌（Log）**  
程式在執行過程中自己“說的話”。  
最常見的就是前端裡的：

```js
console.log('當前分數', score)
```

你可以把它理解成：**在關鍵步驟主動報個數，方便你確認程式是不是按你想的在走**。

> **console.log 是什麼？**
>
> - `console` 可以理解為“除錯用的小黑板”；
> - `.log` 是“在小黑板上寫一行字”；
> - 瀏覽器按 F12 開啟開發者工具裡的 Console 面板，就能看到這些輸出。

### 2. 除錯、斷點、單步執行、快照

**除錯（Debug / 除錯程式）**  
當程式出問題時，不是上來就亂改，而是：

- 讓程式在某一行停一下（斷點）；
- 看一看當前每個變數的值；
- 一步一步往下走，觀察“從哪裡開始不對勁”。

**斷點（Breakpoint）**  
可以把斷點想成“在這行插了一個暫停按鈕”：

- 程式平時是一路往下跑；
- 跑到你插斷點的那一行，會暫時停住，等你檢查。

**單步執行（Step）**  
從斷點停下來之後，你可以選擇：

- 一行一行往下執行（step over）；
- 進入某個函式內部詳細看（step into）。  
  就像看一段舞蹈分解動作一樣，而不是直接看快放影片。

**快照（Snapshot）——簡化理解**  
這裡的“快照”可以理解為：

> **在某個時間點，把“當前狀態”拍一張照片，方便以後對比。**  
> 在實際工具裡，“快照”可能指：

- 一次提交時刻專案的完整狀態；
- 除錯時某個時間點記憶體 / 變數的整體情況。  
  你先記住這個比喻就夠用：**快照 ≈ 某一刻狀態的留影**。

## <span id="term-project">[六、和“專案管理”有關的詞](#appendix-1-map)</span>

### 1. 專案、工作區、資料夾

**專案（Project）**  
為實現一個應用而放在同一個資料夾裡的：

- 原始碼檔案
- 配置檔案
- 素材（圖片、音訊等）

**工作區（Workspace）**  
VS Code / Trae 用來描述“當前這一次開啟了一組什麼東西”的概念：

- 開啟一個資料夾 → 一個簡單工作區；
- 有時也會把多個資料夾合併成一個多專案工作區。

### 2. Git、倉庫、提交（Commit）

**Git（版本控制工具）**  
可以理解成專案的“時光機”：

- 每次改完一批內容，可以“拍一張版本合照”；
- 以後需要時，可以回到某個歷史狀態。

**倉庫（Repository / Repo）**  
開啟 Git 之後，那個帶“版本記錄”的專案資料夾，就叫“倉庫”。

**提交（Commit）**  
每次你覺得“這波改動算一個階段性成果”，就可以：

- 寫一條說明（比如：`Add score panel`）；
- 把當前全部修改打包成一個版本；
- Git 會把這一刻的狀態存下來。  
  這一次動作就叫“做了一次 commit”。

## <span id="term-ai-tool">[七、和“AI 開發工具”有關的詞](#appendix-1-map)</span>

### 1. AI IDE、Agent、SOLO 模式

**AI IDE**  
在普通 IDE 的基礎上，多了一層“能聽懂人話、能自己動手”的 AI：

- 你說“做個貪喫蛇”，它能幫你搭專案、寫程式碼；
- 你把報錯截圖給它，它能先解釋再嘗試修復；
- 它能跨多個檔案一起改，而不僅僅是一行一行補全。

**Agent（智慧體）**  
可以把 Agent 想象成一個**長期待命的 AI 小工程師**：

- 會讀你的專案結構；
- 會拆解任務（先裝依賴、再生成程式碼、再跑專案）；
- 跑出錯之後，會根據錯誤資訊自己調整方案。

**SOLO 模式（以 Trae 為例）**  
表示：

> 你只需要把“終點”說清楚，  
> 它自己規劃“路線”，  
> 在本地一步步執行，  
> 中途纔在關鍵節點問你要不要繼續。

### 2. 模型、金鑰（API Key）

**模型（Model，這裡特指大語言模型）**  
這個詞可以簡單理解為“背後那一大坨 AI 大腦”：

- 比如 GPT、Claude、Kimi、GLM 等；
- 不同模型在“理解中文”“寫程式碼”“推理”上水平不一樣；
- AI IDE 裡通常可以在下拉選單裡換不同模型使用。

**金鑰 / API Key**  
你可以把 API Key 理解為**一個很長的“高階密碼 + 身份證號”**，  
它的作用只有一個：

> 告訴別人的伺服器：“我是哪個使用者，請允許我使用你們的 AI 服務，並幫我記賬。”

幾個要點：

- 這串東西通常是一長串隨機字母數字；
- 不能發到公開的地方（倉庫、截圖、羣聊），別人拿到就可以冒用你的賬號；
- 在工具裡填 API Key，就等於“把鑰匙插進鎖裡”，之後工具就能幫你呼叫對應的 AI 服務。

## <span id="term-browser">[八、和“瀏覽器 / 開發者工具”有關的詞](#appendix-1-map)</span>

**Chrome（谷歌瀏覽器）**  
現在前端開發最常用的瀏覽器之一：

- 開啟網頁快；
- 自帶比較強的“開發者工具”，方便查問題。

**重新整理（Refresh / Reload）**  
重新載入當前網頁：

- 修改前端程式碼後，如果沒有自動重新整理工具，手動按重新整理才能看到效果。

**開發者工具（DevTools）**  
瀏覽器裡專門給開發者用的一組工具面板：

- 檢視網頁結構（Elements）；
- 檢視樣式（Styles）；
- 查錯誤和日誌（Console）；
- 查網路請求（Network）。  
  在 Chrome 裡通常按 `F12` 或 `Ctrl+Shift+I` 開啟。

**Console（控制檯）**  
開發者工具裡的一個標籤頁，專門展示：

- 你寫的 `console.log(...)` 輸出；
- 執行過程中發生的錯誤（紅字）。  
  你可以當它是“程式的聊天框”：
- 程式有話要說，就寫在這裡；
- 你除錯時最常看的就是這一塊。

如果後面你在學習過程中又遇到新的詞，也可以按這個風格讓 AI 協助你補充全部內容：

- 先寫一句“它是幹嘛的”；
- 再寫一句“可以把它想象成什麼”；
- 最後給一個特別簡單的小例子。  
  這樣你的“個人術語表”會越長越實用，逐漸能夠更好的與計算機進行溝通。