Vibe Coding 實戰指南：用 Google AI Studio 打造你的自動化辦公神器

軟體開發的民主化：Vibe Coding 是什麼？

在 2025 年以前，開發一個能自動處理工作流程的工具通常需要學習 Python 或 JavaScript。然而，隨著 OpenAI 前科學家 Andrej Karpathy 提出的 Vibe Coding 概念普及化，軟體開發的範式發生了根本性的轉變 。Vibe Coding 提倡的是一種「意圖優先」的開發方式——你只需專注於描述產品的「感覺 (Vibe)」與運作「邏輯」，而程式碼撰寫、環境配置與 Bug 修復，則全權交給 AI 處理 。

正如 Karpathy 所言：「當前最熱門的程式語言是英語」 。對於初學者而言，這意味著只要你能清晰地表達需求，你就能成為一名開發者，將創意快速變現 。

Google AI Studio：最適合辦公室新手的開發起點

在眾多 Vibe Coding 工具中，Google AI Studio 是對初學者最友善的選擇之一。它的「Build 標籤頁 (Build Tab)」提供了一個端到端的開發環境，讓你在同一個介面中完成「描述需求」、「查看代碼」與「即時測試」 。

1. 說完即預覽（Describe & Preview）

在 Build 介面中，你只需在提示框輸入：「幫我做一個可以計算專案進度的工具，要有輸入框跟進度條」，Google 的 Gemini 模型便會立刻生成React程式碼，並在右側視窗顯示「即時預覽（Live Preview）」。你可以直接在預覽中測試按鈕功能，感受它的「Vibe」是否符合預期。

2.標註模式（Annotation Mode）

當你覺得「按鈕太小」或「顏色不對」時，Google AI Studio 提供獨有的「標註模式」。你可以直接在預覽畫面上圈選元素，寫下「讓這個字體變得更酷炫」或「讓這個區塊的顏色更顯眼」，AI 就會自動分析視覺反饋並修改底層程式碼。

實務案例一：會議記錄轉行動清單

在工作中，整理會議記錄並分配行動清單是最耗時的工作之一。透過 Vibe Coding，你可以建立一個專屬的「任務提取器」。

• 問題場景：你剛結束一場一小時的會議，擁有一份長達萬字的語音轉文字稿。你需要從中找出誰該在什麼時候完成什麼事。
• Vibe Coding 實作流程：

1. 在 AI Studio 中輸入：「建立一個任務提取器。我會貼入會議逐字稿，請幫我解析出『任務描述』、『負責人』與『截止日期』，並將結果輸出成 JSON 格式」。
2. 要求 AI 提供一段Google Apps Script程式碼。這是 Google 生態系的強大功能，它能在不需要任何伺服器設定的情況下，直接在Google Sheets或Docs中運行。
3. 將生成好的腳本貼到 script.new (Google 腳本編輯器) 中運行。

• 自動化價值：這不僅是整理摘要，AI 還能自動將提取出的任務填入 Google Sheets 的專屬表格中，甚至在 Google Tasks 中為對應的同事建立提醒。這類「膠水程式碼 (Glue Code)」是以往需要專業技術才能實現的，現在僅需幾次對話即可完成 。

實務案例二：智能數據報告儀表板

另一個常見的痛點是處理CSV數據。傳統上，你需要手動在 Excel 中畫圖表，但 Vibe Coding 可以讓這一切自動化 。

• 問題場景：每週都要從後台下載銷售數據，並手動計算增長率與製作趨勢圖。
• Vibe Coding 實作流程：

1. 上傳你的數據樣本CSV。
2. 輸入 Prompt：「這是一份週報數據。請建立一個 Web Dashboard，讀取這份 CSV 並顯示總營收、平均客單價。另外，幫我畫出各產品類別的銷售佔比圓餅圖」 。
3. AI 會自動選擇適合的可視化套件 (如Recharts)，並在數秒內生成互動式圖表 。

• 實務細節：如果發現數據格式有誤（例如日期格式不統一），你只需跟 AI 說：「數據裡的日期格式有點亂，請幫我在解析前先統一轉換為 YYYY-MM-DD」 。這種對話式除錯 (Conversational Debugging) 讓開發者不再需要去翻閱複雜的函數文件 。

初學者的避坑心法：如何保持「Vibe」？

在 Google 生態系開發時，遵循以下策略能確保 AI 的輸出不會「跑偏」：

1.遵循 CRAFT 提示詞框架

• Context (背景)：說明你的資料來源、使用情境與專案背景，讓 AI 理解「這段提示詞是在哪種脈絡下使用的」。
• Role (角色)：讓 AI 扮演特定專家身分，使其回答風格與知識深度符合你的需求。
• Action (行動)：具體描述你要的功能細節與任務。
• Format (格式)：規定輸出的呈現方式，例如清單、表格、程式碼語言等，確保結果可以直接使用。
• Test (測試)：定義什麼樣的結果才算正確，讓 AI 有明確的成功標準可以依循，也方便你驗收輸出。

2.從小細節開始迭代 (Iterative Refinement)

不要試圖在一個 Prompt裡塞進所有功能。先要求AI做一個「能讀取CSV的按鈕」，確認功能正常後，再要求它「增加圖表顯示」，最後才是「美化介面」。小步快跑是減少 Bug 的最佳策略。

結論：讓程式碼服務於創意

Vibe Coding 的核心並非取代程式碼，而是「將人類從低價值的重複勞動中解放出來」。透過 Google AI Studio，開發的重心從「語法」轉移到了「定義問題」。

如果你現在正為了繁瑣的會議記錄或每週的數據報表感到苦惱，不妨開啟 Google AI Studio，用你最熟悉的語言，與 AI 展開一場關於「效率」的對話。你會發現，原來從一個點子到一個能真正運行的自動化工具，距離只有幾個對話框這麼遠 。

想親眼見識Vibe coding的魅力，親手實做APP，歡迎加入李其縵老師的課堂：http://dsa.dsc.com.tw/Teacher/Teacher.aspx?t=0316