Claude Code 入門教學：90 分鐘起一個個人網站（唔係 developer 都做到）

情境

你聽過 Claude Code 講到神乎其神，但又驚自己唔係 developer 用唔到。

事實係：你淨係要識開 Terminal、貼幾條 command。其他嘅嘢 Claude Code 自己同你傾。 呢篇用一個具體 project 教你：起一個個人簡介網站，部署到 vercel.com，全程約 90 分鐘。

完成後你會學到：

• Claude Code 點裝
• 點用日常語言同佢交代任務（唔使識 code syntax）
• 點部署到 production
• 點搞清楚一個你成日撞到嘅 error message 係咩意思

Caveat：呢篇假設你部係 Mac，識用 Terminal app（就算淨係識 cd、ls）。如果連 terminal 都未用過，呢篇可能太深，要先睇返一個 terminal 入門教學。

跟住做

1. 裝 Claude Code（10 分鐘）

開 Terminal，貼以下 command：

npm install -g @anthropic-ai/claude-code

如果 npm 都未裝過，先去 nodejs.org 裝 Node.js（會連埋 npm）。

裝完試行：

claude --version

見到 version number 就 OK。

2. 認證

claude login

佢會打開你嘅瀏覽器，登入 Claude 賬戶。 登入完返去 Terminal，會見到 Authentication successful。

3. 建立 project folder

mkdir my-website
cd my-website
claude

呢條 claude command 啟動 Claude Code。你會見到 prompt 變成 > 等你輸入。 由呢度開始，你唔需要識任何 code，淨係用廣東話／英文同佢講你要做乜。

4. 用呢個 prompt 開始

我想整一個個人簡介網站。要求：技術：用 Next.js 15 (App Router)、TypeScript、Tailwind CSS
頁面：
首頁 - 我嘅名、一句自我介紹、聯絡方式（email、LinkedIn、Threads）
/about - 我嘅背景，3-4 段
/work - 列出我做過嘅 3 個 project，每個有 title + 描述 + link
設計風格：
簡潔、白底
用 serif 字體做標題
mobile-friendly
唔好搞 dark mode、唔好加多餘 animation
請：
起好個 Next.js project
整三條 route
用 placeholder 填內容（我之後自己改）
完成後話我點跑 dev server 睇效果
順便話我點部署到 Vercel

Claude Code 接住會：

• 停低同你確認佢明白
• 跑一連串 commands（npx create-next-app、整 component file 等）
• 每行關鍵 command 之前都會問你「OK 唔 OK」

你需要做嘅嘢：撳 enter 確認。其他冚唪唥 Claude 整。

5. 跑起 dev server

Claude 整完之後會話：

你而家可以 run npm run dev，喺瀏覽器開 http://localhost:3000

你貼條 command 入 Terminal，按 enter。瀏覽器去 localhost:3000，你會見到網站 live。

6. 改內容

返去 Claude Code prompt，講：

首頁嘅自我介紹改做：「我係 [你嘅名]，喺 [行業] 做 [職位]。鍾意寫文章同行山。」About 頁改做我以下 3 段：
（貼三段你自己嘅 about）

Claude 會打開正確嘅 file，改返你要嘅嘢，唔需要你開 editor。

7. 部署去 Vercel

help me deploy this to Vercel.I haven't connected Vercel before — please walk me through.

Claude 會：

• 叫你 install vercel CLI
• 跑 vercel login（你瀏覽器簽入）
• 跑 vercel（佢自己 deploy）
• 畀返你一個 xxx.vercel.app URL

呢個 URL 即時 live 喺 internet，全世界都可以 access。

變化例子

變化 1：唔識點開頭，叫 Claude 幫你理清個 project

如果你連自己要乜都未諗清楚，可以叫 Claude 同你一齊諗：

我想整個個人網站，但未諗清楚要乜頁面、放乜內容。
你問我 5 條問題，幫我理清個 project 嘅範圍。
答完之後出一個簡單嘅 plan 畀我確認，再開始整。

變化 2：撞到 error 唔識點

整下整下撞 error message？貼返畀 Claude：

我跑 npm run dev 收到以下 error，請幫我睇下乜事，點搞掂。
唔該用淺白嘅中文解釋，當我唔係 developer。【貼 error message】

變化 3：擴充網站

部署完之後，幾日之後想加 blog：

喺呢個網站加一個 /blog route。
要求：
用 MDX 寫文章
列表頁顯示所有 post（最新喺前）
每篇 post 有獨立 URL
設計跟返現有風格
加完之後 commit 同 deploy 上 Vercel。

拆解：點解 work，同邊度會仆街

