在 Google AI Studio 進行 Vibe Coding:從自然語言提示構建應用

作者:Macaron 的 Boxu Li

介紹

Google AI Studio 的新 vibe coding 介面讓用戶只需描述他們想要什麼,就能構建功能應用,而不必一行一行地編寫代碼。vibe coding 這個術語(由 AI 研究員 Andrej Karpathy 在 2025 年創造)指的是一種工作流程,開發者的角色從手動編碼轉變為在對話中引導 AI 助手進行迭代過程[1]。隨著這種方法現在整合到 AI Studio 中,Google 旨在使 AI 應用開發對所有人都可及,不論是經驗豐富的編碼專家還是完全的新手。事實上,Google 設定了一個雄心勃勃的目標,即在年底前在 AI Studio 上構建一百萬個 AI 應用,將 vibe coding 定位為推動這一規模的引擎[2]。這次發布是 Google 將 AI 驅動的應用創建「像建立網站一樣普及」[3]的策略中的一個重要步驟,降低了學生、企業家和非編碼者的門檻。

AI Studio 中的 Vibe Coding 運作方式

在 AI Studio 的建構模式中,創建應用程式變成了與 AI 的互動對話。您可以用自然語言描述您想要創建的應用程式,例如,「建立一個可以讓我畫出佈局並為每個區域建議植物的園藝規劃助手」。AI(預設使用 Google 的 Gemini 模型)會解讀這個高層次的請求,並自動生成應用程式的第一個版本,其中包含使用者介面、必要的程式碼(前端和後端),甚至是專案檔案結構[5]。從那裡,您可以通過對話或直接編輯反覆改進應用程式。如果有些部分運行得不如預期或需要改進,您只需告訴 AI 要更改什麼(或切換到程式碼編輯器手動調整),AI 會相應更新程式碼[6]。這個提示-生成-改進的循環會持續進行,直到您滿意為止。重要的是,AI Studio 同時支持編碼和無需編碼的方法——非技術用戶可以完全依賴自然語言指令,而開發人員則可以檢查並按需微調生成的 React/TypeScript 或 Python 程式碼[7][8]。一旦應用程式看起來不錯,部署只需一鍵:AI Studio 集成了一鍵發布到 Google Cloud Run,立即將您的應用程式託管在即時 URL 上以供測試或分享[9][10]。總結來說,AI Studio 中的 vibe coding 工作流程可以概述為幾個大步驟:

  1. **構思(提示):**在一個高層次的提示中描述整個應用程式的目的和功能。例如:「創建一個個人預算追蹤應用程式,具備按類別顯示支出的圖表,以及提供儲蓄建議的AI聊天機器人。」[11][12]
  2. **生成:**AI Studio後端(Gemini 2.5 Pro和相關API)生成應用程式的初始版本——構建UI佈局、撰寫前端邏輯(例如React元件)、設置所需的後端路由或API調用,並組裝項目文件[13][5]。對於簡單的應用程式,這通常在幾分鐘內完成,經常只需幾秒鐘。
  3. 測試與預覽:應用程式在您的瀏覽器中以互動的預覽窗格加載。您可以立即與之互動以查看其功能。(在後台,應用程式在沙盒環境中運行——不需要手動設置或伺服器進行預覽[14]。)
  4. **改進:**通過對話或直接編輯代碼,您可以改進應用程式。您可以說,「現在添加一個登入頁面」或「讓圖表使用不同顏色」,AI將通過修改代碼來應用這些更改[15][7]。AI Studio的助手還可以在您的要求下調試問題或添加新功能。這個迭代循環允許您逐漸增強應用程式的功能並自然地解決問題。
  5. **部署:**一旦滿意,您可以通過最後一個提示或單擊一下將應用程式部署上線。AI Studio在後台處理代碼的打包和部署到可擴展平台(Google Cloud Run)[16][9]。結果是一個可以分享或繼續開發的線上應用程式網址。

在整個過程中,你始終保持控制:你可以隨時審查生成的代碼,測試應用程式的行為,並確保它符合你的需求後再部署。這種高層次的簡便性與低層次的透明度結合,使 AI Studio 中的氛圍編碼對初學者和經驗豐富的開發者都具有強大的吸引力。Google 將其比作擁有一位 AI 配對程式員或副駕駛,處理樣板代碼和繁重工作,而你專注於引導應用程式的「氛圍」——你所設想的創意和用戶體驗[17][18]

