這不是 Vibe Coding 課程!這不是 Vibe Coding 課程!這不是 Vibe Coding 課程!
這是一堂給有開發經驗的網站工程師的 AI 協同開發課程,如果你符合以下條件,那這堂課就是為你設計的:
- 至少有半年以上的網站開發經驗
- 熟悉至少一款程式語言或框架
- 想學會如何有效地跟 AI 協同開發
- 厭倦了網路上那些「聊天就能做出功能」的虛假宣傳
如果你是程式新手或相信「跟 AI 聊聊天就能做出產品」,請暫時先不要報名這個課程。
【會員專屬好禮🎁】即日起只要註冊五倍學院成為會員,馬上取得專屬 300 元折價券, 還可免費獲得會員獨家專屬課程 - Git小教室!
這不是 Vibe Coding 課程!這不是 Vibe Coding 課程!這不是 Vibe Coding 課程!
這是一堂給有開發經驗的網站工程師的 AI 協同開發課程,如果你符合以下條件,那這堂課就是為你設計的:
如果你是程式新手或相信「跟 AI 聊聊天就能做出產品」,請暫時先不要報名這個課程。
03 : 27 : 16
01. 從零開始:建立 Rails 薪資管理系統專案
使用 Claude Code AI 工具建立一個薪資管理系統專案。從零開始建立 Rails 專案,包含 PostgreSQL 資料庫和 Tailwind CSS 的初始設定。重點展示如何在終端機中同時管理多個工作視窗(Server、Editor、AI Agent),以及如何讓 Claude Code 協助處理重複性工作,例如設定資料庫連線檔案、整理 Gemfile、安裝測試套件(RSpec、FactoryBot)等。使用 Rails credentials 管理敏感資訊、設定 pre-commit hook 和 RuboCop 等開發工具的實際操作流程,呈現 AI 輔助開發的真實工作場景。
02. 建立會員驗證系統與前端框架替換
33 : 36
建立 Rails 會員驗證系統,使用 Rails 內建的 Authentication Generator。同時示範將前端框架從 Stimulus 替換為 Alpine.js。利用 AI agent 的能力,包括讓它自主查詢官方文件、制定執行計畫,以及如何正確地審視和控制 AI 的行為。不要盲目接受 AI 的建議,仔細檢查每個步驟,避免 AI 做出不必要的額外操作。
03. 程式碼重構:抽離 Flash 訊息元件
30 : 02
如何檢查 Rails Authentication 系統的運作狀況,並進行程式碼重構。把 Flash 訊息顯示功能從主要的 Application Layout 中抽離,獨立成一個可重複使用的 partial view,提升程式碼的可維護性和重用性。
04. 使用 UI/UX Designer Agent 打造新野獸派風格介面
26 : 34
使用 Claude Code 的 UI/UX Designer sub agent 設計「忘記密碼」頁面和導航列系統。以新野獸派(Neobrutalism)風格為設計基準,讓 AI 參考已完成的登入頁面,自動生成一致的視覺風格。同時更新專案的 CLAUDE.md 文檔,讓 AI 分析整個專案架構(包含 Rails、Alpine.js、Tailwind CSS 等技術棧),自動生成專案指引文件。謹慎使用 Git 版本控制,以便隨時檢視和復原 AI 的修改。
05. 修正 CI/CD 錯誤與設計資料庫架構
26 : 28
處理突發的 GitHub Actions CI/CD 錯誤,透過截圖和 URL 讓 Claude Code 分析並修正 RuboCop 的錯誤。開始設計登入之後的 Dashboard 功能,設計會計師(User)與公司(Company)的多對多關聯資料庫架構。
06. TDD 開發使用者註冊功能與截圖除錯技巧
21 : 49
與 AI 討論需求、審查測試計畫後,以 TDD 方式開發使用者註冊功能,過程中遇到 bcrypt
gem 載入錯誤,透過截圖讓 AI 分析問題並建議重啟 server 解決。小步前進、迭代開發的實務流程,展示 Claude Code 的 TODO 功能如何追蹤開發進度,以及如何用截圖輔助 AI 除錯的實戰技巧。
07. Chrome Dev MCP 自動化測試與表單問題診斷
26 : 08
示範使用 Chrome Dev MCP 工具自動化測試註冊和登入功能。發現表單提交無反應後,透過 Chrome Dev MCP 自動開啟瀏覽器、填寫測試資料、檢查 Console Log 來診斷問題。AI Coding 與 Vibe Coding 的差異,並不是完全放任 AI 自行開發,而是開發者需具備技術知識來指導 AI 方向,否則 AI 可能花很久時間摸索。
08. 新增統一編號欄位:驗證規則更新與 AI 協作實務
21 : 12
在公司資料中新增台灣統一編號欄位,展現完整的 AI 協作開發流程。請 AI 加入 Tax ID 欄位並實作驗證規則,遇到 Migration 因既有資料無法設為必填的錯誤。過程中發現 AI 使用的統編驗證規則已過時(除以10改為除以5)並修正前端 HTML pattern 驗證問題後成功完成功能。
開發者必須具備技術知識來指導 AI 方向,而非完全放任。AI 對 Junior 工程師職缺的衝擊,類比工業革命,提前做好準備即可。
04 : 14 : 14
01. Claude Code 入門:從基礎設定到進階應用
16 : 05
介紹如何善用 Claude Code 進行實務開發,從基本設定到進階技巧的完整示範。課程採用實際專案演練的方式,透過真實開發情境展示 AI 輔助程式設計的應用方法,包含 subagent 配置、元件庫整合、專案架構規劃等技巧,掌握 AI 工具在日常開發流程中的有效運用方式。
02. 實戰技巧:客製化工具與緊急除錯演練
14 : 49
展示在實際開發情境中如何運用 AI Coding 工具。講師分享自己為 Vim 打造的客製化工具,能快速將檔案與程式碼片段傳遞給 Claude Code。透過一個緊急除錯案例,說明 AI 並非萬能,需要透過限縮搜尋範圍提升精準度。影片也展示個人的 Git 工作流程與自動產生 Conventional Commit 的 Git Commit 訊息,分享為何在 AI 協作時需要保留部分權限控制。
03. 進階功能詳解:Sub Agent、Custom Command 與 MCP
21 : 44
介紹 Claude Code 的進階功能設定與實際應用。主要示範如何使用 Sub Agent 功能來處理特定任務,以及如何建立 Custom Command(客製化指令)來提升開發效率。講師也分享實務經驗,包括 Hooks 功能的使用考量。說明 Model Context Protocol (MCP) 的使用與注意事項,特別是關於 Context 使用量的管理。
04. 高效開發環境:客製化指令與終端機工作流程
13 : 53
展示 AI 協作開發的實戰工作流程與環境設計技巧。示範如何透過客製化指令控制 AI 行為,包括測試修正、需求檔案產生、程式碼清理等實用場景。同時分享開發環境的最佳配置:使用 NeoVIM 搭配 Git CLI 的高效操作方式、Pre-Commit 工具的自動檢查機制、終端機多 Tab 管理技巧。
05. Rails 專案實戰:建立薪資管理系統
20 : 23
使用 Claude Code 建立 Rails 專案的流程,包括建立薪資管理系統、整合 git auto-commit 工具、推送到 GitHub,以及透過 Scaffold 快速建立 CRUD 功能。課程中分享 Claude Code 的實際使用限制,例如 CLAUDE.md 效用有限等經驗。特別發現「想」這個字會意外觸發 Claude Code 的 think 模式,建議直白表達需求而非委婉請求。
06. Model 選擇策略與多 Agent 協作開發
18 : 19
介紹 Claude Code 的 Model 選擇策略與實戰技巧。詳細分析 Opus 與 Sonnet 的 Token 消耗差異,並揭示付費方案的實際價值遠超表面倍數。透過實際將 Stimulus 替換成 Alpine.js 的案例,示範如何同時開啟多個 Sub Agent 進行協作開發。課程中也介紹 Context7
的自動文件查詢功能,並比較不同 AI 模型的特性。講師特別強調,即使讓多個 AI 互相 Code Review,最終仍需要人類開發者作為決策者,這才是 AI 輔助開發的正確心態。
07. Vibe Coding vs AI Coding:專業開發者的協作心態
20 : 20
介紹 AI 輔助開發的兩種的模式:「Vibe Coding」與「AI Coding」。Vibe Coding 為輕鬆與 AI 對話、不斷接受建議並迭代調整的開發方式,適合非技術背景者快速產出成果,但對於專業開發者而言效率較低。本課程採取的是另一種路徑:開發者需要明確知道目標、主動選擇技術方案、懂得拒絕 AI 的不當建議,並在關鍵時刻介入掌控開發流程。課程中同時解答學員關於 Sub Agent 設定、CLAUDE.md 配置檔案、Context7 工具等實務問題,強調應以專業開發者的思維與 AI 協作,而非單純依賴 AI 的建議進行開發。
08. Rails 開發實戰:Sub Agent 與 TDD 策略
15 : 45
講師分享使用 Claude Code 開發 Rails 專案時的實戰策略:包括如何按需求創建 Sub Agent、面對 AI「偷懶」行為的應對方式,以及為何即使在沒有測試的專案中也要堅持 TDD。分享 Claude Code CLI 與 Cursor 等編輯器的核心差異,強調「AI 不被編輯器綁架」的重要性。講師分享與 AI 協作的挫折感,當 AI 擅自做出預期外的功能時,如何選擇「先接受再調整」而非全部重來的務實策略。同時也坦承目前 AI 在處理大型架構專案時的限制,以及在深夜與 AI「吵架」的真實場景。
09. TDD 工作流程:建立會計師薪資管理系統
18 : 44
示範如何使用 Claude Code 建立會計師薪資管理系統。展示從需求討論到實作的完整流程,使用自訂的 SDD 專家 sub agent 進行規劃,並暫時把規劃內容儲存在專案的 docs 目錄中。隨後透過自訂的 TDD 指令啟動測試驅動開發流程,展示如何利用多個 sub agent 協作,建立可重複使用的開發工作流程。
10. 專案配置管理:CLAUDE.md 拆分與文件組織技巧
18 : 17
介紹 CLAUDE.md 配置檔案的管理策略與專案文件組織方法。講師分享如何避免配置檔案過大造成效能問題,示範將大型檔案拆分成 PRD、docs 等目錄結構,並使用超連結方式讓 Claude 按需讀取。同時展示如何建立簡易個人看板(Doing / TODO / DONE)管理開發任務、將 PDF 技術文件轉換為 Markdown 供 AI 讀取的技巧。實際操作 TDD 測試驅動開發流程,包含撰寫測試規格、執行紅綠燈循環,並討論與 AI 協作時的溝通技巧。
11. TDD 實作演練:Model 關聯與跨工具配置
21 : 24
討論跨工具配置檔案管理技巧與 TDD 實作細節。透過 TDD 開發方式建立會計師帳號功能與 User model 的一對一關聯,過程中還特別呈現與 AI 協作時的真實情境...
12. 實務經驗分享:CLI 工具特性與批量修改注意事項
21 : 48
回答學員提問並分享實務經驗。Claude Code 作為 CLI 工具可與任何 IDE 並存使用,不受編輯器限制。討論 AI 生成專案常選用 React 與 Next.js 的原因是訓練資料充足且易於部署,特別分享批量修改程式碼的血淚經驗。強調在 AI 協作中人工審查與決策的重要性,避免過度依賴自動化工具造成難以回復的錯誤。
13. 綜合 Q&A:訂閱策略、工具選擇與 TDD 迷思
32 : 43
Q&A 問答環節,回答學員各種實務問題。主題包括:Markdown 格式對 AI 提示的影響、付費訂閱策略分享(使用 Claude、ChatGPT 的選擇)、Tailwind CSS 版本升級建議、Slash Command 與 Sub Agent 的本質差異、MCP 安裝技巧、多終端機快速切換方法。討論 TDD 與 AI 幻覺的關係,TDD 不是降低幻覺,而是透過測試限縮 AI 輸出範圍。