CLAUDE CODE · 0→1 MVP 實戰教學

← 回到大綱

寫給零基礎的人

從零開始
用 AI 團隊打造
你的第一個產品

從安裝到上線，手把手帶你用 Claude Code 的 AI 團隊框架，做出一個真正能用的東西。

難度零基礎

時長約 2 小時

章節共 11 章

製作 Nelson

CH.0 — 開始之前

02 / 40

什麼是 Claude Code？

一個住在終端機裡的 AI 助手。
你說話，它幫你寫程式。

你不需要會寫程式 — 你只需要會「說清楚你想要什麼」。
它可以被設定成一整個團隊：產品經理、前端、後端、測試，
每個角色各司其職，你只需要當老闆決定方向。

CH.0 — 開始之前

03 / 40

什麼是 MVP？

Minimum Viable Product
最小可行產品

只做最核心的功能，先上線，讓真實的人來用，
看看這個想法到底行不行。行的話，再慢慢加東西。

不做會員系統不做金流不做推薦演算法只做最核心

CH.0 — 開始之前

04 / 40

這份教學會帶你做什麼

四個階段
從零到上線

安裝 Claude Code（約 15 分鐘）
建立 AI 團隊配置（約 30 分鐘）
開發「線上訂餐系統」MVP（約 60 分鐘）
部署上線（約 15 分鐘）

你需要準備

一台電腦（Mac 或 Windows）

一個 Anthropic 帳號（免費）

穩定的網路連線

大約 2 小時的時間

一顆願意嘗試的心

完全不需要程式經驗。每一步都會告訴你「打什麼」和「會看到什麼」。

CH.1 — 安裝 · Mac

06 / 40

Mac

Mac 安裝步驟

Step 1 — 打開終端機（Command + 空白鍵，輸入 Terminal）
Step 2 — 安裝 Homebrew（Mac 的軟體管理員）
Step 3 — 安裝 Node.js（Claude Code 的引擎）
Step 4 — 安裝 Claude Code
Step 5 — 驗證安裝成功
Step 6 — 第一次啟動並登入

# Step 2: 安裝 Homebrew
/bin/bash -c "$(curl -fsSL \
  https://raw.githubusercontent.com/\
  Homebrew/install/HEAD/install.sh)"

# Step 3: 安裝 Node.js
brew install node

# Step 4: 安裝 Claude Code
npm install -g @anthropic-ai/claude-code

# Step 5: 驗證
claude --version   → 1.x.x

# Step 6: 啟動
claude

CH.1 — 安裝 · Windows

07 / 40

Windows

Windows 安裝步驟

Step 1 — 下載 Node.js LTS（nodejs.org）
Step 2 — 打開 PowerShell
Step 3 — 安裝 Claude Code
Step 4 — 驗證與啟動

安裝 Node.js 時，一直按 Next 直到完成即可。

# Step 3: 安裝 Claude Code
npm install -g @anthropic-ai/claude-code

# Step 4: 驗證
claude --version   → 1.x.x

# 啟動
claude

遇到紅色錯誤？常見原因：(1) 網路不穩 (2) Node.js 版本太舊（需 18+）

CH.1 — 安裝

08 / 40

安裝完成確認

三個都打勾，就可以進下一章。

claude --version

顯示版本號，例如 1.x.x

claude

能正常啟動並完成登入

你好

能跟 Claude 打招呼並收到回覆

CHAPTER 2

09 / 40

章節二

建立你的 AI 部門
.claude/ 資料夾

把 .claude/ 想像成你的 AI 公司的辦公室。
裡面放著規章制度、員工名冊、培訓手冊和 SOP。

CH.2 — AI 部門

10 / 40

建立資料夾結構

一個資料夾，
就是你的 AI 部門。

# 建立專案資料夾
mkdir my-first-project
cd my-first-project

# 建立 .claude/ 結構
mkdir -p .claude/rules .claude/agents \
  .claude/skills .claude/commands

資料夾	比喻	放什麼
`rules/`	公司規章	AI 不能違反的紅線
`agents/`	員工名冊	AI 角色的身份與職責
`skills/`	培訓手冊	特定領域專業知識
`commands/`	快捷鍵	一句話啟動整套流程

