40 Vibe Coding(四)

(2026/04/08)

一、利用Google AIStudio玩Vibe Coding

• AIStudio網址：https://aistudio.google.com/ 

• 點擊Build

• 先選擇模型

  • 模型：

    1.  Gemini 3.1 Flash Lite Preview（免費方案的續航王者）

       • 大約額度： 每分鐘約 15 次互動，每天約 500 ~ 1000 次。

       • Vibe 建議： 如果你是在免費方案下進行 Vibe Coding，強烈建議優先選擇這個模型。它的設計就是為了高吞吐量，你可以非常頻繁地叫它修改程式碼細節，幾乎不用擔心一天內會把額度用光。

    2. Gemini 3 Flash Preview / Default (Gemini 3 Flash Preview)

       • 大約額度： 每分鐘約 5 ~ 10 次互動，每天只有 約 20 次。

       • Vibe 建議： 雖然 Flash 模型反應很快，但它近期的免費每日額度被縮減得非常嚴格。如果你用它來做 Vibe Coding，可能來回對話個十幾二十次，今天的額度就會直接耗盡而被鎖住，不適合需要大量來回修改的情境。

    3.  Gemini 3.1 Pro Preview（看得到吃不到）

       • 大約額度： 0 次（無免費額度）。

       • Vibe 建議： 雖然它出現在你的下拉選單中，但目前 Google 官方已經取消了 Pro 系列模型的免費 API 呼叫額度。如果你在 Free tier 選擇這個模型並按下執行，通常會立刻跳出「超出額度（ResourceExhausted）」的錯誤提示，要求你綁定信用卡升級到付費方案（Paid tier）才能使用。

  • 隱藏的陷阱：上下文長度 (Tokens Per Minute)

    1. 在 Vibe Coding 中，除了「互動次數」外，還有一個很容易被忽略的限制：每分鐘 250,000 Tokens 的字數上限（所有免費模型共用）。

    2. 當你在 Build 介面不斷迭代程式碼時，AI 其實每次都會把你前面的對話和「整包程式碼」重新看過一次。當專案越寫越大，單次互動消耗的 Token 數會暴增。有時候你明明一分鐘才對話 2 次，卻還是跳出超額警告，通常就是因為累積的程式碼太長，瞬間把 25 萬 Token 的扣打吃光了。

    3. 總結來說： 既然你目前處於 Free tier，請直接選擇 Gemini 3.1 Flash Lite Preview 作為你 Vibe Coding 的起手式，這樣才能確保開發節奏不會被額度耗盡給打斷！

  • 切換模型

    1. 在 AI Studio 的介面中，你隨時可以在對話與生成的過程中切換模型。系統會帶著你們前面已經討論過的上下文（包含已經寫好的程式碼），交由新的模型繼續接手。這種策略能將免費額度的效益最大化，以下是具體的執行建議與需要注意的小細節：

    2. 🎯 最佳實戰策略：「先建骨架，後修皮肉」

       • 第一階段：用 Gemini 3 Flash Preview 打地基 (重度邏輯)

         • 一開始的 1 到 5 個 Prompt 通常是最關鍵的，因為 AI 需要建立整個 Web App 的基礎架構、資料流和主要 UI 佈局。這時候使用邏輯能力較強的 3 Flash，可以確保你的專案有一個穩固且正確的基礎。

       • 第二階段：切換到 Gemini 3.1 Flash Lite Preview 做微調 (輕度修改)

         • 當基本功能都跑起來，只是需要「把按鈕改大一點」、「換個背景顏色」、「修改一下提示文字」這種不涉及複雜邏輯的修改時，如果你發現 3 Flash 的額度快用完了（或是已經跳出 429 錯誤），就可以立刻從右側的 Advanced settings 將模型切換成 3.1 Flash Lite。它處理這類微調任務綽綽有餘，而且額度超級多！

    3. ⚠️ 切換模型時的注意事項

       • 雖然可以中途換將，但有兩點「隱藏陷阱」要稍微留意：

         • 能力落差： 3.1 Flash Lite 雖然速度快、額度多，但在處理「跨多個檔案的複雜重構」或「深度的 Bug 排除」時，可能會比 3 Flash 容易出錯或「把原本寫好的程式碼改壞」。因此，切換到 Lite 模型後，盡量給予明確、單一且範圍小的指令。

         • Tokens 上限陷阱： 即使你切換到了額度很滿的 Flash Lite，請記得，AI 每次回覆時，還是會把你整個專案的程式碼重新讀一次。如果你的網頁程式碼越寫越長，就算模型本身的「互動次數」沒滿，也可能會因為單次傳輸的程式碼太龐大，而撞到免費方案共用的 Tokens Per Minute (每分鐘 Token 傳輸量) 上限。

    4. 操作提示： 當你發現 3 Flash 跳出額度警告時，只要點開你剛剛截圖的那個 Advanced settings，把模型改成 Gemini 3.1 Flash Lite Preview，然後稍微等個十幾秒（讓 API 的每分鐘限制冷卻一下），再重新按下執行按鈕，AI 就會無縫接軌繼續幫你寫 Code 了！

  • 我自己實測後發現：

    1. 我第一次用"Gemini 3.1 Pro Preview"，大概對話2、3次就超過額度了(打地鼠：九九乘法大挑戰)

    2. 但第二次用"Gemini 3.1 Pro Preview"，一直對話8次都還可以對話 (3D太陽系天文台)

• I'm feeling lucky（好手氣）

這個「I'm feeling lucky（好手氣）」按鈕，其實是致敬 Google 搜尋最經典的小彩蛋！在 AI Studio 的 Build 介面裡，它的主要作用是**「幫你隨機生成一個 App 的開發靈感（Prompt）」**。

當你點擊這個按鈕時，會發生以下情況：

• 自動填入精準指令： 系統會隨機在對話框裡塞入一段完整、具體且結構良好的應用程式描述（例如：「幫我做一個天氣預報儀表板，要有動態的雲朵背景和未來三天的氣溫折線圖」）。

• 快速體驗 Vibe Coding： 如果你剛打開介面，單純想測試一下 Build 功能的威力，卻還沒想到要寫什麼程式，按下去就對了！它可以讓你立刻體驗 AI 如何將一段文字轉化為實際運作的網頁。

• 學習下 Prompt 的技巧： 觀察它自動生成的句子，也是學習如何向 AI 描述「架構」、「視覺風格」與「互動邏輯」的絕佳範例。

你可以大膽地按按看！如果跳出來的點子覺得不錯，甚至可以順手把文字微調一下，改成適合在課堂上讓小朋友點擊互動的小工具（例如把普通的計分板改成有趣的怪獸對戰計分），然後直接送出讓 AI 幫你做出來。這是一個非常實用的靈感產生器。

• 3D太陽系天文台

• 沒有設定結帳方式無法發布

  • 設定信用卡資料就好了！(如果有設定信用卡資料，要記得去設定每月額度上限！！)

• 只好把所有程式下載