Claude Code 終極教學:從 0 開始讓 AI 幫你寫出好專案

想學程式卻被複雜的環境設定與除錯搞瘋了嗎?這篇教學專為 AI 初學者設計,我們會帶你從零完成安裝,讓你理解如何透過指令,就像在跟朋友聊天一樣,請 Claude 直接在你的電腦上修 Bug、寫測試。看完這篇,你將不再對程式感到焦慮,而是學會如何跟這位最強 AI 助理協作,輕鬆搞定開發大小事。

到底什麼是 Claude Code?

你可以把它想成「有手有腳」的 AI。

在進入教學之前,我們得先釐清一件事:為什麼 Anthropic 已經有了超強的 Claude 3.5 Sonnet 網頁版,還要推出 Claude Code

大家用過網頁版應該都有這種感覺:你就像是在通訊軟體上問一位「遠端顧問」。你把程式碼貼給他,他回你一段建議,然後你再自己手動搬回電腦裡試試看。如果沒動,你還得截圖或複製報錯訊息再傳回去。

說實話,這過程重複幾次後,真的會讓人覺得「我幹嘛不自己寫就好?」。

Claude Code 則是另一種層次的存在。它是 Anthropic 推出的 CLI 工具(命令列介面),簡單來說,它就像是一位「直接坐你旁邊、幫你修好電腦的資深同事」。

它與網頁版最大的不同在於:

  • 理解整個專案(Context):網頁版一次只能讀幾千行,Claude Code 會根據你的問題,主動去翻閱專案中相關的各個檔案,建立起全局觀。
  • 擁有檔案存取權:它不只能「看」你的代碼,如果你授權,它還能直接「改」你的代碼。
  • 具備工具執行力:它能幫你執行 ls 看資料夾有什麼、跑 npm test 看測試有沒有過、甚至跑 git commit

為什麼現在每個人都該試試看?

如果你跟我一樣,曾經在開發時因為以下這些事感到挫折,那 Claude Code 就是你的救星:

  • 脈絡斷層:當你的專案有 20 個檔案,你根本不知道該貼哪一段給 AI 看。
  • 環境噴錯卻無能為力:看到 Terminal 出現一堆紅色報錯,卻不知道怎麼把這些訊息完整傳達給 AI。
  • 重複性的維護工作:像是要把所有的變數名稱從 A 改成 B,或是要為每一條 API 補上註解。

Claude Code 存在的意義,就是要把這些「瑣碎、無聊、讓人想放棄」的過程自動化。我們只需要專注在「邏輯」和「創意」,剩下的搬運和修復工作,就交給它。

只要 5 分鐘,快速安裝

別被「黑底白字」的終端機畫面嚇到了,其實安裝過程就像裝一個小軟體一樣簡單。

前置準備:你需要具備什麼?

  • 帳號權限:目前 Claude Code 支援 Claude ProTeamEnterprise 的訂閱用戶。如果你是個人開發者,確保你的 Claude Console 帳戶裡有足夠的 API 點數(Credits)。
  • Node.js 環境:這是讓工具跑起來的基礎環境。如果你的電腦還沒裝,請到 Node.js 官網 下載安裝(建議選 LTS 版本)。

安裝步驟:三行指令搞定

打開你的終端機(Mac 叫 Terminal,Windows 建議用 PowerShell),照著打入這行:

macOS, Linux, WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Windows CMD:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

這行指令的意思是:「電腦,幫我從網路上下載最新版的 Claude Code 助手,並安裝在全域環境」。

第一次啟動:把它叫出來

安裝完後,切換到你的程式專案資料夾,輸入:

claude

這時候會跳出一個視窗請你登入。登入成功後,你會看到一個專屬的對話框,這代表 Claude 已經正式進駐你的專案了!

圖片來源:Anthropic YouTube

實戰操作:如何跟這位「AI 助理工程師」深度對話?

進入 Claude Code 模式後,你不需要背什麼艱澀的指令,用你平常講話的方式就好。以下我們示範三個最常見的深度應用場景:

場景一:理解與導覽不熟悉的專案

當你接手一個別人的舊專案,檔案結構亂七八糟時:

  • 你可以問:「這專案是用什麼框架寫的?主要的邏輯在哪?幫我畫一個簡單的流程圖。」
  • Claude 會做:它會快速掃描 package.json 或關鍵資料夾,告訴你:「這是一個用 Next.js 寫的專案,核心邏輯在 /src/lib 下,資料庫操作則集中在 /api。」

場景二:自動除錯與修復(Auto-Fixing)

當你在執行程式(例如 python main.py)噴出一堆看不懂的報錯時:

  • 你可以問:「我剛剛執行噴錯了(附上報錯訊息),幫我看看是哪裡寫錯,並直接修復它。」
  • Claude 會做:它會分析報錯路徑,找到出問題的那一行,並呈現一個 Diff(差異對比) 給你看。
    • 紅色代表它想刪掉的舊代碼,綠色代表它想加入的新代碼。
    • 你只需要輸入 yyes,它就會幫你存檔。

場景三:批次處理與重構

假設你要把專案中所有的舊式 function 寫法改成新式的 arrow function

  • 你可以問:「幫我檢查 /components 資料夾下所有的檔案,把所有的傳統函數定義改成箭頭函數,並確保沒破壞任何功能。」
  • Claude 會做:它會一個一個檔案檢查,幫你改完後,甚至還會建議你:「要不要順便幫你跑一下測試,確保改完沒壞掉?」。

