【Vibe Coding】Claude Code 教學｜怎麼用一句話串連資料庫、建立全端網站？

準備好跟 Claude Code 一起進入 Vibe Coding 的世界了嗎？即使你從來沒寫過後端，也不懂資料庫，只要一句話，Claude Code 就能一步步帶你完成一個真正能用的全端網站！

這篇教學文會結合 Claude Code 的官方使用指南，加上我個人「從前端進化成全端」的實戰經驗，陪你從安裝到部署、從迷惘到上線，一起體驗「Vibe Coding」的威力。

Claude Code 安裝篇：先把魔法師請回家

在我們開始讓 Claude 幫你寫後端之前，先確認你的開發環境準備好了。就像召喚一位強大的幫手，你需要提供正確的魔法陣（也就是基本安裝環境）。

你需要準備：

• 一台筆電（macOS、Linux、或是 Windows＋WSL 都可以）
• Node.js 16+
• Anthropic API 金鑰（Claude 的溝通管道）
• 至少 4GB RAM（建議 8GB 以上，跑起來比較順）
• 穩定的網路（Claude 是雲端 AI，需要上網）

安裝 Claude Code：

最推薦的安裝方式是使用 NPM：

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

如果裝好之後跑不出來，可能是路徑沒加好，可以試試：

export PATH="$PATH:$(npm bin -g)"

其他進階方式像是 Docker、Arch Linux、WSL 都支援，依照你慣用的系統選擇就好。

登入方式：兩種選擇

Claude Code 支援兩種登入方式，你可以自由選擇：

1. Claude 訂閱帳號登入（如果你有 Pro 或 Max 訂閱，直接登入即可）
   • Pro：每月 $20 美金
   • Max：每月 $100 美金，提供更高 API 上限
2. Anthropic Console 帳號登入（使用 API 金鑰計費，依照用量計費）
   • 適合開發者、工程師、想做專案整合的人
   • 可從 https://console.anthropic.com 建立 API 金鑰

登入畫面長這樣：

實戰篇：讓前端網站「活起來」！

我的網站只有 HTML/CSS/JS，漂亮歸漂亮，但完全沒辦法儲存資料、登入帳號或串接資料庫。

第一步：對 Claude 說

Give me a plan to build the backend and make it a real website that can use.

他立刻給我一份 Todos 清單，包含後端、資料庫、驗證、檔案存取、部署都幫我計劃好了！

第二部：請他幫你生成 README.md

這一步超級重要。你可以跟 Claude 說：

Please turn the plan into a README.md with step-by-step todos.

這樣你們之間的合作就有「共同目標」了，不會跑題、也更好追進度。

第三部：實作開始！

我每次只說：

implement

Claude 就會根據 README 一條條開始實作。他會告訴我要在哪裡放 API 路由，要去 Supabase 建哪些表格（還附上 SQL 指令）、部署建議用 Railway、甚至連 .env 怎麼設都幫我寫好。

Claude 直接幫我生好 SQL，我只要打開 Supabase 的 SQL Editor，貼上去按一下「RUN」，資料表就建好了，完全不用自己設欄位！

第四步：每次都提醒他「依照 README 實作」

According to the README.md, please implement the next todo.

這樣可以避免他一次生成太多、不一致或走偏的情況，保持節奏感。

Claude Code 其實有記憶 + 外掛能力！

Claude Code 支援 MCP（Model Context Protocol），也就是他能記住你的專案上下文，甚至可以串接像 Git、PostgreSQL、Terminal 等工具。

你可以輸入：

claude mcp
claude --allowedTools "Edit,View,mcp__git__*,mcp__postgres__*"

這代表他可以直接幫你 push Git、查資料庫、看錯誤訊息，真正做到像一個實習生＋副工程師的角色。

使用心得與 AI 代理工程師的未來

在這個過程中，我從來沒寫過後端，但只花了大約 1 小時，就透過 Claude 的協助，把網站變成一個有登入註冊、連上資料庫的真正 Web App。

我學到的事：

• Claude 不會一次幫你完成所有事，但他會「陪你寫」
• 錯誤難免，但他會幫你 debug
• 建議你跟他講「我要什麼」，再說「一步步做給我看」

我的夢想是：

未來只要一句話：「幫我做一個會員制音樂分享平台」，AI 就能全部搞定。

現在也許還沒那麼快，但 Claude Code 正在朝這方向進化。

如果你也是前端工程師，或想跨入 AI 協作式開發的世界， 這一行，就可以改變你接下來的開發習慣：

claude "build me a real website."

Claude，開始吧 🧑🏻‍💻✨

喜歡我們的內容嗎？
如果這些資訊對你有幫助，也歡迎用一杯咖啡的價格支持我們繼續創作 ☕
👉 真心感謝您