跟到上面就已經整到個網站出嚟。下面呢段係畀**想由「跑一次得咗」做到「過幾個月返嚟改都唔會炒車」**嘅人——初學者可以跳過，唔影響你跟住做。

vibe coding 最呃人嘅地方係：第一次撳 enter 個個網站靚仔咁出咗嚟，唔代表你之後改一改唔會整爛佢。呢個 project，識嘢嘅人即刻會問呢幾個位，你早啲知就唔會喺度跌錢：

1. 冇 git，等於冇返轉頭嘅路 Claude Code 每次改 file 係直接改落你部機，唔會自動幫你存返舊版本。改改下叫佢加個 feature，佢順手改爛咗首頁，你想 undo 都唔知 undo 去邊。

• 會出事：改到一半發現之前 work 嘅嘢冇咗，但又冚唪唥蓋咗，得返而家炒咗嘅版本。
• 點救：一開頭就叫 Claude「幫我 git init 同寫個 .gitignore，每做完一個 work 嘅 step 就 commit 一次」。咁就算之後整爛，都可以叫佢 reset 返去上一個 commit。

2. localhost 行到，Vercel 唔代表行到 你部機行緊嘅係 dev mode，Vercel deploy 嗰陣係 production build，兩者要求唔同——dev 容許嘅嘢（隨手 import、type 唔啱）production build 會直接 fail。

• 會出事：localhost 睇得好好，一 deploy 就紅字 build failed，個 vercel.app URL 開唔到。
• 點救：deploy 之前叫 Claude「本機行一次 production build（npm run build）確認過先 deploy」。有 error 就連紅字一齊貼返畀佢，叫佢用淺白中文解釋同改。

3. 同一句嘢，Claude 第二次唔一定明返你頭先講過嘅 context 傾耐咗、改多咗，session 一長 Claude 可能會「唔記得」你早幾步嘅決定，例如你話過唔好 dark mode，傾到後尾佢又加返。

• 會出事：你以為佢知嘅嘢佢唔知，改出嚟同你預期唔同，越改越亂。
• 點救：重要嘅規矩寫低落一個 CLAUDE.md file（叫 Claude 幫你開），佢每次都會讀。或者開新一輪任務時，喺 prompt 度簡短覆述返「記住：白底、serif 標題、唔好 dark mode」。

4. 撳 enter 撳到上癮，連刪嘢都照 approve Claude 每跑一條 command 前會問你 OK 唔 OK，但跟得耐你會習慣性狂撳 enter。一旦佢提議嘅係 rm（刪 file）或者覆蓋成個 folder，你照撳就真係刪咗。

• 會出事：手快撳咗，刪咗唔想刪嘅嘢，或者覆蓋咗你改過嘅內容。
• 點救：睇住佢嗰句 command 先撳。見到 rm、-rf、mv、> 呢類字眼，停一停，唔肯定就問返 Claude「呢句會刪咩？刪咗有冇得返轉頭？」。有咗第 1 點嘅 git，就算撳錯都救得返。

5. 「幫我加個 feature」≠「幫我整一個會長久 work 嘅 feature」 Claude 好擅長即刻整一個睇落 work 嘅嘢，但唔代表佢揀嘅做法之後好維護。例如叫佢加 blog，佢可能直接 hardcode 幾篇文落 code 入面，你下次想加文又要返嚟搞。

• 會出事：頭一兩篇好快，到第十篇先發現結構唔啱，要推倒重嚟。
• 點救：講需求時連「之後點維護」一齊講，例如「我之後想自己加文，唔想每次都返嚟改 code」。Claude 識得就會揀一個畀你自己加內容嘅做法（例如用 MDX file），而唔係寫死。

呢幾個位，就係「跑一次 demo 得咗」同「過幾個月返嚟都信得過」之間嘅距離。

邊個適合呢條路？

呢條路最啱以下幾類人：

• 想學 code 但唔知由邊度開始——Claude Code 係一個好溫和嘅入門，因為佢同你傾偈，唔係要你識 syntax
• 打工仔／創作者想擁有自己嘅 internet asset——個人網站、portfolio、newsletter 嘅自架版本，全部由呢度開始
• 已經有 idea 但唔識落手整——你描述得到，Claude Code 就整到

唔啱：

• 想完全自動化嘅人——Claude Code 仲係需要你睇過同確認
• 怕用 terminal 嘅人——呢個係硬性要求，避唔到

完成第一個 project 之後，你會發覺呢個做法完全唔似你以為嘅「寫 code」。佢更似 「同一個有耐性嘅資深工程師合作，但你唔使畀人工佢」。