Level 8 挑戰
用 Claude Code 蓋並上線完整專案
⏱ 預估 ~7 分鐘
01 · 讀一讀
玩真的了。你要用 Claude Code 從零蓋一個完整書籤管理 app — 完成時 push 到 GitHub。
沒有一步一步牽著走。沒有模擬。你有所有技能:- 終端機(Level 2)— 走訪跟跑指令 - 檔案系統(Level 3)— 建跟整理檔案 - Git(Level 4)— 版控跟 GitHub - Web 基礎(Level 5)— HTML、CSS、JavaScript - Node.js(Level 7)— 蓋真實專案 - Claude Code(Level 8)— AI 加持的開發
下面每個勾是一個要加的功能。一個一個用 Claude Code 蓋。每個改動用 git diff 檢視。用功能分支。這是專業流程。
慢慢來。不急。目標不是快 — 是蓋出一個真實、可動的東西。
02 · 確認清單
用 Claude Code 從零蓋書籤管理器。依序完成每個功能。用你學過的迭代流程:給 Claude prompt、檢視改動、commit、繼續下一個。
- 建新專案資料夾、用 npm 初始化
- 用 Claude 蓋:有表單(URL + 標題 + 分類欄位)的 HTML 頁
- 用 Claude 加:localStorage 持久化
- 用 Claude 加:依分類分組顯示書籤
- 用 Claude 加:搜尋/過濾功能
- 用 Claude 加:刪除跟編輯功能
- 每個改動用 git diff 檢視
- 每個功能用 git branch
- 完成專案 push 到 GitHub
03 · 選擇題
在專業 Claude Code 流程裡,蓋完功能之後是什麼?
- 立刻部署
- 用 git diff 檢視改動
- 刪分支
- 開始新功能
04 · 填空
Claude Code 改你的檔案後,永遠在 commit 前用 git _____ 檢視。
05 · 讀一讀
恭喜。你剛用 Claude Code 蓋並上線一個真實 app。
讓這沉澱。你開始這課程時不知道終端機是什麼。現在你已經:- 從命令列走訪檔案系統 - 建跟管理檔案資料夾 - 用 git 做版控 - 理解網站跟 server 怎麼運作 - 從零蓋 Node.js 專案 - 用 AI 配對程式夥伴蓋完整 app - 把你的作品 push 到 GitHub 給世界看
你不只是跟著教學了。你在蓋東西。這就是學寫軟體跟真的會寫的差別。
你 GitHub profile 上的書籤管理器就是證明。你蓋的。用真實工具。照專業流程。
而且這只是開始。
重點整理
- 你從零蓋了真實、可動的 app
- 你把 Claude Code 當專業開發工具用
- 你照 branch-build-review-commit 流程
- 你的專案在 GitHub 上 — 真實的作品集
- 下一站:Level 9 — 用自訂 skill 教 Claude 你的流程
06 · 選擇題
Claude Code 加了功能但也改了你沒叫它動的檔。該怎麼辦?
- 全部接受 — Claude 大概知道得最清楚
- 整個專案刪掉重來
- 用 git checkout undo 不想要的檔,其他留下
- 忽略它、繼續 push 到 GitHub
07 · 填空
蓋新功能前建新分支,跑:git checkout -b _____
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案,非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。