Claude Code 從零搭一個前端項目（React / Vue）：先寫規格、再分步實現，用瀏覽器和鉤子做驗證

本文根據 Claude Code 官方文檔《Best practices for Claude Code》《Use Claude Code with Chrome》《Common workflows》《Choose a permission mode》整理，資料核對於 2026-11-05。配圖為本站整理的示意圖，不是介面截圖。本站（bigolab.com）不是 Anthropic 官方網站。

適用於誰

• 想用 Claude Code 從空目錄做出一個 React 或 Vue 頁面、小應用的人；
• 以前讓 AI 一句話生成整站，結果樣式亂、點不動的人；
• 不太會前端，但想學會「怎麼管着 AI 做」的人。

結論先說

1. 先規格，後代碼：不確定要什麼時，官方建議讓 Claude 採訪你，直到能寫出規格，再寫進 SPEC.md，然後開新會話照着做。
2. 用計劃模式定腳手架，確認框架、目錄和要裝的依賴，再讓它動手。
3. 給它能判斷對錯的東西：構建的退出碼、類型檢查、測試、瀏覽器裏的真實頁面。官方說，沒有檢查手段，Claude 只能憑「看起來做完了」收工。
4. 貼設計圖：官方說可以直接粘貼設計稿或報錯截圖進提示詞；要完整度，官方推薦的措辭是 be ambitious，並說明空狀態、錯誤狀態等範圍。
5. 必須每次執行的檢查用鉤子，不要只寫在 CLAUDE.md。

圖：本站根據 Claude Code 官方文檔：Best practices 整理的示意圖

第一步：讓它採訪你，寫出 SPEC.md

官方的原話思路是：你還沒想清楚時，不用自己先想清楚再提示，讓 Claude 採訪你，直到它能寫出規格。它會用選擇題問你沒定下來的部分。

提示詞 1：採訪並寫規格

text
我想做一個【例如：個人記帳網頁】的前端項目，只有想法，還沒細想。
請採訪我，直到你能寫出規格為止，問題盡量用選擇題，每次最多問 3 個。
需要弄清楚的包括：核心頁面和功能、數據存在哪裏（本地還是接口）、要不要登入、適配手機還是電腦、有沒有設計稿、哪些功能明確不做。
採訪結束後把結果寫進 SPEC.md，包含頁面清單、功能清單、不做的事、驗收標準（每條能被檢驗）。

寫完後開一個新會話，這樣構建從乾淨的上下文開始，並且 SPEC.md 就是後面審查時對照的文件。

第二步：計劃模式定腳手架

用 claude --permission-mode plan 啟動，或在會話裏按 Shift+Tab 直到狀態欄顯示 ⏸ plan mode on。計劃模式下 Claude 只讀不改，提方案，你批准後才動手。詳見 /guides/claude-code-plan-mode。

提示詞 2：腳手架方案

text
請閱讀 SPEC.md，為這個項目提出腳手架方案，先不要創建任何文件：
1）用 React 還是 Vue，各給一句理由，並推薦一個（我對兩者都不熟）；
2）構建工具、包管理器、需要安裝的依賴，每個依賴說明用途，能不裝就不裝；
3）目錄結構；
4）如何驗證：構建命令、類型檢查命令、單個測試怎麼跑、開發伺服器怎麼啟動；
5）分成幾個里程碑，每個里程碑做完後我能在瀏覽器看到什麼。

批准後讓它搭好空項目，並把第 4 條的命令寫進 CLAUDE.md。官方明確說，CLAUDE.md 裏最有用的一行就是跑檢查的命令；它還應該包含怎麼只跑一個測試文件。不要寫太長，寫法見 /guides/claude-md-agents-md。

第三步：按里程碑實現，每步有檢查

提示詞 3：一個里程碑一輪

text
現在實現里程碑 1：【內容】。
要求：1）只改與本里程碑有關的文件；2）完成後運行構建命令和類型檢查，有錯誤就讀輸出並修復，直到通過；3）告訴我怎麼啟動開發伺服器、在瀏覽器看到什麼。
本里程碑做完就停下，不要提前做下一個。

如果你有設計稿，官方說可以把截圖粘貼進提示詞，並建議明確範圍，比如：

text
按這張設計稿實現首頁。be ambitious：空狀態、加載狀態、錯誤狀態、表單校驗和鍵盤操作都要處理，不要只做靜態佈局。

第四步：讓它在真實瀏覽器裏看

