Vibe Coding 指南：用直覺與 Claude Code 一起開發

Vibe coding 是建構軟體的新方式。不用自己寫每一行程式碼，而是描述你想要什麼，讓 AI 將它實現。

本指南教你如何用 Claude Code 有效地進行 vibe coding。

什麼是 Vibe Coding？

定義

Vibe coding = 用自然語言描述你的願景，讓 AI 處理實作。

傳統寫程式：
你 → 寫程式碼 → 除錯 → 測試 → 重複

Vibe Coding：
你 → 描述意圖 → AI 實作 → 你審查 → 迭代

心態轉變

傳統	Vibe Coding
「我要怎麼實作這個？」	「我想建造什麼？」
專注於語法	專注於結果
寫完再除錯	描述再優化
技術精確	創意願景

Vibe Coding 原則

原則 1：描述，不是指令

❌ 太技術性：

建立一個 React functional component，使用 useState hook 
管理 counter state，有 increment 和 decrement 函式，
渲染一個 div 包含兩個按鈕...

✅ Vibe 風格：

做一個簡單的計數器，有加和減按鈕。
讓它好看一點。

AI 懂 React、hooks 和樣式。讓它做它的工作。

原則 2：用結果思考

❌ 實作導向：

我需要實作 JWT 認證配合 refresh tokens，
存在 httpOnly cookies 裡，建立受保護路由的 middleware...

✅ 結果導向：

我需要使用者能夠登入並保持登入狀態。
保持安全。

原則 3：透過對話迭代

Vibe coding 是對話，不是獨白。

你：「做一個 todo app」

Claude：[建立基本 todo app]

你：「加一個深色模式開關」

Claude：[加入深色模式]

你：「讓它看起來更現代，像 Notion 那樣」

Claude：[優化樣式]

你：「完美！現在加入拖放來重新排序」

Claude：[加入拖放功能]

每個訊息都建立在前一個之上。

Vibe Coding 工作流程

第一階段：設定 Vibe 🎵

從大局開始：

「我想建一個個人財務追蹤器。
乾淨簡潔的感覺，像現代銀行 app。
使用者應該能加入支出、看圖表、設定預算。」

Claude 會：

• 理解整體願景
• 選擇適當的技術
• 建立專案結構
• 建立初始實作

第二階段：感受一下 🖐️

測試建立的東西：

「執行並給我看看我們有什麼」

[Claude 執行 app]

「圖表看起來太雜亂了。簡化它們。
只顯示這個月的支出分類。」

第三階段：優化 Vibe 🎨

具體說明感覺，而不是實作：

「顏色感覺太企業化了。讓它更友善、
更個人化。也許暖色調？」

「字體感覺太嚴肅了。更隨性但仍然可讀的東西。」

「我想要加入支出時有滿足感。
加一個微妙的動畫。」

第四階段：打磨 ✨

透過對話做最後修飾：

「讓手機版更好」
「沒有資料時加一個漂亮的空狀態」
「載入感覺很突兀。讓它更順暢」

有效的 Vibe Coding 提示詞

開始一個專案

## 高 Vibe 開場白

「幫我建一個感覺像 [靈感來源] 的 [app 類型]」
  範例：「幫我建一個感覺像 Bear 的筆記 app」

「我想為 [受眾] 做 [結果]」
  範例：「我想為家庭料理愛好者做一個食譜整理器」

「建立一個幫助人們 [目標] 的東西」
  範例：「建立一個幫助人們追蹤習慣的東西」

描述設計

## 設計 Vibes

「讓它看起來 [形容詞]」
  - 「讓它看起來高級」
  - 「讓它看起來有趣」
  - 「讓它看起來值得信任」

「風格像 [參考]」
  - 「風格像 Stripe 的儀表板」
  - 「風格像日本設計」
  - 「風格像奢侈品牌」

「感覺應該是 [感受]」
  - 「感覺應該是平靜且專注」
  - 「感覺應該是充滿活力且有趣」
  - 「感覺應該是專業但平易近人」

修復問題

## Vibe 除錯

不要說：「第 47 行有 null reference error」
說：「我點提交按鈕的時候有東西壞掉了」

不要說：「CSS grid 沒有正確對齊」
說：「手機上的排版看起來怪怪的」

不要說：「API 回傳 500 errors」
說：「儲存功能不能用」

真實 Vibe Coding 過程

專案：個人作品集網站

你：我想建立一個作品集網站。
我是攝影師。感覺應該是極簡的，
讓照片自己說話。想像畫廊展覽，
不是 Instagram。

Claude：[建立極簡作品集，乾淨的格子、
全螢幕圖片檢視、細微的動畫]

你：不錯的開始！但格子感覺太死板了。
我想要照片大小有些變化，像 Pinterest 
的瀑布流但更精緻。

Claude：[實作優雅的瀑布流]

你：喜歡。但 hover 效果感覺很廉價。
更細微的東西。只是輕柔的淡入或縮放，
不是那種彈跳效果。

Claude：[優化互動效果]

你：完美。現在我需要一個關於我的區塊。
保持極簡。只是我的照片、簡短的自我介紹、
和聯繫資訊。不要花俏。

Claude：[加入關於區塊]

你：畫廊和關於之間的轉場太突兀了。
順暢一點。

Claude：[加入平滑的頁面轉場]

你：🔥 就是這個。

花費時間：20 分鐘 結果：專業的作品集網站

進階 Vibe 技巧

「讓它感覺像」模式

最強大的 vibe coding 模式：

「讓登入流程感覺像 Apple 的登入」
「讓儀表板感覺像駕駛艙」
「讓設定頁面感覺熟悉」
「讓入門導覽感覺歡迎」