Claude Code 的「指令秘笈」

除了直接聊天,Claude Code 還內建了一些非常好用的「斜線指令」,能幫你省下更多時間:

  • /compact (縮減上下文):當你跟它聊太久,對話紀錄太長導致速度變慢或費用增加時,輸入這個指令,它會總結之前的內容並「清空大腦空間」,讓速度恢復。
  • /review (代碼審查):你可以請它:「針對我剛剛寫的這段代碼進行 Review,看看有沒有效能問題或資安漏洞」。
  • /test (寫測試):這對不想寫測試的人是神蹟。輸入 /test幫這個檔案寫 Unit Test,它會自動幫你補齊測試碼。
  • /init (初始化專案):如果你是在一個空資料夾,它會問你想做什麼,然後幫你生成基礎結構。

初學者的 3 個卡關點

根據我們的經驗,新手在用 Claude Code 時,最常卡在下面這三個地方:

  1. 權限恐懼症: 當 Claude 問你:「我可以執行 npm install 嗎?」或「我可以修改 main.js 嗎?」。
    • 解方:請記得,它目前的所有操作都是「非破壞性預覽」。如果你真的怕它弄壞,可以在對話前先用 Git 做一個 commit,萬一它改壞了,你隨時可以用 git checkout . 還原。
  2. 費用焦慮: 因為 Claude Code 會自動讀取檔案(Input Tokens 很大),API 點數掉得比網頁版快。
    • 解方:在啟動時,它會顯示當前的費用估算。建議專門用它來解決「跨檔案」或「複雜報錯」的問題,簡單的小邏輯還是回網頁版問。
  3. 指令混淆: 有時候它會嘗試執行一些你的電腦上沒裝的指令(例如它想用 yarn 但你只有 npm)。
    • 解方:直接在對話中糾正它:「我電腦沒裝 yarn,請用 npm 執行」,它會立刻記住並修正行為。

這工具真的適合你嗎?

我們不想盲目推崇任何工具,Claude Code 有它的強項,也有它的硬傷。

優點 (Why we love it)缺點 (Why we worry)
無縫銜接開發環境:不用在瀏覽器和編輯器之間頻繁切換。成本較高:對於大型專案,頻繁讀取檔案會導致 API 帳單上升。
主動解決問題:它能主動提議執行測試、檢查錯誤,而不只是被動回答。依賴網路:斷網時完全無法工作,且連線品質會影響反應速度。
支援多檔案脈絡:能同時理解 A 檔案與 B 檔案的關聯。安全性門檻:在處理極機密代碼時,仍需遵守公司資安規範。

關於 Claude Code 的 5 個新手 FAQ

Q1:我可以用 Claude Code 來「從無到有」生出一個 App 嗎?

可以,但建議「分階段進行」。不要只說「幫我寫一個外送 App」,而是先說「幫我建立專案架構」,再說「幫我寫出首頁組件」。一步步引導,它的成功率會極高。

Q2:它會看到我電腦裡的其他私人檔案嗎?

不會。它只能存取你啟動指令時所在的那個資料夾(Project Root)。它無法隨意翻閱你的文件夾或照片夾。

Q3:為什麼它有時候會一直重複報錯?

這通常是因為 AI 陷入了「邏輯死循環」。這時候請用 /compact 清除對話,或直接給它一個新提示:「別再嘗試剛才那個方法了,我們試試看用 X 方式解決」。

Q4:Windows 用戶安裝失敗怎麼辦?

Windows 用戶最常遇到環境變數問題。請確保你的 Node.js 有加入路徑,並建議使用 VS Code 內建的 Terminal 來操作,穩定度最高。

Q5:我可以讓它幫我部署到網路上嗎?

可以。如果你有安裝 Vercel 或 Netlify 的 CLI,你可以跟它說:「幫我用 Vercel 部署這個專案」,它會嘗試幫你執行相關指令並回報結果。

官方參考連結:

喜歡這篇文章嗎?

目錄

其他相關文章

學無止盡!再來看看其他教學文章吧!

看到 AI 畫出的字總是亂碼讓你心煩嗎?Ideogram 3.0 正式登場,這次它不只提升了畫質,更強化了文字生成的準確度與排版美感。這篇文章將帶你釐清 Ideogram 3.0 的新功能,包含能動手修改細節的 Canvas 工具,並透過實測告訴你它適合解決哪些工作痛點。
覺得 AI 只能寫文章?這篇將帶你認識 OpenClaw,一個能讓 AI 像真人一樣操作電腦、點擊網頁的開源工具。我們參考李宏毅老師的教學,用白話解構 OpenClaw 的運作原理:從它如何獲得靈魂,到如何利用「心跳機制」自主運作。看完這篇,你會發現自動化處理雜事不再是工程師的專利,大幅降低你對新技術的學習焦慮。
Google 推出全新的 Nano Banana 2(正式名稱 Gemini 3.1 Flash Image),將 Pro 等級的智慧與 Flash 的極速結合。本文將為你拆解這項技術如何解決 AI 繪圖中「不聽話」、「文字亂碼」與「角色不一致」的痛點。無論是 4K 高畫質需求還是即時網路資訊輔助,我們將帶你快速掌握這個讓創意秒速變現的新工具,降低你的學習門檻。