你可能已經知道Google AI Studio是一個可以用來體驗 DeepMind 模型並調整所有參數的沙盒。但你知道嗎？你也可以免費使用 Vibe 程式碼編寫 Web 應用程式，只需點擊幾下即可發布。

它的建置模組徹底改變了「靈感編碼」的方式，無需編寫任何程式碼即可產生功能性應用程式。它利用 Gemini 模型的強大功能，讓您能夠快速建置和迭代想法，在幾分鐘內將簡單的概念轉化為完全部署的原型。

根據我過去一年對該平台的實驗，本指南涵蓋了 AI Studio 的核心功能、它與其他工具的比較，以及如何有效地引導它來建立您的應用程式。

本文內容包括：

• 1. 為什麼要使用AI Studio？
• 1. 應用程式商店和混音
• 2. 開始使用Vibe Coding
• 3. 使用資料庫建立應用程式
• 4. 我的一些建議，幫助你更好地運用Vibe Code
• 5. 發佈您的應用程式
• 6. AI Studio 與 Antigravity：何時使用哪一個？
• 7. 我最喜歡的作品

0. 為什麼要使用 AI Studio？ （原生 Gemini 與隱私權保護）

在深入探討「如何操作」之前，讓我們先解決最常見的問題：為什麼選擇 AI Studio 而不是市場上其他流行的 AI 應用程式建構器？

第一個原因是 AI Studio原生支援 Gemini 。它可以建立使用 Gemini 模型的應用程式，而且（只要你使用 AI Studio）無需任何設置，因此你和與你共享應用程式的人都可以使用免費版並免費享受基於 Gemini 的應用程式。

注意：某些高級型號需要付費 API 金鑰，但總有免費方案可供選擇。

但主要區別在於隱私。

在許多同類平台的免費版本中，除非您付費，否則您建立的所有應用程式預設都是公開的。任何人都可以看到您正在進行的工作。而在 AI Studio 中，您的應用程式將保持嚴格的隱私。當您進行個人創意原型設計、處理敏感的客戶專案，或只是想自由地進行實驗而無需擔心公開可見性時，這無疑是一個巨大的優勢。

共享功能與 Google 雲端硬碟檔案共享系統相同，這使得共享應用程式變得簡單，並允許人們在無需建立新帳戶的情況下試用應用程式。

專業提示：和所有雲端硬碟檔案一樣，你可以設定應用程式對擁有連結的人可見。我在 LinkedIn 上發佈內容時就是這麼做的（請參閱本文最後一部分的範例）。

總而言之，即使你不使用 AI Studio，我的建議仍然適用，因為大多數 Vibe 編碼代理的工作方式都類似。

1. 應用程式商店和混音

如果您是 Vibe 編碼的新手，了解程式碼產生方式的最佳方法是直接在 AI Studio 中探索App Gallery 。

最佳實踐：

• 探索：看看AI Studio團隊已經建立的令人印象深刻的範例。我個人最喜歡的兩個是空間理解和漫畫書創作器（使用Nano-banana Pro需要付費API金鑰，但您可以嘗試重新組合，使其僅使用Nano-banana的免費版本）。

• 查看程式碼：對於每個應用程式，您可以點擊左上角的“程式碼”來存取該應用程式的所有程式碼，並查看其實現方式（或者更可能的是將其複製並貼上到 AI 編碼代理中）。

• 重混：如果您喜歡某個應用，並想建立自己的版本，請點擊「重混」按鈕，建立一個屬於您自己的副本。這是一種絕佳的方式，您可以從現有的、可執行的程式碼庫入手，將其變成您自己的作品。

2. 開始使用 Vibe Coding

準備好建立自己的應用程式了嗎？原理非常簡單：打開建置頁面，在提示字元中輸入您希望應用程式執行的操作，按下回車鍵，然後觀看編碼代理（類似於Antigravity 的代理程式）產生使用者介面和邏輯。

注意：生成過程可能需要相當長的時間（平均約 5 分鐘），所以您可以去喝杯咖啡或閱讀一篇部落格文章，等編碼代理完成工作後再回來。

當您獲得可正常運作的應用程式後，您可以透過繼續在左側的程式碼助理聊天框中輸入提示來開始新增功能。

新增功能：過去幾週新增的一項很棒的功能是程式碼助理現在可以在伺服器端執行，這意味著您可以關閉標籤頁或更換設備，它仍會繼續為您工作。

根據具體情況，您還可以使用這兩個按鈕在模型上繪製圖形，從而為模型提供視覺提示，這對於提供使用者介面回饋非常方便。

另一種方法是直接指定所需的變更。如果您想在手機上即時加入新功能，這非常方便，但我不建議將其用於非常精確的更新。

3. 建立具有資料庫的應用程式

從本週開始，您還可以要求編碼代理程式建立能夠在會話或使用者之間保存資料的應用程式。您只需明確要求它使用資料庫即可：

（是的，我一直很想開發自己的購物清單應用程式。）

只需在提示時點擊“啟用”，奇蹟就會發生。