一句話傳達大量設計決策。

「這個但更好」模式

迭代時：

「這個但更乾淨」
「這個但更現代」
「這個但間距更好」
「這個但更無障礙」

「我不喜歡」模式

有時候知道你不想要什麼更清楚：

「我不喜歡載入時會跳動」
「我不喜歡那個按鈕的顏色」
「我不喜歡感覺這麼擁擠」
「我不喜歡它看起來像其他所有 app」

「更多/更少」模式

微調：

「更多留白」
「更少動畫」
「更多對比」
「更少視覺噪音」
「更多個性」
「更少企業感」

為 Vibe Coding 優化的 CLAUDE.md

# 專案：[你的專案名稱]

## Vibe
- 整體感覺：[平靜/活力/專業/有趣]
- 設計靈感：[參考]
- 色彩情緒：[暖/冷/中性/大膽]
- 字體風格：[現代/經典/隨性/技術]

## 反 Vibes（要避免的）
- 不要讓它看起來像通用模板
- 避免任何感覺雜亂的東西
- 不要有刺眼的顏色對比
- 不要有任何感覺慢或卡頓的東西

## 使用者體驗目標
- 使用時應該感覺 [形容詞]
- 使用者 [動作] 時應該感到 [情緒]
- 主要流程應該是 [特徵]

## 技術偏好（選填）
- 如果需要選擇：[React/Vue/Svelte]
- 樣式：[Tailwind/CSS/styled-components]
- 只有在你在意的時候才指定！

Vibe Coding 最適合的場景

最佳使用案例

✅ 個人專案

• 副專案和實驗
• 作品集作品
• 學習新技術

✅ MVP 和原型

• 快速驗證想法
• 客戶 demo
• 黑客松專案

✅ UI/UX 重點工作

• 登陸頁面
• 行銷網站
• 互動體驗

✅ 創意專案

• 生成式藝術
• 互動故事
• 遊戲

何時要更具體

⚠️ 複雜商業邏輯

• 付款處理
• 資料驗證規則
• 合規要求

⚠️ 效能關鍵

• 即時系統
• 大資料處理
• 優化演算法

⚠️ 團隊專案

• 程式碼標準很重要
• 需要文件
• 其他人必須理解

常見 Vibe Coding 錯誤

錯誤 1：過度指定

❌ 不好：

使用 React 18 配合 TypeScript strict mode，用 
forwardRef 實作組件，加入 PropTypes 做執行時
驗證，用 CSS modules 做樣式配合 BEM 命名慣例...

✅ 更好：

我需要一個按鈕組件。讓它無障礙且容易自訂。

錯誤 2：描述結果不夠

❌ 不好：

讓它更好

✅ 更好：

卡片感覺太重了。更淡的邊框、
更圓的角、更柔和的陰影。

錯誤 3：忽略審查

Vibe coding 仍然需要你看輸出：

你：[請求什麼]
Claude：[實作]
你：[實際看一下並給回饋]

如果不完美就不要說「完美」。

Vibe Coder 的工具箱

必備短語

不要說…	說…
「實作 X」	「幫我建一個 X」
「修復 bug」	「…的時候有東西不對」
「加 CSS」	「讓它看起來…」
「重構成」	「整理一下這個」
「優化」	「讓它更快/更順」

情感詞彙

學會描述對程式碼的感覺：

• 正面：乾淨、順暢、滿足、愉悅、直覺
• 負面：笨重、突兀、困惑、沉重、雜亂
• 方向性：更簡單、更大膽、更細微、更暖、更冷

參考資料庫

建立你可以參考的 app/網站心智資料庫：

• 極簡：Linear、Bear、Things
• 有趣：Notion、Figma、Slack
• 高級：Apple、Stripe、Airbnb
• 技術：GitHub、VS Code、Vercel

Vibe Coding 練習

練習 1：登陸頁面

提示：「幫我做一個冥想 app 的登陸頁面。
感覺應該是平靜祥和的。想像日出，
不是企業健康計畫。」

練習：透過 5 次迭代優化，
不提及任何 CSS 屬性。

練習 2：儀表板

提示：「建一個簡單的分析儀表板。
應該感覺你在掌控中，而不是被壓垮。
讓它真正有用，不只是漂亮的圖表。」

練習：只專注於要顯示什麼資訊
以及使用時應該有什麼感覺。

練習 3：組件

提示：「建立一個讓上傳感覺
輕鬆且清晰的檔案上傳組件。
使用者永遠不應該懷疑正在發生什麼。」

練習：迭代互動，而不是程式碼。

從 Vibe 到生產

最終，vibe-coded 專案需要結構：

階段 1：Vibe（自由創造）
↓
階段 2：審查（檢查 AI 建造了什麼）
↓
階段 3：測試（確保它能運作）
↓
階段 4：強化（加入適當的錯誤處理）
↓
階段 5：文件化（為未來的你解釋）

用 vibe coding 獲得動力，然後加入嚴謹性。

---

重點摘要

1. 描述結果，不是實作 - 專注於什麼，不是怎麼做
2. 透過對話迭代 - 一層一層建造
3. 使用感覺和參考 - 「像 Stripe」勝過好幾段規格
4. 信任 AI - 它知道技術細節
5. 仍然要審查輸出 - Vibe coding 不是不 coding

Vibe coding 不是偷懶——是利用 AI 擅長的部分，讓你能專注於人類最擅長的：想像和創造。

去建造些什麼吧。只要描述你看到的。✨

---

相關文章：Director Mode、思維轉變、Claude Code 快速開始