my-first-project/ ├── .claude/ ← AI 公司總部 │ ├── rules/ ← 公司規章 │ ├── agents/ ← 員工名冊 │ ├── skills/ ← 培訓手冊 │ └── commands/ ← 快捷指令 └── CLAUDE.md ← 公司總覽

CH.3 — CLAUDE.md

11 / 40

核心配置

CLAUDE.md
AI 的總指令書

AI 每次開工前第一個讀的檔案。
你的偏好、風格、底線，全部寫在這裡。

寫太長 AI 反而會忽略重點，保持精簡。

# 三層優先級（高→低）

1. 專案/CLAUDE.md
   ← 只在這個專案裡生效（最高）

2. ~/.claude/CLAUDE.md
   ← 你個人所有專案都會讀到

3. Claude Code 內建
   ← 所有使用者共用的基礎設定
      

用 @rules/security.md 語法引用其他檔案，保持模組化。

CH.3 — CLAUDE.md

12 / 40

動手寫你的 CLAUDE.md

在專案根目錄
建立這個檔案

用任何文字編輯器打開，
貼上右邊的內容。

啟動 Claude 後問它「你知道這個專案是做什麼的嗎？」，如果能正確描述，代表載入成功。

# My First Project

## 專案說明
這是一個線上訂餐系統。讓餐廳可以
展示菜單，讓客人可以線上點餐。

## 技術架構
- 前端：HTML + CSS + JavaScript
- 後端：Supabase（免費雲端資料庫）
- 部署：Vercel 或 Netlify

## 規則
- 使用繁體中文
- API Key 必須用環境變數
- 寫完功能要附帶測試
- 程式碼要加註解

## 引用
@rules/security.md
@rules/coding-style.md

CH.4 — 規則 · security.md

13 / 40

01 規則 Rules

security.md
資安紅線

不管你叫 AI 做什麼，
它都不能違反這些規定。

存放位置：.claude/rules/security.md

# 資安規則

## 絕對不可以做的事
1. 絕對不可以把 API Key、密碼
   寫死在程式碼裡
   - 正確：process.env.API_KEY
   - 錯誤：const key = "sk-abc..."

2. 絕對不可以在前端呼叫
   第三方 API
   - 前端 → 你的後端 → 第三方

3. 所有使用者輸入都必須驗證

4. 錯誤訊息不可暴露內部資訊
   - 正確：「發生錯誤，請稍後再試」
   - 錯誤：「DB error: connection failed」

CH.4 — 規則 · coding-style.md

14 / 40

01 規則 Rules

coding-style.md
程式碼風格

有了規則，
Claude 每次寫程式之前
都會先檢查「有沒有違規」，
品質就穩定很多。

存放位置：.claude/rules/coding-style.md

# 程式碼風格規則

## 基本原則
1. 不可以使用 any 類型
2. 每個函式不超過 50 行
3. 每個檔案不超過 300 行
4. 變數命名要有意義
5. 所有程式碼加上中文註解

## 命名慣例
- 檔案名：小寫加連字號
  (my-component.js)
- 變數：小駝峰
  (userName, orderTotal)
- 常數：全大寫加底線
  (MAX_RETRY_COUNT)

CHAPTER 5

15 / 40

章節五

組建你的 AI 團隊

每個 Agent 都是一個有角色、職責、個性的 AI 身份。
你呼叫它的名字，Claude 就會「變成」那個角色。

CH.5 — 團隊

16 / 40

ALL-TEAM.md · 團隊通訊錄

先建立
團隊的總覽

在 .claude/agents/ 裡建立 ALL-TEAM.md，
定義工作流程：用戶提需求 → 產品經理分析
→ 技術主管審查 → 後端先建 API
→ 前端串接 → 最終審查。

LEADER

技術主管

產品

產品經理

開發

後端工程師

前端工程師

品質

技術主管兼任

CH.5 — 團隊 · Agent 定義

17 / 40

tech-lead.md

# 技術主管 (Tech Lead)

