Vibe Coding 完全指南 — 用 Claude Code 超越 90% AI 玩家

課程導覽：你將學到什麼

這支影片是一套從零到進階的 Vibe Coding 完整課程，涵蓋六大主題。無論你是完全沒有寫程式基礎的小白，還是已經在使用 AI 工具的進階用戶，這裡都有適合你的內容。

課程架構概覽：

章節	主題	時間 ↗
第一章	課程導覽	00:00:00
第二章	Claude Code 核心功能與高效操作	00:02:18
第三章	Vibe Coding 與 AI 前端設計開發	01:09:04
第四章	RAG 知識庫與多模態資料分析	02:13:05
第五章	讓 AI 轉變為自動化助手	03:49:00
第六章	自動化研究報告與資料安全	05:01:38

課程中所有模板都可以免費下載，進入影片描述欄的「AI Agent 大師學院」社群，在 YouTube 資源區找到今日影片即可取得。

建議學習路徑：

你的情況	建議從這裡開始
完全沒用過 Claude Code	第二章 → 第三章（依序）
已會基本操作，想自動化	第五章 → 第六章
需要幫客戶建 AI 系統	第四章（RAG）→ 第五章
只想快速做出產品	第三章（Vibe Coding 前端）

Claude Code 核心功能與高效操作

⏱ 00:02:18 – 01:09:04

2.1 財務分析與報表自動化

00:02:18

Claude Code 可以直接存取本地財務文件，進行分析、計算並生成報表，完全取代人工整理 Excel 的流程。

應用場景：

財務報表自動解讀與摘要
跨檔案數據彙整（多個 Excel / CSV）
異常數據偵測與告警

2.2 企業搜尋：跨平台知識整合

00:13:26

Claude Code 可以成為「公司內部的 Google」——從 Slack、Email、Notion、Google Drive 等所有碎片化資訊中，一次性搜索並彙整答案。

工作原理： 你只需搜一個關鍵字（事件名稱、人名、產品），Claude Code 會跨平台翻閱所有授權的工作工具，把散落各處的資訊整合成一份清晰的回答。

已支援整合的平台：

Slack / Teams 對話記錄
Gmail / Outlook 電子郵件
Notion / Confluence 文件庫
Google Drive / SharePoint 檔案

2.3 排程任務：讓 AI 自動每日執行

00:24:34

不需要手動觸發——Claude Code 可以設定排程任務，在指定時間自動執行工作流程。

操作方式：

# 在 Claude Code 中設定每日定時任務
# 例如：每天早上 8 點自動執行股票篩選腳本
# 方法一：New Test 新增排程
# 方法二：直接告訴 Claude：「幫我每天早上跑這個分析」

典型應用：

每日早晨自動生成市場新聞摘要
定時爬取競品資訊並更新報告
自動追蹤股票趨勢並篩選目標

2.4 多專案並行管理

00:35:42

Claude Code 支援同時開啟多個專案視窗，各自獨立執行任務，互不干擾。

實際應用：

視窗 1：處理客戶 A 的報告生成
視窗 2：執行程式碼測試
視窗 3：監控市場數據爬蟲

這是 Claude Code 相比傳統 AI 工具的核心優勢之一——它不只是對話框，而是真正的工作代理人，可以並行執行多個不相關的任務。

2.5 Airtable 整合：結構化資料管理

00:46:50

Claude Code 可以直接讀寫 Airtable，讓資料管理從手動輸入轉為全自動更新。

使用場景：

自動將爬取的市場資料寫入 Airtable
根據 Airtable 資料自動生成報告
客戶資料庫的自動維護與更新

2.6 實戰配置：CLAUDE.md 與 MCP 設定

00:57:58

CLAUDE.md 是專案的「行為手冊」——放在專案根目錄，每次啟動 Claude Code 都會自動讀取，相當於給 AI 的永久背景資訊。

# 專案說明
這是 [公司名] 的 [專案名稱]，主要功能是 [核心目的]。

## 技術棧
- 前端：React + TypeScript
- 後端：Node.js + Express
- 資料庫：Supabase

## 重要規則
- 所有 API Key 必須從 .env 讀取，不得寫死
- 測試前先確認資料庫連線
- 提交前執行 npm run lint

