這篇 Claude Code 教學寫給完全沒用過的人：從安裝 Claude Code 開始，一路做出你的第一個網站，再把它發布到網路上，拿到一個任何人都打得開的網址。全程用 Claude Desktop 操作，大部分步驟都是「把一句話貼給 Claude」，不用自己寫程式。
Claude Code 是什麼？
Claude Code 是 Anthropic 官方的 AI 程式助手。跟在聊天框裡一問一答的 Claude 不一樣，Claude Code 會直接在你的電腦上動手：讀寫專案裡的檔案、執行指令、跑測試、把改好的程式存進版本紀錄。你描述想要的結果，它自己規劃步驟去做。
Claude Code 有好幾種用法：終端機（CLI）、Claude Desktop 桌面版的 Code 分頁、VS Code 擴充功能，還有網頁版。這篇用 Claude Desktop，有圖形介面，對新手最友善。
Claude Code 要錢嗎？費用與方案
Claude Code 包含在 Claude 的付費方案裡，免費方案不能用。個人方案的價格如下（2026 年 10 月 Claude 官網）：
| 方案 | 月費（美金） | 能用 Claude Code 嗎？ |
|---|---|---|
| Free | 0 | 不能 |
| Pro | 月繳 20；年繳平均每月 17 | 可以 |
| Max | 100 起 | 可以，用量額度更高 |
照著這篇做完，Pro 就夠用。之後如果每天長時間用 Claude Code、常碰到用量上限，再升級 Max。實際價格與額度以 Claude 官網的方案頁 為準。
開始之前你需要的東西
- 一臺 Mac（Windows 也能用 Claude Code，但這篇的畫面和步驟都以 Mac 示範）
- 一個 Claude 帳號
- 帳號升級到 Pro 或 Max 方案
1. 安裝 Claude Code：下載 Claude Desktop 桌面版
Claude Desktop 是 Anthropic 官方的桌面 app，Claude Code 就在它的 Code 分頁裡，後面整套工作流都在這裡完成。這一步把開發工具、Claude Desktop、跟 Claude Code 的設定一起搞定。
A. 裝 Xcode Command Line Tools
Xcode Command Line Tools 是 Apple 官方的開發者工具包，裡面有 Git 跟後面會用到的東西。Mac 右上角找到放大鏡的圖案，點下去會跳出輸入框，輸入 Terminal 打開它：
把下面這行貼進終端機按 Enter：
xcode-select --install
系統會跳出一個視窗問你要不要裝，按「安裝」就行，需要等個幾分鐘。
B. 下載並打開 Claude Desktop
裝完打開，用剛剛升級好的帳號登入。首頁大概長這樣：
視窗上方有 Chat、Cowork、Code 三個分頁，Code 就是 Claude Code。後面要貼給 Claude 的指令，都在 Code 分頁送出。
C. 打開「免確認模式」
順便把 Claude Code 的免確認模式打開，等下實際用 Claude Code 時才不會每跑一個指令都被問「OK 嗎？」點 Claude Desktop 左下角自己的名字 → 選 Settings → 左側選單點 Claude Code，把 Allow bypass permissions mode 跟 Allow auto permissions mode 兩個開關都打開：
習慣終端機的人：也可以用一行指令安裝
如果你比較習慣終端機，Claude Code 也可以不透過 Claude Desktop、直接用官方的安裝指令裝在終端機裡：
curl -fsSL https://claude.ai/install.sh | bash
裝好之後在專案資料夾裡輸入 claude 就能開始，第一次會開瀏覽器請你登入。這篇後面都用 Claude Desktop 示範，新手照著做就好，不用另外裝。
2. 認識 Claude Code Skills，裝一個建網站用的 Skill
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 的 Code 分頁，把下面這串貼進輸入框送出：
幫我安裝 https://github.com/bobwei/create-nextjs/blob/main/SKILL.md
Claude Code 會自己讀這個網址、把 Skill 抓下來、放到該放的地方：
裝好之後，後面要建網站的時候，跟 Claude 說「幫我建一個新網站」，它就會照這個 Skill 的步驟把專案開好。
3. 用 Claude Code 做出你的第一個網站
在 Code 分頁把下面這句貼進輸入框送出：
幫我建一個新網站
Claude Code 會照剛裝好的 Skill 把專案建起來，拉範本、裝依賴、把 dev server 跑起來。跑完它會印一個本地預覽網址：
http://localhost:3000
複製貼進瀏覽器就能看到剛做好的網站。之後想改什麼，繼續跟 Claude 講就行。
4. 建立 GitHub 帳號
GitHub 是放程式碼的地方，專案放上去就有完整版本紀錄，可以回溯到任何時期，可以多人協作。免費註冊就能用。
A. 註冊帳號
填 email、設密碼、選 Free 方案，一路按到底就好。
B. 安裝 GitHub CLI
GitHub CLI（gh）讓你跟 Claude 能在終端機直接操作 GitHub，建 repo、推 code、發 PR 都一行指令搞定。裝好之後，跟 Claude 說「幫我把這個專案推到 GitHub」，他就會自己用 gh 處理，不用你切到瀏覽器手動建 repo。
在 Code 分頁送出：
幫我安裝 GitHub CLI 並登入我的帳號
Claude 會幫你把 gh 裝起來，再跑 gh auth login 把瀏覽器叫出來完成授權。
5. 認識 MCP，把 Claude Code 接上 Vercel
MCP 是什麼？
MCP（Model Context Protocol，模型上下文協定）是 Anthropic 在 2024 年底提出的開放標準，目的是讓 AI 工具和外部服務之間有一個統一的「插頭」。可以把它想成 AI 界的 USB-C，以前每接一個新服務都要寫一套客製介面，現在大家用同一條協定講話就行。2025 年之後 OpenAI、Google DeepMind 也都跟進採用，已經是業界共通的接法。
Claude Code 裝了某個服務的 MCP 之後，就能直接呼叫那個服務的功能，常見的例如：
- 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 都自動處理好。
點「Continue with GitHub」用剛才的 GitHub 帳號登入授權，方案選 Hobby（免費）。
安裝 Vercel MCP
Vercel 有官方的 MCP server，host 在 https://mcp.vercel.com/，裝起來之後 Claude 就能直接幫你建 Vercel 專案、發布、查 logs，不用切到瀏覽器手動點。
在 Code 分頁送出：
幫我安裝 Vercel MCP
Claude 會幫你跑 claude mcp add 把它接起來。第一次實際用到 Vercel 工具時瀏覽器會跳出來授權，按 Allow 就好，之後完全自動。
6. 把網站推到 GitHub、發布到 Vercel
回到剛剛建網站的那個工作階段，送出：
幫我把這個專案推到 GitHub
Claude 會用 gh 幫你建一個新的 repo、把目前的 commit 推上去，最後印 repo 網址給你。
接著送：
幫我把這個專案發布到 Vercel
Claude 會透過 Vercel MCP 開一個新專案、跟剛剛的 GitHub repo 串好、跑 build，最後給你線上網址。從這時候開始，每次 push 到 GitHub，Vercel 就會自動 redeploy，不用再下指令。
到這裡，你已經用 Claude Code 從零做出一個網站，而且發布上線了。
加分：用講的下指令
跟 Claude Code 對話時，用講的比打字快得多，長 prompt 尤其有感。我自己用的是 Typeless，一個 AI 語音輸入 app，講話自動轉成文字、自動修掉口語贅字、保留你的語氣。想看實際操作可以看使用教學。
常見問題
Claude Code 免費可以用嗎？
不行。Claude Code 只包含在付費方案裡（個人是 Pro、Max，公司是 Team、Enterprise），免費方案打開 Code 分頁也用不了。最便宜的是 Pro，月繳 20 美金。
Windows 可以用 Claude Code 嗎？
可以。Claude Desktop 有 Windows 版，Code 分頁一樣能用；終端機版在 Windows 10 以上也能裝。這篇的畫面是 Mac，Windows 上的流程大致相同，第 1 步的 Xcode Command Line Tools 是 Mac 才需要的。
不會寫程式也能用 Claude Code 嗎？
可以。這篇整個流程你只需要把指令貼給 Claude、看它做、在需要時按同意。會寫程式的好處是你看得懂它改了什麼、能更精準地說出要改哪裡，但不是開始的門檻。
Claude Code 跟一般的 Claude 聊天差在哪？
聊天的 Claude 只能「說」：給你建議、寫一段程式讓你自己複製。Claude Code 能「做」：直接改你電腦裡的檔案、執行指令、看執行結果再修正，一路做到完成。
延伸閱讀
學會 Claude Code 之後，接著可以試試人不在電腦前也能用：