## 你是誰
你是這個專案的技術主管。
負責所有技術決策與品質。

## 行為準則
1. 追求簡潔 — 最簡單的方案
2. 直接說重點 — 有問題直說
3. 資料結構優先 — 先想清楚
4. 不要過度設計 — MVP 夠用就好

## 審查標準
- 有沒有違反 rules/ 的規定？
- 有沒有不必要的複雜度？
- 命名清不清楚？有沒有註解？

product-manager.md

# 產品經理 (Product Manager)

## 你是誰
你是產品經理。你的工作是
把用戶模糊的想法變成清晰的
需求文件。

## 你要做的事
1. 問清楚用戶到底想要什麼
2. 定義 User Stories
3. 列出功能清單 + 優先級
4. 思考邊界情況

## 產出格式
使用 12 段式 README 模板

CH.5 — 團隊 · 開發角色

18 / 40

後端 + 前端工程師

# backend-developer.md
## 你的原則
1. 先設計 Schema，再寫 API
2. 所有輸入都要驗證
3. 錯誤訊息統一格式
4. API 有版本號 (/api/v1/)

# frontend-developer.md
## 你的原則
1. 手機優先（Mobile First）
2. 載入速度要快
3. 操作流程要直覺
4. 處理 loading/error/empty 狀態

存放位置：.claude/agents/

怎麼叫他們出來工作？

用 @角色名
切換角色

YOU 請 @product-manager 幫我規劃訂餐系統的功能。

CLAUDE / PM

好的，讓我先問你幾個問題：1. 單一餐廳還是平台？ 2. 需要線上付款嗎？ 3. 目標客群是誰？

CH.6 — 技能包

19 / 40

03 技能包 Skills

培訓手冊

需要時才拿出來用的專業知識。
官方商店安裝，或自己寫。

# 安裝官方技能包
claude /install skills@anthropics

# 自己寫一個
在 .claude/skills/ 建立 .md 檔案

推薦技能包

skills@anthropics

官方最佳實踐

superpowers

進階流程
TDD、Code Review

frontend-design

前端設計
最佳實踐

自訂技能包範例：在 .claude/skills/ 建立 readme-template.md，寫下產品需求文件的標準結構。

CH.7 — 指令

20 / 40

04 指令 Commands

快捷鍵

一句話啟動整套流程。
打 /team-full 做一個訂餐系統，
整個 AI 團隊就自動開始工作。

# 使用方式
/team-full 我要做一個訂餐系統
/bug-fix 按鈕按了沒反應

# /team-full.md

當用戶輸入 /team-full 時，執行：

## Phase 1: 需求分析
以 @product-manager 身份
分析需求，產出 README.md

## Phase 2: 技術審查
以 @tech-lead 身份
審查需求，決定技術方案

## Phase 3: 資料庫設計
以 @backend-developer 身份
設計資料結構

## Phase 4: 後端開發
以 @backend-developer 身份實作 API

## Phase 5: 前端開發
以 @frontend-developer 身份
做出使用者介面

## Phase 6: 最終審查
以 @tech-lead 身份審查

用戶需求：$ARGUMENTS

CHAPTER 8

21 / 40

核心章節

MVP 實戰
線上訂餐系統

前面 7 章是「打地基」，這一章是「蓋房子」。
用前面設好的 AI 團隊，一步步做出能用的產品。

CH.8 — 實戰 · 8.1

22 / 40

8.1 定義產品

告訴 @product-manager
你想做什麼

YOU

請以 @product-manager 身份，幫我規劃一個「小型餐廳線上訂餐系統」的 MVP。只做最核心的功能，讓客人可以看菜單然後下單。

CLAUDE / PM

核心功能：
- 菜單展示頁（餐點、價格、圖片）
- 點餐頁（選餐點、填數量、基本資料）
- 訂單確認頁（總金額）
- 餐廳後台（看訂單、標記完成）

正在生成 README.md...

CH.8 — 實戰 · 8.2

23 / 40

張資料表

8.2 設計資料庫 — 最關鍵的一步

資料結構
決定一切

