初級一：AI 時代，會說話就會程式設計
這是一個基於專案制學習的學習教程。我們鼓勵你跟隨步驟一步步操作，並嘗試復現結果。 不要擔心犯錯或修改內容，我們永遠相信你可以做到，請你永遠記住：
本章導讀
1. 普通人的困境與機會
很多人腦子裡有一堆產品點子：一款幫自己記賬的小工具、一個記錄孩子成長的網頁、甚至一款小遊戲。但一想到要寫程式碼、要找程式設計師，就直接勸退。
AI 出現之後，第一次給了普通人一個全新的可能：你不需要會寫程式碼，只需要學會對 AI 說清楚你想要什麼。來自 GitHub Copilot 的資料顯示，超過1500萬開發者正在用AI輔助程式設計，平均46%的程式碼都是AI生成的! 在Java專案中這個比例能達到61%。
對於普通人來說,這個趨勢更有意義:如果專業程式設計師都在大量依賴AI寫程式碼,那我們這些不會程式設計的人,為什麼不能直接跟AI對話來實現自己的想法呢?
這門課的目標是幫你練成新技能：透過自然語言對話就能做應用。我們將教你怎麼跟 AI 用計算機的語言溝通、怎麼讓AI幫你把腦子裡的想法變成真實可用的產品。
2. AI 能幫你做到什麼程度
在本節中，我們只討論一個問題：如果你完全不會寫程式碼，現在的 AI 能幫你做到什麼程度？
大致來說，你可以把當前大模型的能力理解為：可以勝任簡單的內部小工具、資料視覺化看板，以及一些輕量級小遊戲的開發。這些能力用來做自用工具、從產品經理視角驗證需求，基本已經足夠。但若想一鍵生成可直接商用的成熟產品，通常仍需要人工在流程設計、細節打磨上持續最佳化。
接下來，我們就以貪喫蛇為例，具體看看 AI 程式設計目前到底能做到什麼程度。
2.1 60 秒做一個貪喫蛇遊戲
首先，請你開啟課程中使用的實驗網頁 z.ai，z.ai 是由智譜 AI（中國領先的大語言模型公司之一）開發的 AI 平臺，其核心能力由智譜自研的 GLM 系列大模型提供支援。該平臺整合了多項 AI 功能，包括幻燈片生成、海報設計和全棧開發等。在本教程中，我們將重點介紹其全棧開發模組的使用。
💡 什麼是「網頁就能程式設計」的新模式？
過去，開發一個網頁應用需要：
- 安裝程式設計環境（如 Python、Node.js）
- 配置程式碼編輯器
- 學習 HTML/CSS/JavaScript 等語言
- 處理各種依賴和報錯
而現在，藉助 AI 程式設計平臺，你只需要：
- 開啟瀏覽器，訪問網頁
- 用自然語言描述你想要的功能
- AI 自動生成程式碼並實時預覽效果
這種「對話即程式設計」的模式，讓程式設計從「寫程式碼」變成了「描述需求」。你不需要關心底層技術細節，只需要清楚地告訴 AI 你想要什麼，它就能幫你把想法變成可執行的程式。這就是 AI 時代程式設計的新正規化——Vibe Coding（氛圍式編碼）。
輸入我們的簡單需求後點選 全棧開發 按鈕，你可以實時觀看網頁的完整建立過程。通常只需泡一杯咖啡的時間，網頁便會自動生成完畢！
幫我做一個貪喫蛇遊戲：
1. 用方向鍵控制蛇的移動
2. 喫到食物後蛇會變長，分數增加
3. 撞到牆壁或自己的身體就遊戲結束
4. 要有開始和重新開始按鈕
5. 介面要簡潔好看
生成結束後，你能看到右側出現可瀏覽的網頁介面。你可以上下滾動瀏覽頁面內容，或點選頁面頂部的 🧭 按鈕切換至全屏模式檢視效果。
其中頂部從左到右按鈕的作用依次為：箭頭按鈕展開側邊對話歷史欄，鉛筆按鈕用於新建一個對話，迴圈箭頭按鈕用於重新整理頁面，指南針按鈕負責切換至全屏模式，Download 按鈕用於下載專案，<> 按鈕用於切換程式碼檢視，Publish 按鈕用於釋出專案。
如果你想檢視該網頁的原始碼，可以點選右上角的程式碼圖示檢視完整程式碼。
🌐 探索更多 AI 程式設計工具
除了 z.ai，還推薦你還可以嘗試以下優秀的 AI 程式設計平臺進行測試：
| 工具 | 地址 | 特點 |
|---|---|---|
| Google AI Studio（推薦） | aistudio.google.com/apps | 谷歌官方出品，支援 Gemini 模型，適合快速原型開發 |
| Figma Make | figma.com/make | 與設計工具深度整合，適合設計師快速實現互動原型 |
| Coze | coze.com | 位元組跳動推出的 AI Bot 開發平臺，提供零程式碼的視覺化搭建能力。與豆包、Kimi 等國產大模型深度整合，支援外掛市場、定時任務和多渠道釋出（飛書、微信等），適合快速構建面向 C 端使用者的對話應用或企業內部智慧助手 |
| v0.dev | v0.dev | Vercel 出品的 AI 生成 UI 工具，輸入描述即可生成可執行的 React 元件程式碼 |
| Bolt.new | bolt.new | StackBlitz 推出的 AI 全棧開發平臺，可直接生成並部署完整的 Web 應用 |
| Lovable | lovable.dev | 專注於生成高質量 React 應用，支援 GitHub 整合和一鍵部署 |
| Replit Agent | replit.com | 整合 AI 程式設計助手的線上 IDE，支援多種語言和實時協作 |
想了解更多網頁程式設計工具的詳細對比和使用教程，可以參考我們的擴充套件閱讀：7 款主流 Vibe Coding 線上平臺實測對比
2.2 對話程式設計能做什麼不能做什麼
本節聚焦一個具體問題：當你只依賴對話式 AI、不寫任何程式碼時，它究竟能把事情推進到哪一步。 在經驗層面，一個較為穩定的結論是：它可以幫你完成一個“小而完整”的東西，但“做到什麼程度就算夠”，仍然需要你親自決策每一步的詳細步驟。
更擅長“小而清晰”的應用
從前面的貪喫蛇示例中，你已經看到了一種典型模式： 只要你能把介面和互動說清楚，AI 通常可以在幾輪對話內，拼出一個可以開啟、可以點選、可以玩的完整網頁。
這類任務往往具備幾個共同特徵：
- 範圍清晰：一頁網頁、一個簡單內部工具、一個小玩法
- 結果可見：你能立即在瀏覽器中驗證是否按預期工作
- 糾錯直接：發現問題後，可以在後續對話中點明具體現象並要求修正（透過複製錯誤直接貼上，或者截圖貼上的形式讓 AI 進行修改）
在這個邊界內，你可以把對話式 AI 看作一位執行力不錯的"輔助開發者"。你只需在每一輪用自然語言細化和修正需求，就能快速得到可用的原型。
AI 獨立完成小型專案的成功率：
大型專案需要“流程視角”
一旦超出小而清晰的範圍，只指望靠幾輪對話讓 AI 端到端完成複雜系統，很快就會遇到上限。大型專案往往要接後端、連資料庫、整合第三方服務，還牽涉許可權、安全、併發和大量業務規則，目標是交付一整套與現有業務深度打通的系統，而不是一頁網頁。
在這種情況下，更合理的做法不是把所有需求一股腦丟給 AI，而是先梳理出清晰的整體流程：關鍵步驟是什麼、每一步的輸入輸出和狀態變化是什麼、哪些節點對效能和安全最敏感。再基於這張流程圖，把相對獨立的環節拆分出來，交給對話式 AI 生成介面、模組、指令碼和測試。
以目前的能力來看，AI 更擅長加速一個個小步驟，由你（或你的團隊）來決定怎麼拆步驟、如何串聯，並負責最終的架構設計、系統整合和運維。
能寫和能用的區別
咋一看，AI 好像什麼都能寫，但這些東西到底能不能用，能用到什麼程度，我們該如何劃分？
一個可參考的經驗是：
⚠️ 適用場景指南
- 原型 / Demo / 內部自用工具：非常適合先交給 AI 打第一版，再由你迭代細節。
- 面向真實使用者的大型產品：通常需要工程師在架構、抽象、效能和維護上長期投入。
- 強安全 / 強合規系統（如支付、風控、醫療等）：在當前階段，不宜“生成完就直接上線”，必須引入嚴格的審查與測試流程。
在當下，你可以相對安心地把 AI 視作一個高效的 Demo 與自用工具搭檔： 只要你願意多測試、多迭代，多問幾輪“這裡不對，幫我修一下並解釋原因”，在原型與內部工具這一級別，整體質量通常是足夠且具備實踐價值的。
3. 動手：你的第一個 AI 原生應用
讓我們回到動手部分，在前一部分，我們已經用 AI 快速做出了一個可以玩的貪喫蛇原型，也大致知道了 AI 能做什麼、不能做什麼。接下來我們將學習如何用最基礎的 vibe coding 技巧建立一個現代版的 AI 貪喫蛇遊戲。我們將讓蛇喫掉文字字元而不是豆子。最後讓遊戲根據喫掉的文字字元生成一首詩，並畫一幅畫。 透過這個實際案例你能夠理解全新程式設計方式的核心理念：如何學會用自然語言清晰地表達需求。
3.1 AI 原生貪喫蛇
在一開始，我們可以用最簡單的方式與大模型對話，這將幫助我們快速獲得產品原型。我們可以直接在聊天框中輸入：
💡 示例提示詞： 幫我做一個貪喫蛇遊戲
💡 示例提示詞： 幫我做一個貪喫蛇遊戲，它應該支援
- 我可以喫不同的單詞，它們會被收集在一個盒子裡
💡 示例提示詞： 幫我做一個貪喫蛇遊戲，它應該支援：
- 我可以喫不同的單詞，它們會被收集在一個盒子裡
- 當蛇喫了8個單詞時，llm 應該根據這些單詞創作一首詩，我們可以根據需要重新混合這首詩。
- 當詩完成後，下一步將自動根據這首詩建立一幅影象。
注意，在開發過程中，我們可能會遇到不盡如人意的問題，例如點選按鈕沒有任何反應、使用功能時報錯、功能未按預期工作，或者前端頁面與預期設計不符。
在這種情況下，我們需要進一步向模型提問，以幫助修復這些意外問題。
3.2 給遊戲新增新功能
完成基本功能後，我們可以嘗試給我們的程式新增一些新花樣！如果你覺得蛇喫單詞或字元的過程有點枯燥，你可以讓蛇喫不同顏色的單詞，並相應地改變蛇的顏色。
你還可以為“喫”的過程新增特效，或者引入觸發特效的魔法單詞——比如增加蛇的速度或大小。另一個想法是每當蛇喫一個單詞時就讓模型生成一首詩和一幅圖，而不是等到它喫掉八個單詞。
如果覺得這些有挑戰性，你可以直接向語言模型求助！它可以提供創意建議，讓你的遊戲更有趣。試一試吧！
1. "單詞解鎖世界" 機制
每當蛇喫掉一個單詞，LLM 會對該單詞進行詩意聯想（例如，“樹”→“森林”、“綠蔭”），影象模型會即時為該單詞生成一個小藝術品。這些影象逐漸拼湊成一個獨特的、玩家創造的全景圖，所以玩家每次遊玩都在“作畫和寫詩”。
2. "詩歌拼圖" 玩法
蛇喫掉的每個單詞都會觸發 LLM 生成簡短的詩句，影象模型生成插圖。這些詩句和影象像拼圖一樣組合在一起，在回合結束時形成一首 AI 協作的詩和畫。
3. "魔法單詞" & "故事分支"
特殊的“魔法單詞”（例如，“風”、“夜”、“夢”）不僅觸發 LLM 生成詩歌，還會改變場景的情緒或主題——將生成影象的風格轉變為夜晚、暴風雨或夢幻般的氛圍。
分支故事：LLM 在開始時給出一個主題或謎語（例如，“秋天的回憶”）。玩家的單詞選擇直接影響故事和詩歌的演變，影象模型實時更新背景和視覺效果。
4. "實時互動生成"
每個單詞之後，LLM 生成一行對話或描述，遊戲中的 NPC 可以對玩家“說話”，或者環境可以相應地改變。
蛇的外觀或遊戲中的障礙物可以根據喫掉的單詞在視覺上發生變化，這要歸功於影象模型。
5. "創作 & 分享"
玩家可以在會話結束時儲存並分享他們 AI 創作的詩歌和影象，炫耀他們獨特的“AI 協作”。
“最美詩歌+藝術”、“最有創意單片語合”等排行榜，鼓勵重玩和創造力。
6. "按句貪喫蛇" 挑戰
反向模式：LLM 給出一句詩或一個謎語，玩家必須引導蛇按順序喫掉單詞來重構句子。喫錯單詞會透過影象生成模型觸發有趣或藝術性的後果。
7. "主題關卡" & "風格選擇"
遊戲開始時，玩家選擇一個主題（例如，“童話”、“科幻”、“唐詩”），LLM 和影象模型都會調整單詞選擇、詩歌風格和視覺效果以匹配，使每次執行都感覺新鮮。
8. "現場共創"
當喫掉一個特殊單詞時，LLM 可以提示玩家輸入短語或選擇風格，然後 AI 生成相應的詩句和插圖，使其成為真正的人類-AI 共創。
9. "AI 彩蛋 & 成就"
某些單片語合被 LLM 識別為特殊主題或內部笑話（例如，“月亮”、“桂花”、“河岸”），觸發稀有的詩句和插圖，獎勵探索。
10. "成長的故事"
隨著蛇的成長，LLM 生成一個連續的故事詩，影象模型建立一個無縫的長卷或全景圖，所以玩家同時在“寫作、繪畫和玩耍”。此外，我們還可以要求 LLM 幫你直接生成專案級的提示詞。在上一節中，我們只自己寫了貪喫蛇遊戲的提示詞。現在讓我們嘗試讓大模型生成一個帶有整體框架和實現路徑的提示詞（你可以直接用 z.ai 生成）。
如果你想學習如何寫出更好的提示詞，可以檢視提示詞工程附錄。
我想讓 AI 生成一個網頁貪喫蛇遊戲，需要一個更完整的提示詞，讓生成結果更令人印象深刻和有趣。請生成相應的提示詞。當前目標是：生成一個貪喫蛇遊戲，需要實現喫不同單詞生成詩歌的功能，並且應該包含影象生成模組。
z.ai 的回覆將會是這樣的：
我們可以使用這個提示詞在全棧開發模式下重新生成專案：
3.3 嘗試製作其他小遊戲
除了貪喫蛇（遊戲），我們可以讓想象力盡情馳騁。
創造任何我們想創造的東西，甚至嘗試搞砸一切！然後重頭再來！
1. AI 藝術畫廊平臺
描述：一個展示 AI 生成藝術作品的線上畫廊，使用者可以上傳、分享和評論 AI 藝術作品。
功能：使用者賬戶系統、藝術作品上傳和展示、評分系統、分類瀏覽、AI 生成工具整合。
技術亮點：React/Vue 前端、Node.js 後端、MongoDB 資料庫、AI API 整合。
2. 復古遊戲檔案館
描述：一個致敬經典遊戲的網站，包含遊戲歷史、玩法指南和線上可玩復古遊戲。
功能：遊戲資料庫、時間軸展示、線上模擬器、使用者評論、遊戲收藏功能。
技術亮點：響應式設計、WebGL/Canvas 遊戲實現、RESTful API、使用者認證系統。
3. 可持續生活追蹤器
描述：一個幫助使用者透過環保提示和社羣挑戰來追蹤和減少碳足跡的網站。
功能：個人碳足跡計算器、目標設定、進度追蹤、社羣挑戰、環保知識庫。
技術亮點：資料視覺化、移動端最佳化、社交功能、推送通知。
4. 虛擬廚房助手
描述：一個基於 AI 的烹飪指導平臺，提供個性化食譜推薦和分步烹飪說明。
功能：食譜資料庫、食材識別、個性化推薦、烹飪計時器、營養分析。
技術亮點：影象識別 API、機器學習推薦系統、語音控制、實時影片指導。
5. 地下音樂發現平臺
描述：一個專注於獨立和新興藝術家的音樂流媒體平臺，提供獨特的發現體驗。
功能：音樂流媒體、藝術家資料、個性化推薦、播放列表建立、社羣評論。
技術亮點：音訊流處理、推薦演算法、社交功能、音樂視覺化。
6. 極簡任務管理系統
描述：一個具有禪意美學的任務管理工具，專注於簡單和高效的任務組織。
功能：任務建立和分類、優先順序設定、進度追蹤、團隊協作、資料分析。
技術亮點：極簡 UI 設計、拖放功能、實時同步、跨平臺相容性。
7. 科幻寫作工坊
描述：一個為科幻作家提供創意工具和靈感的平臺，包括世界觀構建輔助和角色開發工具。
功能：故事結構工具、角色資料、世界觀構建模板、寫作統計、社羣反饋。
技術亮點：富文字編輯器、資料視覺化、協作編輯、AI 輔助創作。
8. 個人知識圖譜
描述：一個幫助使用者構建個人知識網路，視覺化並連線各種想法和資訊的工具。
功能：節點建立和連線、標籤系統、搜尋功能、匯入/匯出工具、視覺化圖表。
技術亮點：圖資料庫、資料視覺化演算法、Markdown 支援、跨裝置同步。
9. 虛擬植物園
描述：一個互動植物百科全書，使用者可以探索植物世界並建立虛擬花園。
功能：植物資料庫、3D 植物模型、生長模擬、園藝指南、社羣展示。
技術亮點：3D 渲染、季節變化模擬、AR 整合、植物識別 API。
10. 程式設計挑戰競技場
描述：一個面向程式設計師的線上競賽平臺，具有各種難度級別的程式設計挑戰。
功能：挑戰問題、程式碼編輯器、自動評估、排行榜、學習路徑。
技術亮點：程式碼沙箱環境、實時評估系統、演算法視覺化、社交學習功能。還有... 如果你喜歡玩遊戲，讓我們一起嘗試創造遊戲吧！
1. 3D 開放世界 RPG
描述：一個具有廣闊開放世界、任務和角色成長的奇幻 RPG。
功能：晝夜迴圈、動態天氣、技能樹、多人合作、製作系統。
技術亮點：Three.js 或 Babylon.js 用於 3D 渲染、伺服器端遊戲邏輯、角色自定義、存檔系統。
2. 第一人稱射擊 (FPS) 競技場
描述：一個快節奏的多人 FPS，具有各種遊戲模式和地圖。
功能：團隊死鬥、奪旗、武器自定義、排位賽。
技術亮點：WebGL/Three.js 用於 3D 圖形、多人網路程式碼、命中檢測、語音聊天。
3. AI 國際象棋和多人遊戲
描述：一個功能齊全的國際象棋平臺，具有 AI 對手和線上對戰功能。
功能：AI 難度級別、殘局挑戰、錦標賽模式、回放分析。
技術亮點：國際象棋邏輯庫、WebSocket 用於實時對戰、ELO 排名系統、反作弊。
4. 麻將線上多人遊戲
描述：一個具有線上多人遊戲和計分功能的傳統麻將遊戲。
功能：多種規則集、私人房間、排名系統、回放功能。
技術亮點：牌匹配邏輯、實時多人遊戲、大廳系統、分數追蹤。
5. 回合制策略遊戲
描述：一個具有網格戰鬥和單位管理的戰術策略遊戲。
功能：戰役模式、遭遇戰、單位升級、戰爭迷霧、多人對戰。
技術亮點：網格移動系統、AI 決策、回合同步、存檔/讀檔系統。
6. 計時賽賽車遊戲
描述：一個專注於計時賽和賽道記錄的 3D 賽車遊戲。
功能：多條賽道、汽車自定義、幽靈回放、排行榜。
技術亮點：3D 汽車物理、賽道編輯器、回放系統、線上排行榜。
7. 卡牌對戰遊戲 (卡組構建)
描述：一個策略卡牌遊戲，玩家構建卡組並與對手戰鬥。
功能：卡牌收集、卡組構建、排位賽、賽季活動。
技術亮點：卡牌遊戲邏輯、匹配系統、AI 對手、卡牌動畫。
8. 大逃殺 (俯視 2D)
描述：一個俯視 2D 大逃殺遊戲，具有縮小的遊戲區域和戰利品機制。
功能：單人和小隊模式、武器多樣性、局內事件、排行榜。
技術亮點：實時多人遊戲、區域縮小邏輯、戰利品生成系統、匹配。
9. 恐怖生存遊戲 (第一人稱)
描述：一個具有資源管理和逃生機制的第一人稱恐怖遊戲。
功能：氛圍環境、解謎、敵人 AI、多重結局。
技術亮點：動態照明、聲音設計、敵人尋路、存檔系統。
10. 音樂節奏遊戲 (3D)
描述：一個 3D 節奏遊戲，玩家隨著音樂節拍擊打音符。
功能：多種難度級別、賽道編輯器、自定義歌曲支援、排行榜。
技術亮點：音訊分析、節拍同步、3D 音符軌道、輸入時機檢測。📚 Assignment
這一節，你已經跟著步驟體驗了從“對話生成貪喫蛇”到“理解 AI 原生小遊戲設計思路”的完整流程。下面的作業幫助你把這些理解真正變成自己的能力。
- 完整復現 AI 原生貪喫蛇遊戲
- 至少實現：蛇可以移動、喫到“食物”後長度和分數發生變化、撞牆或撞到自己會結束。
- 在復現過程中，練習把錯誤現象 + 報錯資訊 + 關鍵程式碼片段一次性丟給 AI，請它“小白模式”修復。
- （可選）自創 1 個 AI 原生小遊戲或 Demo
- 可以是圍繞文字、圖片、音樂、節奏等的任意輕量玩法，例如“喫單詞寫詩”“節奏點選”“生成式跑酷”等。
- 重點不是畫面多炫，而是你能清楚說出：AI 在這裡具體幫了什麼忙，它解決了什麼“人工難以做到或很麻煩”的部分。
這就是完整的教程！你可能需要 4 小時 才能完成所有內容並構建你自己的貪喫蛇遊戲。不要著急——探索、實驗並享受這個過程。如果在過程中遇到概念不太理解，推薦你順手檢視下方附錄中的相關部分。
附錄
附錄 1：我們需要前端開發知識嗎？
💡 一句話總結
你不需要會寫程式碼，但瞭解基礎概念能讓你更好地向 AI 描述需求。
- 網頁標題、文字、圖片
- 按鈕、輸入框、下拉選單
- 遊戲介面、動畫效果
- 使用者分數儲存
- 登入賬號驗證
- 關卡內容分配
前端三件套
瀏覽器透過三種"程式碼"來構建頁面：
程式碼如何變成頁面？
當你開啟一個網頁時，瀏覽器會按順序處理三種程式碼：
1. HTML —— 定義頁面結構 瀏覽器首先解析 HTML，瞭解頁面上有哪些元素（標題、段落、圖片、按鈕等），以及它們的層級關係。
2. CSS —— 應用樣式 然後瀏覽器根據 CSS 規則，給這些元素新增樣式：顏色、大小、位置、間距等，讓頁面變得美觀。
3. JavaScript —— 新增互動 最後執行 JavaScript 程式碼，讓頁面"動起來"：響應點選、提交表單、播放動畫等。
4. 頁面呈現 三者的配合結果就是你最終看到的網頁。
現代前端框架：從 HTML 到 React/Vue
前面介紹的 HTML、CSS、JavaScript 是前端開發的"三件套"，它們是所有網頁的基礎。但當頁面變得複雜時，直接用這三件套開發會遇到挑戰：程式碼難以維護、重複勞動多、資料同步麻煩。
現代前端框架（如 React、Vue、Angular）建立在 HTML/CSS/JS 之上，讓開發更高效：
1. HTML/CSS/JS（基礎階段） 直接操作頁面元素，適合簡單頁面。但當程式碼量增大時，所有邏輯混在一起，難以維護。
2. jQuery（過渡階段） 簡化了 DOM 操作，讓程式碼更簡潔。但仍需手動管理頁面狀態，資料變化時要自己找到對應的元素並更新。
3. React/Vue（現代階段） 採用元件化和狀態驅動的設計：
- 元件化：把頁面拆成獨立的可複用模組（如按鈕、卡片、導航欄）
- 狀態驅動：資料變化時，框架自動更新對應的介面，無需手動操作
💡 簡單理解
- HTML/CSS/JS = 基礎材料（磚塊、水泥、鋼筋）
- React/Vue = 建築框架（提供了搭建房屋的規範和工具）
在 AI 輔助程式設計時代，你不需要深入掌握框架的所有細節，只需要理解它們的基本概念，就能透過自然語言描述讓 AI 幫你生成程式碼。
在 Vibe Coding 中
核心要點：你不需要寫程式碼，只需要會描述。
瞭解前端概念後，你可以這樣跟 AI 描述需求：
"用 React 做一個排行榜頁面，右側顯示分數列表，點選某行在下方展示玩家詳情，風格簡潔現代。"
如果你想深入理解 HTML、CSS、JavaScript 等前端基礎知識，可以檢視Web 基礎附錄。想了解前端技術的發展歷程，可以檢視前端進化史附錄。
附錄 2：到底什麼是 Vibe Coding
💡 什麼是 Vibe Coding？電腦科學家 Andrej Karpathy（OpenAI 的聯合創始人之一，特斯拉前 AI 負責人）於 2025 年 2 月提出了 vibe coding 一詞。這個概念指的是一種依賴於 LLM 的編碼方法，允許程式設計師透過提供自然語言描述而不是手動編寫程式碼來生成可工作的程式碼。
從字面上看，Vibe Coding 可以理解為一種“用說的方式來做開發”。它的核心變化在於：你不再需要自己一行一行寫程式碼、查語法、調 Bug，而是直接用自然語言描述你想要的東西，例如：
“我需要一個登入頁面，上面有手機號輸入框和驗證碼輸入框。” “登入成功後，跳轉到首頁，並在右上角顯示使用者名稱。” “給我一個簡單的貪喫蛇小遊戲，可以用鍵盤方向鍵控制。” 大語言模型（LLM）會把這類描述自動翻譯成真正可以執行的程式碼，並生成對應的頁面、邏輯和資料結構。你看到效果後，再用自然語言提出修改意見，例如“按鈕再大一點”“背景換成深色”“得分記錄下來並顯示排行榜”，AI 會繼續按你的要求調整實現。
在這種模式下，你不需要先學會程式語言，再去寫程式碼；而是把主要精力放在：說清楚要做什麼、看到結果後判斷“哪裡不對”、再提出新的修改。AI 則負責把這些高層的想法落成具體實現，從而顯著減少機械、重複的編碼工作。
你可以點選這裡檢視更多關於 vibe coding 的細節：https://www.ibm.com/think/topics/vibe-coding
你可以點選這裡檢視更多關於 Karpathy 的分享內容：https://karpathy.bearblog.dev/blog/
如何假裝自己是 Vibe Coding 大師
實際上，在真正的 vibe coding 過程中，我們通常不會使用很多複雜的提示詞。也許我們在開始時需要為整個程式提供一個具體且適度複雜的提示詞，但在那之後的每一步，你可能只需要以下型別的提示詞：
"程式碼裡有個 bug，請修復它。"
"我不要部分程式碼，給我完整的修改後的程式碼。"
"你的程式碼還是有問題。"
"請再次修改並給我完整的修正後的程式碼。"
"剛才還能執行，為什麼現在不能執行了？"
"你沒理解我的意思嗎？不要改我原來的程式碼。"
"不要新增任何除錯功能。"
"不要做我沒讓你做的事。"
"我讓你實現的功能在哪裡？"
"你聽不懂我說的話嗎？"
"我只要一個函式。"
"我告訴過你參考我之前的程式碼。"
"請不要新增不必要的註釋。"
"請不要修改我原始程式碼的基本邏輯。"
"幫我修改程式碼。"
"基於我的程式碼修改..."
"不要改我的變數名！！！"
"不要改原來的函式名！"
"不要亂動我的變數。"
"不要新增額外的功能。"
"不要只生成框架，生成完整的程式碼。"這聽起來可能有點誇張，但實際上，這些就是我們在日常工作中可能使用的提示詞。由於大語言模型的上下文長度限制，或者有時因為它們的指令遵循能力不是很強，模型可能會忘記對話早些時候討論的內容。在 vibe coding 中，我們傾向使用長上下文的模型，並且使用指令遵循能力強的模型，我們可以透過這兩者的排行或者指標來判斷其是不是好模型。
或者，由於訓練資料集的風格，大模型傾向於以其訓練資料的風格回答。例如，有些人說話很嚴肅，有些人喜歡新增很多修飾，而有些大模型喜歡在程式碼中新增很多註釋或不必要的模組。
附錄 3：模型上下文
模型上下文可以理解為 AI 的短期記憶。它指的是在當前一次對話或一次任務中，模型能夠“看到”和“記住”的所有文字內容，包括你之前輸入的問題、系統提供的說明、相關資料等。
正是因為有上下文，AI 才能理解你在接著前面的內容繼續提問，才能進行一輪一輪、看起來連貫自然的對話。如果沒有上下文，你的每一句話在模型看來都像是一次全新的提問，它無法知道你之前說過什麼，也就談不上延續對話。
每個模型都有自己的有效上下文長度（context window）。這個長度通常用 token（可以粗略理解為“字詞片段”的單位）來衡量，目前主流模型大多在 32k～128k token 之間。上下文越長，模型一次能“讀”的內容就越多，例如：
- 一次性讀完一篇較長的論文或報告
- 在同一輪對話中引用多篇資料、多個案例
- 讓模型記住之前幾輪的複雜討論結論
當你輸入的內容接近或超過模型的上下文限制時，往往會出現一些常見現象：
- 模型開始遺忘前面長文字中的細節或關鍵資訊
- 對話進行到後面，話題逐漸偏離最初目標
- 對同一材料的不同問答之間，引用的內容不一致
這些現象並不是模型突然“變笨”，而是上下文容量被用滿或接近用滿後產生的自然結果。
在實際使用中，我們既希望上下文儘可能長，又要意識到：
- 上下文越長，佔用的算力資源越多
- 對應的呼叫成本（費用）也會隨之增加
因此，在設計 AI 應用時，需要在讓模型看得足夠多和控制成本、提升效率之間做平衡。例如：
- 對真正需要長期保留的資訊進行提煉後再交給模型
- 對不再需要的細節資訊，避免一遍又一遍原樣塞入上下文
- 使用外部知識庫等方式，把“長期記憶”交給系統，而不是強行塞進模型上下文中
附錄 4：指令遵循能力
指令遵循能力指的是：模型在理解你的指令之後，能否準確、完整地按照你的要求執行。它不僅包括能回答問題，還包括能按指定格式、風格、步驟完成任務。
例如，下面這些都是對模型有明確要求的指令：
- 將這篇文章總結為三個要點
- 用正式、禮貌的語氣寫一封回覆郵件
- 把這個詞翻譯成英文，並各造一個例句
- 從文章中提取作者、時間和主要事件
一個指令遵循能力強的模型，通常具備以下特徵：
- 按要求的數量輸出內容
例如要求總結三個要點，就不會給出五條。 - 覆蓋所有指定的要素
例如要求提取作者、時間和事件，就不會遺漏其中任何一項。 - 遵守指定的格式和語氣
例如要求使用正式語氣，就不會輸出過於口語化的回覆。 - 不做不必要的額外延伸
例如只要求翻譯和造句，就不會額外輸出一大段無關解釋。
在實際應用中，強指令遵循能力非常重要，原因包括：
- 提高穩定性：同樣的指令在不同時間、多次執行時，輸出結構和行為模式更加一致，不容易隨意發揮
- 提高可復現性：當你把一段提示詞配置到產品或流程中時，可以預期模型大致會怎樣響應，方便測試和迭代
- 便於系統整合：當模型輸出符合預期格式時，更容易與後端程式、工作流或其他工具自動對接
因此，在選擇和評估一個大語言模型時，除了關注它是否聰明、知識覆蓋是否廣之外，還需要特別關注它的指令遵循能力。對於工業級應用來說，能否穩定而準確地執行指令，往往比偶爾給出一次驚豔回答更重要。
--- title: '初級一：AI 時代，會說話就會編程' description: '用對話式方式讓 AI 幫你寫代碼：從 0 到 1 做出 AI 原生貪吃蛇，並學會舉一反三做出自己的小遊戲或 Demo。' ---