Google AI Studio Vibe Coding 教學：快速原型開發實戰

這篇 google ai studio vibe coding 教學 會帶你用自然語言在 Google AI Studio 中完成從概念到原型的轉換。內容涵蓋 Vibe Coding 的核心邏輯、環境設定、可直接照做的 Prompt 範例，以及避開幻覺與安全陷阱的做法，工程師和非程式背景的人都能上手。

查看相關日報

Agentic software development（代理程式軟體開發）正在改變開發節奏。GitHub 在 2026 年 10 月的工程部落格說明，正為代理程式規模的開發重建 Git 基礎設施：2025 年 9 月到 2026 年 8 月，GitHub 每月的 Git 活動從 2,182 億次增加到 4,733 億次，最繁忙的單一儲存庫在 8 月就有約十億次請求。開發模式也從「人類寫程式」轉向「人類指導 AI 寫程式」。學會用 Google AI Studio 做 Vibe Coding，你就能更快把點子變成可執行的原型。

Vibe Coding 是什麼？核心概念解析

先釐清定義。Vibe Coding 不是嚴格的學術術語，而是一種開發方式的稱呼。

定義：自然語言驅動的快速原型開發

Vibe Coding 的重點在「直覺」。開發者不逐行寫程式碼，而是用自然語言（Natural Language）描述意圖、邏輯與介面需求，再由大型語言模型（LLM）生成對應的程式碼。這種模式以意圖為核心（Intent-Driven），開發者的角色從動手寫的人，變成設計架構、審查成果的人。

Google AI Studio 的官方文件直接把 Build mode 定位為 vibe coding 的入口：用自然語言描述想做的 app，AI Studio 會生成完整的應用程式，並在畫面右側顯示即時預覽。

為什麼現在該學：降低門檻與加速迭代

最直接的好處是門檻變低。過去做一個簡單的網頁，得先學 HTML、CSS、JavaScript 和一種後端語言；現在只要邏輯清楚、表達得出來，創業者、產品經理與非技術背景的人都能做出原型。

迭代速度也快得多。傳統流程中，改一個功能可能要花數小時甚至數天。Vibe Coding 讓你反覆調整 Prompt，幾分鐘內就能拿到多個版本並立刻測試，這正是「快速失敗、快速學習」的做法。

但 Vibe Coding 不等於全自動，你仍需要基本的程式邏輯判斷力，確認生成的程式碼安全、正確、符合預期。

事前準備：Google AI Studio 環境設定

Google AI Studio 是 Google 提供的平台，可以直接測試 Gemini 系列模型並進行 API 整合。

Google 帳號登入與 API Key

使用你的 Google 帳號登入 Google AI Studio（aistudio.google.com）即可開始。

在 Build mode 建立會呼叫 Gemini API 的 app 時，AI Studio 會自動把你的 Gemini API 金鑰設定為 app 伺服器端的 secret（GEMINI_API_KEY），不需要手動設定，金鑰也不會出現在前端程式碼中；你可以在設定裡的 Secrets 面板查看。只有把 app 下載成 ZIP 檔、拿到其他環境執行時，才需要自己設定 GEMINI_API_KEY 環境變數。API Key 請妥善保管，切勿上傳到 GitHub 等公開平台，否則可能被他人盜用，產生額外費用或安全風險。

免費與付費層級

Gemini API 官方定價頁把方案分成免費、付費與企業三級。免費層級包含 Google AI Studio 使用權限、免費的輸入與輸出 token，以及部分模型的有限使用，但內容會被用於改善 Google 的產品；付費層級提供更高的速率限制，以及 Google 最先進模型的使用權限。

另外兩個會產生費用的地方要先知道：在 Build mode 把 app 分享給別人時，他們使用 app 產生的 API 呼叫會計入你的用量，若使用付費模型可能產生費用；把 app 部署到 Cloud Run，也可能依用量收取 Cloud Run 費用。

Step 1：進入 Build mode 與介面介紹

Google AI Studio 使用指南：Build mode 是什麼

Build mode 是 Google AI Studio 用來做 vibe coding 的功能，可以用自然語言建立並部署 app。透過平台選擇器，你可以選擇建立：

• Web app（預設）：完整的全端環境，前端預設使用 React，伺服器端是 Node.js 執行環境，可以安全地呼叫 API、連接資料庫、使用 npm 套件。
• 原生 Android app：以 Kotlin 與 Jetpack Compose 建立，可在瀏覽器內的模擬器預覽。

Build mode 背後是 Antigravity Agent，它會維持整個專案的上下文、管理多個檔案之間的相依關係，並驗證程式碼更新以減少幻覺。

開始建立的四種方式

1. 直接輸入 Prompt：在 Build mode 的輸入框描述想做的東西，可以加選 AI Chips 為 app 加入特定功能（例如圖片生成、Google 地圖資料），也可以用語音輸入。
2. 「I'm Feeling Lucky」按鈕：沒有點子時按下它，Gemini 會生成一個專案構想的 Prompt。
3. 從 App Gallery 改作：在 App Gallery 開啟一個現成專案，選擇 Copy App。
4. 從 GitHub 匯入：在輸入框的 Add files（+ 圖示）選單中選擇 Import from GitHub，匯入既有程式碼。

生成後的介面

執行 Prompt 後，AI Studio 會生成所需的程式碼與檔案，右側出現 app 的即時預覽。接下來你可以：