就像蓋房子要先打好地基。
設計得好，後面寫程式會很順；
設計不好，後面會一直改。

menu_items 菜單

orders 訂單

order_items 明細

CH.8 — 實戰 · 8.2

24 / 40

資料表設計

三張表的關係

一張訂單 (orders) 可以包含多個品項 (order_items)，每個品項對應一道菜 (menu_items)。

        menu_items ←── order_items ──→ orders
      

-- 1. 餐點資料表
CREATE TABLE menu_items (
  id          UUID PRIMARY KEY,
  name        TEXT NOT NULL,
  description TEXT,
  price       INTEGER NOT NULL,
  image_url   TEXT,
  category    TEXT NOT NULL,
  is_available BOOLEAN DEFAULT true
);

-- 2. 訂單資料表
CREATE TABLE orders (
  id             UUID PRIMARY KEY,
  customer_name  TEXT NOT NULL,
  customer_phone TEXT NOT NULL,
  status         TEXT DEFAULT 'pending',
  total_amount   INTEGER NOT NULL,
  note           TEXT,
  created_at     TIMESTAMPTZ DEFAULT now()
);

-- 3. 訂單明細表
CREATE TABLE order_items (
  id           UUID PRIMARY KEY,
  order_id     UUID REFERENCES orders(id),
  menu_item_id UUID REFERENCES menu_items(id),
  quantity     INTEGER NOT NULL,
  subtotal     INTEGER NOT NULL
);

CH.8 — 實戰 · 8.3

25 / 40

8.3 開發後端 API

告訴
@backend-developer
實作 API

Claude 會自動完成以下工作：

REST API — Supabase 內建
RLS — 設定誰能看什麼資料
Edge Functions — 複雜邏輯
API 文件 — 給前端串接用

YOU 請繼續以 @backend-developer 身份，用 Supabase 實作後端 API。需要：取得菜單、建立訂單、查詢訂單狀態、更新訂單狀態。

Method	Endpoint	說明
GET	/menu_items	取得菜單
POST	/orders	建立訂單
GET	/orders/:id	查詢狀態
PATCH	/orders/:id	更新狀態

CH.8 — 實戰 · 8.4

26 / 40

8.4 開發前端

告訴 @frontend-developer
做出使用者介面

PAGE 01

菜單頁

index.html
展示餐點、價格、圖片

PAGE 02

確認訂單

checkout.html
填名字電話、看總金額

PAGE 03

訂單狀態

order-status.html
客人追蹤訂單進度

PAGE 04

餐廳後台

admin.html
看新訂單、標記完成

style.css app.js 手機優先設計

CH.8 — 實戰 · 8.5

27 / 40

8.5 測試與部署

交給 @tech-lead 做最終審查

STEP 01

Code Review

審查所有程式碼
確認沒有資安問題

STEP 02

檢查密鑰

確認所有 API Key
都在環境變數裡

STEP 03

跑測試

基本功能測試
確保沒有明顯 Bug

STEP 04

部署到 Vercel

上線！
全世界都能用

CH.8 — 實戰 · 8.6

28 / 40

8.6 完成！回顧整個流程

你做的是「決策」和「驗收」。
寫程式的都是 AI 團隊。

角色	做了什麼
你（老闆）	描述想法、回答問題、做決定、驗收成果
產品經理 AI	把想法變成結構化需求
後端工程師 AI	設計資料庫、建立 API
前端工程師 AI	做出使用者介面、串接 API
技術主管 AI	審查品質、做最終部署

CH.9 — 進階 · MCP

30 / 40

外部工具串接

MCP
連接外部世界

讓 AI 直接操作你的工具 —
Supabase、GitHub、Figma 等。
不用手動複製貼上資料。

// .mcp.json (settings.json)
{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server"
      ]
    }
  }
}

// 設定後 Claude 就能
// 直接讀寫你的資料庫
    

CH.9 — 進階 · Hooks

31 / 40

自動品管 Hooks

AI 做完事，自動有人來把關。

事前 · PreToolUse

動手前先攔住

AI 準備執行某個動作之前先檢查。
例：要刪資料庫，直接擋下。

