別再只會聊天，開始「製造」。
Google AI Studio 深度實戰指南
這不是一篇普通的工具介紹。這是給那些想從「AI 使用者」進化為「AI 開發者」Blogger 的完整技術分享。搭載 Gemini 3.0 Pro，我們將從零打造網頁應用與客製化語音服務。
⚡ Executive Summary: 本文精華
- 工具定位： Google AI Studio 適合需要精確控制 (Temperature)、結構化輸出與應用開發的進階使用者，而非一般聊天用途。
- 核心技術： 使用 System Instructions (系統指令) 來鎖定 AI 角色，比一般 Prompt 更穩定。
- 實戰專案： 本文提供 React 記帳 App 的完整 Prompt 模板，無需手寫代碼即可生成。
- 商業價值： 免費版資料可能會被用於訓練；處理敏感商業數據建議使用付費版 (Pay-as-you-go) 以確保隱私。
Part 1: 思維升級——為什麼是 AI Studio？
在進入代碼之前，我們必須先矯正一個觀念。很多創作者問我：「Leo，Gemini 網頁版 (gemini.google.com) 已經很強了，為什麼我要去用那個看起來很複雜的 AI Studio？」
答案在於三個關鍵字：控制權 (Control)、結構化 (Structure) 與 再現性 (Reproducibility)。
1. System Instructions vs. Chat Prompt
在一般的聊天機器人中，你的指令（Prompt）和 AI 的記憶（Context）是混在一起的。隨著對話變長，AI 很容易「忘記」你最初的設定。
但在 AI Studio 中，我們使用 System Instructions (系統指令)。這就像是在面試員工時給他的「職位描述 (Job Description)」。它是獨立於對話之外的、最高優先級的指令。無論使用者後續問了多麽離譜的問題，System Instructions 確保了 AI 永遠記得「我是誰」以及「我的任務是什麼」。這對於開發工具來說是至關重要的。
2. 參數的微調魔法
在 AI Studio 右側的面板，你會看到許多讓人生畏的滑桿。但身為技術 Blogger，這些是你的武器：
- Temperature (溫度): 控制隨機性。寫詩時你可能需要 0.9，但寫程式代碼 (Coding) 時，請務必將其降至 0.1 或 0。這能確保每次生成的代碼邏輯都是嚴謹且一致的，不會出現「幻覺」。
- Safety Settings (安全設定): 在開發某些創意內容時，過於嚴格的安全過濾可能會阻礙產出。AI Studio 允許你在一定範圍內調整這些閥值（當然，是在合法合規的前提下）。
- Model Selection: 你可以自由切換 Gemini 3.0 Pro 或 Flash 版本，測試不同模型對你專案的影響。
Part 2: 深度實戰——用 React 模板開發「記帳 App」
現在，我們要來做點真的。我們不寫 HTML 玩具，我們要用現代化網頁開發的主流框架——React，來做一個功能完整的「極簡記帳 App」。
別擔心你沒有 React 經驗，Gemini 會負責寫 Code，你的工作是「架構設計」與「驗收」。
Step 1: 選擇與設定模板 (The Setup)
進入 AI Studio 後，請執行以下精確操作：
- 在對話框左下角找到 Model（圖片 Model: Gemini 3 Pro Preview 的位置），然後在右側的設定面板找到 System Instructions Template。
- 點擊下拉選單，選擇 React。
- 本來的預設就是 React。一旦選擇了 React 模板，AI Studio 會自動在後台載入 React 的依賴環境與檔案結構（如 `App.js`, `package.json`）。如果你不選這個，AI 給你的只會是一堆無法執行的文字片段。
Step 2: 編寫結構化提示詞 (Prompt Engineering)
對於寫程式來說，Prompt 越精確，Bug 就越少。我們不說 “做個記帳 App”，我們要定義「功能」、「數據流」與「樣式」。
請複製以下 Prompt 到對話框：
Task: Create a functional “Expense Tracker” component using React (Functional Components with Hooks).
Technical Requirements:
1. State Management: Use
useState for managing the list of expenses and form inputs.2. Data Persistence: Use
useEffect to persist data to localStorage. The data should load automatically on page refresh.3. Component Structure:
– Combine logic and UI into a single file `App.js` for simplicity.
– Include a `uuid` generator (or simple Date.now()) for unique keys.
4. UI/UX:
– Style using standard CSS (in a separate object or style block) to achieve a minimalist “Black & White” brutalist aesthetic.
– Display “Total Balance” prominently at the top.
– Input fields: “Description” (text), “Amount” (number).
– Action: “Add Transaction” button.
– List: Show recent transactions with a “Delete” (X) button next to each.
Error Handling:
– Prevent adding empty items or zero amounts.
– Ensure the amount is parsed as a number.
Step 3: 下載與部署 (Download & Deploy)
按下 Run 之後，你會看到 AI 開始撰寫代碼。完成後，千萬不要直接複製文字！React 專案需要完整的檔案結構。
- 點擊介面右上角的 Download Project 按鈕。
- 你會得到一個 ZIP 壓縮檔。解壓縮後，這就是一個標準的 React 專案包。
🔧 專家診療室：如果跑不動怎麼辦？(Troubleshooting)
很多新手會卡在「下載後怎麼開」。這裡提供標準流程：
- 安裝環境： 確保你的電腦安裝了 Node.js。（*注意版本也很重要，另外也要確保你的project是web還是App，因為React和React Native是有分別的）
- 安裝依賴： 開啟終端機 (Terminal)，進入該資料夾，輸入
npm install。這會根據 package.json 安裝所有需要的 React 套件。 - 啟動專案： 輸入
npm start。瀏覽器應該會自動跳出你的記帳 App。 - 遇到錯誤？ 把錯誤訊息 (Error Message) 複製貼回 AI Studio，它會告訴你哪裡少裝了套件，或是語法哪裡有錯。
Part 3: 聲音魔法——文字轉語音 (TTS) 實測
AI Studio 的另一個強大功能是 Audio Generation (音訊生成)。對於部落格作者來說，這是製作 Podcast 開頭、文章朗讀版，甚至是為你的 YouTube Shorts 配音的絕佳工具。
在介面模式中選擇 “Single-speaker audio”，你將能體驗 Google 最先進的 Gemini TTS 模型。
三大關鍵設定詳解
如果你只是把文字貼上去然後按執行，那你只發揮了它 10% 的功力。要生成「像真人」的聲音，你需要掌握以下設定：
1. Style Instructions (風格指令)
這是 AI Studio 獨有的功能。你可以用自然語言描述你想要的「感覺」。
- “Read in a warm, soothing tone suitable for a bedtime story.” (適合睡前故事的溫暖語氣)
- “Speak quickly and energetically, like a tech YouTuber doing a product review.” (像科技 YouTuber 般快速且充滿活力)
2. Voice Selection (聲紋選擇)
目前的 Preview 版本提供了多種預設聲音（如 Zephyr, Puck 等）。
- Zephyr: 通常較為中性、沈穩，適合新聞或教學。
- Puck: 可能較為活潑，適合輕鬆的對話內容。
- 建議：為你的品牌固定一種聲音，增加聽眾的辨識度。
進階技巧：用標點符號控制節奏 (Prosody Control)
AI 唸稿最怕的就是「平鋪直敘」。雖然 Gemini 目前不支援 SSML 標籤，但我們可以透過「標點符號」來欺騙模型，控制它的停頓與重音：
- 使用刪節號 (…)： 強制 AI 進行長停頓或思考狀。範例：”Wait… did you just say that?”
- 使用全大寫 (ALL CAPS)： 雖然不一定每次都有效，但通常能提示 AI 加重語氣。範例：”DO NOT forget to save your file.”
- 使用逗號 (,)： 分割長句，避免 AI 一口氣唸完像是在趕火車。
Part 4: 商業條款深度解析
身為創作者，我們最怕的就是做出來的東西有版權問題。關於 Google AI Studio 的使用權利，這裡有幾個必須釐清的重點（基於 2026 年初的政策），但是你使用前也需要查看最新的政策是否有變：
| 比較項目 | AI Studio 免費版 (Free Tier) | 付費版 (Pay-as-you-go) |
|---|---|---|
| 資料隱私 (Data Privacy) | [警告] Google 保留使用你的輸入 (Input) 與輸出 (Output) 來微調模型的權利。這意味著你的資料可能會被「看見」。 | [安全] 你的資料不會被用來訓練模型。適合處理敏感商業數據。 |
| API 速率限制 (Rate Limits) | 較嚴格。例如每分鐘請求次數 (RPM) 較低，適合測試與個人開發。 | 較高。適合正式上線的產品，保證服務穩定性。 |
| 生成內容所有權 | 你可以商用生成的內容（文章、代碼、音檔）。 | 你可以商用生成的內容。 |
Leo 的避雷指南：
- 絕對禁止： 千萬不要把客戶的未公開合約、公司內部薪資單、或是你的 AWS Private Keys 丟進「免費版」的 AI Studio 去分析。一旦你按下 Run，這些資料理論上就進入了 Google 的數據池。
- 程式碼版權： 你用 AI 生成的 React App 代碼，你可以自由使用、修改、甚至販售給你的客戶。目前法律界的主流觀點是，AI 是工具，而你是操作工具的人，但請注意，AI 生成的代碼不具備「版權保護 (Copyright Protection)」。
- 音訊版權： 使用 Google TTS 生成的音檔可以用於 YouTube 影片盈利 (Monetization)，這點目前是開放的。
FAQ: 常見問題集
Q1: 我下載了 React Project，但我不會用 Command Line，有更簡單的方法嗎？
A: 如果你覺得安裝 Node.js 太麻煩，推薦你使用線上的雲端開發環境，例如 CodeSandbox 或 StackBlitz。你只需要把 ZIP 檔裡的內容拖曳上傳，它們就會自動幫你安裝環境並執行，完全不需要動到終端機。
Q2: 為什麼我做的 App 重新整理後資料還在，但換瀏覽器就沒了？
A: 這就是 localStorage 的特性。資料是存在「使用者的瀏覽器」裡，而不是雲端資料庫。這對於個人小工具（如記帳、待辦清單）來說是優點（隱私、快速、免費），但缺點就是無法跨裝置同步。如果你需要跨裝置，那就需要請 AI 幫你寫接上 Firebase 或 Supabase 的後端代碼了。
Q3: Gemini 3.0 Pro 的 200 萬 Token Context Window 對寫程式有幫助嗎？
A: 幫助巨大！以前的 AI 只能讀幾百行代碼，現在你可以把整個舊專案的所有檔案（例如幾十個 .js 檔）全部丟給它，然後說：「幫我把整個專案從 Vue 改寫成 React」。它能理解完整的專案結構，這在以前是不可能做到的。