它會在背景設定 Firebase 整合和 Firestore 來儲存您的資料。它還會為您的應用程式加入 Google 帳戶身份驗證，以便應用程式能夠辨識哪些用戶正在嘗試存取哪些資料。

您無需了解資料庫的結構，程式碼代理會根據您的應用需求自動管理一切。想讓每個使用者都有自己的購物清單？沒問題，輕鬆搞定！現在想讓他們分享清單？也輕鬆搞定！為商品加上標籤，輕而易舉。

你的想像力就是極限！

4. 我改進 Vibe Code 的一些建議

如今，「感覺編碼」已成為我的一種習慣。在可能使用複雜的整合開發環境（IDE）之前，這絕對是建立使用者體驗原型最好的方法。但如果你不小心，很容易就會浪費大量時間來優化代理程式的運作效率。

以下是我充分利用 AI Studio 的一些技巧（排名不分先後）。

在建構應用之前先進行設計

如果你對你的應用程式的外觀有想法（我個人通常沒有，人生苦短，及時行樂），一個好辦法是使用像Stitch （它使用 Nano-Banana）這樣的工具來迭代設計，並將圖像提供給編碼代理，以便它知道期望是什麼。

保存進度以便回滾（並了解何時應該回滾）。

人工智慧也會犯錯。它可能會誤解你的指令，或是編寫出破壞之前執行正常的應用程式的程式碼。遇到這種情況，你可以讓它“修復錯誤”，大多數情況下它都能成功，但有時會失敗。

在進行氛圍編碼時，需要學習的一項非常重要的技能是：何時嘗試使用 AI 來解決問題，何時從頭開始，以及何時自己去解決問題。

我的建議是，如果智能體在兩輪嘗試後仍然無法解決問題，那就別再堅持了，回退到之前的版本吧，否則你可能最終會白白浪費一個小時和人工智能爭論。當你覺得花在解釋需求的時間比實際操作的時間還多（例如「這次改成另一次」），那就乾脆自己動手吧。

值得慶幸的是，AI Studio 讓您可以輕鬆回滾到以前的版本：

檢查點

檢查點是內建的版本歷史記錄功能，可以立即恢復到上一個正常工作狀態。這是回滾到先前工作版本的最便捷方式。

警告：請注意：您可以還原程式碼，但無法還原資料庫更改，因此不要載入資料庫更新之前的檢查點（我的做法是載入檢查點，複製程式碼，載入更新/損壞的程式碼，然後讓助手根據先前的狀態進行修復）。

Github

我推薦使用GitHub來保存里程碑版本。當應用程式達到特定里程碑時，例如新增完新功能時，你應該使用它來保存應用程式的狀態。只需點擊幾下即可啟用它：

接下來，你只需要描述你的新功能並提交到 GitHub 即可。

不過，目前的一個限制是同步是單向的，所以它是將你的狀態保存在一個可以輕鬆重用的地方的好方法，但你（目前）還不能在 GitHub 中更新你的程式碼並將其同步到 AI Studio。

使用多模式提示

不要僅僅依賴文字。正如我之前所說，AI Studio 還提供了其他選擇：

• 語音：對於快速迭代來說非常實用，尤其是在透過手機調整應用程式時。

• 「套用標註」工具：這是我最喜歡的 UI 設計功能。截取應用程式螢幕截圖，直接在截圖上繪製（例如「將此按鈕移至此處」、「移除此選單」），然後發送即可。

專業提示：務必將註釋的圖像與清晰的文字說明結合起來，以便為模型提供最大的上下文資訊。

文件拆分！ （避免單體文件）

隨著應用規模的擴大，模型可能會開始“出錯”，忘記早期的功能，或導致邏輯混亂。這幾乎總是結構性問題。

預設情況下，人工智慧傾向於將所有內容塞進一個巨大的app.tsx檔案中。立即否決此操作。

• 黃金法則：從一開始就告訴模型將功能拆分成不同的檔案和元件。

• 為什麼？因為它能大幅減少錯誤，加快生成速度。它還能讓你立即發現 AI 是否出錯（例如，如果你要求更改 UI 顏色，而它卻開始重寫auth-service.js ，你就知道它搞錯了，可以立即停止）。這能節省你大量的程式碼審查時間，至少能讓你一眼看出程式碼庫中正確的部分是否已更新。

強制人工智慧編寫文件

為了幫助人工智慧記住應用程式的功能，請讓它盡可能地維護文件（從微觀到宏觀）：

• 文件字串：始終強制應用程式記錄其所有函數、函數的功能、輸入和輸出。

• 文件文件：由於您是為每個功能建立一個文件，請告訴 AI 在每個文件的頂部維護一些文件，詳細說明該功能是關於什麼的，應該涵蓋哪些用例等。

• Design.md：最後，要求它在根目錄中維護整個應用程式的設計文件。

• 為什麼？透過讓AI多次重複執行所有操作，既能幫助它（也可能包括你自己）了解每個步驟的執行位置以及預期行為。這有點像是糾錯碼的工作原理，多次寫入相同資訊可以降低誤刪的機率。

按照系統說明進行超級充電

