直播精彩回放
👉【 AI 都會寫程式了，工程師下一個該精進的關鍵能力是什麼？】
Claude Code 前端工程師 AI 升級術：打造前端高效工作流
0 seconds of 1 minute, 24 secondsVolume 0%
Press shift question mark to access a list of keyboard shortcuts
鍵盤快捷鍵
播放/暫停空白鍵
音量增加↑
音量減少↓
快進 5 秒→
倒退 5 秒←
開啟/關閉字幕c
全螢幕/離開全螢幕f
靜音/取消靜音m
Decrease Caption Size-
Increase Caption Size+ or =
跳轉至%0-9
Claude Code 前端工程師 AI 升級術：打造前端高效工作流
前端工程師的 AI 升級術。從 Claude Code 核心工作流到 6 大 MCP 串接，再到全端實戰打造仿 Claude Code 聊天機器人，讓 AI 真正成為你的工程夥伴。
Hahow AI 學習升級
13.7 k 的人也在觀看
關於課程
課程包含
包含 8 章 39 單元、1 項作業
課程時長
4 時 45 分鐘
課程總人數
215 位同學
觀看限制
不限觀看次數，還會附贈完課證書
學習升級
Hahow AI 學習助教
無需額外付費
即時問答、重點整理、測驗理解，讓知識派上用場
最新消息
2026-09-15
課程分批開課公告
親愛的同學們，大家好。為了帶給大家更完整、細緻且實際可應用的學習體驗，本次課程在製作過程中增加了更多 Claude Code 實際操作、前端開發案例與 AI 工作流拆解，因此實際課程時長較原先規劃更長。為確保內容品質，我們將採分批開課的形式。第一批於 2026 年 9 月 22 日（二）12:00 開課第二批於 2026 年 11 月 3 日（二）12:00 開課本次增加的內容，將更完整地帶大家從需求理解、程式碼撰寫、修改除錯到 AI 協作，實際走過前端工程師使用 Claude Code 的工作流程。我們希望保留足夠的教學與操作時間，而不是為了符合原定時長而刪減內容，讓大家學到的不只是工具使用，而是一套能真正帶回工作中應用的 AI 開發方式。造成不便，我們深感抱歉，也感謝大家的理解與耐心等待。我們會將增加的製作時間投入在課程內容上，期待帶給大家更完整、也更值得實際應用的學習體驗，我們課堂上見！講師 布魯斯
課程內容
課前問題 & 作業回覆與頻率
- 課前問題回覆：購課前的問答，老師會在 3 天內進行回覆
- 課程討論回覆：課程討論區的問題，老師預計在 7 天內進行回覆
- 批改作業的頻率：老師預計在 7 天內進行回覆批改作業，並將按照繳交順序依序回覆批改
哪些人適合這堂課？
這堂課適合：
1. 正在摸索 AI、卻發現只是不斷複製貼上、效率沒真正提升的前端工程師
2. 想把 AI 導入團隊、建立共用 SKILL 與 Hook 自動化規範的 Tech Lead／資深前端
3. 希望搞懂 Claude Code、MCP、Context 與 Token 成本底層邏輯，而不只是背 prompt 模板的人
4. 想完整走過「從設計稿到部署」全端 AI 工作流、並親手做出一個專案的人
這堂課比較不適合：
1. 完全沒有程式或前端基礎的初學者（本課假設你已具備 1 年以上前端實務或實習經驗）
2. 只想找「一鍵生成、不用理解流程」捷徑的人——這堂課重點在建立可控、可複用的工程化流程，需要動手實作
3. 完全不碰 React／前端、只做純後端或非工程職能的同學
你可以學到
1. 搞懂 Token 與 LLM 運作原理，分清 Claude Code 與 Cursor 的底層差異，不再盲目用工具
2. 掌握 Claude Code 核心工作流：CLAUDE.md 撰寫、allow／deny 權限控管、Plan Mode 計劃模式，以及用 /compact、/clear 精準管理 Context、拒絕 Token 浪費
3. 安裝並串接 6 大 MCP（Figma、GitHub、Playwright、Context7、Notion、Vercel），讓 AI 跨工具鏈協作
4. 撰寫客製化 SKILL，把團隊的 Code Review 標準、Commit 規範與元件生成變成 AI 可自動執行的知識
5. 用 Hook 強制執行規範，讓低級錯誤從流程中徹底消失（CLAUDE.md 是建議、Hook 是強制）
6. 實作 Sub-Agent 架構，解決多任務下的 Context 污染問題
7. 一個仿 Claude Code 的聊天機器人：Next.js + Fastify + Docker 架構，手把手串接 Anthropic API，實作多輪對話管理與流暢的 Streaming 逐字回應
8. 從零設計向量 RAG 記憶層，讓 AI 記住團隊的編碼偏好與專案規範
9. 一條龍自動化交付：用 Figma 生成 UI、Playwright 自動跑測試、GitHub MCP 自動審查代碼並建立 PR，最後一鍵部署至 Vercel 與 GCP Cloud Run
上課前的準備
需要準備的工具 / 軟體（若購買課程前不清楚版本是否支援，請先留言與老師確認。）
1. 一台可使用終端機的電腦：macOS 12+、Windows 10+（建議搭配 WSL）或主流 Linux 發行版；建議 8GB 以上 RAM
2. Node.js 18 以上（建議安裝 20 LTS 版本以求穩定）與 npm
3. Claude Code（Anthropic CLI）：需搭配付費的 Claude 訂閱（Pro／Max）或 Anthropic Console／API 帳號才能登入使用
4. 程式編輯器：VS Code（或你慣用的編輯器）需要具備的背景知識
1. 1 年以上前端實務工作或實習相關經驗（本課程的入學門檻）
2. 熟悉 JavaScript／TypeScript，以及 React 的基本開發
3. 對 Next.js 有基礎概念（全端章節會用到，但會帶著做）
4. 基本的終端機／命令列操作能力
5. Git 版本控制基礎（commit、branch、PR 流程）
6. 加分但非必備：Node.js 後端、Docker 的基本概念單元一覽
8 章 39 單元｜總時長 285 分鐘
全部展開1
認識 Claude 與環境開發準備
影片單元
單元 1 - Claude vs GPT vs Gemini vs Grok：定位、優勢與使用場景差異
18:41
影片單元
單元 3 - Claude Code 安裝與相關環境準備
05:26
2
上手 Claude Code，熟悉各種工作流
影片單元
單元 1 - Claude Code 核心能力總覽：常用指令與使用情境
27:19
影片單元
單元 2 - Claude Code 權限管理：allow / ask / deny 三層設定
18:19
影片單元
單元 4 - Context 管理實戰：/compact、/clear、手動 dump-to-file 三種策略比較
07:49
影片單元
單元 5 - 讓 Claude Code 記住你：CLAUDE.md 撰寫與記憶化管理
10:52
影片單元
單元 6 - Plan Mode 計劃模式的重要性：先思考再動手
22:44
影片單元
單元 7 - 如何正確使用 AI 開發程式碼，真正提升工作效率而不是製造技術債
20:03
3
MCP 核心概念與前端必學工具
影片單元
單元 1 - MCP 是什麼？為什麼它能讓 AI 從「聊天工具」變成「真正的工作夥伴」
06:13
影片單元
單元 2 - 如何用 Claude mcp add 安裝與管理伺服器
07:05
影片單元
單元 3 - MCP Tool Search，大幅節省 Context 用量的新特性
09:40
影片單元
單元 4 - Figma MCP：直接讀取設計稿，自動生成符合規格的 React 元件
15:51
影片單元
單元 5 - GitHub MCP：管理 PR、Issues、分支，不需切換瀏覽器
18:55
影片單元
單元 6 - Playwright MCP：控制真實瀏覽器進行 E2E 測試與視覺驗證
21:54
影片單元
單元 7 - Context7 MCP：取得最新版本的 React、Next.js 等函式庫文件，避免 AI 幻覺
16:44
影片單元
單元 8 - Notion MCP：讀寫 Notion 文件，讓需求文件直接進入開發流程
16:09
影片單元
單元 9 - Vercel MCP：觸發部署、確認狀態、一鍵 Rollback
14:55
4
SKILL 系統：打造你的專屬 AI 技能庫
影片單元
單元 1 - SKILL 是什麼？SKILL vs. CLAUDE.md
影片單元
單元 2 - SKILL 初探:真的有用嗎? 觸發機制是什麼？
影片單元
單元 3 - SKILL實戰｜前端必裝的 SKILL
影片單元
單元 4 - 撰寫 SKILL 的 Best Practice
影片單元
單元 5 - 撰寫團隊共用的 SKILL、自動部署與通用測試文件
5
Claude Code 進階架構：Sub-Agent、Hook、自訂指令
影片單元
單元 1 - Sub-Agent 是什麼？
影片單元
單元 2 - Hook 是什麼？
6
Next.js + Fastify 仿 Claude Code 聊天機器人 - 全端實戰篇
影片單元
單元 1 - 系統設計基礎，如何設計AI聊天機器人
影片單元
單元 2 - 系統設計進階，如何設計現實真實需求的AI聊天機器人
影片單元
單元 3 - 專案初始化：Next.js + Fastify + Docker 與資料庫環境配置
影片單元
單元 4 - 串接 Anthropic API，構建基礎 AI 聊天功能
影片單元
單元 5 - 聊天介面：用 Figma MCP 將設計稿轉為 React 元件
影片單元
單元 6 - 實現 Streaming：讓回應像 ChatGPT 一樣逐字出現
影片單元
單元 7 - 對話記憶：實作多輪對話的 messages 管理
影片單元
單元 8 - 記憶化管理：設計 RAG 系統記住你的個人偏好
7
Next.js + Fastify 仿 Claude Code 聊天機器人 - 全端工作流建立篇
影片單元
單元 1 - 建立可帶走的 release SKILL：品質關卡與 Code Review
影片單元
單元 2 - Hook 實戰：每次存檔自動格式化，阻擋直接 push 到 main
影片單元
單元 3 - Playwright MCP 自動化測試：讓 Claude 自己驗證 UI
影片單元
單元 4 - PR 工作流自動化：從 GitHub MCP 到自動生成 PR 描述
影片單元
單元 5 - 部署上線：Vercel MCP 前端部署 + GCP Cloud Run 後端部署
8
作業驗收
作業單元
作業 1 - 整合全課所學，獨立完成一個全端 AI 聊天機器人
查看作業
試看單元
課程評價
本課暫無評價或評價未達 3 筆，暫不顯示
關於講師
購課前問答
日期最新
日期最新
日期最舊
愛心數
Vita Li
2026-07-18
希望學習到的工作流知識以後如果購買別家AI也可以用同樣的概念去應用或者學到相容的設計ai workflow方式
這也是我做這堂課的想法之一，像是在實戰章節我也會講解一些關於系統設計的部分，因為我認為在 AI 的這個時代，學會通用的概念也是相當重要的，這樣不管出了多強的模型，都可以把這些概念帶過去套用。
（已編輯）
回覆
我也想問
購買單堂課
NT$7,280
有什麼優惠可以用？
小蛙幫你找最佳優惠
登入看看 有什麼優惠用