氛圍編碼介面的主要功能

Google AI Studio 的氛圍編碼環境提供多種功能和 UI 元素,使從提示到應用程式的旅程順暢且直觀。其中一些主要功能包括:

  • 模型與功能選擇器: 在提示之前,建置標籤頁讓你配置應用程式將使用哪些 AI 模型和服務。預設選擇的是 Gemini 2.5 Pro(一款通用的 LLM),但你可以一鍵加入專門模組——例如,Imagen 用於圖像生成,Veo 用於影片理解,或較小的模型如 Nano Banana 用於特定任務,甚至可以啟用 Google 搜尋 整合[19][20]。這些模組化的「AI 超能力」以切換形式呈現,因此你可以輕鬆設定包括圖像識別使用網頁搜尋數據,系統會將這些功能整合到產生的應用程式代碼中。Gemini 在應用程式組裝時識別這些組件並將它們結合在一起[20][21]。這意味著即使是複雜的多模態應用程式(例如能顯示圖像或地圖的語音聊天機器人)也可以輕鬆建立。
  • 自然語言提示輸入: Vibe 編程的核心是提示框——你只需用簡單的英文(或任何支援的語言)鍵入你想要應用程式執行的操作。例如:「建立一個互動的數學問答遊戲,使用 AI 導師給予反饋」。系統可能還提供示例提示或模板以指導你(例如「使用 Gemini 的食譜生成器」起始提示)[22]。你不需要指定技術細節如框架或語法——AI 會根據你的描述決定所需的技術棧(通常是用於網頁介面的 React + TypeScript,加上任何後端邏輯)[12]。這降低了門檻,使非程式設計師也能通過描述想法來啟動應用程式的開發。
  • 雙界面聊天與代碼: 應用程式生成後,AI Studio 將視圖分為雙窗格編輯器。在左側,你可以和 AI 助手(Gemini)進行對話。在這裡,你可以詢問代碼問題,請求更改或新增功能,並獲得解釋。在右側,你可以看到完整的專案代碼編輯器,帶有檔案標籤(前端、後端、配置檔案等)[23]。每個檔案都有工具提示或簡短描述其用途(對於學習 App.tsx 或 constants.ts 這類文件的新手來說很有幫助)[24]。你可以直接在此窗格中編輯代碼——例如,開發者可能會微調 CSS 文件中的樣式或調整硬編碼值。所有更改都可以立即在即時預覽中測試。這種分裂界面服務於不同的用戶群體:非程式設計師可以主要停留在對話「氛圍」中引導更改,而程式設計師可以在需要時深入實際的代碼庫[7]
  • 情境感知建議: AI Studio 不只是被動等待你的指令——它會主動提供智能建議來改進應用程式。Gemini 模型會分析當前應用程式,並可能透過 Flashlight 功能建議相關的增強功能[25][26]。例如,如果你已建立一個圖像庫應用程式,可能會建議「新增功能以顯示最近查看過的圖像歷史」[25]。這些建議會出現在介面中,指導你下一步嘗試什麼,幾乎就像一位 AI 產品經理提供的創意。你可以點擊接受建議讓 AI 實施,或忽略它。這有助於用戶發現他們可能沒想到的功能,並展示 AI 的能力來迭代改進專案。
  • 「我覺得幸運」提示生成器: 為了激發創意或在不確定要構建什麼時提供幫助,Google 增加了一個有趣的**「我覺得幸運」**按鈕[27]。每次按下這個按鈕都會生成一個隨機應用程式概念,附帶提示和預先配置的 AI 功能選擇。它可能會提出一些奇特或小眾的東西——例如,「一個夢想花園設計師,利用圖像生成來可視化你的後院」或「一個 AI 主持人與你開玩笑的問答遊戲」[28]。這些都是完全功能的起始點;如果你選擇繼續,系統會實際組裝建議的應用程式。Google AI Studio 的產品負責人 Logan Kilpatrick 解釋說,這一功能鼓勵探索:「你會得到一些非常酷、截然不同的體驗」,這是你可能不會自己構建的[29]。這是一鍵探索可能性的藝術,或許會讓你偶然發現下個重大應用程式創意。
  • 秘密變數與 API 金鑰: 許多有用的應用程式需要調用外部 API 或服務(例如,天氣應用程式可能調用天氣 API)。AI Studio 現在包括一個秘密變數保險庫,用於安全存儲 API 金鑰或其他敏感憑證在你的專案中[30][31]。這意味著你可以提示 AI 整合外部服務(例如,「從 AlphaVantage API 獲取即時股價」)而不必在代碼中硬編碼秘密金鑰。你在 Secrets UI 中添加 API 金鑰,AI 知道如何安全地引用它。這一功能對於將原型轉為生產就緒的應用程式至關重要,因為它支持良好的安全實踐,即使在 AI 生成的代碼中也是如此。
  • 細粒度 UI 編輯工具: 雖然你始終可以用文字描述 UI 更改(例如「把按鈕變藍」),但 AI Studio 也允許你更直接地與預覽互動。你可以在預覽中點擊一個 UI 元素,並為 Gemini 註釋一個指令[32]。例如,你可以選擇一個標題並說「使這個標題更大並置中」。AI 會識別該元素並調整相應的代碼(HTML/CSS)以實施更改[33]。這是一個強大的功能,將所見即所得的編輯與 AI 編程結合起來——感覺就像在與你的界面對話以進行自定義。這降低了在代碼中搜索樣式或佈局調整的需求;相反,你只需指向屏幕並告訴 AI 你想要什麼。
  • 一鍵部署: 當你的應用程式準備好時,部署非常簡單。AI Studio 與 Google Cloud Run 整合,提供一鍵部署至雲端[10]。只需在 Studio 內執行一個動作,你的應用程式(前端和後端)即被容器化並在 Google 的基礎設施上啟動,並獲得一個即時 URL,其他人可以訪問這個 URL。這消除了設置服務器或主機的傳統複雜步驟。在 Google 的演示中,從頭到尾僅用 Studio 介面和提示,在不到五分鐘內部署了一個完全功能的 AI 聊天機器人應用程式[34]。對於輕量的應用程式或原型,你甚至不需要在檔案中放置信用卡——AI Studio 的免費層讓你可以自由構建和測試,僅在調用某些高級模型(如最大視頻模型)或想要在生產中擴展時需要付費計畫[35][36]。這裡的理念是*「免費構建,成長時付費」*,讓創作者可以毫無障礙地試驗,但在需要時仍有通往企業級託管的路徑[37]
  • 導出與協作: 除了部署到 Cloud Run,AI Studio 提供多種選項來管理或分享你的專案。你可以將完整代碼保存到你的 GitHub 儲存庫,只需幾下點擊,下載專案為 zip,或者甚至在 AI Studio 的畫廊中叉分應用程式進行重新混合[38]。這意味著你永遠不會被鎖定——代碼是你的,可以在平台外檢查和使用。這也暗示了未來的社區功能:應用程式畫廊展示範例應用程式和模板(目前是 Google 提供的和你自己的過去創作,計畫未來包括用戶共享的應用程式)[39]。這個畫廊可能發展成為一種應用程式商店或社區中心,人們可以在其中發現 AI Studio 應用程式,從中學習,並在彼此的作品上構建,通過分享進一步加速開發。