一段時間後，你會發現你總是向編碼代理發送相同的指令，重複這些指令會讓你感到厭煩。這就是為什麼 AI Studio 允許你自訂底層「系統指令」的原因。千萬不要留空！你可以定義你偏好的技術堆疊、框架、程式設計風格，當然還有我之前提到的所有內容！

把它想像成你新來的初級開發人員的入職培訓資料包，他們需要知道你希望他們如何工作，如何編寫程式碼、編寫文件、溝通等等……你可能不會第一次就做到完美，但重要的是要反思並不斷改進你的資料包，這樣下一批新人就能更好地融入團隊，從而更快地提高工作效率。

以下是我在更專業的指導之外一直使用的一些基本方法（例如，相信我提供的型號名稱，不要更改它們）：

## Coding/documenting guidelines

* Create a file per feature or related features, split as much as possible in different files;
* add docstrings to all functions to explain what they do;
* start each file with a long comment explaining in detail what the feature is about and the different use cases;
* maintain a `Design.md` document at the root of the app that documents all the features of the app;
* log as info all function calls (with their parameters) and log all genai calls with all their parameters (model used, prompt, config) and their outputs, just strip inline data;
* group all configurable items (like model names) in a centralized file;
* always create a way to test the scripts without altering the data;

你會看到我還加入了一些關於日誌記錄（因為它總是有助於除錯）和試執行的說明，因為無論是否使用 Vibe 編碼，這兩種做法都是很好的實踐。

試試看，告訴我這是否改善了你的氛圍編碼體驗！

5. 發布您的應用程式

您現在對自己的應用程式感到滿意，並希望與全世界（或部分使用者）分享，AI Studio 為您提供了兩種發布應用程式的方式：

在 AI Studio 中分享

最簡單的方法就是使用 AI Studio 的共享功能。

您可以選擇與特定人員共享該應用程式，或者讓任何擁有其連結的人都可以存取它（例如，我在 LinkedIn 上就是這樣做的）。

其中一個主要好處是，他們還可以存取程式碼，並根據需要進行修改。此外，您還可以向不太懂技術的朋友發送一個連結，該連結會全屏打開應用程式並隱藏程式碼代理。

另一個好處是，如果你的應用程式使用 Gemini，你的朋友在使用該應用程式時將使用他們的免費方案（如果使用付費模式，則使用他們的 API 金鑰），這意味著你無需支付任何費用。

將應用程式發佈到 Cloud Run

如果您想將應用程式正式發布給真實用戶，就應該這樣做。只需點擊幾下，即可建立一個雲端執行容器，將應用程式發佈到線上，並為您提供一個可供任何人存取的 URL。

之後您就可以購買域名並為其分配一個合適的網址，在不同地區部署，自動擴展等等……但同時，由於這是您自己的應用程式，您也需要為使用付費。

6. AI Studio 與 Antigravity：何時使用哪一個？

由於 AI Studio 使用的底層編碼代理與 Google 的Antigravity類似，您可能想知道何時應該使用哪個工具。以下是我的經驗法則：

在以下情況下使用 AI Studio：

• 你正在開發前端使用者介面原型或輕量級全端應用程式。

• 你想真正地“感受程式碼的氛圍”，使用多模態輸入（例如直接在應用程式的 UI 上繪製或使用語音）。

• 你想透過一個簡單的連結立即與利害關係人或朋友分享一個可執行的原型，而無需管理託管。

• 您希望無需任何設定即可直接存取 Gemini 模型，從而快速建立 AI 功能。

在以下情況下使用反重力：

• 您正在建立一個生產等級的、複雜的應用程式，對後端基礎設施有很高的要求。

• 你需要對依賴項、複雜的建置步驟和部署管道進行精細控制。

• 你是將 AI 編碼代理整合到現有的、大規模的程式碼庫中，而不是從零開始建立一個專案。

把 AI Studio 看作是你的快速迭代創意草圖本，把 Antigravity 看作是你的成熟開發者工作室。

7. 我最喜歡的作品

既然你已經掌握了Vibe編碼的基礎知識，那麼最好的學習方法就是實踐。我一開始也沒能完全遵守這些規則，但正是犯錯才能不斷完善你的工作流程！

為了向您展示其可能性，以下是我用這些方法中的大多數從零開始編寫的一些應用程式：

• 【人工智慧簡歷】 ：一份人工智慧產生的簡歷。您不僅可以閱讀它，還可以向 Gemini 提問（它會知道一些簡歷中沒有提到的趣聞軼事），根據您想推薦給我的職位進行個性化定制，甚至可以要求提供語音介紹。

點這裡查看

• 【演講教練】 ：一位演講指導老師。提供一段錄音或YouTube連結，它會告訴你如何做得更好。

點這裡查看

• [FreshList] ：我正在開發的應用程式的副本，旨在簡化雜貨採購流程。

點這裡查看

在我建立的程式碼庫中可以看到其他範例，當時我以為自己每週都會有時間認真編寫一個應用程式。

原文出處：https://dev.to/googleai/vibe-coding-in-google-ai-studio-my-tips-to-prompt-better-and-create-amazing-apps-3kcp