Claude Code 是 Anthropic 官方的終端機 CLI。它在你的 shell 裡跑、直接改檔案、執行指令、跟你現有的 dev 工具串在一起。比起「在聊天框複製貼上」的工作流，Claude Code 是真的能在你的 codebase 上迭代，讀檔、跑測試、改完丟 commit。
這篇是從零到生產力的最短路徑。
你需要的東西
要照著這篇文章做完，你需要：
- 一臺 Mac
- 一個 Claude 帳號
- 帳號升級到 Max 方案
1. 安裝 Claude Desktop
Claude Desktop 是 Anthropic 官方的 Mac app，是後面整套工作流的家。一次把開發工具、Claude Desktop、跟它的 Claude Code 設定一起搞定。
A. 裝 Xcode Command Line Tools
Xcode Command Line Tools 是 Apple 官方的開發者工具包，裡面有 Git 跟後面會用到的東西。Mac 右上角找到放大鏡的圖案，點下去會跳出輸入框，輸入 Terminal 打開它：
把下面這行貼進終端機按 Enter：
xcode-select --install
系統會跳出一個視窗問你要不要裝，按「安裝」就行，需要等個幾分鐘。
B. 下載並打開 Claude Desktop
裝完打開、用上面說的 Max 帳號登入。首頁大概長這樣：
C. 打開「免確認模式」
順便把 Claude Code 的免確認模式打開，等下實際用 Claude Code 時才不會每跑一個指令都被問「OK 嗎？」點 Claude Desktop 左下角自己的名字 → 選 Settings → 左側選單點 Claude Code，把 Allow bypass permissions mode 跟 Allow auto permissions mode 兩個開關都打開：
2. 安裝 Typeless
Typeless 是一個 AI 語音輸入 app，講話自動轉成文字、自動修掉口語贅字、保留你的語氣。跟 Claude Code 對話時用講的比打字快得多，長 prompt 尤其有感。想看實際操作可以看使用教學。
什麼是 Skill？
Skill 是 Claude Code 的擴充，一份用 markdown 寫的「指令包」，告訴 Claude 在特定情境該怎麼動。裝好之後，你只要丟一句話進去，它就會照 Skill 裡寫好的步驟做事，不用每次重新解釋。
可以把它想成 Claude 的食譜本，每個 Skill 是一道菜的完整作法。沒有 Skill 的時候，你每次都要從頭跟 Claude 解釋整個流程；有了 Skill，你只要說「幫我建一個新網站」就好，剩下的它自己照流程跑。
常見的 Skill 例如：
- create-nextjs：用偏好設定 scaffold 一個 Next.js 專案
- init-git：把當前資料夾初始化成 git repo，順便開 GitHub private repo
- agent-browser：操作瀏覽器、填表、截圖、做 QA
任何你會重複做的工作流程，都可以包成一個 Skill，下次只要叫名字就跑。
想看更多現成的可以參考：
安裝建立網站用的 Skill
我們等下要做的第一個專案是一個網站，所以先把建網站用的 Skill 裝起來。打開 Claude Desktop，把下面這串貼進對話框送出：
幫我安裝 https://github.com/bobwei/create-nextjs/blob/main/SKILL.md
Claude Code 會自己讀這個網址、把 Skill 抓下來、放到該放的地方：
裝好之後，後面要建網站的時候，跟 Claude 說「幫我建一個新網站」，它就會照這個 Skill 的步驟把專案開好。
建立你的第一個網站
打開 Claude Desktop，把下面這句貼進對話框送出：
幫我建一個新網站
Claude Code 會照剛裝好的 Skill 把專案建起來，拉範本、裝依賴、把 dev server 跑起來。跑完它會印一個本地預覽網址：
http://localhost:3000
複製貼進瀏覽器就能看到剛做好的網站。之後想改什麼，繼續跟 Claude 講就行。
建立 GitHub 帳號
GitHub 是放程式碼的地方，專案放上去就有完整版本紀錄，可以回溯到任何時期，可以多人協作。免費註冊就能用。
A. 註冊帳號
填 email、設密碼、選 Free 方案，一路按到底就好。
B. 安裝 GitHub CLI
GitHub CLI（gh）讓你跟 Claude 能在終端機直接操作 GitHub，建 repo、推 code、發 PR 都一行指令搞定。裝好之後，跟 Claude 說「幫我把這個專案推到 GitHub」，他就會自己用 gh 處理，不用你切到瀏覽器手動建 repo。
打開 Claude Desktop 對話框，送出：
幫我安裝 GitHub CLI 並登入我的帳號
Claude 會幫你把 gh 裝起來，再跑 gh auth login 把瀏覽器叫出來完成授權。
什麼是 MCP？
MCP（Model Context Protocol，模型上下文協定）是 Anthropic 在 2024 年底提出的開放標準，目的是讓 AI 工具和外部服務之間有一個統一的「插頭」。可以把它想成 AI 界的 USB-C，以前每接一個新服務都要寫一套客製介面，現在大家用同一條協定講話就行。2025 年之後 OpenAI、Google DeepMind 也都跟進採用，已經是業界共通的接法。
裝了某個服務的 MCP 之後，Claude 就能直接呼叫那個服務的功能，常見的例如：
- Vercel MCP：建專案、發布、查 build log
- GitHub MCP：開 issue、發 PR、看程式碼
- Notion MCP：讀寫 Notion page、整理 database
- Supabase MCP：建資料表、跑 SQL、看 logs
你原本需要打開瀏覽器、一步一步點才能完成的事，現在直接告訴 AI 就好，它會透過 MCP 幫你操作。
換個更貼身的例子：只要你寫一個 MCP 告訴 Claude 怎麼讀你的 IG 訊息、怎麼發訊息，他就能代你打開 inbox、看誰傳了什麼、照你的口吻回覆，全程你不用碰手機。任何你能用 API 或腳本做的事，包成 MCP 之後 Claude 都能幫你做。
跟 Skill 的差別在於，Skill 是寫給 Claude 看的「行動腳本」，告訴它在某個情境要按什麼順序動手；MCP 是把外部世界的能力接到 Claude 身上的「橋」，給它新的東西可以做。Skill 教方法，MCP 給能力，兩個常常一起用。
想看更完整的介紹和已經有的 MCP server 清單，可以參考：
建立 Vercel 帳號
Vercel 是把網站發布到網路上的地方，一個指令就能拿到 https://xxx.vercel.app 的正式網址，HTTPS、CDN 都自動處理好。
A. 註冊帳號
點「Continue with GitHub」用剛才的 GitHub 帳號登入授權，方案選 Hobby（免費）。
B. 安裝 Vercel MCP
Vercel 有官方的 MCP server，host 在 https://mcp.vercel.com/，裝起來之後 Claude 就能直接幫你建 Vercel 專案、發布、查 logs，不用切到瀏覽器手動點。
打開 Claude Desktop 對話框，送出：
幫我安裝 Vercel MCP
Claude 會幫你跑 claude mcp add 把它接起來。第一次實際用到 Vercel 工具時瀏覽器會跳出來授權，按 Allow 就好，之後完全自動。
把專案推到 GitHub
回到剛剛建網站的對話，送出：
幫我把這個專案推到 GitHub
Claude 會用 gh 幫你建一個新的 repo、把目前的 commit 推上去，最後印 repo 網址給你。
發布到 Vercel
接著送：
幫我把這個專案發布到 Vercel
Claude 會透過 Vercel MCP 開一個新專案、跟剛剛的 GitHub repo 串好、跑 build，最後給你線上網址。從這時候開始，每次 push 到 GitHub，Vercel 就會自動 redeploy，不用再下指令。