跳轉至

Vibe Coder 指南

給用描述來寫程式的開發者。 不需要命令列專業知識。只要告訴 Boring 你想要什麼。

🎨 什麼是 Vibe Coding？

Vibe Coding 是一種開發風格： 1. 描述 你用自然語言想要什麼 2. 讓 AI 生成實作 3. 審查 並精煉輸出

你專注於「什麼」，AI 處理「如何」。

🚀 你的第一個 Vibe 會話

步驟 1：從 /vibe_start 開始

你：You: /vibe_start 我想建立一個深色主題的個人部落格

# 或者使用 boring-route CLI
$ boring-route "我想建立一個深色主題的個人部落格"

步驟 2：回答問題

Boring：好主意！讓我了解你的願景：

        1. 靜態網站還是有後端？
        2. 需要哪些功能？（評論、搜尋、標籤）
        3. 設計風格？（極簡、雜誌風、科技感）
        4. 目標平台？（桌面、行動優先）

你：1. 靜態網站就好
    2. 標籤和搜尋
    3. 極簡乾淨
    4. 行動優先

步驟 3：看著你的部落格誕生

Boring：完美！這是我會建立的：

        📁 blog/
        ├── index.html       （首頁）
        ├── posts/           （部落格文章）
        ├── styles/          （深色主題 CSS）
        ├── js/              （搜尋功能）
        └── tags/            （標籤頁面）

        開始實作...
        ✅ 建立基礎結構
        ✅ 實作深色主題
        ✅ 新增搜尋功能
        ✅ 建立範例文章

        你的部落格準備好了！開啟 index.html 查看。

💡 Vibe Coder 快速提示

你想要什麼 只需說
建立新東西 /vibe_start [描述你的想法]
修復錯誤 /quick_fix 或 boring-route "修好它"
提交變更 /smart_commit 或 boring-route "提交變更"
全端應用 /full_stack_dev 或 boring-route "建立應用..."

範例

/vibe_start 建立一個有城市搜尋的天氣儀表板

/vibe_start 建立一個有拖放功能的任務管理器

/vibe_start 為攝影師製作一個作品集網站

/full_stack_dev my-store "Next.js + Stripe + Supabase"

🎯 Vibe Coding 模式

模式 1：描述體驗

❌ 不要這樣說： 

建立一個使用 useState 處理表單的 React 元件

✅ 這樣說： 

我想要一個感覺流暢的註冊表單，在使用者輸入時
即時顯示驗證錯誤

模式 2：專注於使用者

❌ 不要這樣說： 

實作帶有刷新令牌的 JWT 認證

✅ 這樣說： 

使用者應該能夠保持登入一週，不需要
重新輸入密碼

模式 3：展示，不要告訴

❌ 不要這樣說： 

新增錯誤處理

✅ 這樣說： 

當出錯時，顯示一個友善的訊息，解釋
發生了什麼以及使用者可以做什麼

🔄 Vibe 工作流程

┌─────────────────────────────────────────────────────────┐
│                   VIBE 工作流程                          │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   1. 描述           2. 審查          3. 精煉           │
│   ──────           ──────          ──────           │
│   告訴 AI 你       查看結果         「把按鈕           │
│   的願景                            做大一點」         │
│                                                         │
│        ↓                 ↓                 ↓            │
│                                                         │
│   「我想要一個     「看起來不錯，   AI 調整            │
│   很吸睛的         但需要更多       然後你就           │
│   著陸頁」         顏色」           完成了！🎉          │
│                                                         │
└─────────────────────────────────────────────────────────┘

🛡️ 安全第一（即使對 Vibe Coder 也是）

影子模式保護你

即使你不是命令列專家，Boring 也會保護你：

Boring：我想刪除舊的快取檔案。

        ⚠️ 此操作需要你的批准：
        - 刪除：cache/*.json（15 個檔案）

        [批准] [拒絕] [顯示詳情]

你始終掌控一切。 危險操作需要你的確認。

📱 給行動/網頁開發者

建立行動應用

/vibe_start 建立一個 React Native 支出追蹤器：
- 漂亮的圓餅圖
- 簡單的收據掃描
- 月度預算

建立網頁應用

/vibe_start 我想要一個專案管理的 SaaS 儀表板
看起來像 Linear 但更簡單

建立 API

/vibe_start 為食譜分享平台建立一個 REST API
有使用者帳號和食譜評分

🎮 給遊戲開發者

/vibe_start 建立一個 2D 平台遊戲：
- 可愛的機器人角色
- 5 個難度遞增的關卡
- 收集金幣和高分榜

🤖 給 AI/ML 開發者

/vibe_start 建立一個情感分析網頁應用：
- 接受使用者評論作為輸入
- 顯示正面/負面/中立及信心度
- 有漂亮的視覺化

💬 常用短語

短語 會發生什麼
「讓它更好」 AI 改善代碼品質
「新增測試」 AI 撰寫測試案例
「讓它更快」 AI 優化效能
「讓它更漂亮」 AI 改善 UI/設計
「解釋這個」 AI 撰寫文檔
「修復這個」 AI 除錯問題

🆘 當你卡住時

尋求幫助

我對認證的運作方式感到困惑。
你能像我是 5 歲一樣解釋嗎？

重新開始

讓我們重新開始。我想採取不同的方法。

更具體

按鈕在手機上看起來不對。
你能在小螢幕上讓它全寬嗎？

另請參閱