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

上一篇我們確立了「Prompt 是餵 AI 吃東西，Workflow 才是真正的養豬場」的核心觀念。

後來我真的跑去研究與觀察了現代化養豬場，結果發現一個極具衝擊力的真相：在現代養殖業裡，真正累的早就不是『養豬』本身（豬自己會吃會睡會長大），最折磨人的是『管理』！

你要管理環境溫濕度、進出生物安全規範、飼料配方調配、數據記錄，還有防止病毒入侵的各項 SOP。

回到軟體開發也是一模一樣。寫 Code 本身已經被 AI 簡化了，真正累的是管理——管理 Codebase 邊界、管理 Context 雜訊、管理 AI Agent 的行為與專案規則。

為了拯救被管理壓垮的工程師，今天我們要正式請出 Google 的命令列神器：Agy CLI，並在專案中建立養豬場的最高管理憲法——AGENT.md！

養豬場 vs. 軟體工程：概念對照大表

在讓工具進場前，我們先把「智慧養豬場」與「AI 驅動軟體工程」的對照關係表列出來。搞懂這張映射表，你就能一眼看穿自動化架構的本質：

第一步：請 Agy CLI 進駐專案

要讓 AI 直接在你的專案裡「下地幹活」，傳統複製貼上 Prompt 到網頁端的方式已經太慢了。我們需要能直接讀取檔案系統、執行 CLI 指令的工具。

安裝並初始化 Agy CLI（確保環境已設定好 Google Gemini API Key）：

# 全域安裝 Agy CLI（以 npm 為例）
irm https://antigravity.google/cli/install.ps1 | iex

# 在你的專案根目錄進行初始化與測試
agy 

有了 Agy CLI 後，你就可以在 Terminal 中直接讓 Gemini 讀取專案檔案、進行 Code Review 或生成 Web Component，徹底擺脫手動複製貼上的低效循環。

第二步：建立專案的最高管理憲法——AGENT.md

養豬場如果沒有公佈『場內管理守則』，飼育員跟豬隻就會亂成一團；專案如果沒有 AGENT.md，Agy CLI 進來就會像野豬闖進菜園一樣隨便亂寫。

AGENT.md 是放在專案根目錄的 Markdown 檔案。Agy CLI 每次啟動或執行任務時，都會優先讀取這份檔案作為最高 System Instruction。

📄 實戰範例：專案根目錄下的 AGENT.md

# 專案 AGENT.md - 前端 Web Component 開發規範

## 1. 角色設定 (Role)
你是一位精通 Web Standard 的 Senior 前端架構師，專注於編寫高隔離度、高效能的 Web Component。

## 2. 架構與邊界規範 (Architecture Constraints)
- **封裝隔離**：所有 UI 元件必須使用原生 Web Component (`customElements.define`) 搭配 Shadow DOM (`this.attachShadow({ mode: 'open' })`)。
- **零依賴原則**：嚴禁引入 React、Vue 或 Angular Runtime。若需第三方 Lib，僅能透過 ESM URL Import (如 `esm.sh`)。
- **樣式邊界**：CSS 必須完全封裝在 Shadow DOM 內部，不得寫入任何全域 CSS。

## 3. 資料與 API 規範 (Data Contract)
- 資料來源預設接收來自 Google Sheets / JSON 的結構化數據。
- 所有 Properties 必須定義清晰的 Type 檢查與預設值。

## 4. 輸出與測試要求 (Definition of Done)
- 每次生成的元件必須包含完整的 Custom Element 類別與基本 HTML 示範。
- 必須同時生成對應的 Vitest 單元測試檔，確保資料解析與 Event 觸發無誤。

第三步：指揮 Agy CLI 執行專案任務

當 AGENT.md 建立完成後，你的專案就具備了規則防護網。現在你可以放心地讓 Agy CLI 讀取專案環境並進行開發：

# 讓 Agy CLI 參考現有架構，並遵循 AGENT.md 規範建立新元件
gemini "請參考 src/components 目錄，幫我建立一個名為 <pig-health-card> 的 Web Component，用於顯示豬隻健康數據"

因為有 AGENT.md 的約束，Agy CLI 產出的程式碼將會自動遵守 Shadow DOM 隔離、零全域樣式污染，並附帶測試檔——這就是自動化高溫蒸煮的第一步！

結語：從『勞動者』升級為『管理架構師』

當你把 AGENT.md 設定好的那一刻，你就完成了一次關鍵的角色轉變：你不再是蹲在專案裡一行行手搓 Code 的工人，而是立下了管理規則、指揮 Agy CLI 在特定軌道上運行的產線管理者。

📝 本日實作作業：

1. 在你的 Terminal 安裝並驗證 Agy CLI。
2. 在你的專案根目錄建立第一份 AGENT.md，至少寫下 3 條限制（如：禁用特定套件、強制寫註解或單元測試）。

明天 Day 13，我們將看看當養豬的規模擴大之後，該怎麼好好分工，我們明天見！