Google AI Studio Build 教學：用 Gemini 由 Prompt 生成網站並反覆改版

Google AI Studio 的 Build 模式把自然語言需求轉成可互動 Web App：左邊保留對話、檔案和 checkpoint，右邊即時預覽，亦可切換 Code 或 Fullscreen。這很適合把模糊構思快速變成可討論的原型；但「畫面看起來完成」不代表內容正確、程式安全或已符合上線要求。

影片示範以一段 Bento Grid 產品頁需求生成汽車網站，再追加修改、全螢幕檢查及考慮匯出。本文沿用這條主線，但把示範改寫成可重複的工程流程，並補上影片未處理的版本、測試、資料、授權和發佈責任。

先修正影片中的一個重要時效問題

錄影介面顯示 Gemini 3 Pro Preview。Google 官方 deprecation 資料顯示，這個 preview 型號已於 2026 年 3 月 9 日停止服務。因此不要按影片逐字尋找同一選項，也不要在團隊 SOP 寫死 preview 名稱。建立新專案時，應使用 AI Studio 當下標示的現行／建議模型，並在專案 README 記錄「模型、日期、關鍵 Prompt、測試結果」；模型升級後重新跑驗收集。

介面亦會變動。現行官方 Build 文件把它描述為可建立 Web App 或原生 Android App 的環境；Web App 預設可包含 React 前端和 Node.js server runtime。以下以 Web App 為主，按鈕名稱如略有不同，應以官方文件和你畫面上的現行選項為準。

一、不要先寫 Prompt：先完成一頁規格

最常見失敗不是模型不夠強，而是輸入只有「做一個高級產品網站」。模型只好自行決定受眾、內容、圖片、數字、CTA 和版面，最後看似完整，實際充滿未經批准的假設。先用下表把決定權收回：

二、把規格改寫成模型易理解的結構化 Prompt

Google 的 Prompt 指南建議指示要清楚、具體並保持一致結構。網站任務可用 Markdown 標題分隔，不必堆砌「震撼、世界級、極致」等形容詞。下列範本使用虛構品牌，避免複製影片中的真實商標：

# 任務
建立一個單頁、可響應的產品發佈網站原型。

# 品牌與受眾
- 品牌：North Harbour Mobility（虛構）
- 受眾：需要比較企業接駁方案的營運主管
- 語氣：精確、克制、可信；不要奢華空話

# 已批准內容
- Hero：把城市接駁安排集中到一個控制台
- CTA：預約產品示範
- 三項優勢：路線協調、權限管理、營運報表
- 未提供的數字、客戶名稱和認證一律不要發明

# 資訊架構
Header、Hero、3 個功能卡、工作流程、FAQ、最終 CTA、Footer。

# 視覺系統
- 深色中性底、單一藍綠 accent、高對比文字
- Bento Grid，但閱讀次序在手機上必須合理
- 8px spacing scale；卡片圓角 20px；陰影克制
- 使用不帶商標的灰色佔位圖，不生成假產品照片

# 互動與無障礙
- 導覽、按鈕和 FAQ 可用鍵盤操作
- 可見 focus state；語意 HTML；圖片有具體 alt
- 尊重 prefers-reduced-motion；不要自動播放影片

# 響應式與驗收
- 375、768、1440px 均不橫向捲動
- 所有連結有效；CTA 指向 /demo
- 不加入分析、登入、付款、外部 API 或持久化資料
- 完成後列出檔案、主要決定、仍需人工確認的項目

如果已有參考圖，說明你想借鑑的是「資訊密度、卡片比例、留白」而不是要求像素級複製。上載前確認圖像權利，並刪除姓名、電郵、訂單、內部 URL 和尚未公開資訊。免費服務的資料使用條款與付費服務不同，必須在處理真實業務資料前閱讀現行條款。

三、進入 Google AI Studio Build 並建立第一版

1. 以工作用 Google 帳戶進入 Google AI Studio，確認帳戶、地區、組織政策和可用模型。
2. 進入 Build，選擇 Web App；如介面提供 App Gallery、Import from GitHub 或 AI Chips，先不用也可以。
3. 確認 Prompt 中沒有密鑰或敏感資料，再貼上完整規格。
4. 使用當下可用的建議模型，不要依照舊錄影選已退役 preview。
5. 按 Build，等待檔案生成、自動檢查和右側預覽完成。

四、讀懂生成介面：聊天、檔案、Preview、Code 和 Checkpoint

開始後，左側通常顯示你的要求、代理正在處理的檔案、檢查結果和可回復狀態；右側顯示 Preview。現行官方文件指出，Build 的代理可維持專案上下文和跨檔案修改，但這不表示每次修改都一定正確。把介面當成一個能產生與修改程式碼的協作者，而不是已替你完成 QA 的網站供應商。

• Preview：快速看互動和版面，但不代替真實瀏覽器測試。
• Code：檢查實際檔案、依賴、前後端邊界和硬編碼內容。
• Fullscreen：移除編輯面板干擾，檢查整頁節奏和捲動。
• Checkpoint／版本：每輪大改前保存可回復點；回復後仍要重跑測試。
• 錯誤與自動修正：閱讀錯誤，不要只看綠色勾號；自動修正可能引入另一個回歸。

五、第一版驗收：先找錯，不要先問『靚唔靚』

影片中的第一版已形成完整 Bento Grid，但它把古董車、飛機、花朵等圖像混入同一個高級汽車頁，產品名稱、馬力、加速和功能亦不是已核准資料。這正是人工驗收的價值：版面成立不等於內容成立。

