TLDR
這篇文章深入探討如何利用 Claude Code 結合 GSD (Get Shit Done) 框架，將一個簡單的 n8n 自動化工作流（食物記錄應用）轉變為完整的 SaaS 產品。內容涵蓋從產品規劃 (PRD)、前端 Next.js 搭建、Supabase 資料庫與驗證整合、Stripe 金流串接，到最終透過 Vercel 部署的全過程。核心重點在於利用結構化的 AI 開發流程來解決大型語言模型 (LLM) 的「上下文腐爛 (Context Rot)」問題，實現穩定且可重複的軟體開發。
使用 Claude Code 與 GSD 框架構建 SaaS 的完整指南
在當今的 AI 開發領域，我們經常陷入「提示詞祈禱 (Prompt and Pray)」的困境，希望將一大段需求丟給 AI 就能得到完美的應用程式。然而，真正的軟體工程需要結構與控制。本文將詳細解說如何使用 Claude Code 配合 GSD (Get Shit Done) 框架，將一個 n8n 自動化工作流轉化為功能齊全的 SaaS 產品。我們將構建一個名為 "MacroVoice" 的食物記錄應用，並整合前端、後端、資料庫、支付與部署。
為什麼選擇 Claude Code 與 GSD 框架？
在使用 Claude Code 進行開發時，最大的挑戰之一是「上下文腐爛 (Context Rot)」。隨著對話變長，LLM 的準確度會下降。GSD 框架透過將專案拆解為獨立的階段 (Phase) 和任務 (Task)，並為每個任務開啟新的子代理 (Sub-agent) 來解決這個問題，確保每次執行都擁有清新的上下文窗口 (Context Window)。
專案技術棧概覽
| 工具名稱 | 用途 | 連結 |
|---|---|---|
| Claude Code | AI 程式碼生成與專案管理 | Anthropic Claude |
| n8n | 後端工作流自動化 (AI 分析食物) | n8n Automation |
| Supabase | 資料庫 (PostgreSQL) 與使用者驗證 | Supabase Database |
| Stripe | SaaS 訂閱與金流支付 | Stripe Payments |
| Next.js | 前端框架 (React) | Next.js Framework |
| ngrok | 本地開發環境隧道 (Tunneling) | ngrok |
| Vercel | 應用程式部署與託管 | Vercel Deployment |
第一階段：規劃與基礎建設 (Planning & Foundation)
開發的第一步並非直接寫程式，而是透過 Claude Code 制定產品需求文檔 (PRD)。我們在 Claude 中進行對話，明確定義應用程式的功能：透過語音或文字記錄食物，利用 AI 估算營養成分，並將數據存入資料庫。
初始化 GSD 專案後，Claude Code 會生成詳細的路線圖 (Roadmap)。這不僅是規劃，更是 AI 的導航圖。
在基礎建設階段，我們指令 Claude Code 執行以下任務：
- 建立 Next.js 15 專案。
- 配置 Tailwind CSS 與 shadcn/ui 元件庫。
- 設定專案的基礎佈局 (Layout) 與設計系統。
這階段的關鍵在於讓 Claude Code 能夠一步步驗證每個小任務的完成，而不是一次生成所有代碼。
第二階段：資料庫與身份驗證 (Database & Auth)
對於 SaaS 產品，數據安全與用戶管理至關重要。我們選擇 Supabase 作為後端解決方案。透過 Claude Code，我們完成了以下配置：
- 專案設置：獲取 Supabase URL 與 Anon Key，並安全地存儲在
.env.local文件中。 - Schema 部署：執行 SQL 遷移腳本，建立使用者資料表 (Profiles) 與行級安全性 (RLS) 策略，確保使用者只能存取自己的數據。
- 身份驗證：整合電子郵件登入流程。
在測試階段，我們遇到本地端口 (localhost:3001) 與 Supabase 預設 (localhost:3000) 不匹配的問題，透過修改 Supabase 的重定向 URL 設定迅速解決了此問題。這顯示了在使用 Claude Code 時，開發者仍需具備基本的除錯能力。
第三與第四階段：核心邏輯與 n8n 整合
這是應用的核心——食物記錄功能。我們利用 n8n 的 webhook 接收前端傳來的食物描述（如「兩顆雞蛋」），並透過 AI 分析後返回營養數據。
解決本地開發的連接問題
由於我們的應用在本地運行，外部的 n8n 無法直接訪問。這時我們引入了 ngrok：
- 啟動 ngrok 將本地端口暴露到網際網路。
- 將生成的 ngrok URL 配置到 Claude Code 與相關環境變數中。
- 利用 n8n 的 MCP Server 工具協助調試工作流。
這個過程展示了 Claude Code 如何協助處理複雜的系統整合問題，甚至能識別錯誤的工作流 ID。
第五與第六階段：儀表板與 Stripe 金流
SaaS 的商業化依賴於支付系統。我們選擇 Stripe 進行訂閱管理。
- 儀表板 (Dashboard)：建立可視化圖表，顯示卡路里攝取趨勢。利用 Claude Code 生成假數據 (Dummy Data) 來驗證圖表呈現效果。
- Stripe 整合：
- 在 Stripe Sandbox 建立產品與價格 (Price ID)。
- 設置 Webhooks 以監聽訂閱狀態變更（建立、更新、刪除）。
- 實作前端的升級按鈕與後端的權限邏輯（免費版限制記錄次數，Pro 版無限）。
Claude Code 在此階段表現出色，能夠自動處理繁瑣的 API 金鑰配置與 Webhook 簽名驗證。
第七階段與部署：UI 優化與上線
最初的 UI 通常較為簡陋。在最後階段，我們利用 Claude Code 的 "Front-end Design Skill"，參考現代化設計風格（如 Linear 風格），將介面從沉悶的深色模式轉變為清爽的淺色模式，並保留了所有功能邏輯。
最後，透過以下步驟完成部署：
- GitHub：將代碼推送到私有倉庫。
- Vercel：連結 GitHub 倉庫，匯入環境變數（注意將 ngrok URL 更新為生產環境 URL），並執行部署。
信用與引用 (Credits & Citations)
為了確保資訊的準確性與可信度，本開發流程參考了以下權威資源：
- n8n Workflow Automation: n8n.io (Source: Official Documentation)
- Supabase Database: Supabase.com (Source: Official Documentation)
- Stripe Payments: Stripe.com (Source: Official Documentation)
- Anthropic Claude: Anthropic.com (Source: Official Company Site)
- Vercel Platform: Vercel.com (Source: Official Documentation)
作者觀點 (Author's Opinion)
作為一名長期關注 AI 輔助開發的技術人員，這部影片展示的 GSD 框架 深深引起了我的共鳴。我們常遇到的痛點正是 Claude Code 或 ChatGPT 在長對話後的「失智」現象。將開發流程碎片化、模組化，不僅是軟體工程的最佳實踐，更是目前駕馭大型語言模型進行複雜任務的唯一解方。這不再只是關於「寫程式」，而是關於「架構設計」與「AI 調度」。未來的工程師，將更像是指揮家，而 Claude Code 則是我們最強大的樂團。
