實作範例

本章節將帶你用真正的 Vibe Engineering 流程，從零開始建立一個完整的 Web 應用。

完整工作流程

Step 1: 安裝 MCP
    ↓
Step 2: shadcn create 建立專案
    ↓
Step 3: 安裝額外元件
    ↓
Step 4: Supabase AI Prompts 設定 Auth
    ↓
Step 5: 建立 CLAUDE.md SOP
    ↓
Step 6: 競品研究 + Plan Mode
    ↓
Step 7: /ralph-loop 跑 MVP
    ↓
Step 8: Docker 環境測試
    ↓
Step 9: 部署上線

Step 1：安裝必要的 MCP

在開始之前，先安裝這些 MCP 讓 Claude 有完整的開發能力：

# shadcn MCP - 查詢元件文件和範例
npx shadcn@latest mcp init --client claude

# Context7 - 取得最新套件文件
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

# Supabase MCP - 資料庫操作和 Migration
claude mcp add --transport http supabase https://mcp.supabase.com/mcp

# Playwright MCP - 瀏覽器自動化測試（Microsoft 官方）
claude mcp add playwright -- npx @playwright/mcp@latest

# Next.js DevTools - Next.js 最佳實踐
claude mcp add next-devtools -- npx next-devtools-mcp@latest

驗證安裝：

claude
/mcp

Step 2：shadcn create 建立專案

不要用 create-next-app，改用 shadcn create：

1. 前往 ui.shadcn.com/create
2. 選擇你喜歡的設計風格
3. 點擊右上角 Create Project
4. 複製指令到本地執行

# 範例（實際指令從網站複製）
npx shadcn@latest init -c https://ui.shadcn.com/r/xxxxx

這會建立一個已經設定好 shadcn/ui 的 Next.js 專案。

Step 3：安裝所有 shadcn 元件

# 安裝全部基礎元件
npx shadcn@latest add --all

從 Registry 找額外元件

前往 ui.shadcn.com/docs/directory 找需要的進階元件：

# 例如：地圖元件
npx shadcn@latest add "https://ui.shadcn.com/r/map"

# 例如：編輯器元件
npx shadcn@latest add "https://ui.shadcn.com/r/editor"

Step 4：Supabase Auth 設定

直接用 Supabase 官方 AI Prompts：

1. 前往 supabase.com/docs/guides/getting-started/ai-prompts
2. 找到 Setup Auth 的 prompt
3. 直接複製貼到 Claude Code

# 貼上 Supabase 官方的 Auth setup prompt
# Claude 會自動設定好：
# - Supabase client
# - Auth middleware
# - Login/Signup pages
# - Protected routes

Step 5：建立 CLAUDE.md SOP

讓 Claude 建立專案的開發規範：

請幫我建立 CLAUDE.md，包含：

1. 專案資訊和技術棧
2. 目錄結構說明
3. 開發 SOP：
   - Feature dev → Review → Test (pnpm test) → Lint (pnpm lint) → Build (pnpm build)
   - 每個 feature 完成後要 /review
   - 使用 pnpm 或 bun 作為 package manager
4. 常見錯誤提醒
5. Git commit 規範

這樣之後開發時 Claude 就會自動遵循這個 SOP。

Step 6：競品研究 + Plan Mode

研究競品

請幫我分析 [競品網址]：

1. 列出所有功能
2. 推測使用的技術棧
3. 分析 UI/UX 設計模式
4. 找出可以學習的地方
5. 建議如何實作類似功能

use web search

使用 Plan Mode 規劃

/plan 實作 [功能名稱]

Claude 會：

1. 分析需求
2. 列出實作步驟
3. 等你確認
4. 再開始執行

Step 7：/ralph-loop 跑 MVP

使用 /ralph-loop 讓 Claude 自主迭代開發：

/ralph-loop

# 然後描述你要做的功能
實作旅遊規劃網站的核心功能：
1. 首頁展示
2. 行程列表
3. 行程詳情
4. 新增/編輯行程

根據 CLAUDE.md 的 SOP 進行開發

Claude 會自動：

• 開發功能
• Review 程式碼
• 執行測試
• 修正問題
• 繼續下一個功能

Step 8：Docker 環境測試

MVP 完成後，用 Docker 測試確保可以部署：

建立 Dockerfile

FROM node:22-alpine AS base

FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable pnpm && pnpm install --frozen-lockfile

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN corepack enable pnpm && pnpm build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000
ENV PORT=3000
CMD ["node", "server.js"]

更新 next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'standalone',
};

export default nextConfig;

測試建構

docker build -t my-app .
docker run -p 3000:3000 my-app

Step 9：部署上線

# 推送到 GitHub
git add .
git commit -m "feat: MVP complete"
git push

# 部署到 Vercel
vercel

章節導覽

建立 Next.js 專案

• MCP 完整設定
• shadcn create 使用方式
• 元件安裝和 Registry

整合 Supabase

• Supabase AI Prompts
• Auth 設定
• 資料庫操作

部署到 Vercel

• Docker 環境設定
• 部署流程
• 環境變數

關鍵原則

記住這些原則

1. MCP 先裝好 — 讓 Claude 有完整能力
2. 用 shadcn create — 不要自己從頭設定
3. 複製官方 Prompts — Supabase、Next.js 都有
4. CLAUDE.md 定規範 — Claude 會自動遵循
5. Docker 測試 — 確保可以部署
6. Ship first — 先上線再優化

開始吧！

• 建立 Next.js 專案 - 第一步