內容與品牌

• 標題、數字、單位、價格、認證和功能是否有來源？
• 模型有否添加未提供的品牌、客戶、獎項、比較或保證？
• 圖片是否真的是指定產品？商標、人物和場景是否已授權？
• 繁體中文是否自然一致？中英標點、術語和地區用字是否正確？

功能與安全

• 每個按鈕、導覽錨點、FAQ、表單、錯誤和空狀態是否可用？
• 表單是否真的提交到預期端點？有否驗證、節流、CSRF／濫用防護和清楚錯誤訊息？
• 有否把 key、token、內部 endpoint 或 debug 資料放在前端 bundle？
• 第三方套件是否必要、持續維護、授權合適並沒有已知高風險漏洞？

響應式與無障礙

• 在 375、768、1440px 檢查，不只縮放桌面視窗。
• 以 Tab／Shift+Tab 操作主要流程，確認焦點可見、次序合理、沒有鍵盤陷阱。
• 檢查 heading 層級、landmark、表單 label、按鈕名稱、替代文字和色彩對比。
• 放大至 200%、啟用 reduced motion、測試長文字和錯誤訊息。

六、對話式改版：每輪只處理一組可驗證問題

「再現代一點」很難驗收。把第一版問題轉成具體差異，並說明甚麼不能改：

修改目前專案，不要重建。

必須保留：路由、已批准文案、CTA URL、現有無障礙標籤。
本輪只做以下修改：
1. 把所有未授權汽車圖片改成中性灰色佔位區，不生成品牌或車款。
2. 桌面 Hero 改為 60/40；手機改為單欄，CTA 排在產品摘要後。
3. 卡片標題最少 18px，正文行高 1.6；確保文字對比合格。
4. 移除無功能的播放、旋轉及配置圖示。

完成後：
- 列出更改檔案和原因；
- 不要修改其他區域；
- 執行現有檢查；
- 列出仍需人工測試的項目。

一輪只處理視覺或功能上相關的改動，保存 checkpoint，查看 diff，再以同一組 viewport 和鍵盤步驟重測。若模型開始大範圍重寫，立即停止，回復版本，把要求縮小。不要以更多 Prompt 掩蓋一個需要直接改 Code 的簡單問題。

七、切換 Fullscreen，做一次內容與視覺走查

Fullscreen 適合檢查整頁節奏：首屏是否交代價值、卡片是否過密、重要 CTA 是否太遲出現、重複區塊是否可以刪除。逐段捲動時把問題記錄成「位置、現況、預期、證據」，而不是憑感覺要求再生成。

八、開啟 Code：發佈前至少完成這 12 項

1. 確認專案實際使用甚麼框架、build command 和 runtime。
2. 把批准內容集中管理，刪除所有模型捏造文案和測試資料。
3. 確認語意 HTML、metadata、canonical、favicon、robots 和分享圖片。
4. 檢查路由、404、error boundary、loading 和空狀態。
5. 刪除無用套件、dead code、console log 和假按鈕。
6. 鎖定依賴並執行 lint、typecheck、test 和 production build。
7. 只在 server-side 使用 secrets；前端不得包含任何長期憑證。
8. 第三方 API 加入逾時、錯誤處理、節流、權限和成本上限。
9. 表單要有服務端驗證、濫用防護、私隱通知和資料刪除方法。
10. 圖片經壓縮、設定尺寸，並確認授權、alt 和不會誤導。
11. 測量主要頁面的載入、互動和 layout shift；低速網絡也要測。
12. 保存原始碼、變更記錄、部署設定、owner 和 rollback 步驟。

官方全端文件指出，新的 Gemini 應用可把 GEMINI_API_KEY 放在 server-side secret；第三方 key 亦應透過 Settings 的 Secrets 管理。這是安全起點，不是完整保安保證：仍要限制 key、輪換、監察使用和確保 client bundle 不會洩漏。

九、匯出或發佈：先選擇交付邊界

Google 的部署文件在 2026 年 7 月列出 Starter Tier 和標準 Cloud Run 部署，並提供 Publish 流程及自訂 ai.studio 子網域；資格、數量和計費會變動，發佈當日要再讀官方頁面。任何 public URL 都要假設會被掃描和濫用：加上身份驗證、速率限制、成本告警、最小權限和停用方法。

十、可直接使用的最終驗收清單

• 版本：已記錄模型、日期、Prompt、checkpoint、commit 和部署版本。
• 內容：品牌、數字、聲稱、語言、連結和法律文字已由 owner 批准。
• 素材：圖片、影片、字型、圖示和商標均有使用權及來源記錄。
• 功能：導覽、CTA、表單、登入、錯誤、空狀態和回復均測試。
• 無障礙：鍵盤、焦點、heading、label、alt、對比、放大和 reduced motion 已檢查。
• 裝置：真實手機、平板和桌面；Chrome、Safari、Edge／Firefox 至少覆蓋目標用戶。
• 保安：沒有 client-side secret；依賴、權限、輸入驗證、濫用防護和日誌已審查。
• 私隱：資料類型、目的、同意、保留、刪除、供應商和跨境安排已確認。
• 營運：owner、監察、告警、成本上限、支援和 rollback 已寫下。
• 證據：保存測試結果和已知限制；不是只保存一張「看起來完成」的截圖。

AI Studio Build 最有價值的用法，不是把「寫網站」整件事交給模型，而是把需求、生成、比較、測試和交付縮短成可見循環。規格越清楚，修改越小，驗收越固定，你越容易把快速原型變成真正可維護、可負責的產品。