MCP 連接配置（~/.claude/claude_desktop_config.json）：

{
  "mcpServers": {
    "airtable": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-airtable"],
      "env": { "AIRTABLE_API_KEY": "你的Key" }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-filesystem", "/你的工作目錄"]
    }
  }
}

Vibe Coding 與 AI 前端設計開發

⏱ 01:09:04 – 02:13:05

3.1 什麼是 Vibe Coding？

01:09:04

Vibe Coding 是一種用自然語言描述需求，讓 AI 直接生成完整可運行產品的開發方式。你不需要寫程式，只需要清楚說明你想要什麼「感覺」（Vibe）。

傳統開發	Vibe Coding
需要學程式語言	用自然語言描述
前後端分開處理	AI 一次生成完整產品
調試耗時費力	AI 自動修復錯誤
需要設計師配合	AI 生成設計 + 程式碼

3.2 Stage MCP：AI 輔助 UI/UX 設計

01:19:44

Stage 是一個專為 Vibe Coding 設計的 MCP 工具，讓 Claude Code 具備完整的 UI/UX 設計能力。

安裝 Stage MCP 後，你可以：

用自然語言描述介面風格（「現代簡約」「暗透明背景+模糊效果」）
AI 自動生成設計稿並直接轉為可用程式碼
將已有設計擴展成系列產品模板

# 在 Claude Code 中安裝 Stage MCP
# 告訴 Claude：「幫我安裝 Stage MCP 並配置好」
# Claude 會自動處理安裝和配置

3.3 從描述到產品的工作流程

01:30:24

一個完整的 Vibe Coding 前端開發流程：

描述需求：「我想要一個深色背景、玻璃擬態風格的個人作品集網站」
AI 詢問細節：它會問你顏色、字體、主要功能等偏好
生成設計稿：Stage MCP 生成視覺設計
生成程式碼：自動轉換為 HTML/CSS/React
迭代修改：用自然語言描述修改意見，AI 直接更新

3.4 實戰案例：AI 生成完整 SaaS 產品

01:41:04

在影片中，講師示範了從零開始，僅用自然語言生成一個完整的 SaaS 管理後台，包含：

用戶認證系統
資料可視化儀表板
多頁面導航架構
響應式設計（手機/桌面自動適配）

整個過程無需撰寫任何程式碼，完成時間約 15–20 分鐘。

3.5 MCP 擴充設計能力

01:51:44

除了 Stage MCP，以下 MCP 工具也能大幅提升前端設計品質：

MCP 工具	功能	適合場景
Stage	UI/UX 設計生成	新產品設計、品牌視覺
Figma MCP	設計稿同步	已有設計稿轉程式碼
Framer MCP	動畫效果	需要精緻動效的網站
Vercel MCP	一鍵部署	快速上線產品

3.6 有效的 Vibe Coding 提示詞範例

02:02:24

描述需求的品質直接決定產出品質。以下是影片中示範的有效提示結構：

設計描述模板：

幫我建立一個 [產品類型]，風格是 [視覺風格描述]。
主色調：[顏色]，背景：[淺色/深色]。
主要功能：[功能1]、[功能2]、[功能3]。
目標用戶：[用戶描述]。
參考風格：[品牌或網站名稱，如 Linear / Vercel / Apple]

實際範例：

幫我建立一個 SaaS 分析後台，風格是現代簡約暗色系。
主色調：靛藍 #6366F1，背景：深灰 #0F172A。
主要功能：用戶增長圖表、MRR 儀表板、客戶清單。
目標用戶：B2B SaaS 創辦人。
參考風格：Linear 的設計語言。

RAG 知識庫與多模態資料分析

⏱ 02:13:05 – 03:49:00

4.1 什麼是 RAG？為什麼需要它？

02:13:05

**RAG（Retrieval-Augmented Generation）**是一種讓 AI 能夠「查閱自己的私人資料庫」來回答問題的技術。

沒有 RAG 的 AI： 只能用訓練時學到的公開知識回答，無法存取你的私人文件、公司資料或最新資訊。

有 RAG 的 AI： 先從你指定的知識庫中搜尋相關內容，再結合這些內容生成精準答案。