Vibe Coding 實戰:從提示到原型

沒有什麼比親眼看到 vibe coding 會話運行更能說明 AI Studio 的能力了。Google 團隊和早期用戶分享了幾個展示如何迅速將想法變成工作應用的示例。例如,一位 Googler 展示了一個*「園藝規劃助手」*應用,只需幾次點擊即可完成:他輸入提示,系統在瞬間生成了一個包含視覺佈局工具和對話植物推薦功能的完整應用[40][41]。在另一個官方演示中,一個完全功能的聊天機器人(帶有自定義知識庫)在不到 5 分鐘內構建並實時部署——全部通過自然語言指令和功能切換,無需手動編碼[34]。這些快速結果突顯了 vibe coding 的生產力:過去需要幾天的編程工作現在可以在喝咖啡的休息時間內完成。

作為一個實際操作的試驗,VentureBeat 的記者測試了 AI Studio,請求製作一個簡單的遊戲。他給 Gemini 提供了一個描述:「一個隨機擲骰的網頁應用,使用者可以選擇不同的骰子(d6、d20 等),觀看擲骰動畫,並選擇骰子的顏色。」 在約 65 秒 內,AI Studio 產生了一個符合這些規格的工作網頁應用[42][43]。生成的應用程式具備乾淨的 UI(使用 React、TypeScript 和 Tailwind CSS 構建),使用者可以選擇 6 面、10 面或 20 面的骰子,自定義其顏色,然後點擊按鈕擲骰。每次擲骰都會旋轉動畫並顯示隨機結果——完全如所要求。這個平台不僅生成了一個代碼文件,還創建了一個結構化的項目,包括多個組件(如主介面的 App.tsx、骰子數據的 constants.ts 以及擲骰邏輯和控制的獨立模組)[44]。這種模塊化的輸出顯示 AI 並不是拼湊出一個脆弱的腳本,而是真正以乾淨、可維護的方式架構應用,就像人類開發者一樣。然後,記者決定通過在骰子擲出時添加音效來增強應用。他只需告訴 AI 他的想法,並通過一次後續提示,助手就寫出了額外的代碼,使每次擲骰時播放聲音——無縫地整合到現有代碼庫中[44]。這一切都在單一的網頁瀏覽器標籤中發生,且不需人工手動編寫任何代碼。這些例子強調了使用 vibe coding 的開發過程可以多麼快速迭代:你描述一個想法,幾乎立即獲得一個可用的原型,然後與 AI 交談中進行完善。

