初級二：學會 AI 程式設計工具
本章導讀
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
預習提示
如果你還不熟悉 IDE 是什麼、各個介面元素有什麼作用，建議先閱讀 IDE 簡介 進行預習，瞭解 IDE 的基本概念和常見功能。
在早期程式設計時代，我們只需要簡單文字編輯器和語言處理器即可。但隨著專案複雜度增加，開發者迫切需要一種能高效管理檔案、支援語法高亮和除錯的工具，於是整合開發環境（IDE）應運而生。
你可以把 IDE 理解成專門用來“編輯、管理、執行和除錯”程式碼的程式。早期的 IDE 外觀非常“原始”，幾乎完全透過鍵盤操作。
終端介面（Terminal） 圖片來源：https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
知名且功能成熟的“內建 IDE”如 Vim，常用於伺服器遠端操作。
為了更高效，我們需要支援滑鼠操作的現代 IDE，通常包含：
- 原始碼編輯器：語法高亮、自動補全。
- 構建與執行工具：內建編譯器/直譯器。
- 偵錯程式：斷點除錯、變數檢視。
現代 IDE 往往還內建 Git 等工具。最流行的是微軟的 Visual Studio Code (VS Code)，它輕量且可擴充套件。雖然也有 JetBrains 全家桶等專業 IDE，但 VS Code 對初學者最友好。
VS Code 的核心理念是“一切皆外掛”。它透過外掛機制支援各種語言，安裝 Python 外掛就是 Python IDE，安裝 C++ 外掛就是 C++ IDE。不裝外掛時，它只是個高階文字編輯器。
甚至可以用來編輯 Markdown 文件。
總之，IDE 是一套幫助開發者高效寫程式碼和執行程式的工具集。
更具體的詳細內容解釋，請檢視附錄中的 虛擬 IDE 視覺化 IDE 原理部分。
3. AI IDE 和普通 IDE 有什麼不同
普通 IDE（比如原版 VS Code）本質上是一套“工具箱”：
可以開啟專案、寫程式碼、執行和除錯，也能裝外掛，但前提是你需要自己知道要做什麼、怎麼做：
- 報錯時，自己讀提示、自己查哪一行有問題；
- 想加新頁面或新介面，自己找對應檔案、自己寫程式碼；
- 想配置環境或打包，自己查文件、按步驟操作。
但在 AI IDE 裡，你可以直接使用大語言模型幫助你進行編碼和修改檔案：
- 直接說“做一個登入頁”，它先生成基礎程式碼結構；
- 把報錯資訊和相關程式碼丟給它，讓它先分析原因並給出修改建議；
- 在你確認後，讓它自動新建檔案、批次改程式碼，處理跨檔案的體力活。
例如，你可以選中一段程式碼，讓它“重構一下”或“加註釋”；也可以在側欄裡問“這個專案是怎麼設計的？”，透過 @檔名 或 @整個專案 指定參考範圍，用一句話自動完成新建檔案、寫程式碼和執行的繁瑣操作。
在最新版 VS Code 中，已經內建了一個大語言模型助手。你可以直接針對整個程式碼倉庫、某個檔案，甚至某個函式與模型對話。你也可以像之前在 Web 端使用自動寫程式碼工具一樣，將需求以提示詞的形式發給內建的編碼 Agent，讓它自動幫你實現所需功能、建立檔案、修改程式碼、配置環境等。
你可以下載安裝 VS Code，在點選右上角的側邊欄入口，開啟 AI 功能區域，體驗這些能力。
不過，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 可以自動生成、打包、安裝、執行和修改程式碼，在很多工上可以部分替代初級軟體工程師的工作。
Antigravity
Antigravity
Antigravity 是 Google 在 2025 年 11 月與 Gemini 3 一同釋出的全新 AI IDE，採用"Agent-First"（智慧體優先）開發模式。與傳統 AI 輔助編碼不同，Antigravity 讓 AI 代理成為"主動執行者"，可直接操作編輯器、終端、瀏覽器等工具，承擔更多"執行""策劃""驗證"的工作。開發者只需提出高層意圖，代理便會自動拆分任務、制定計劃、執行程式碼、執行測試、生成成果。它支援多模型切換，包括 Gemini 3 Pro、Claude Sonnet 4.5 等，目前以公開預覽形式提供，支援 Windows、macOS、Linux 全平臺。
Trae
Trae
Trae 是位元組跳動推出的一款 AI 程式設計助手，支援 100 多種程式語言，並能整合到主流 IDE 中。它的功能包括：用自然語言生成程式碼、自動除錯、把設計稿轉換為 React/Vue 元件等。在 2025 年 8 月的更新之後，Trae 新增了智慧依賴匯入、重新命名建議、任務清單管理等功能；SOLO 模式也開始支援後端程式碼生成和技術架構文件編輯。
Cursor
Cursor
Cursor 是 Anysphere 開發的一款 AI 程式碼編輯器，基於 VS Code 定製，重點最佳化了大規模程式碼倉庫和多檔案協同的場景。它支援 GPT-4o、Claude 3.7 等模型；2025 年推出的 Claude Max 模式可以處理數百萬行程式碼級別的專案。專業版取消了請求次數限制，非常適合複雜的企業級專案。
目前，Cursor 可以說是“帶前端介面的 AI IDE”中綜合體驗最好的一款之一，使用者數量龐大，功能迭代頻率也很高。它最大的缺點是價格較高——專業版大約需要每月 20 美元。
Qoder
Qoder
Qoder 是阿里巴巴推出的一款強調“透明協作”和“增強上下文工程能力”的 AI IDE。它透過 Action Flow 支援把任務拆解成多個步驟，並實時跟蹤 AI 的執行過程；還支援多模型動態路由和任務狀態機管理，非常適合在中大型專案中做架構治理和對遺留系統進行“反向工程”分析。
CodeBuddy
CodeBuddy
CodeBuddy 是騰訊雲推出的一款 AI 程式設計工具，強調對中文指令的支援以及企業級合規能力。它提供程式碼補全、批次程式碼審查和多模型切換等功能；其中的 Craft 智慧體可以實現多檔案程式碼生成和 API 整合。企業版支援私有化部署，並透過了三級等保認證，適合金融、醫療等對資料安全要求較高的行業。
VS Code + Cline
VS Code + Cline
Cline 是 VS Code（Visual Studio Code）的一款 AI 程式設計 Agent 外掛，可以透過配置不同的 API 端點來靈活切換所使用的大模型。Cline 支援多模態輸入、MCP 工具擴充套件以及成本監控，所有操作都需要使用者確認後才會執行。它非常適合用於快速驗證想法，或與現有開發流程整合。基礎功能是免費的，企業版則支援在私有環境中部署模型。
Kiro
Kiro
Kiro 是 AWS（亞馬遜雲科技）推出的 AI 程式設計 IDE，深度整合 Amazon Bedrock 和 AWS 雲服務生態。它支援 Claude、Nova 等多種大模型，特別適合需要與 AWS 雲服務緊密整合的開發場景。Kiro 提供了智慧程式碼生成、自動化測試、以及與 AWS 資源（如 Lambda、S3、DynamoDB）的無縫對接能力，對於雲原生應用開發具有獨特優勢。
備註：如果你想使用 Anthropic Claude 相關的模型，需要使用 Cursor、Kiro 或 Antigravity 作為 IDE 纔行。這些 IDE 與 Anthropic 有官方合作或深度整合，能夠提供更穩定、更完整的 Claude 模型體驗。
4. 實戰：用 AI IDE 在本地生成貪喫蛇遊戲
前面講的主要是"概念"和"差異"。這一小節，我們透過一次完整的實戰，把抽象概念落到具體操作上：新建一個空資料夾 → 用 AI IDE 開啟 → 在側邊欄聊天，讓它用 React 幫你從零生成一個貪喫蛇遊戲。 這裡以上面介紹的 Trae 為例，首先需要安裝和簡單理解什麼是 Trae。
💡 小提示：從網頁到本地的無縫銜接
如果你之前已經在 z.ai 或其他網頁端 AI 程式設計平臺上開發過專案，可以直接將程式碼下載到本地，然後用 AI IDE 開啟繼續開發。這樣既能保留之前的成果，又能享受本地 IDE 更強大的 AI 輔助能力。
操作步驟很簡單：
- 在 z.ai 等平臺點選下載按鈕，將專案儲存到本地
- 解壓後用 Trae/Cursor 等 AI IDE 開啟該資料夾
- 在側邊欄繼續與 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 定價與使用方式
💡 版本選擇提示（零基礎推薦 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 高度相似：同樣是左側資源管理器、中間編輯區、右側擴充套件面板的經典三欄佈局。
右側的側邊欄就是 Copilot 互動視窗，也可以理解為 Agent 視窗。如果你暫時看不到它，可以點選 Trae 右上角的側邊欄圖示將其開啟。
開啟側邊欄之後，你會看到一個 Builder 選項，這就是 Agent 模式。簡單理解，它相當於 z.ai 的“本地版”，可以幫你操作本機環境，安裝執行環境、開啟網頁等。
點選 “Builder” 後，你會看到 “Chat” 模式和 “Builder with MCP” 模式：
- Chat 模式：主要用於和當前資料夾裡的程式碼對話，或者當作普通聊天模型來使用。（你可以透過左上角的 “File” 選單開啟一個資料夾，在這個資料夾中進行編輯操作。在這種情況下，Builder 建立或修改的檔案都只會發生在這個資料夾內部。）
- Builder with MCP 模式：為 Agent 提供了更多可用工具（例如把語言模型和其他軟體聯通起來、查詢天氣等）。你可以簡單理解為：MCP 能讓語言模型更方便地呼叫各種外部工具。
在下面的區域，你還會看到模型選擇選項，點選即可修改當前使用的大模型。在中國版中，你可以選擇使用 Kimi k2 或 GLM 等國內模型；如果你使用的是國際版 Trae，還可以選擇 ChatGPT 或 Claude 等海外模型。不過，由於國內大模型發展非常快，Kimi、Qwen、GLM 等在很多工上的實際體驗已經接近 Claude 3.5 或 3.7，對日常開發來說已經完全夠用，這裡不強制要求使用國際版或者國內版進行操作。
需要注意的是，這裡不推薦使用 Auto 模式（自動選擇模型），如果是國際版，我們推薦使用 Gemini 或者 GPT 模型， 如果是國內版，我們推薦你嘗試 Kimi k2 或 Minimax、GLM 等國內模型， 不同模型有不同的使用場景，沒有教條式的一定誰比誰好在哪，你可以在不同任務遇到困難無法解決時換一個模型，透過多次測試得到屬於自己的最佳實驗結果。
以上就是對 Trae 的一個簡單介紹。接下來，我們可以回顧一下之前在 z.ai 中做過的操作，並嘗試在 Trae 中做同樣的事情。
4.2 第一步：新建空資料夾並用 AI IDE 開啟
在正式動手之前，我們首先需要準備一個乾淨的專案工作目錄。 以本小節示例為例，可以在本地新建一個名為 snake-game-react 的空資料夾。
隨後，開啟已安裝好的 AI IDE，在啟動介面選擇開啟資料夾或Open Folder，將該空資料夾作為專案根目錄匯入；也可以直接將資料夾拖入 IDE 視窗完成開啟。此時，左側資源管理器中不會出現任何程式碼檔案，表示我們正從一個完全空白的專案狀態開始。
📚 可選：接入雲服務廠商的 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 的步驟非常簡單，只需幾分鐘即可完成：
- 訪問你選擇的雲服務廠商官網（如智譜 AI：https://bigmodel.cn/glm-coding ，火山引擎：https://www.volcengine.com/activity/codingplan）
- 註冊賬號並登入
- 找到 "定價" 或 "Coding Plan" 頁面
- 選擇適合你的套餐並完成支付
- 支付成功後，你會獲得一個 API Key 或 Plan ID
🎯 自定義模型推薦
在 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 為例）
- 訪問 DeepSeek 平臺：https://platform.deepseek.com/usage
- 註冊賬號並登入
- 在充值頁面購買 10 元的 Token 包
- 充值成功後，在 API Keys 頁面建立並複製 API Key
- 在 Trae 中點選 "Add Model"，找到 DeepSeek，選擇對應模型，輸入 API Key 即可使用
透過下列介面，你可以成功新增（注意看選擇模型的選項後【一定要滑動到最底部】，下面有一個“自定義模型“，點選後纔可以輸入模型 ID，此時可以輸入上述推薦的模型 ID 如 stepfun/step-3.5-flash:free 直接寫入即可，同時點選下方的獲取 Key 前往官網獲得對應的 API Key 寫入即可正常使用。）
4.3 第二步：在側邊欄聊天，讓 AI 用 React 設計貪喫蛇遊戲
接下來，開啟 AI 聊天側邊欄：一般是按 Ctrl+L 或點選右側聊天圖示。然後在聊天裡輸入一個足夠清晰的提示：
請你用 React 架構實現貪喫蛇遊戲，包含鍵盤控制、喫到食物變長加分、撞牆或撞到自己時顯示“遊戲結束”並支援重新開始。實現後幫我啟動這個專案。如果遇到沒安裝的程式環境就自動安裝沒安裝的環境。
在這個過程中，你需要意識到 AI 不只是聊天模型，它能夠幫助你操作本機環境：建立檔案、安裝依賴、執行啟動命令等。你可以直接用自然語言描述想要達成的目標，由 AI 來決定具體執行哪些命令、如何組織程式碼。
如果執行過程中遇到問題，AI 會在對話裡展示報錯和處理方案，你可以繼續透過對話讓它調整，而不必自己記住所有命令細節。
⚠️ 需要注意
例如下圖所示，有時候 AI Agent 會在執行的過程中暫停，這是因為它需要等待你輸入一些資訊進行互動，比如輸入建立的名字，或者回車確認指令執行。或者點選指令進行執行。一般情況我們直接回車即可，如果你不確定這步需要做什麼，你可以截圖當前介面詢問大模型應該如何操作。
如圖所示，這裡我們需要點選 Run 進行確認： 
如圖所示，這裡我們只需要輸入 y 即可確認： 
如圖所示，這裡我們正在建立模板，但不知道如何操作，我們可以截圖該部分對大模型進行詢問：
AI Agent 在執行過程中暫停的還有一部分原因是因為此時啟動了一個“服務”，我們的貪喫蛇本身屬於一種“服務”，如果你看到如下命令的網址，則表示 Agent 幫我們執行了一個本地的電腦服務，我們可以訪問對應的網址訪問我們的貪喫蛇，由於服務需要持續啟動，這裡會陷入暫停。我們只需要點選 Skip 按鈕即可。
在這個過程中，如果你遇到一些術語和看不懂的內容，不用擔心，你可以查閱附錄中的“計算機術語解釋”部分，或者直接向 AI 諮詢，或者及時提問！
如果你在過程中遇到不符預期的現象，例如貪喫蛇撞牆後不會結束遊戲，貪喫蛇點選開始後不會移動，這時你只需要把現象描述給側邊欄 Agent 即可。如果遇到報錯問題，記得截圖或者複製錯誤到側邊欄 Agent，如果多次仍然不能解決問題，請你嘗試更換模型操作。
稍作片刻，我們即可得到類似 z.ai 一樣的結果：
我們可以點選右下角的打勾進行確定程式碼的變更，也可以點選 Cancel 按鈕取消變更。或者點選 2 files need review 的地方展開檢視變動後的程式碼。
這裡還值得注意的是，由於修改程式碼並不一定正確，我們還需要知道所有的 IDE 的 Agent 都支援程式碼回退，例如，假設我這裡不小心做了個錯誤的修改操作，或者這次操作的結果讓你感到不滿意，在修改結束後我們可以返回輸入框的部分，點選 Revert 按鈕將操作回退到修改前的狀態，你可以修改輸入的文字進行再一次操作：
4.4 第三步（可選）：向 AI 追問程式碼實現細節
當貪喫蛇遊戲已經可以正常執行時，如果你對前端或 React 還不熟，可以繼續在同一個聊天視窗裡，請 AI 用盡量口語化的方式幫你導覽程式碼。你不需要切換工具，也不必刻意去翻文件，只要圍繞當前專案持續發問即可。
一個比較實用的做法是，讓 AI 先整體講一遍“遊戲是怎麼動起來的”，再拆到具體細節。比如你可以直接提問：
“請從上到下講一遍，這個貪喫蛇遊戲每一步是怎麼動起來的？儘量少用專業術語。”
然後再順著它的回答繼續追問關鍵點，例如：
“蛇在螢幕上的每一節身體，是用什麼資料結構來記的？能打個比方嗎？”
“你是怎麼控制‘隔一段時間動一下’的？這在程式碼裡是哪一段？”
“蛇喫到食物時，你做了哪幾步操作？在哪一段邏輯裡判斷喫到了？”
“撞牆和撞到自己，分別是在哪些程式碼裡判斷出來的？”
如果你看到某個檔案（比如 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（專案中用於介紹功能和技術架構的部分）中已經給出了一個最佳架構參考：
我們想要讓本地的結果儘量符合 z.ai 的結果，我們可以複製這個 README 的全部內容，貼上到 Trae 的側邊欄中，讓他根據 README 的架構，修改本地的程式碼。
最後我們能得到與 z.ai 高度相似的頁面設計風格：
5. 介面上每個按鈕是幹什麼的
在上述操作中，我們已經快速跑通了最小程式生成閉環，但我們仍然對 IDE 不能說得上熟悉。為了徹底熟悉這個之後與我們長期相處的工具。我們會在這一節中對 IDE 的每個細節環節進行深入解釋，首先從介面開始，不同 AI IDE 的介面略有差異，但大部分都延續了 VS Code 的佈局。
其中每個部分的具體作用為：
- Title Bar（標題欄）：顯示檔名和視窗控制按鈕。
- Activity Bar（活動欄）：切換檔案、搜尋等功能檢視。
- Side Bar（側邊欄）：展示檔案列表等具體內容。
- Editor Groups（編輯區）：編寫程式碼的核心區域。
- Breadcrumbs（路徑導航）：顯示檔案路徑，支援跳轉。
- Minimap（程式碼縮圖）：快速預覽和定位程式碼。
- Panel（底部面板）：包含終端和輸出視窗。
- Status Bar（狀態列）：顯示當前環境狀態。
更具體的詳細內容解釋，請檢視附錄中的 虛擬 IDE 視覺化 IDE 原理部分。
6. 怎麼跟 AI 說話纔有效
隨著 AI 能力越來越強，我們已經可以把很多“讓程式設計師寫程式碼”的工作交給 AI 來完成。
但是，在實際使用中你會發現：同樣是用同一個 AI，有的人幾句話就能要到能跑起來的小專案，有的人聊了半天，結果卻完全不是自己想要的，其差別往往不在於“誰更聰明”，而在於——你跟 AI 說話的方式，是不是足夠具體、足夠有步驟。
本節我們從幾個常見場景出發，介紹一些適合完全小白的提問方式，幫助你更穩定地讓 AI 給出可用的結果。
6.1 說清楚你的需求：從“模糊想法”到“具體說明”
很多人第一次用 AI 時，習慣只說一句非常籠統的話，比如：
“幫我做個網頁。”
“幫我寫個小程式。”
在這種情況下，AI 只能自己“腦補”你想要什麼，於是它會隨便給你一個看上去挺完整的東西，但往往和你真正想做的差很多。
要讓 AI 更聽得懂你的意思，需要把“腦子裡的想法”拆開，用幾句話一步步說清楚。
可以從這幾個方面來補充：
告訴它，你拿這個東西來幹嘛
比如，不要只說“個人網站”，而是說：- “我想做一個只包含一頁內容的個人簡介網頁，用來發給招聘的人看。”
告訴它，大概需要哪幾塊內容
不用說專業詞，只要描述你希望頁面上出現什麼，比如：- “頁面要有三個部分：最上面是名字和一句自我介紹，中間列出幾條工作經歷，最下面放郵箱和微訊號。”
告訴它，你的水平和限制
讓 AI 按照小白能接受的方式來做，比如：- “我完全不會寫程式碼，請只用最簡單的寫法，讓我可以直接複製到一個檔案裡，在瀏覽器裡開啟。”
告訴它，你希望怎麼拿到結果
例如：- “請給我一份可以直接儲存為
index.html並在瀏覽器裡開啟的完整程式碼。”
- “請給我一份可以直接儲存為
綜合起來，可以讓你對 AI 這樣說：
“我完全不會寫程式碼，想做一個只包含一頁內容的個人簡介網頁，用來發給招聘的人看。
頁面需要三個部分：上面一行是名字和一句自我介紹，中間是幾條工作經歷，下面是郵箱和微訊號。
當你把這些資訊說清楚之後，AI 就能更接近你真正的需求，而不是隨便給你一個“看起來很厲害但用不上的東西”。
6.2 用對節奏：先“能跑起來”，再一點點變複雜
對完全小白來說，最常見的坑是：一上來就想做一個“非常完整”“功能很多”的東西。
比如：
“幫我做一個像淘寶那樣的網站。”
“幫我做一個可以註冊、登入、下單的系統。”
結果往往是：AI 給你一大團程式碼，你複製之後不是打不開，就是到處報錯；你也看不懂哪裡出了問題，最後只能放棄。
更適合的做法，是主動控制節奏，讓 AI 跟著你一步一步來，而不是一次性把所有東西都砸給你。可以按下面這個順序提要求：
第一步：先要一個“最小的例子”
只檢查一件事：能不能在瀏覽器裡看到東西。
例如：“請先給我一個最簡單的示例，只要在瀏覽器裡能看到一行‘這是我的主頁’就行。
再一步步告訴我：檔名該叫什麼，應該怎麼儲存，怎麼開啟。”第二步：在這個基礎上，慢慢把內容加完整
當你確認“確實能看到那一行字”之後，再說：“在剛才的基礎上，幫我增加一個‘工作經歷’區域，把完整程式碼重新發給我。不要只發改動的部分。”
第三步：結構差不多之後，再考慮好不好看
例如：“現在頁面已經能正常顯示內容了。接下來請幫我稍微美化一下：整體居中，標題大一點，用一個比較舒服的字型。請給出更新後的完整程式碼。”
每加一步，你都先執行一次，確認真的有變化，再讓 AI 往下加。這樣就算哪一步出問題，你也可以很快回到“上一版還正常”的狀態，而不用完全推倒重來。
6.3 善用截圖和複製：不會說就“把畫面扔給 AI”
很多完全小白遇到的難點，不在於“不會改程式碼”，而是在於不知道怎麼把問題說出來。
比如：
- 瀏覽器裡突然彈出一大堆英文報錯，你完全看不懂。
- 網頁的排版和你想的不一樣，但你也不知道該用什麼詞來形容。
在這些情況下，不需要硬擠專業術語，最簡單的方式就是——把你看到的東西原樣丟給 AI。
可以這樣做：
複製報錯文字
當你看到一串紅色錯誤訊息時，可以直接複製出來，然後說：“這是我執行後出現的完整錯誤資訊。我看不懂這些英文，請先用普通人能聽懂的話解釋一下，這大概是什麼意思。
然後告訴我，我現在最簡單應該怎麼改。”給 AI 看截圖 如果你覺得"這個頁面看著就是不對"，但又不會描述，可以：
- 截一張當前頁面的圖；
- 把你正在用的那份程式碼，一整段複製給 AI；
- 然後說明：
"這是現在頁面的樣子，這是我現在的完整程式碼。 我原本希望它是三列排版，現在變成一列了。請你幫我看一下原因，並給我一份改好後的完整程式碼。"
💡 關於截圖功能的補充說明
需要注意的是，並非所有 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。
遇到喜歡的網頁，想做個類似的
不需要說“這個佈局叫什麼”，直接：- 截圖或複製那頁的主要標題、段落；
- 再說：
“我想做一個結構和這個差不多的頁面，不需要一模一樣。
請幫我用簡單一點的程式碼，搭一個類似的框架出來，然後我再自己把文字換成我的。”
簡單來說：你負責“把看到的東西搬給 AI”，再用最樸素的話說“我希望它變成什麼樣”；剩下的“翻譯成程式碼、解釋名詞、找問題”，交給 AI 來做。
6.4 當 AI 生成的程式碼不工作時：一套通用應對方法
在實際練習中，你一定會遇到這種情況：
AI 很認真地給了你一段程式碼，你也老老實實地複製進去了，但結果要麼是瀏覽器一片空白，要麼完全不是它說的那個效果。
這並不代表你“學不會”，也不代表 AI 完全錯了，而是你們之間還缺少幾輪“來回確認”。
當程式碼“不工作”時，可以按下面這套固定流程來跟 AI 說：
先把“你做了什麼 + 現在什麼樣”說清楚
避免只說“打不開”“不行”。可以這樣描述：開啟之後，頁面是完全空白的，沒有顯示你說的那句歡迎文字。 我開啟了 xxxx 頁面，其中沒有剛才我說的部分啊，這不能用
把你現在的完整程式碼發給 AI
很多時候問題出在：複製少了一行、或者上一次和這一次的內容混在一起了。
你可以說：“下面是我現在這個檔案裡的全部程式碼。
請你對比一下有沒有哪裡少了、寫錯了，或者順序不對。
請直接給我一份修正後的完整程式碼，不要只發一小段。”如果有錯誤提示，一併給出
比如瀏覽器右上角彈出的錯誤，或者底部的一些紅字。你可以：- 把錯誤文字複製出來；
- 或者截一張圖；
- 然後說：
“這是我看到的錯誤提示。我完全看不懂，請先用簡單的方式說明這大概是什麼問題，再告訴我現在最需要改哪幾行。”
要求對方用“小白模式”一步一步講
你可以直接把自己的情況說清楚，讓它別省略中間步驟：“我完全不會寫程式碼，請你一步一步告訴我：
第 1 步要改哪一行，
第 2 步要怎麼儲存，
第 3 步要怎麼重新開啟或者重新整理頁面。
每一步都請用完整的句子寫出來。”最後，請它幫你做“應該看到什麼”的對照
例如：請先說一下，按照你改好的程式碼，正常情況下我開啟網頁應該看到什麼內容。
只要你按照這套流程來和 AI 互動，大部分“程式碼不工作”的情況，都可以在幾輪來回中解決掉。
同時，你也會逐漸熟悉常見的問題型別，下次再遇到類似情況就能直接解決。
7. 小結與下一步
這一章裡，你完成了一次從“能在網頁裡玩一個 AI 生成的貪喫蛇”，到“能在本地用 AI IDE 自己搭出一個小遊戲”的升級。你大致搞清了三件事：寫程式碼為什麼離不開一個像 VS Code 這樣的 IDE；在這個基礎上，再加上 AI（Trae、Cursor 等）之後，IDE 不再只是工具箱，而是多了一個能聽懂自然語言、幫你新建檔案、裝環境、改程式碼的“實習工程師”；以及 IDE 介面上每一塊區域（左側檔案、底部終端、中間編輯區、右側 AI 面板）分別管什麼，用起來就不再一頭霧水。
更重要的是，你已經實際跑通了一次完整流程：在本地新建空資料夾 → 用 AI IDE 開啟 → 在側邊欄對話裡描述需求 → 讓 AI 生成專案並啟動開發伺服器 → 出現問題時，把“現象 + 全部程式碼 + 報錯截圖”一起丟給 AI，請它用“小白模式”一步步修。這個過程中，你也練習瞭如何寫更有效的提示詞：說清目標、內容結構和自己的水平，控制好節奏，從“先能跑起來”到“再變好看、變好玩”。
下一章，我們會把重點從“會用工具”轉向“做一個真正有人願意用的原型”：從使用者視角出發，設計規則、互動和反饋，然後再讓 AI 幫你把這些想法落成產品雛形。
8. 📚 作業：用本地 AI IDE 做一個更復雜的遊戲
你已經用本地 AI IDE 做過一個貪喫蛇。現在請你再挑戰一個更復雜一點的小遊戲，完整走一遍“描述需求 → 生成專案 → 本地執行 → 除錯迭代”的流程。
- 選擇一個比貪喫蛇更復雜的遊戲
- 可以是“俄羅斯方塊”“打地鼠”“掃雷”“2048”“飛機大戰”之類
- 或者你自己想象的一個簡單原創遊戲
- 必須用本地 AI IDE 來完成整個過程
- 新建一個空資料夾，用 AI IDE 開啟
- 在側邊欄聊天裡描述清楚你的遊戲需求
- 讓 AI 負責建立檔案、搭建專案結構和實現主要邏輯
- 在本地啟動開發伺服器，確保遊戲可以正常執行
- 有基本的“可玩性”和反饋
- 至少包含開始、進行中、結束三種狀態
- 玩家有明確的操作方式（鍵盤或滑鼠）
- 螢幕上有清晰的得分或進度反饋
- 至少進行 2 輪以上的迭代
- 第一輪讓 AI 做出“能玩”的版本
- 第二輪以後，逐步提出具體改進（樣式、難度、互動最佳化等）
附錄
附錄一：常見計算機術語速查表
這一部分不需要刻意背誦，更重要的是先在腦子裡建立一個印象。
一、和“工具介面”有關的詞
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 分支是什麼。
可以把它當作“當前編輯環境的一張小體檢單”。
二、和“網頁 / 網路 / 服務”有關的詞
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啟動專案，本質上就是“在本地開了一個網頁服務”。
三、和“前端 / 後端 / 資料”有關的詞
1. 前端、後端
前端（Frontend）
使用者看得見、點得到的部分：
- 網頁上的按鈕、文字、圖片、動畫；
- React / Vue 寫出來的頁面。
負責展示介面和響應使用者操作（點選、輸入、拖拽等）。
後端（Backend）
使用者看不見、在伺服器上跑的那部分：
- 存和讀資料（使用者資訊、訂單、分數等）；
- 執行業務規則（登入驗證、許可權判斷）。
你可以把前端比作“店面和店員”，後端比作“倉庫和賬本系統”。
2. 介面、請求、響應、JSON
介面 / API
前端和後端事先約定好的一套“問問題 + 回答案”的規則。
- 前端說：“我用這個地址、這個格式來問你”；
- 後端說：“我用這個格式把結果回給你”。
請求（Request）
前端發給後端的一次“提問”：
- 請求去哪（URL）；
- 用什麼方式（GET、POST 等）；
- 帶了什麼引數（比如使用者 ID）。
響應（Response）
後端給前端的“答覆”：
- 狀態碼（200 成功，404 找不到，500 伺服器出錯）；
- 實際資料（多半是 JSON）。
JSON
一種用很像 JavaScript 程式碼的寫法來表示資料的格式，比如：
{
"name": "Alice",
"score": 120
}可以理解成“機器版的鍵值對記事本”，前後端經常用它來交換資料。
四、和“寫程式碼本身”有關的詞
1. 變數、識別符號、狀態
變數（Variable）
“給一塊資料貼上的標籤”。
- 例如把分數這件事記作
score； - 以後用
score這個名字，就能讀寫這塊資料：
let score = 0
score = score + 10識別符號（Identifier）
“你自己起的各種名字”的統稱：
- 變數名：
score - 函式名：
moveSnake - 元件名：
SnakeGame
就像給資料夾起名“照片”“工作”“賬單”，方便在程式碼裡區分不同“東西”。
狀態（State）
程式當前的“關鍵情況記錄”：
- 遊戲是不是已經結束；
- 蛇現在在第幾格；
- 當前分數是多少。
在 React 裡，一般會這麼理解：狀態一改，介面就要跟著更新。
2. 函式、元件、模組
函式（Function）
把一件“可以反覆做的事”打包起來，起個名字：
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 等。
你等於是在“現成的骨架上填內容”，比從頭造輪子輕鬆很多。
五、和“除錯 / 查錯”有關的詞
1. Bug、報錯、日誌 / console.log
Bug
程式表現和你想的不一樣，就是 bug：
- 本來應該出現按鈕，結果沒有；
- 本來應該加 10 分，結果多加了一堆；
- 頁面一開啟就白屏。
報錯資訊（Error Message）
程式崩了之後，螢幕上 / 終端裡那段“看起來很嚇人”的英文。
雖然難看，但通常會告訴你：
- 大致是哪裡錯了；
- 哪個檔案、第幾行附近需要檢查。
你可以直接複製它，丟給 AI 讓它翻譯和分析。
日誌（Log）
程式在執行過程中自己“說的話”。
最常見的就是前端裡的：
console.log('當前分數', score)你可以把它理解成：在關鍵步驟主動報個數，方便你確認程式是不是按你想的在走。
console.log 是什麼？
console可以理解為“除錯用的小黑板”；.log是“在小黑板上寫一行字”；- 瀏覽器按 F12 開啟開發者工具裡的 Console 面板，就能看到這些輸出。
2. 除錯、斷點、單步執行、快照
除錯（Debug / 除錯程式）
當程式出問題時，不是上來就亂改，而是：
- 讓程式在某一行停一下（斷點）；
- 看一看當前每個變數的值；
- 一步一步往下走，觀察“從哪裡開始不對勁”。
斷點（Breakpoint）
可以把斷點想成“在這行插了一個暫停按鈕”：
- 程式平時是一路往下跑；
- 跑到你插斷點的那一行，會暫時停住，等你檢查。
單步執行（Step）
從斷點停下來之後，你可以選擇：
- 一行一行往下執行（step over）；
- 進入某個函式內部詳細看（step into）。
就像看一段舞蹈分解動作一樣，而不是直接看快放影片。
快照（Snapshot）——簡化理解
這裡的“快照”可以理解為：
在某個時間點，把“當前狀態”拍一張照片，方便以後對比。
在實際工具裡，“快照”可能指：
- 一次提交時刻專案的完整狀態；
- 除錯時某個時間點記憶體 / 變數的整體情況。
你先記住這個比喻就夠用：快照 ≈ 某一刻狀態的留影。
六、和“專案管理”有關的詞
1. 專案、工作區、資料夾
專案（Project）
為實現一個應用而放在同一個資料夾裡的：
- 原始碼檔案
- 配置檔案
- 素材（圖片、音訊等）
工作區（Workspace）
VS Code / Trae 用來描述“當前這一次開啟了一組什麼東西”的概念：
- 開啟一個資料夾 → 一個簡單工作區；
- 有時也會把多個資料夾合併成一個多專案工作區。
2. Git、倉庫、提交（Commit）
Git（版本控制工具）
可以理解成專案的“時光機”：
- 每次改完一批內容，可以“拍一張版本合照”；
- 以後需要時，可以回到某個歷史狀態。
倉庫（Repository / Repo）
開啟 Git 之後，那個帶“版本記錄”的專案資料夾，就叫“倉庫”。
提交（Commit）
每次你覺得“這波改動算一個階段性成果”，就可以：
- 寫一條說明（比如：
Add score panel）； - 把當前全部修改打包成一個版本；
- Git 會把這一刻的狀態存下來。
這一次動作就叫“做了一次 commit”。
七、和“AI 開發工具”有關的詞
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 服務。
八、和“瀏覽器 / 開發者工具”有關的詞
Chrome（谷歌瀏覽器）
現在前端開發最常用的瀏覽器之一：
- 開啟網頁快；
- 自帶比較強的“開發者工具”，方便查問題。
重新整理（Refresh / Reload）
重新載入當前網頁：
- 修改前端程式碼後，如果沒有自動重新整理工具，手動按重新整理才能看到效果。
開發者工具（DevTools）
瀏覽器裡專門給開發者用的一組工具面板：
- 檢視網頁結構（Elements）；
- 檢視樣式（Styles）；
- 查錯誤和日誌（Console）；
- 查網路請求（Network）。
在 Chrome 裡通常按F12或Ctrl+Shift+I開啟。
Console（控制檯）
開發者工具裡的一個標籤頁，專門展示：
- 你寫的
console.log(...)輸出； - 執行過程中發生的錯誤（紅字）。
你可以當它是“程式的聊天框”： - 程式有話要說，就寫在這裡；
- 你除錯時最常看的就是這一塊。
如果後面你在學習過程中又遇到新的詞，也可以按這個風格讓 AI 協助你補充全部內容：
- 先寫一句“它是幹嘛的”；
- 再寫一句“可以把它想象成什麼”；
- 最後給一個特別簡單的小例子。
這樣你的“個人術語表”會越長越實用，逐漸能夠更好的與計算機進行溝通。