前端三分鐘 X 要轉職養豬還是做被取代的工程師？用 Google AI 打造我的 AI 雙刀流自動化工作流系列

在前面的文章中，我們聊過了 AI 的一些基本概念，也談了超級豬、廚餘高溫蒸煮、組織膨脹與 IT 管院化。聊完了「人」與「架構」的痛點，今天我們正式進入實戰！

很多人剛接觸 AI 時，最常犯的錯誤就是以為只要丟一句 Prompt，魔法就會自動發生。

但現實是：豬不是叫來就會長大的，AI 也是。

養豬與養 AI 的共通法則

你不可能每天跑到豬舍裡對著豬大喊：「你今天給我長胖 5 公斤！」然後豬就會乖乖變胖。

要讓豬健康成長，你需要一套完整的基礎設施：

• 飼料（Prompt / Data）：高營養、無雜訊的輸入內容。
• 時間（Iteration / Context Processing）：AI 處理邏輯與多輪呼叫的生命週期。
• 環境（System Instruction）：剛性的角色設定與全局邊界規範。
• 規則（Structured Output / Schema）：確保產出不會野生氾濫或變形的檢驗格式。
• 觀察（Monitoring & Feedback Loop）：自動化測試與 Log 監控機制。

Prompt 只是餵 AI 吃東西，Workflow 才是真正的養豬場。

只會寫 Prompt 的工程師就像拿著飼料隨便亂撒的飼育員；而打造 Workflow 的工程師，才是真正建構自動化產線的「養殖場架構師」。

實作第一步：將 Gemini API 轉化為現代化養殖控制台

要擺脫「對著 AI 大喊」的徒勞模式，我們必須把輸入與輸出控制權收回來。在 Google AI 的開發者生態中，這對應到三個核心技術元件：

1. System Instruction（養豬場環境與規則設定）

設定 AI 的「剛性邊界」與「靈魂」。不要在每次發問時重複貼背景，而是直接在 System Instruction 中定義：

• 它是什麼角色（如：只輸出 Web Component 標準程式碼的前端專家）。
• 什麼絕對不能做（如：絕不使用外部全域 CSS 樣式、絕不使用特定框架的 Runtime）。

2. Prompt & Context（精準飼料）

給予乾淨、剪枝後的資料。包含必要的 Data Contract（如 JSON 結構）與具體的 Task，避免無關的 UI 雜訊污染 Context。

3. Structured Output（標準化產出與驗證）

透過 Gemini API 支援的 response_schema，強制要求 AI 必須回傳 JSON Schema 或特定格式。這就像養豬場的「自動計重通道」，產出不符規格直接退件重來，絕對不讓未經過高溫蒸煮消毒的亂碼流入 Codebase。

開始實作的第一步：繪製你的 Workflow 地圖

在動手寫 Code 或呼叫 Gemini API 之前，最重要的事情不是開啟 VS Code，而是把你自己手動開發的 Workflow 一步步列出來。

如果你連自己平時是怎麼「手搓」程式碼的步驟都講不清楚，你就無法為 AI Agent 設計合理的「養殖流程」。

範例：從 0 到 1 建立 Web Component 的工程師 Workflow

1. 拆解需求：分析 UI 設計圖與資料欄位（Data Schema）。
2. 定義介面：確定元件的 Properties (Props)、Events 與 Slots。
3. 編寫 HTML/CSS：建立 Shadow DOM 結構與隔離樣式。
4. 撰寫邏輯：處理元件內部狀態與事件觸發。
5. 單元測試：撰寫測試案例驗證渲染與互動是否正確。

當你把這 5 個步驟列出來後，你就會發現：哪一部分可以交給 Gemini 產生、哪一部分需要用 Structured Output 強制約束、哪一部分需要自動化測試進行「高溫蒸煮」！

結語與今日作業

別再只把 AI 當成聊天視窗了！從今天開始，我們要用工程思維把 AI 放入我們設計好的 Workflow 控制台裡。

📝 本日實作作業：

拿出你的筆記本或 Notion，寫下你目前最花時間的一個日常開發任務，並把它拆解為 3~5 個標準步驟。

明天 Day 12，我們會把畫面轉去看看養豬場，觀察豬場主人後發現真正累的不是養豬，是管理！