值得注意的是,雖然這些演示令人印象深刻,但人類開發者在審查和指導結果方面仍然扮演著重要角色。AI Studio 生成的應用程式可能偶爾需要針對邊緣情況或性能進行調整,特別是對於更複雜的項目。「Vibe 編碼」哲學鼓勵專業使用者採用「人機協作」的方法——讓 AI 在初期進行繁重的工作,然後由你來驗證功能、調整細節,並確保最終產品符合質量和安全標準[45][16]。實際上,早期用戶報告說,介面中 AI 建議與直接代碼訪問的結合使得審查過程相當直觀[46]。結論:AI Studio 可以在幾分鐘內交付一個可運行的應用程式,並且在用戶的指導和打磨下,該原型可以迅速發展成為生產級應用程式。

你可以建構的應用程式範例(帶提示)

為了激發一些靈感,以下是五個不太複雜但實用的應用程式範例,這些應用程式可以使用 Google AI Studio 的 vibe coding 來構建。對於每個應用程式,我們都提供了一個例子提示,您可以將其輸入 AI 以創建該應用程式:

  1. 具有智能建議的個人待辦事項清單一個簡單的任務追蹤網頁應用,由 AI 增強功能。 例如,該應用可以分析您的任務並建議提醒或子任務
    1. 提示: “建立一個基於網頁的待辦事項列表應用。它應允許我添加、編輯和勾選任務。包括一個可以建議截止日期或將任務分解為更小步驟的 AI 助理。界面應該乾淨且適合手機使用。”
      • 在這裡,Gemini 會生成任務管理 UI 並利用其推理能力提供提示 – 例如,如果您添加“計劃假期”,AI 可能會建議像“訂機票”這樣的子任務。
    2. 輸出: https://ai.studio/apps/drive/1_ow-8TYDMWxms56bzQ-QKHsNWCA_F0fr
  2. 規劃和地圖指南一個適合手機使用的旅行行程規劃器,整合地圖數據。 這可以利用 Google Maps 和實時信息。
    1. 旅行
    2. 提示: “創建一個城市旅行規劃應用。用戶輸入一個城市,應用生成一個為期三天的行程,包括每天的景點、餐廳和酒店。包括一個互動地圖,標記每個推薦的地方,並允許用戶點擊地方以獲取詳情(使用實時數據或搜索)。設計應適應手機使用。”
      • 在這種情況下,AI 可能會使用 Google 搜索工具和 Maps API 基礎(通過提供的憑證)來獲取熱門地點,然後將它們顯示在地圖組件上。Vibe 編碼界面對外部 API 鍵的支持(通過秘密變量)將允許安全使用像 Google Places API 這樣的東西。結果是,一個感覺像是個性化導遊的應用,只需描述想法即可創建。
    3. 輸出: https://ai.studio/apps/drive/1QO0OnH8vjUZuX3e1IqtQ4-1pqSZYAJLO
  3. 互動數據儀表板將數據轉化為圖表和洞察的分析儀表板。 例如,小型企業可能希望可視化銷售數據。
    1. 提示:“建立一個銷售分析的數據儀表板網頁應用。應有一個 CSV 銷售數據文件上傳功能。數據上傳後,應用顯示摘要(總銷售額、平均訂單價值)並生成兩個圖表:一個是按月銷售的折線圖,一個是按產品類別的銷售餅圖。在圖表下方包括一個 AI 摘要,用簡單語言突出任何趨勢或異常。”
      • 使用此提示,AI Studio 可能會生成一個多面板儀表板。它可能會結合使用像 Chart.js 或 D3 這樣的圖表庫來渲染圖表,並使用 Gemini 的推理來輸出文本摘要(例如,“由於夏季促銷,七月的銷售激增”)。這展示了 Vibe 編碼如何通過將 UI 元素的編碼(文件輸入、圖表畫布)與數據的 AI 分析相結合來處理互動數據可視化。這樣的儀表板可以比傳統 BI 工具用更少的精力構建和調整 – 並且用戶無需自己編寫圖表繪製代碼。
    2. 輸出: https://ai.studio/apps/drive/1qW2V3lfyEF0QDDXQxuYCF0O90QdL3_uB
  4. AI 驅動的學習閃卡一個為學生設計的迷你學習遊戲。 這個應用可以測驗用戶並根據他們的表現進行調整。
    1. 提示: “創建一個語言學習的閃卡測驗網頁應用。應用應該測驗用戶的西班牙語詞彙。每張閃卡顯示一個英文單詞,並要求用戶輸入西班牙語翻譯。應用應該告訴他們是否正確,並計分。添加一個 AI 導師模式:如果用戶錯誤,讓 AI 給予提示或簡短解釋。使用簡單、色彩豐富的設計並確保其在手機上正常工作。”
      • 在這種情況下,生成的應用可能包括一組預定義的問答對(您可以進行微調或擴展),一個答案輸入框,以及檢查正確性的邏輯。有趣的部分是AI 導師:可以在後台提示 Gemini 在用戶犯錯時生成有幫助的提示或記憶法,使學習體驗更加吸引人。這個例子展示了一個迷你遊戲/教育工具 – 一個 Vibe 編碼應用可以通過整合動態 AI 反饋而在傳統閃卡應用中脫穎而出的類別。
    2. 輸出: https://ai.studio/apps/drive/1rpxIsuwLz7cqypH9oYjGCwSIh5PBKXxL
  5. AI 主廚的食譜查找器一個根據可用食材建議食譜的烹飪助手。
    1. 提示:“建立一個食譜查找應用。用戶可以輸入或選擇他們擁有的食材(如‘雞肉,番茄,羅勒’),應用將找到使用這些食材的食譜。它應該顯示食譜建議列表,包括標題、圖片和簡短描述。包括一個 AI 聊天廚師,用戶可以詢問烹飪技巧或替代品(例如,‘我沒有黃油,能用什麼代替?’)。應用應該具有吸引人的美食設計。”
      • 這個應用想法結合了多個元素:食材選擇界面,可能的食譜 API 調用(用於獲取真實食譜 – 您可以使用像 Spoonacular 這樣的服務的 API 鍵,通過秘密變量管理),以及使用 Gemini 模型的集成聊天機器人角色(“AI 主廚”)回答烹飪問題。AI Studio 的多模態功能意味著您甚至可以啟用 Imagen 來生成每道建議菜餚的圖片,如果沒有可用的圖片 URL,真正將創意與實用性結合在一起。從 Vibe 編碼的角度來看,這個例子展示了如何通過一個提示和後續調整來指導 AI 將數據檢索、圖像生成和對話式問答結合在一個應用中。
    2. 輸出: https://ai.studio/apps/drive/19VWB2qpa7bEtFB8hAjsQfSpJ6SPmf5KC