典型應用：

企業內部問答系統（問公司 HR 政策、流程）
個人知識庫助手（問自己的筆記、研究資料）
客服機器人（基於產品文件回答用戶問題）

4.2 技術架構：Supabase + pgvector

02:29:04

影片中使用 Supabase 作為向量資料庫，搭配 pgvector 擴充實現語義搜索。

所需配置：

# .env 檔案需要填入
SUPABASE_URL=你的Supabase專案URL
SUPABASE_ANON_KEY=你的匿名金鑰
SUPABASE_SERVICE_ROLE_KEY=服務角色金鑰
OPENAI_API_KEY=或其他Embedding模型的Key

架構流程：

文件 → 切片（Chunking）→ Embedding（向量化）
向量存入 Supabase pgvector
查詢時：問題 → Embedding → 向量相似度搜索 → 找到相關片段
相關片段 + 原始問題 → AI 生成答案

4.3 文件上傳與 Embedding 流程

02:45:03

以下是建立知識庫的完整操作流程：

# 1. 讓 Claude Code 幫你建立 RAG 系統
# 告訴它：「幫我建立一個 RAG 知識庫，使用 Supabase 向量資料庫」

# 2. 上傳文件（支援格式）
# PDF、Word、TXT、Markdown、網頁 URL

# 3. 執行 Embedding
# Claude 會自動切片、向量化並存入資料庫

# 4. 測試查詢
# 在 Retrieval Tab 測試搜索效果

4.4 多模態分析：圖片 + 文字一起分析

03:01:02

Claude Code 的多模態能力讓 RAG 不只限於文字文件——你可以同時分析圖表、截圖、設計稿和文字說明。

應用案例：

上傳財務圖表 + 文字報告，讓 AI 交叉分析
上傳產品截圖 + 用戶反饋，生成改進建議
上傳競品資料 + 自家數據，生成對比分析

4.5 實戰：為客戶建立企業知識庫

03:17:01

影片示範了一個完整的企業知識庫建置案例，客戶只需提供：

公司政策文件（PDF）
產品說明書
常見問題清單

15 分鐘內即可建立一個能準確回答公司相關問題的 AI 助手，並部署為網頁版或 API 介面。

功能	實現方式
問答介面	Claude Code 生成前端
知識來源	Supabase RAG
部署	Vercel 一鍵上線
更新知識庫	拖拉新文件即可

4.6 Chunking 策略：決定 RAG 品質的關鍵

03:33:00

文件切片（Chunking）方式直接影響 RAG 的回答準確度，這是多數教學忽略的細節。

三種常見策略比較：

策略	方式	適合文件類型
固定長度切片	每 512 token 切一段	純文字、長篇文章
語義段落切片	依標題/段落邊界切	有結構的文件（FAQ、政策）
滑動視窗切片	切片間有重疊（overlap 50 token）	上下文關聯強的技術文件

讓 AI 轉變為自動化助手

⏱ 03:49:00 – 05:01:38

5.1 Skill 系統：封裝可重複的工作流程

03:49:00

Skill 是 Claude Code 中將成功工作流程固化為可重複呼叫模板的機制。一旦你找到了效果好的工作方式，就將它寫成 Skill，之後只需呼叫名稱就能執行。

Skill 的結構：

skills/
  sales-pipeline-analyzer/
    skill.md        ← 技能說明與觸發方式
    prompt.txt      ← 核心提示詞
    examples/       ← 範例輸入輸出

社群免費 Skills 下載：

Sales Pipeline Analyzer（銷售漏斗分析）
Market Research Report（市場研究報告）
Customer Success Manager（客戶成功管理）
Financial Analysis（財務分析）

5.2 Sales Pipeline Analyzer 實戰

03:59:22

這是影片中示範的核心 Skill，能夠自動分析銷售管道的健康度並生成建議。

功能：

從 CRM 數據分析各階段轉換率
識別卡關的潛在客戶
生成客製化的跟進策略
預測本月/本季成交率

執行流程：

提供 CRM 匯出的 CSV 或 Airtable 連接
呼叫 /sales-pipeline-analyzer
AI 自動分析並生成報告
直接輸出為可分享的文件或簡報

5.3 建立 AI 員工架構

