Nano Banana Lab：從 Prompt 到 App，用 Google AI Studio 快速實現你的想法
AI first 的工作流 「想法→應用」: 如何持續測試、修改、發布的實戰案例。這篇也是針對之前 DevFest Taipei Workshop 我一直很想帶著參與者一起做完的部分，一次搞定它。
1. AI First 開發之於傳統軟體開發的影響
傳統開發 vs AI Fist 驅動開發
傳統開發流程：
構思想法 → 2. 學習框架 → 3. 環境設定 → 4. 撰寫程式碼 → 5. 除錯 → 6. 部署
時間成本：往往需要好幾個工作日，甚至是需要與多個職能負責人溝通
技術門檻：需要深厚的程式設計經驗
迭代速度：每次修改都需要完整的開發週期 (ex. 排入 Backlog, PRD review etc.)
AI First 開發：
描述想法（Prompt）→ 2. AI 生成完整應用 → 3. 測試 → 4. 對話式修改 → 5. 重新部署
時間成本：數小時 (這次我大概只花了 1-1.5 小時)
技術門檻：會寫 Prompt 就能開發
迭代速度：對話即修改，即時看到結果
本文展示了什麼
這篇文章記錄了 **Nano Banana Lab** 的完整開發過程，一個用 Google AI Studio 從零到部署的 IP 角色生成應用。更重要的是，展示了：
✅ **如何用 Prompt 快速將想法轉化為可運行的應用**
✅ **如何透過對話持續測試、修改、發布**
✅ **如何讓開發者與 Builder 快速實踐創意**
*圖 1：Nano Banana Lab 的圖像編輯介面 — 從想法到這個應用，只花了1小時*
Nano Banana Lab 是什麼
一個為 IP 角色「Jimmy」設計的多模態內容生成工具，提供：
**DNA 模式**：文生圖，基於「Visual DNA」生成一致性角色
**編輯模式**：圖生圖，AI 輔助圖像編輯
**Veo 模式**：圖生影片，將靜態圖像轉換為短影片
關鍵：
No-Build 架構（無需 npm、webpack）
BYOK 安全機制（Bring Your Own Key）
完整的存取控制（Passcode + Idle Timeout）
重要的是：這個應用完全由 AI Studio 對話生成，並在持續對話中完成 4 次功能修改。
2. 成果展示：先看看我們做出了什麼
在深入開發過程之前，先看看最終成果，讓您了解這個應用的實際效果。
應用功能概覽
Nano Banana Lab 整合了三個核心功能，提供完整的 IP 角色內容生成工作流：
1. **DNA 模式**：快速生成一致性角色圖像
2. **編輯模式**：精細調整圖像細節
3. **Veo 模式**：將靜態圖像轉換為動態影片
Demo 影片
完整工作流程演示
**Veo 影片生成演示**
此影片展示：
- 上傳 Jimmy 角色圖像
- 輸入動畫提示詞（「跳個 Rat Dance」）
- 等待 Veo 生成 5 秒短影片
- 播放與下載生成的影片
實際生成範例
**Jimmy 角色的 Visual DNA 生成結果**
基於相同的 Visual DNA Prompt，模型能夠生成具有一致視覺特徵的角色圖像：
結果：角色主體特徵保持不變，成功轉換為影片。
**影片生成示例**
動畫提示詞：「跳個 Rat Dance」
結果：Jimmy 角色以 Pixar 風格執行跳舞動作，保持視覺一致性，動作流暢自然。
---
3. AI First (with AI Studio) 驅動的開發工作流
核心循環：Prompt → Code → Test → Deploy → Iterate
這是 Nano Banana Lab 的完整開發流程，展示如何透過 AI Studio 實現快速迭代：
┌─────────────────────────────────────────────────────┐
│ 開發循環 │
│ │
│ 1. Prompt（描述想法） │
│ ↓ │
│ 2. AI 生成程式碼 │
│ ↓ │
│ 3. 測試（發現問題） │
│ ↓ │
│ 4. 對話式修改（提出需求） │
│ ↓ │
│ 5. AI 修正程式碼 │
│ ↓ │
│ 6. 部署（Cloud Run / 本地） │
│ ↓ │
│ 回到步驟 3（持續迭代） │
└─────────────────────────────────────────────────────┘第 1 輪：初始 Prompt → 完整應用
**使用者的初始想法**（用自然語言描述）：
我是直接先用 Gemini Web App (https://gemini.google.com) 先討論:
> IP 視覺DNA的編碼術： 使用Nano Banana 鑄造一致性角色的應用代理
> 翻譯成英文，我打算放到 google ai studio 的 prompt 產生看看, 然後預計先有一個範例 (故事性), 產出人物圖片, 在接續產生影片.
> 提供 prompt 讓我之後方便打造 app, 不是幫我直接產圖。
**Gemini 的回應與理解**：
好的，非常抱歉！我理解您的意思了。您需要的是一個結構化的、可以重複使用的 Prompt 範本，以便在 Google AI Studio 中鑄造出名為 Jimmy 的一致性 IP 角色，並能將這個 **視覺 DNA** 應用於圖片和影片生成。
*圖 1-2：Gemini 生成的 Jimmy IP 視覺 DNA 鑄造 Prompt 範本（第一部分）*
**Jimmy 的 Visual DNA 核心設定**：
- **CHARACTER NAME**: Jimmy
- **AESTHETIC STYLE**: High-detail 2D/3D hybrid rendering (Pixar meets Sci-Fi)
- **VISUAL DNA KEY TRAITS**:
1. **Hair**: Bright, spiky purple hair (Magenta/Violet tone)
2. **Signature Item**: Yellow banana headband with solar panel
3. **Outfit**: High-tech explorer jumpsuit (safety orange and neon green)
4. **Companion**: Pee-Wee（黃色香蕉機器人夥伴）
5. **Expression/Vibe**: Energetic, curious, determined
*圖 1-3：Prompt 範本包含靜態圖片與動態影片的生成範例*
**Prompt 範本的應用場景**：
1. **靜態圖片生成範例（故事性應用）**:
- TASK: Generate a full-body, high-resolution static image of Jimmy
- SCENE CONTEXT: Jimmy 在外星叢林中，站在巨大的機器人雕像頭上
- CAMERA/LIGHTING: Wide shot, 強調霓虹光效
2. **動態影片生成準備（動作一致性）**:
- TASK: Describe a 5-second action sequence
- ACTION/MOTION SEQUENCE: Jimmy 從機器人頭上跳躍至蘑菇帽
- 確保 Jimmy 的視覺一致性在整個動作中保持
*圖 1-4：Gemini 說明如何在開發 App 時使用這個 Visual DNA Prompt 範本*
**如何使用這個範本**：
- 在開發 App 時，可以將「**核心 IP 視覺 DNA 設定**」作為固定的參數模組
- 當使用者選擇生成圖片或影片時，只需修改「應用 1」或「應用 2」中的 **SCENE/TASK 內容**
- 這樣無論場景如何變化，AI 都會被追迫遵守 Jimmy 的核心視覺特徵（頭髮、香蕉頭帶、制服等），從而實現視覺一致性
**從 Visual DNA 到完整應用**：
有了這個 Prompt 範本後，下一步就是將它整合到應用中。我將這個範本帶到 **Google AI Studio**，並用它來生成完整的 React 應用程式。
- 打開 AI Studio 選取這個範本:
- 貼上剛剛透過 Gemini Web App 產生的 Prompt
**AI Studio 的回應**：
模型理解需求之後，產生一下檔案:
- `index.html`：包含 Import Maps 的入口檔案
- `App.tsx`：主應用邏輯（狀態管理、路由）
- `components/CharacterGenerator.tsx`：DNA 生成組件
- `components/ImageEditor.tsx`：圖像編輯組件
- `components/VideoGenerator.tsx`：Veo 影片生成組件
- `services/geminiService.ts`：所有 AI API 呼叫邏輯
**關鍵亮點**：
- ✅ Visual DNA 成為應用的核心參數
- ✅ 零安裝，直接可運行（No-Build）
- ✅ 完整的組件架構
- ✅ 預填的 Jimmy Visual DNA Prompt
*圖 1-5：AI Studio 的 Code Assistant 自動分析應用架構*
**一鍵部署到 Cloud Run**：
AI Studio 最強大的功能之一，就是生成完應用後，可以直接點擊「**Deploy app**」按鈕，一鍵部署到 Google Cloud Run：
*圖 1-6：AI Studio 介面中的「Deploy app」按鈕，支援一鍵部署至 Cloud Run*
點擊後，AI Studio 會自動：
📦 打包應用程式碼
🚀 部署至 Google Cloud Run
🔗 生成可公開訪問的 URL
*圖 1-7：部署成功通知，顯示應用已上線並提供 Cloud Run URL*
**時間成本**：約 30 分鐘（Gemini 對話 + AI Studio 生成 + 一鍵部署 + 初步測試）
這就是 AI First 開發的核心優勢：**從想法到可運行的應用程式，全程透過對話完成，無需手動配置伺服器或容器化流程**。
第 2 輪：測試發現問題 → 對話式修正
**測試階段發現的問題**：
使用者部署應用後測試，發現：
“為何其他使用者沒有輸入 API Key 也可以產圖、修圖、產影片？！”
**對話式修改**：
使用者直接在 AI Studio 中描述問題：
User: “passcode works! but...為何其他使用者沒有輸入 API key 也可以產圖, 修圖, 產影片？”
Gemini: “偵測到安全性問題！App.tsx 中自動讀取 process.env.API_KEY。
解決方案：實作 BYOK (Bring Your Own Key) 機制...”**AI 自動修正**：
Gemini 分析問題後，提供完整的修正方案：
1. **移除環境變數自動讀取**
// App.tsx
- const apiKey = process.env.API_KEY || “”;
+ const apiKey = localStorage.getItem(”gemini_api_key”) || “”;2. **新增 ApiKeyInput Modal**
if (!apiKey) {
return <ApiKeyInput onSubmit={handleApiKeySubmit} />;
}
3. **更新 geminiService.ts**
// 強制使用者提供的 Key
const genAI = new GoogleGenerativeAI(userProvidedKey);第 3 輪：功能需求變更 → 即時迭代
**新需求**：
使用者測試後提出新的安全需求：
“頁面重整時，或是頁面 idle 超過 5 mins，也要重新輸入 passcode”
**對話式開發**：
User: “頁面重整時, 或是頁面 idle 超過 5 mins, 也要重新輸入 passcode”
Gemini: “了解！需要兩個修改：
1. 移除 sessionStorage 持久化
2. 新增閒置計時器監聽 mousemove/keydown...”**AI 生成的解決方案**：
1. **移除 Session Persistence**
- const [isUnlocked, setIsUnlocked] = useState(
- sessionStorage.getItem(”unlocked”) === “true”
- );
+ const [isUnlocked, setIsUnlocked] = useState(false);2. **新增 Idle Timeout 邏輯**
useEffect(() => {
if (isUnlocked) {
const timer = setTimeout(() => {
setIsUnlocked(false);
alert(”已閒置 5 分鐘，應用已鎖定”);
}, 5 * 60 * 1000);
const resetTimer = () => { /* 重置邏輯 */ };
window.addEventListener(”mousemove”, resetTimer);
window.addEventListener(”keydown”, resetTimer);
return () => { /* 清理邏輯 */ };
}
}, [isUnlocked]);**成果**：
- ✅ 頁面刷新後需重新驗證
- ✅ 5 分鐘無操作自動鎖定
- ✅ 多層安全防護
第 4 輪：模型調整 → 一句話搞定
原因: veo 3.1 的 Token per min 蠻少，猶豫是否要改成 veo 3.0 or 2.0
**需求**：
“veo-3.1-fast-generate-preview 改成 veo-3.0-fast-generate-001，但是 veo-3.1 可以先註解掉”
**AI 的回應**：
Gemini: “明白！切換到穩定版本。修改 geminiService.ts：...”**程式碼變更**：
// services/geminiService.ts
- const VIDEO_MODEL = “veo-3.1-fast-generate-preview”;
+ const VIDEO_MODEL = “veo-3.0-fast-generate-001”;
+ // 備用版本：veo-3.1-fast-generate-preview**成果**：
- ✅ 切換至穩定版本
- ✅ 保留備用註解
- ✅ API 相容性提升
**時間成本**：約 5 分鐘（一句話 + AI 修改）
Master Prompt：將經驗固化為可重複流程
經過 4 輪迭代後，我們將所有需求、修正、最佳實踐整合成一個 **Master Prompt**。
任何人都可以用這個 Prompt 在 AI Studio 中**一次性生成完整的應用**，包含：
- ✅ 所有功能（DNA、編輯、Veo）
- ✅ 所有安全機制（BYOK、Passcode、Idle Timeout）
- ✅ 最佳實踐（Base64 處理、錯誤處理）
- ✅ 完整的檔案結構
*圖 5：使用 Master Prompt 在 AI Studio 中一鍵生成完整應用*
這就是 AI Studio 價值：將迭代過程中的知識累積，轉化為可重複、可分享的開發資產。
總結與展望
收穫：從「寫程式」到「對話式開發」
傳統開發：
想法 → 學習技術 → 寫程式 → 除錯 → 部署
（需要深厚的技術背景，時間成本高）AI First：
想法 → 用自然語言描述 → AI 生成 → 測試 → 對話修改 → 部署
（會寫 Prompt 就能開發，1.5 小時完成）
（當然你還是要懂軟體工程與軟體架構！)啟示
想法驗證的速度是關鍵
傳統方式可能花數週實作，最後發現方向不對
AI Studio 讓你在數小時內驗證想法可行性
快速失敗，快速迭代
技術不再是瓶頸
不需要精通 React、Tailwind、API 設計
專注於產品邏輯與使用者需求
AI 處理技術實作細節
Master Prompt 是可複製的資產
迭代過程中累積的知識可以固化為 Prompt
任何人都能用相同 Prompt 重現應用
Google AI Studio 在這次開發過程中的的價值
多模態整合：Imagen + Veo + Gemini 在同一平台
對話式迭代：持續對話中精準修改程式碼
即時反饋：生成 → 測試 → 修改循環只需數分鐘
資源
Google AI Studio - 官方開發平台 https://aistudio.google.com/