上述每個範例都可以在 AI Studio 中通過幾個提示和選擇來構建,然後不斷改進。它們展示了氛圍編碼可以處理的應用範圍——從簡單的網頁工具到互動式教育遊戲和 AI 增強的創意工具。共同點是,作為創作者的你,專注於產品理念和用戶體驗,而 AI 則負責將這一願景轉化為可運行的代碼。

最後的想法

Google AI Studio 的 vibe coding 介面代表了軟體開發方式的一個重要演進。透過將自然語言描述轉換為運行中的應用程式,它賦予更多人創建技術解決方案的能力,而不需要深入的編碼專業知識。對於產品領導者或開發者而言,這開啟了一個新的、更快速的原型製作循環——您可以立即通過實際構建一個最低可行產品來測試想法。從網頁應用程式、行動友好工具到資料儀表板和迷你遊戲,隨著 Google 不斷整合更多的 AI 工具包(以及像 Gemini 3 這樣的大型模型在平台上出現),可能的範圍不斷擴大。雖然傳統開發方式不會消失,但 vibe coding 通過 AI 為先的方法來增強它:您設定願景並「引導」AI,作為回報,您會得到一個可以進一步完善和擴展的功能應用程式。這種人類創意與 AI 能力之間的協同作用是 Google AI Studio 的核心。這個平台仍在發展中(未來幾個月內承諾會有更多功能),但已經很清楚 vibe coding 有潛力加速創新並降低將新應用程式想法付諸實現的門檻。在一個速度和可及性至關重要的世界中,Google 對 vibe coding 的賭注——讓人們通過聊天來構建——很可能成為軟體開發的遊戲規則改變者。

