有次從未接觸程式的朋友問我 Vibe Coding 工具，我目前個人是用 Visual Studio Code 加上 Github Copilot 和 OpenAI Codex。因為我的電腦畫面時常還是程式碼，怕會是嚇退了朋友。其實一般語言模型都可生成網頁，這次推薦對於未接觸程式的朋友，可以免費使用 Google AI Studio 生成網頁，但要注意網頁若有綁定信用卡運用 Gemini AI ，免費是每月有額度的。別把會超過額度會支付費用的 API Key 直接貼到 Gemini 提示詞中，避免把 API Key 直接寫進公開的程式碼裡。相較 Lovable 、 v0 ，對於新手使用上不用一直扣點數，等待每天的免費贈點來說友善多了。
▍Gemini
步驟一：選擇「Canvas」直接輸入提示詞
Prompt：請我幫做一個社群平台，畫面跟 Facebook 一模一樣
步驟二：點擊左下角「選取以詢問問題 」可調整指定部分區域
步驟三：點擊左下角「新增 Gemini 功能」
透過新增 Gemini 功能 讓貼文助手藉由 LLM 來生成文字。
Facebook 介面模擬 視窗右上方 按鈕依序為：「儲存雲端」、「前一個版本」、「下一個版本」。每次編輯會有自動儲存，若改壞了還可以回到前一個版本。
Facebook 介面模擬 視窗左上方 按鈕依序為：「控制台」、「重新整理」、「程式碼」、「預覽」、「共用」、「關閉」。「控制台」則是當發生改壞則會出現紅字問題，但並非是 log 紀錄。
右上角可以切換成「程式碼」瀏覽方式。程式碼內無 API Key const apiKey = ""; 在 Canvas 中，所有的 Google API 呼叫都是透過一個內建的自動化的系統來代理和授權的。當 apiKey 為空值， const apiKey = "" 視為一個必要的佔位符，會讓執行環境知道這個地方需要自動補上密鑰。
步驟四：點擊「共用」再點選「分享」
有些學校的教育版沒有「分享」功能
任何人都可以透過右下角的「複製 Canvas」將整網頁複製一份到他人的 Gemini 對話串中。他人也可以基於你的編輯後繼續做成另外的版本。
步驟五：若要下載檔案，點擊「共用」再點選「複製內容」
將複製好的程式碼貼到任何文字編輯器，存成副檔名為 .html 的網頁檔。既可用瀏覽器開啟。透過 Gemini Canvas功能 因為沒有 Gemini API 關係所以文字生成功能失效。若要部署雲端，記得別把 Gemini API 放進去，而是在雲端後台設定。
▍Google AI Studio - Build
網路上相關教學影音：
步驟一：新增 Chrome 設定檔
若原本帳號有在 Google 綁定信用卡，若怕因為不確定串了哪些 API 而被誤刷卡，不想使用原本帳號。可以建立新的 Google 帳號。過程中需要行動電話的簡訊驗證，一支電話號碼可以創建多個帳戶。若想用原本 Google 帳號請忽略步驟一、步驟二。不同的 Chrome 設定檔可以設定不同顏色，讓你明顯去區分哪一個帳號是 Free Tier ? 哪一個是 Tier 1 。
開啟 Chrome 瀏覽器 左上角頭像 倒數第三個選項「新增 Chrome 設定檔」
步驟二：新增 Google 帳號
註冊網址：https://accounts.google.com/ 。
需要行動電話的簡訊驗證，一支電話號碼可以創建多個帳戶。
廣告推播與隱私權設定
步驟三：進入 Google AI Studio
步驟四：先點選左側選單「Build」在輸入框輸入提示詞
輸入框下面 Showcase 頁籤 有很多範例，一按就會自動立即生成。
Prompt：請我幫做一個社群平台，畫面跟 Facebook 一模一樣
等待一下，即可生成網頁。但與「Canvas」不同的是無法返回前一步驟，也沒有自動儲存的功能。若生成出現錯誤或是不滿意，不要儲存直接返回上一頁。確認無誤記得存檔。
右上方功能依照順序為：「儲存」、「複製」、「下載」、「複製程式碼到 Github 做版本控制」、「雲端部署到 Google Cloud Platform 的 Cloud Run」、「分享」、「替換API Key」
步驟五：雲端部署
在目前 Google 測試開發環境裡，Free tier 免費方案 不需要輸入 API 也能夠使用（每日限額）。若將檔案下載後搬移到正式環境，則是需要輸入 API 或是需要開通付費等級的 Tier 1。
Google Cloud Platform 的 Cloud Run 雖然有免費的流量額度。但是有要注意的設定步驟較多，本文不細談可以參閱官方 Cloud Run 定價。個人建議可以部署到免費的 Cloudflare Pages，並且注意 API Key 不要放在 .env.local 而是 Cloudflare Pages 「設定」變數和秘密中。
部署教學文：〈免費將網頁檔案備份至 Github 並部署到 Cloudflare Pages 建置線上網站〉
Free tier 免費方案 不需要輸入 API 也能夠使用。目前已調動免費的 API Key。
網頁還在 https://aistudio.google.com ，所以 API Key 不被取得
取得API Key：左側選單 「API Keys」，再點擊右上角 Create API Key
Free tier 免費方案則是沒有輸入信用卡資訊，仍然可以使用。Tier 1 則是已經輸入信用卡資訊，但每個帳號可以領取 $300 美元的抵免額 90天的試用期，使用則需要注意 API 的使用是否超過額度。
最後，搬移到正式環境避免鉅額帳單，若有綁信用卡記得看一下目前花費，設定花費上限。計費是根據 API Key 謹慎使用 。
相關資訊：
- 〈去你的，Google這招太奸詐了！〉秦亭亭 2025/09/26
- 〈Google首席佈道師釋出AI工具懶人包：新手如何Vibe Coding？6種AI助手差在哪？〉數位時代 李先泰 2025/08/29
