用 Claude Code 整第一個個人網站：由本機草稿到預覽

第一個網站，先做細啲

先整三頁：首頁介紹自己、作品頁列出兩三項作品、聯絡頁提供一個你願意公開嘅聯絡方法。暫時唔加登入、付款、資料庫或者訂閱功能。

Claude Code 可以幫你建立同修改檔案，但你仍然要核對內容、睇實際畫面，同決定幾時公開。跟住做唔代表一定喺指定時間完成，亦唔保證生成出嚟嘅程式一次就完全正確。

1. 準備工具同內容

先按Claude Code 安裝教學完成安裝同登入。Claude Code 本身嘅安裝要求，同網站專案需要嘅 Node.js 版本係兩回事。

呢個例子用 Next.js。建立專案前，按Next.js 官方安裝文件確認當前 Node.js 要求、建立方式同套件管理工具；唔好將舊教學寫死嘅版本當成最新選擇。

準備以下內容：一段短介紹、作品名稱與真實連結、可公開聯絡方式，以及你有權使用嘅圖片。未準備好嘅資料可以暫留明確標記，但未填好之前唔好公開。

喺自己平時放專案嘅位置，建立一個未被其他專案使用嘅資料夾：

mkdir my-personal-site
cd my-personal-site
claude

資料夾名只係例子。如果已經存在，先睇清楚內容，唔好覆蓋。

2. 先講清楚成品，再建立專案

幫我喺目前空資料夾建立一個 Next.js 個人網站。先核對官方安裝要求、我部機嘅 Node.js 同套件管理工具，再說明會建立嘅檔案及採用版本。

網站有三頁：首頁、作品、聯絡。用繁體中文，排版簡潔，手機同桌面都易讀。導覽要可以用鍵盤操作，圖片要有合適替代文字。

內容如下：

- 自我介紹：[填寫]
- 作品名稱、簡介同連結：[填寫]
- 可公開聯絡方式：[填寫]

未有資料就標記待補，唔好虛構客戶、經驗、推薦語或成效。先完成本機草稿，唔加登入、付款、追蹤或收集資料嘅表單，唔部署。

Claude 建議安裝套件時，睇清楚名稱同用途。有現成框架功能可以做到嘅細網站，唔需要順手加一大串服務。

完成後，叫佢列出啟動命令。若專案使用 npm，並且 package.json 有 dev script，一般會係：

npm run dev

用終端機實際顯示嘅網址開瀏覽器，唔好假設一定係某個 port。工作做完可喺該終端機按 Ctrl+C 停止開發伺服器。

3. 每次只改一組清楚嘅問題

「靚啲」好難驗收。試吓描述你睇到嘅問題：

首頁喺手機寬度下，標題佔咗太多行，作品卡之間亦太密。

請保留現有內容，調整標題大小、行距同卡片間距。桌面版仍然保持清楚層次。修改後檢查窄螢幕有冇橫向捲動，並交代你實際檢查咗咩畫面；未有瀏覽器工具就列出我需要人手確認嘅項目。

改完自己再開手機或者瀏覽器窄視窗睇一次。檢查文字會唔會截斷、按鈕夠唔夠容易按、顏色對比清唔清楚。畫面截圖睇落正常，唔代表連結同鍵盤操作都正常。

4. 本機完成，要有可核對嘅結果

至少逐頁睇過內容，撳過導覽同作品連結，用 Tab 鍵行一次主要操作，確認冇遺留示例資料。再按 package.json 嘅實際 script 執行建置；npm 專案通常係：

npm run build

如果報錯，將相關錯誤交畀 Claude，要求先指出原因，再做最小修正。唔好為求「綠燈」直接停用型別檢查或者刪走功能。

請 Claude 最後列出修改檔案、測試命令與結果、未解決問題。你亦可以用 Git 保存一個可回復版本；提交前先檢查差異，確保冇私密資料同不應公開嘅檔案。

5. 預覽同正式公開分開處理

要分享畀人睇時，先揀部署服務同確認帳戶設定、費用與存取限制。請 Claude 根據該服務當前官方文件整理部署步驟，再由你決定是否執行。

預覽網址未必自動公開，正式網址亦唔會因為建置成功就保證所有頁面可用。部署後要再次核對網址、頁面、手機版、外部連結，同確定顯示嘅版本係今次改動。

需要文章功能時，再考慮用 Markdown 或 MDX 管理內容；需要收集表單資料時，先定義資料用途同存放方式。第一個網站有清楚內容、可用導覽同穩定部署，就已經有一個可以逐步改善嘅基礎。