2027 Agentic Coding 實戰班：打造現代 Vue3 × Supabase 全端專案

課程籌備中

Days	主題名稱	教學大綱	說明
Day 01	Agentic Coding 核心思維與環境架構	1. Vibe Coding 與 Agentic Coding 本質差異 2. Perception-Reasoning-Action-Reflection 執行閉環 3. VS Code Copilot Agent 介面解構與自訂模型接入 (BYOK)	建立學員對 Agent 自主感知與工具調用的全景認知。理解盲目生成與自主反思修復的本質區別，並完成本地 VS Code 結合自選高階語言模型的端點配置與基礎溝通協議。
Day 02	規範驅動開發 (Spec-Driven) 與規則檔案	1. 專案規範檔設計 (.copilot-instructions / CLAUDE.md) 2. 技術棧版本邊界與架構分層約束 3. Spec-Driven Prompting：先規格、後代碼的兩階段確認法	學習扮演「AI 專案指揮官」，在撰寫代碼前透過規範檔鎖定 Vue 3、TypeScript、Pinia 與 TailwindCSS 的版本和代碼風格，杜絕幻覺與廢棄 API 呼叫。
Day 03	上下文工程 (Context Engineering) 實戰	1. Lost in the Middle 與上下文窗口注意力機制 2. @Files、@Folders、@Git Diff 與 @Docs 精準動態錨定 3. 漸進式上下文切片與 Token 預算控制	深入探討上下文組裝技術。指導學員如何精準鎖定介面定義、歷史 Git Diff 與官方文件，避免一次性灌滿上下文導致 Agent 記憶混亂，維持高水準生成品質。
Day 04	終端反饋與驗證優先循環 (Verification Loops)	1. 驗證優先開發模式 (Verification-First Development) 2. 讓 Agent 讀取 Terminal 編譯、Linter 與測試報錯 3. 錯誤回溯自我修復閉環 (Self-healing Loop) 與人工即時介入	實作終端反饋閉環。教導學員利用 Vitest 與 ESLint 建立自動化反饋，讓 Agent 自主解析 Runtime 例外並進行修復，同時掌握在偏離軌道時即時手動 Steering 的技巧。
Day 05	MCP (Model Context Protocol) 工具鏈整合	1. Model Context Protocol 架構與伺服器配置原理 2. VS Code 整合本機檔案、Git 與 SQLite MCP Server 3. 讓 Agent 自主讀取本機 Logs 與 GitHub Issue 協同	探索標準化外部擴充標準 MCP。藉由配置本機 MCP 伺服器，使 IDE 內的 Agent 具備直接檢驗本地檔案系統、讀取 Git 歷程與查詢本機開發資料庫的雙向互聯能力。
Day 06	專題架構設計與 CDN/JSON 靜態混合架構	1. 現代 Jamstack 混合資料架構評估 (CDN+JSON vs. DB) 2. 利用 Agent 生成標準化 JSON 靜態內容與 Schema 驗證 3. Vue 3 + Vite + Pinia 專題專案初始化與結構約束	正式進入專案開發期。評估靜態文章與動態資料的邊界，設計輕量 CDN/JSON 靜態資料結構，並由 Agent 依據 Day 02 的規則建立標準化 Vue 3 專案目錄結構。
Day 07	Vue 3 核心模組實作：靜態內容與 UI 渲染	1. 響應式核心與 Component 階層分解 (Task Decomposition) 2. Agent 驅動實作 CDN JSON 資料獲取與快取層 3. TailwindCSS / UI 元件庫的模組化整合與審查	演練任務層次分解（Decomposition）。指導 Agent 逐步建置導航、文章列表與詳情視圖，處理非同步請求與邊界錯誤（Loading / Empty / Error State），掌握代碼審查標準。
Day 08	Supabase 基礎架構與本地開發環境打通	1. Supabase 專案架構（Postgres、Auth、RLS） 2. 透過 MCP / CLI 讓 Agent 存取與分析資料庫 Schema 3. 結構化 SQL 遷移腳本與 TypeScript 型別自動生成	將 Agent 連接至後端資料庫。透過 Supabase CLI 與 MCP 檢驗資料表結構，自動產生嚴格的 TypeScript 資料模型，確保前端與資料庫介面零落差。
Day 09	動態互動模組：Supabase 整合與 RLS 安全規則	1. 互動功能實作（使用者認證、留言/書籤/按讚互動） 2. Row Level Security (RLS) 安全策略設計與安全審查 3. Agent 協作實作前端 Pinia 與 Supabase Client 資料流	打造核心互動功能。利用 Agent 產出健全的 RLS 存取控制規則，防止資料越權存取；同時完成前端狀態管理模組與資料庫即時同步機制。
Day 10	Harness Engineering 核心：沙盒隔離與權限圍欄	1. Harness Engineer 職責與系統安全防護邊界 (Blast Radius) 2. 本地 DevContainer 與 Docker 輕量沙盒配置 3. 檔案系統寫入白名單與敏感檔案 (.env) 隔離機制	轉入 Harness Engineering 階段。為自主權限升級的 Agent 建立圍欄，配置容器沙盒隔離執行環境，並設定檔案白名單，防止 Agent 誤改或刪除環境設定檔。
Day 11	危險指令攔截與結構化輸出約束	1. 終端危險指令模式匹配與語意攔截策略 2. 採用 JSON Schema 與 Pydantic 實現確定性輸出約束 3. 防範 Prompt Injection 與 Tool Poisoning (代碼註解投毒)	探討 Agent 防禦工程。透過結構化約束技術杜絕模型輸出格式漂移，並實作安全攔截機制，預防 Agent 執行破壞性命令或受到外部代碼註解中的惡意提示詞誘導。
Day 12	狀態機控制 (FSM) 與人工在環 (HITL) 驗證	1. 確定性狀態機（FSM）約束 Agent 執行路徑 2. 最大步數 (Max Steps)、逾時與 Token 預算防護閥 3. 關鍵操作（DB Drop、Force Push）的人工核准審批節點	避免 Agent 陷入死循環或產生高額費用。設計狀態轉換約束，在自動化工作流程中加入 Human-in-the-Loop 審批關卡，針對危險變更實施人工確認機制。
Day 13	全鏈路可觀測性 (Observability) 與日誌追蹤	1. LLM Tracing 核心概念與 Langfuse / LangSmith 概觀 2. 捕捉思考鏈軌跡 (Reasoning Traces) 與 Tool Call 參數 3. 辨識重試風暴 (Retry Storms) 與延遲 / 成本分析	建立系統可觀測性。解構 Agent 的推演思考鏈、工具輸入與輸出，監控高頻無效重試與行為漂移現象，為專案部署提供全鏈路的效能與成本追蹤基礎。
Day 14	Agent 自動化評測 (Evaluation & Benchmarks)	1. SWE-bench、HumanEval 與代碼評測核心指標 (Pass@k) 2. 建立自動化單元級評測集 (Evaluation Test Suite) 3. LLM-as-a-Judge：模型自動審查代碼風格與架構合規性	學習 Harness Engineer 的驗證標準。設計專屬評測管道，將 Agent 視為受測者執行基準測試，並引入裁判模型評估代碼的可維護性、架構整潔度與邊界處理。
Day 15	CI/CD 自動化與 GitHub Pages 雲端部署	1. 撰寫 GitHub Actions Workflow 建立自動構建與驗證流 2. Vue 3 靜態編譯、基底路由 (Base Path) 與 Pages 部署 3. Secrets 安全注入與 Supabase 跨域 (CORS) 權限配置	進入雲端主機交付階段。引導 Agent 撰寫標準 GitHub Actions 腳本，包含前端自動化測試、打包構建，並安全發佈至 GitHub Pages，驗證跨域存取與環境變數隔離。
Day 16	專題全鏈路整合、壓力除錯與重構優化	1. 整合端到端 (E2E) 流程驗證（靜態 CDN + 動態 Supabase） 2. Agent 深度重構：效能瓶頸診斷、Lighthouse 90+ 優化 3. 專案安全性滲透檢視（前端公開金鑰與 RLS 雙重覆核）	專案完整驗收。讓 Agent 對上線版本進行全鏈路壓力測試與重構，優化網路加載、首屏效能與代碼分割，並嚴格確認前端客戶端僅暴露出公開 Key 且由 RLS 嚴密保護。
Day 17	專題文件自動化生成與開源發佈標準	1. 規格文檔與 API 參考手冊由 Agent 自動逆向生成 2. 撰寫高品質 GitHub README、Architecture.md 與 Contributing 規範 3. 專案發佈、版本標籤 (Git Tag) 與 Release Notes 自動化	完善工程專業交付標準。利用 Agent 自動分析專案架構並逆向生成詳盡的技術文檔、架構設計圖與使用者手冊，建立符合開源社群規格的完整 GitHub Repository。
Day 18	專題成果演示、評測報告與未來工程展望	1. 學員專題 App 線上成果演示與架構評析 2. Harness 評測指標報告（Pass Rate、Token 成本與安全防護覆蓋） 3. 企業級自主 Agent 演進方向與個人工程產能倍增心法	專案正式驗收。每位學員展示部署於 GitHub Pages 的專題成果，分享開發過程中的 Harness 圍欄策略與除錯歷程，總結 AI 協同與工程護欄的核心實戰收穫。