04:09:44

影片中展示了如何用 Claude Code 建立一個多角色 AI 員工系統，每個「員工」有明確的職責和 SOP：

示範案例：B2B 銷售團隊

AI 員工	職責	核心目標
業務開發經理	尋找潛在客戶、初步接觸	每週新增 20 個合格線索
解決方案架構師	分析客戶需求、提案設計	提案準確率 > 80%
客戶成功經理	跟進成交客戶、續約管理	客戶留存率 > 90%

每個角色都有 Claude Code 自動生成的詳細 SOP，包含每日任務、溝通模板、決策樹。

5.4 多 Agent 協作系統

04:20:06

當單一 AI 無法處理複雜任務時，可以建立多個專門化的 Agent 協同工作：

用戶輸入任務
    ↓
協調 Agent（決定分配）
    ↓
┌──────────────────────────┐
│  研究 Agent  │  撰寫 Agent  │
│  資料收集    │  內容生成    │
└──────────────────────────┘
    ↓
品質審核 Agent
    ↓
最終輸出

5.5 N8N 與 Vibe Coding 的結合

04:30:28

N8N 是一個視覺化的工作流程自動化工具，與 Claude Code 搭配使用可以處理更複雜的跨系統整合。

什麼時候用 N8N？

需要定時觸發的長期工作流（每天、每週自動執行）
跨多個外部系統的資料同步
需要 Webhook 接收外部事件觸發的流程

Claude Code 的定位： N8N 負責觸發和流程控制，Claude Code 負責智慧決策和內容生成。

5.6 自己寫一個 Skill：從成功對話到可重複工具

04:40:50

每次你找到「這段對話產出很好」的模式，就是把它變成 Skill 的時機。

標準 Skill 目錄結構：

.claude/skills/
  weekly-report/
    skill.md          ← 觸發條件 + 執行步驟

skill.md 模板：

---
name: weekly-report
description: 根據本週的工作紀錄生成週報
trigger: /weekly-report
---

## 步驟

1. 讀取 `logs/` 目錄下本週所有 .md 紀錄
2. 整理成三個區塊：已完成 / 進行中 / 下週計畫
3. 輸出格式：Markdown，適合直接貼到 Notion
4. 字數控制在 300 字以內，重點導向

5.7 N8N 與 Claude Code 的整合架構

04:51:12

N8N Webhook → Claude Code 的基本接線方式：

N8N 流程：
[Cron 節點] → [HTTP Request 節點] → [Code 節點（呼叫Claude）] → [輸出節點]

Cron：每天早上 8:00 觸發
HTTP Request：GET 競品網站 / RSS feed
Code 節點：
  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: { 'x-api-key': $env.ANTHROPIC_KEY, ... },
    body: JSON.stringify({ model: 'claude-opus-4-5', messages: [...] })
  });
輸出：Slack 通知 / Gmail / Airtable 寫入

自動化研究報告與資料安全

⏱ 05:01:38 – 05:49:55

6.1 機構級研究報告自動生成

05:01:38

結合 Claude Code + N8N + RAG，可以自動生成達到投資機構水準的深度研究報告。

完整流程：

觸發（N8N Cron / Webhook）
    ↓
資料收集 Agent
  - 爬取最新新聞（Firecrawl MCP）
  - 查詢知識庫（RAG）
  - 抓取財務數據 API
    ↓
分析 Agent（Claude Code）
  - 交叉分析多來源資料
  - 識別趨勢與異常
  - 生成洞察與結論
    ↓
撰寫 Agent
  - 按報告模板格式化輸出
  - 生成圖表（Mermaid / Chart.js）
  - 加入引用來源
    ↓
輸出（PDF / Email / Notion）

6.2 市場監控系統建立

05:11:17

自動化市場監控 是本課程最高階的應用，讓 AI 24 小時持續追蹤市場動態並主動通知你。

監控項目範例：

競品網站的內容更新
社群媒體的品牌提及
特定關鍵字的新聞動態
股票/加密貨幣的技術指標觸發

技術棧：

元件	工具	功能
排程觸發	N8N Cron	定時啟動
網頁爬取	Firecrawl / Playwright	取得最新資料
智慧分析	Claude Code	判斷重要性、生成摘要
通知發送	Slack / Email / Discord	推送告警
資料儲存	Airtable / Supabase	歷史記錄