官方的 Chrome 集成讓 Claude Code 能打開瀏覽器標籤頁，讀取控制檯報錯和頁面狀態，對照設計稿檢查，也能測試表單和用戶流程。用法是 claude --chrome 啟動；前提是裝了 Claude in Chrome 擴展（1.0.36 及以上）、使用 Pro、Max、Ultra、Team 或 Enterprise 的直接 Anthropic 套餐，並用 /login 登入；官方說明 WSL 裏不支持，並且用 API Key 或 claude setup-token 的長期令牌登入時 Chrome 集成保持關閉。遇到登入頁或驗證碼，它會暫停等你處理。瀏覽器相關的產品見 /guides/claude-in-chrome。

提示詞 4：瀏覽器驗證

text
請在瀏覽器打開開發伺服器的首頁，依次：1）查看控制檯有沒有報錯；2）把頁面和設計稿對比，列出明顯不一致的地方；3）測試【新增一條記錄】這個流程，包括提交空表單時的提示。
把發現的問題列出來，再逐個修復，修完重新檢查一遍。給我看控制檯的最終狀態。

第五步：用鉤子把檢查變成硬規則

CLAUDE.md 裏寫「改完要跑類型檢查」，Claude 多數時候會照做，但不是每次。官方的辦法是 Stop 鉤子：Claude 每次想結束回合時運行你的腳本，退出碼為 2 就讓它回去繼續做。官方示例（pnpm 版本，換成你的包管理器）寫在 .claude/settings.json：

json
{
  "hooks": {
    "Stop": [
      {
        "hooks": [
          { "type": "command", "command": "pnpm tsc --noEmit 1>&2 || exit 2" }
        ]
      }
    ]
  }
}

官方說明：連續阻止八次且期間沒有工具調用時，Claude Code 會放行並結束回合。格式化也可以用 PostToolUse 鉤子，在每次 Edit 或 Write 之後運行 Prettier。鉤子的完整用法見 /guides/claude-code-hooks。

提示詞 5：最後對照規格審查

text
請用一個子智能體對照 SPEC.md 審查當前實現：檢查每條驗收標準是否做到，邊界情況是否有測試；
只報告影響正確性的缺口，跳過代碼風格。然後運行構建命令，把輸出貼給我。

圖：本站根據官方 Best practices 與 Chrome 文檔整理的示意圖

提示詞裏值得寫明的幾件事

官方最佳實踐反覆強調：Claude 讀代碼能得到的資訊不必重複，讀不到的要告訴它。前端項目裏典型的「讀不到」的資訊有：設計稿和品牌規範（貼截圖即可）、要兼容哪些瀏覽器和螢幕寬度、接口什麼時候才有（沒有的話先用假數據，並寫明哪些數據是假的）、可訪問性要求、文案由誰提供。把這些寫進 SPEC.md 的「約束」一節，之後每一輪提示都可以只寫一句「按 SPEC.md 做」。另外，官方也提醒不要讓 CLAUDE.md 無限變長，每一行都會佔用 Claude 每次任務的注意力，所以組件命名、目錄約定這類內容寫一遍就夠。

常見問題

Q：React 和 Vue 選哪個？

官方文檔不替你選。讓 Claude 在計劃階段分別說明理由，再結合你想找的工作、熟悉的團隊或要用的組件庫決定。

Q：它裝了一堆我不認識的依賴，怎麼辦？

在提示詞裏寫「能不裝就不裝，每個依賴說明用途」，並在計劃模式裏先審批。預設的權限模式會在運行命令前詢問，見 /guides/claude-code-permission-modes。

Q：做到一半想換方案？

連按兩次 Esc 或輸入 /rewind 可回退到之前的檢查點，詳見 /guides/claude-code-rewind-checkpoints-undo。

訂閱和額度

從零做項目要多輪對話，建議分里程碑、及時開新會話。訂閱選擇見 /chongzhi/claude-code，價格和額度以官方頁面當前顯示為準。

相關教學

• /guides/claude-code-best-practices：官方最佳實踐
• /guides/claude-in-chrome：Claude in Chrome
• /guides/claude-code-hooks：鉤子怎麼寫

參考資料

• Claude Code 文檔：Best practices for Claude Code — https://code.claude.com/docs/en/best-practices
• Claude Code 文檔：Use Claude Code with Chrome — https://code.claude.com/docs/en/chrome
• Claude Code 文檔：Common workflows — https://code.claude.com/docs/en/common-workflows
• Claude Code 文檔：Choose a permission mode — https://code.claude.com/docs/en/permission-modes