事後 · PostToolUse

做完後自動掃描

AI 寫完程式後再檢查。
例：有沒有把密碼寫進程式碼。

BLOCK · 嚴重，先修

WARNING · 完成前記得修

INFO · 純提醒

CH.9 — 進階 · FAQ

32 / 40

常見問題

Claude 怎麼突然忘了？

上下文長度限制。把重要的事寫在 CLAUDE.md 或 rules/ 裡，每次都會被載入。

可以同時跑多個 Agent 嗎？

可以。無依賴的任務可以平行執行。技術主管可以指派多個 Agent 同時工作。

CLAUDE.md 要寫多長？

越精簡越好。拿掉某一行 AI 也不會出錯，那就刪掉。

怎麼跟團隊共用設定？

專案裡的 .claude/ 加入 Git。個人的 ~/.claude/ 不要加。

CH.10 — 下一步

34 / 40

官方資源

全部都是官方或社群維護的資源。

資源	網址	用途
使用教學	docs.anthropic.com/en/docs/claude-code	官方文件
最佳實踐	anthropic.com/engineering/claude-code-best-practices	官方建議
技能包商店	github.com/anthropics/skills	下載官方技能包

學習路徑

YOU ARE HERE

初級

能用 Claude Code 做出 MVP

中級

MCP、Hooks、自訂 Skills

THEN

進階

10-Phase 流程、團隊共享

GOAL

專家

Plugin 生態系、Cross-AI

END

35 / 40

最後一句話

你不需要成為
程式設計師。
你需要成為
好的 AI 團隊管理者。

學會描述需求、設定規則、驗收成果 — 這才是真正重要的技能。

← 回到大綱

製作 Nelson

從零開始用 AI 團隊打造你的第一個產品

一個住在終端機裡的 AI 助手。你說話，它幫你寫程式。

Minimum Viable Product最小可行產品

四個階段從零到上線

安裝 Claude Code

Mac 安裝步驟

Windows 安裝步驟

三個都打勾，就可以進下一章。

建立你的 AI 部門.claude/ 資料夾

一個資料夾，就是你的 AI 部門。

CLAUDE.mdAI 的總指令書

在專案根目錄建立這個檔案

security.md資安紅線

coding-style.md程式碼風格

組建你的 AI 團隊

先建立團隊的總覽

用 @角色名切換角色

培訓手冊

skills@anthropics

superpowers

frontend-design

快捷鍵

MVP 實戰線上訂餐系統

告訴 @product-manager你想做什麼

資料結構決定一切

三張表的關係

告訴@backend-developer實作 API

告訴 @frontend-developer做出使用者介面

交給 @tech-lead 做最終審查

你做的是「決策」和「驗收」。寫程式的都是 AI 團隊。

進階技巧

MCP連接外部世界

AI 做完事，自動有人來把關。

動手前先攔住

做完後自動掃描

常見問題

Claude 怎麼突然忘了？

可以同時跑多個 Agent 嗎？

CLAUDE.md 要寫多長？

怎麼跟團隊共用設定？

接下來做什麼？

官方資源

你不需要成為程式設計師。你需要成為好的 AI 團隊管理者。

從零開始
用 AI 團隊打造
你的第一個產品

一個住在終端機裡的 AI 助手。
你說話，它幫你寫程式。

Minimum Viable Product
最小可行產品

四個階段
從零到上線

建立你的 AI 部門
.claude/ 資料夾

一個資料夾，
就是你的 AI 部門。

CLAUDE.md
AI 的總指令書

在專案根目錄
建立這個檔案

security.md
資安紅線

coding-style.md
程式碼風格

先建立
團隊的總覽

用 @角色名
切換角色

MVP 實戰
線上訂餐系統

告訴 @product-manager
你想做什麼

資料結構
決定一切

告訴
@backend-developer
實作 API

告訴 @frontend-developer
做出使用者介面

你做的是「決策」和「驗收」。
寫程式的都是 AI 團隊。

MCP
連接外部世界

你不需要成為
程式設計師。
你需要成為
好的 AI 團隊管理者。