6.3 個人資料安全保護

05:20:56

使用 Claude Code 處理商業或個人敏感資料時，以下安全措施不可省略：

環境隔離：

# 敏感資料永遠放在 .env 檔案，不進 git
echo ".env" >> .gitignore

# 不同客戶/專案使用不同的 API Key
# 定期輪換 Key，降低洩漏風險

資料存取控制：

使用 Supabase Row Level Security（RLS）限制資料存取範圍
每個 Agent 只授予完成任務所需的最小權限
定期審查 MCP 工具的授權範圍

本地 vs 雲端的選擇：

情境	建議方案
個人筆記、創意工作	雲端 API，方便快速
客戶機密資料	本地 LLM（Ollama）或私有部署
財務/法律文件	本地處理，不上傳第三方

6.4 市場監控的 N8N 流程細節

05:30:35

完整的市場監控流程，以「追蹤競品官網更新」為例：

N8N 流程設計：

[Schedule Trigger] 每天早 7:00
    ↓
[HTTP Request] 抓取競品網站內容
    ↓
[Code 節點] 與上次抓取內容做 diff 比較
    ↓
[If 節點] 有變化？
    → 是 → [HTTP Request] 呼叫 Claude API 分析重要性
              ↓
           [Slack / Gmail] 發送摘要通知
    → 否 → 結束，不發通知

Claude API 分析提示詞範例：

以下是競品網站今日更新的內容：
[diff 內容]

請判斷：
1. 這是否是重要的策略性變化？（產品功能、定價、目標市場）
2. 用 3 句話說明這個變化的意義
3. 建議我們是否需要立即回應（是/否，原因）

只在真正重要時標記為「需要關注」，避免資訊轟炸。

6.5 你的下一步

05:40:14

看完這套課程，你已經掌握了從工具操作到系統設計的完整知識。真正的差距在於執行：

選一個最近需要解決的問題，用 Vibe Coding 方式嘗試解決
下載課程中的免費 Skill 模板，在自己的情境下修改使用
把第一個成功的工作流程寫成你自己的 Skill，建立個人化知識庫

Vibe Coding 完全指南 — 用 Claude Code 超越 90% AI 玩家

Vibe Coding 完全指南 — 用 Claude Code 超越 90% AI 玩家

外部資源

第一章：課程導覽

第二章：Claude Code 核心功能與高效操作

2.1 財務分析與報表自動化

2.2 企業搜尋：跨平台知識整合

2.3 排程任務：讓 AI 自動每日執行

2.4 多專案並行管理

2.5 Airtable 整合：結構化資料管理

2.6 實戰配置：CLAUDE.md 與 MCP 設定

第三章：Vibe Coding 與 AI 前端設計開發

3.1 什麼是 Vibe Coding？

3.2 Stage MCP：AI 輔助 UI/UX 設計

3.3 從描述到產品的工作流程

3.4 實戰案例：AI 生成完整 SaaS 產品

3.5 MCP 擴充設計能力

3.6 有效的 Vibe Coding 提示詞範例

第四章：RAG 知識庫與多模態資料分析

4.1 什麼是 RAG？為什麼需要它？

4.2 技術架構：Supabase + pgvector

4.3 文件上傳與 Embedding 流程

4.4 多模態分析：圖片 + 文字一起分析

4.5 實戰：為客戶建立企業知識庫

4.6 Chunking 策略：決定 RAG 品質的關鍵

第五章：讓 AI 轉變為自動化助手

5.1 Skill 系統：封裝可重複的工作流程

5.2 Sales Pipeline Analyzer 實戰

5.3 建立 AI 員工架構

5.4 多 Agent 協作系統

5.5 N8N 與 Vibe Coding 的結合

5.6 自己寫一個 Skill：從成功對話到可重複工具

5.7 N8N 與 Claude Code 的整合架構

第六章：自動化研究報告與資料安全

6.1 機構級研究報告自動生成

6.2 市場監控系統建立

6.3 個人資料安全保護

6.4 市場監控的 N8N 流程細節

6.5 你的下一步