• 在預覽面板點 Code 分頁查看並直接編輯程式碼。
• 在 Build mode 的聊天面板請 Gemini 修改、加功能或調整樣式。
• 用 annotation mode 在 app 畫面上標出任一區塊，描述你想怎麼改。

如何撰寫有效的 Prompt 以觸發 Vibe Coding

Prompt 的品質直接決定程式碼能不能用。一個有效的 Prompt 通常包含四個要素：

1. 角色設定：指定 AI 的身分，例如「你是一位資深前端開發工程師」。
2. 任務描述：說明要實作的功能，例如「建立一個響應式的導航列」。
3. 技術堆疊：指定框架，例如「使用 React 與 Tailwind CSS」。
4. 約束條件：列出規則，例如「支援深色模式」、「符合無障礙標準」。

組合起來就是：「你是一位資深前端開發工程師。請使用 React 與 Tailwind CSS，建立一個響應式的導航列。導航列應包含 Logo、三個主要連結（首頁、關於、聯絡）以及一個行動裝置漢堡選單。請確保程式碼符合無障礙標準，並支援深色模式。」

上下文與限制給得越完整，AI 的輸出就越貼近需求。

Step 2：第一個 Vibe Coding 實作範例

操作步驟：從自然語言描述到可預覽的原型

1. 登入並進入 Build mode：用 Google 帳號登入 Google AI Studio，打開 Build mode。
2. 選擇平台：用平台選擇器確認要建立 web app（預設）。
3. 輸入 Prompt：貼上上一節的 Prompt 範例。
4. 執行 Prompt：等待 AI Studio 生成程式碼與檔案。
5. 審查與修改：在右側預覽實際操作，點 Code 分頁檢查程式碼，有不符需求之處就用聊天面板或 annotation mode 要求修正。

預期結果：可直接操作的前端原型

完成後，右側會出現可以直接點按的導航列預覽，Code 分頁裡則是生成的程式碼（web app 預設前端為 React，另含 Node.js 伺服器端）。原型能先跑起來，你的時間就能留給產品邏輯與使用者體驗。

注意：生成的程式碼僅供參考與原型開發。正式上線前，務必完成測試與安全審查。

Step 3：進階技巧與最佳實踐

Google 程式碼生成優化：如何修正與迭代程式碼

Vibe Coding 很少一次到位，通常需要多輪迭代。在 Build mode 裡，你可以直接在聊天面板提出修改，或用 annotation mode 指出要改的畫面區塊。結果不如預期時，可以這樣修正：

1. 具體指出錯誤：例如「漢堡選單在點擊後無法展開」，比「選單有問題」有效得多。
2. 提供範例：貼一段正確的程式碼片段，讓 AI 理解你要的樣子。
3. 分解任務：把複雜功能拆成小步驟，逐步生成與測試。

例如，先請 AI 生成靜態的導航列結構，再逐步加入互動邏輯與樣式。分步生成能明顯提高準確度。

常見陷阱：避免幻覺與確保程式邏輯正確性

AI 會產生「幻覺」（Hallucination），也就是輸出看似合理、實際上錯誤的程式碼。要降低這個風險，你需要：

1. 基本程式知識：能看懂並審查 AI 產出的程式碼。
2. 單元測試：逐一驗證各功能模組是否正常運作。
3. 安全審查：檢查是否有 SQL 注入、XSS 攻擊等漏洞。

Build mode 的代理程式會驗證程式碼更新以減少幻覺，但這不能取代人工審查。程式碼進入正式環境之前，一定要經過人工審查與測試。

常見問題 FAQ

Vibe Coding 生成的程式碼可以直接上線嗎？

不建議。Vibe Coding 適合快速原型與概念驗證。正式上線前，至少要完成功能測試、安全審查（如 SQL 注入、XSS 檢查）與效能優化，才能確保穩定性與可維護性。

Google AI Studio 免費額度夠用嗎？

Gemini API 官方定價頁列出的免費層級包含 Google AI Studio 使用權限與免費的輸入、輸出 token，但只開放部分模型的有限使用，且內容會被用於改善 Google 的產品。做原型練習可以先從免費層級開始；需要更高的速率限制或 Google 最先進的模型，就要升級到付費層級。

如何將生成的程式碼整合到現有專案？

官方提供三種把程式碼帶出 AI Studio 的方式：

1. 同步到 GitHub：在設定的 GitHub 分頁建立新儲存庫或連結既有儲存庫，之後可以雙向同步，在本機編輯器修改再拉回 AI Studio。
2. 下載 ZIP 檔：把程式碼匯出成 ZIP 檔，在本機開發；在其他環境執行時要自行設定 GEMINI_API_KEY 環境變數。
3. 部署到 Cloud Run：直接從 AI Studio 部署成公開網址，API Key 會安全地設定在伺服器端。

帶進現有專案後，再依目錄結構與命名規範調整檔案、確認相依套件已安裝，並在本機測試整合後的程式碼。

下一步

這份 Google AI Studio Vibe Coding 教學只是起點。最好的練習方式，是挑一個你手上真實的小需求，例如個人網站的某個元件，從寫 Prompt、審查到迭代完整走一遍，再逐步擴大範圍。

現在就打開 Google AI Studio 的 Build mode，動手做出你的第一個原型吧！