**來源:**Google Cloud 與 AI Studio 文件 [51][52];News9live (2025年10月)[53][10];VentureBeat (2025年10月)[54][43];SiliconANGLE (2025年10月)[49][55];TestingCatalog (2025年10月)[4][56]Learn Prompting 部落格 (2025年9月)[5][6]

[1] [11] [13] [15] [16] [17] [18] [45] [51] [52] Vibe Coding 解釋:工具與指南 | Google Cloud

https://cloud.google.com/discover/what-is-vibe-coding

[2] [3] [7] [10] [12] [20] [26] [31] [34] [47] [53] Google 在 AI Studio 添加了 vibe coding:透過與 AI 聊天來建構應用程式|人工智慧新聞 - News9live

https://www.news9live.com/technology/artificial-intelligence/google-vibe-coding-explained-build-apps-fast-2898950

[4] [21] [32] [39] [48] [56] Google 更新 AI Studio,帶來新的 vibe coding 功能

https://www.testingcatalog.com/google-revamps-ai-studio-with-new-features-for-vibe-coding/

[5] [6] [8] [22] 在 Google AI Studio 中為您的下一個 AI 驅動的應用程式設計 Vibe Code

https://learnprompting.org/blog/ai-studio-build-mode?srsltid=AfmBOor93SD7PWwyeR5_MHEhpwSCEEtZA6HWD1KEmC4nWxIJEFMxkMSr

[9] [30] [33] [49] [50] [55] Google 採用最新版本的 AI Studio 應用程式開發平台進行「Vibe Coding」 - SiliconANGLE

https://siliconangle.com/2025/10/21/google-embraces-vibe-coding-latest-version-ai-studio-app-development-platform/

[14] 使用 Google AI Studio 進行免費線上 Vibe 編碼:任何人都可以建立應用程式!| 作者:Abish Pius | 人工智慧世界中的寫作 | 2025 年 9 月 | Medium

https://medium.com/chat-gpt-now-writes-all-my-articles/free-online-vibe-coding-with-google-ai-studio-anyone-can-build-apps-a303e7a1c664

[19] [23] [24] [25] [27] [28] [29] [35] [36] [37] [38] [40] [41] [42] [43] [44] [46] [54] Google 推出的新 Vibe 編碼 AI Studio 體驗,讓任何人都能在幾分鐘內建立、部署應用程式 | VentureBeat

https://venturebeat.com/ai/googles-new-vibe-coding-ai-studio-experience-lets-anyone-build-deploy-apps

Boxu 在埃默里大學獲得了定量經濟學專業的學士學位。在加入 Macaron 之前,Boxu 的職業生涯大部分時間都在美國的私募股權和風險投資領域度過。他現在是 Macaron AI 的首席參謀和市場營銷副總裁,負責管理財務、物流和運營,並監督市場營銷。

申請成為 Macaron 的第一批朋友