AI Coding 實作工作坊

使用 Claude Code AI 工具建立一個薪資管理系統專案。從零開始建立 Rails 專案，包含 PostgreSQL 資料庫和 Tailwind CSS 的初始設定。重點展示如何在終端機中同時管理多個工作視窗（Server、Editor、AI Agent），以及如何讓 Claude Code 協助處理重複性工作，例如設定資料庫連線檔案、整理 Gemfile、安裝測試套件（RSpec、FactoryBot）等。使用 Rails credentials 管理敏感資訊、設定 pre-commit hook 和 RuboCop 等開發工具的實際操作流程，呈現 AI 輔助開發的真實工作場景。

建立 Rails 會員驗證系統，使用 Rails 內建的 Authentication Generator。同時示範將前端框架從 Stimulus 替換為 Alpine.js。利用 AI agent 的能力，包括讓它自主查詢官方文件、制定執行計畫，以及如何正確地審視和控制 AI 的行為。不要盲目接受 AI 的建議，仔細檢查每個步驟，避免 AI 做出不必要的額外操作。

如何檢查 Rails Authentication 系統的運作狀況，並進行程式碼重構。把 Flash 訊息顯示功能從主要的 Application Layout 中抽離，獨立成一個可重複使用的 partial view，提升程式碼的可維護性和重用性。

使用 Claude Code 的 UI/UX Designer sub agent 設計「忘記密碼」頁面和導航列系統。以新野獸派（Neobrutalism）風格為設計基準，讓 AI 參考已完成的登入頁面，自動生成一致的視覺風格。同時更新專案的 CLAUDE.md 文檔，讓 AI 分析整個專案架構（包含 Rails、Alpine.js、Tailwind CSS 等技術棧），自動生成專案指引文件。謹慎使用 Git 版本控制，以便隨時檢視和復原 AI 的修改。

處理突發的 GitHub Actions CI/CD 錯誤，透過截圖和 URL 讓 Claude Code 分析並修正 RuboCop 的錯誤。開始設計登入之後的 Dashboard 功能，設計會計師（User）與公司（Company）的多對多關聯資料庫架構。

與 AI 討論需求、審查測試計畫後，以 TDD 方式開發使用者註冊功能，過程中遇到 `bcrypt` gem 載入錯誤，透過截圖讓 AI 分析問題並建議重啟 server 解決。小步前進、迭代開發的實務流程，展示 Claude Code 的 TODO 功能如何追蹤開發進度，以及如何用截圖輔助 AI 除錯的實戰技巧。

示範使用 Chrome Dev MCP 工具自動化測試註冊和登入功能。發現表單提交無反應後，透過 Chrome Dev MCP 自動開啟瀏覽器、填寫測試資料、檢查 Console Log 來診斷問題。AI Coding 與 Vibe Coding 的差異，並不是完全放任 AI 自行開發，而是開發者需具備技術知識來指導 AI 方向，否則 AI 可能花很久時間摸索。

在公司資料中新增台灣統一編號欄位，展現完整的 AI 協作開發流程。請 AI 加入 Tax ID 欄位並實作驗證規則，遇到 Migration 因既有資料無法設為必填的錯誤。過程中發現 AI 使用的統編驗證規則已過時（除以10改為除以5）並修正前端 HTML pattern 驗證問題後成功完成功能。 開發者必須具備技術知識來指導 AI 方向，而非完全放任。AI 對 Junior 工程師職缺的衝擊，類比工業革命，提前做好準備即可。

介紹如何善用 Claude Code 進行實務開發，從基本設定到進階技巧的完整示範。課程採用實際專案演練的方式，透過真實開發情境展示 AI 輔助程式設計的應用方法，包含 subagent 配置、元件庫整合、專案架構規劃等技巧，掌握 AI 工具在日常開發流程中的有效運用方式。

展示在實際開發情境中如何運用 AI Coding 工具。講師分享自己為 Vim 打造的客製化工具，能快速將檔案與程式碼片段傳遞給 Claude Code。透過一個緊急除錯案例，說明 AI 並非萬能，需要透過限縮搜尋範圍提升精準度。影片也展示個人的 Git 工作流程與自動產生 Conventional Commit 的 Git Commit 訊息，分享為何在 AI 協作時需要保留部分權限控制。

介紹 Claude Code 的進階功能設定與實際應用。主要示範如何使用 Sub Agent 功能來處理特定任務，以及如何建立 Custom Command（客製化指令）來提升開發效率。講師也分享實務經驗，包括 Hooks 功能的使用考量。說明 Model Context Protocol (MCP) 的使用與注意事項，特別是關於 Context 使用量的管理。

