什麼是 Vibe Coding？就像跟 AI 點菜一樣簡單
想像你走表單時，你會說「幫我記錄今天花了多少錢，吃飯 150、交通 60」而不是「請建立一個包含日期、金額、類別欄位的資料庫」。
Vibe Coding 就是這個概念：你說人話，AI 幫你寫程式。
示意圖：左對話框輸入「我要一個記帳 App」
我實測做了 3 個 App，結果超意外
App 1：記帳小幫手（成功！）
輸入：「幫我做一個記帳 App，要有分類圓餅圖，用中文介面」 結果：30 秒生出完整程式碼，包含
- 收入/支出切換
- 12 個預設分類（餐飲、交通、娛樂…）
- 自動統計本月總計
- 圓餅圖視覺化
App 2：待辦清單（差強人意）
輸入：「做一個 Notion 風格的待辦清單」 問題：AI 給的設計太陽春，沒有子任務功能 解法：補一句「要能像 Notion 一樣拖拉排序」，馬上改好功
App 3：股票追蹤器（失敗收場）
輸入：「幫我抓台積電即時股價」 問題：AI 用了需要付費的 API，一般人不會設定 教訓：要加「用免費的 API」這個條件
截圖：三 App 的實際畫面對比
3 步驟開始你的第一次 Vibe Coding
步驟 1：打開 Claude Code
- 免費註冊 Anthropic 帳號
- 點選「Start a new project」
- 選「Web App」範本
步驟 2：用「台灣人說話方式」下指令
❌ 錯誤示範：「建立一個具有 CRUD 功能的資料管理系統」 ✅ 正確示範：「我要一個記帳 App，可以記錄每天花多少錢，還要有圓餅圖看哪裡花最多」
步驟 3：照 AI 的話做
- 它說「需要安裝這個套件」→ 直接複製貼上終端機
- 它問「要雲端同步嗎？」→ 回「要，用 Google 登入
- 出現紅字錯誤 → 把錯誤訊息貄貼回去
流程圖：從對話到實際 App 的過程
進階技巧：讓 AI 你的需求
技巧 1：用具體數字
❌ 「做一個漂亮的按鈕」 ✅ 「按鈕要圓角 8px，背景色 #FF6B6B，字體 16px」
技巧 2：給參考範例
「介面像 7-11 的 OPEN POINT App 那樣簡潔」 「顏色配跟 PChome 網站一樣的橘色系」
技巧 3：一次只改一件事
不要說「幫我改顏色、加功能、還有字體也換了」 分開說：
- 「把背景改成淺灰色」
- 「新增一個匯出 Excel 的功能」 3 . 「字體換成微軟正黑體」
真實案例：小美的畢業專案
台科大資管系的小美，用 Vibe Coding 3 天做完畢業專案：
- 第一天：做出基本記帳功能
- 第二天：加上雲端同步，手機電腦都能用
- 第三天：美化介面，加台灣發票載具整合
成果：老師以為她找了工程師幫忙，其實都是跟 AI 對話完成。
常見問題 Q&A
Q：完全不懂程式也能用嗎？ A：可以！就像你不會修車也能叫 Uber。AI 處理技術細節，你負責想像成品。
Q：做出來的 App 會不會很醜？ A：加一句「用 Tailwind CSS 讓它好看」，AI 會自動套現代設計。
Q：需要付費嗎？ A：Claude Code 免費版每天可以用 30 次，做簡單 App 夠用了。
現在就打開 Claude Code 試試看
- 打開瀏覽器搜尋「Claude Code」
- 註冊免費帳號
- 在第一個對話框輸入：「幫我做一個記錄每天喝多少水的 App」
記得：第一次一定會卡住，把錯誤訊息複製貼回給 AI，它會教你怎麼修。
試試看吧！