展示 AI 協作開發的實戰工作流程與環境設計技巧。示範如何透過客製化指令控制 AI 行為，包括測試修正、需求檔案產生、程式碼清理等實用場景。同時分享開發環境的最佳配置：使用 NeoVIM 搭配 Git CLI 的高效操作方式、Pre-Commit 工具的自動檢查機制、終端機多 Tab 管理技巧。

使用 Claude Code 建立 Rails 專案的流程，包括建立薪資管理系統、整合 git auto-commit 工具、推送到 GitHub，以及透過 Scaffold 快速建立 CRUD 功能。課程中分享 Claude Code 的實際使用限制，例如 CLAUDE.md 效用有限等經驗。特別發現「想」這個字會意外觸發 Claude Code 的 think 模式，建議直白表達需求而非委婉請求。

介紹 Claude Code 的 Model 選擇策略與實戰技巧。詳細分析 Opus 與 Sonnet 的 Token 消耗差異，並揭示付費方案的實際價值遠超表面倍數。透過實際將 Stimulus 替換成 Alpine.js 的案例，示範如何同時開啟多個 Sub Agent 進行協作開發。課程中也介紹 `Context7` 的自動文件查詢功能，並比較不同 AI 模型的特性。講師特別強調，即使讓多個 AI 互相 Code Review，最終仍需要人類開發者作為決策者，這才是 AI 輔助開發的正確心態。

介紹 AI 輔助開發的兩種的模式：「Vibe Coding」與「AI Coding」。Vibe Coding 為輕鬆與 AI 對話、不斷接受建議並迭代調整的開發方式，適合非技術背景者快速產出成果，但對於專業開發者而言效率較低。本課程採取的是另一種路徑：開發者需要明確知道目標、主動選擇技術方案、懂得拒絕 AI 的不當建議，並在關鍵時刻介入掌控開發流程。課程中同時解答學員關於 Sub Agent 設定、CLAUDE.md 配置檔案、Context7 工具等實務問題，強調應以專業開發者的思維與 AI 協作，而非單純依賴 AI 的建議進行開發。

講師分享使用 Claude Code 開發 Rails 專案時的實戰策略：包括如何按需求創建 Sub Agent、面對 AI「偷懶」行為的應對方式，以及為何即使在沒有測試的專案中也要堅持 TDD。分享 Claude Code CLI 與 Cursor 等編輯器的核心差異，強調「AI 不被編輯器綁架」的重要性。講師分享與 AI 協作的挫折感，當 AI 擅自做出預期外的功能時，如何選擇「先接受再調整」而非全部重來的務實策略。同時也坦承目前 AI 在處理大型架構專案時的限制，以及在深夜與 AI「吵架」的真實場景。

示範如何使用 Claude Code 建立會計師薪資管理系統。展示從需求討論到實作的完整流程，使用自訂的 SDD 專家 sub agent 進行規劃，並暫時把規劃內容儲存在專案的 docs 目錄中。隨後透過自訂的 TDD 指令啟動測試驅動開發流程，展示如何利用多個 sub agent 協作，建立可重複使用的開發工作流程。

介紹 CLAUDE.md 配置檔案的管理策略與專案文件組織方法。講師分享如何避免配置檔案過大造成效能問題，示範將大型檔案拆分成 PRD、docs 等目錄結構，並使用超連結方式讓 Claude 按需讀取。同時展示如何建立簡易個人看板（Doing / TODO / DONE）管理開發任務、將 PDF 技術文件轉換為 Markdown 供 AI 讀取的技巧。實際操作 TDD 測試驅動開發流程，包含撰寫測試規格、執行紅綠燈循環，並討論與 AI 協作時的溝通技巧。

討論跨工具配置檔案管理技巧與 TDD 實作細節。透過 TDD 開發方式建立會計師帳號功能與 User model 的一對一關聯，過程中還特別呈現與 AI 協作時的真實情境...

回答學員提問並分享實務經驗。Claude Code 作為 CLI 工具可與任何 IDE 並存使用，不受編輯器限制。討論 AI 生成專案常選用 React 與 Next.js 的原因是訓練資料充足且易於部署，特別分享批量修改程式碼的血淚經驗。強調在 AI 協作中人工審查與決策的重要性，避免過度依賴自動化工具造成難以回復的錯誤。

Q&A 問答環節，回答學員各種實務問題。主題包括:Markdown 格式對 AI 提示的影響、付費訂閱策略分享（使用 Claude、ChatGPT 的選擇）、Tailwind CSS 版本升級建議、Slash Command 與 Sub Agent 的本質差異、MCP 安裝技巧、多終端機快速切換方法。討論 TDD 與 AI 幻覺的關係，TDD 不是降低幻覺，而是透過測試限縮 AI 輸出範圍。