不懂程式也能做 App!Vibe Coding 3 步驟讓 AI 幫你寫程式碼(附中文 Prompt 模板)

不懂程式也能做 App!Vibe Coding 3 步驟讓 AI 幫你寫程式碼(附中文 Prompt 模板)

不懂程式也能做 App!Vibe Coding 3 步驟讓 AI 幫你寫程式碼(附中文 Prompt 模板)

什麼是 Vibe Coding?就像請 AI 幫你煮菜

想像你完全沒下過廚,但想吃紅燒牛肉麵。你把冰箱裡的食材拍照給 AI,說「我想吃紅燒牛肉麵,這些料夠嗎?」AI 就會告訴你步驟、火候、甚至幫你試味道調整。

Vibe Coding 就是這個概念:你用中文描述想要的程式功能,AI 幫你寫出程式碼,你再像試味道一樣邊跑邊改。

為什麼現在開始最剛好?

  • 工具變超簡單:Cursor、GitHub Copilot 都有中文介面
  • AI 變超聰明:現在的 AI 連「幫我做一個像 Dcard 的投票功能」都聽得懂
  • 不用學語法:忘記分號、括號?AI 會自動補上

3 步驟開始你的第一個 Vibe Coding 專案

步驟 1:選工具(就像選廚房)

免費入門:Cursor(下載後直接打開就能用) 進階選擇:GitHub Copilot(學生免費,上班族 300 台幣/月)

步驟 2:用中文下指令(像點餐一樣)

打開 Cursor 後,直接輸入:

幫我做一個記帳網頁,要有:
- 輸入金額的欄位
- 下拉選單選類別(食物、交通、娛樂)
- 顯示今天花了多少錢
- 用藍色主題,看起來簡潔可愛

步驟 3:邊看邊改(像試吃調味)

AI 會一次生出完整程式碼,這時你可以:

  • 看不懂就問:選取程式碼問「這段在做什麼?」
  • 想要更多功能:直接說「幫我加上刪除功能」
  • 調整外觀:說「把按鈕改成圓角」

真實案例:小美 3 天做出畢業專題

台中科技大學的小美原本對程式一竅不通,她用 Vibe Coding 做了這些:

Day 1:做出基本記帳功能(花 2 小時) Day 2:加上圖表分析(問 AI「幫我加圓餅圖顯示花費比例」) Day 3:美化介面(說「幫我改成粉紅色主題,像無印良品風格」)

老師還以為她找了工程師幫忙,結果是她一個人 + AI 完成。

進階技巧:讓 AI 更像你的小幫手

1. 用「假設」開頭

❌「幫我做網站」 ✅「假設我是早餐店老闆,想做一個讓客人線上點餐的網站」

2. 給參考圖片

直接截圖給 AI:「幫我把這個介面改成深色模式」

3. 分段要求

不要一次說太多,先做出基本功能,再慢慢加:

  • 先做登入功能
  • 再加忘記密碼
  • 最後加 Google 登入

常見問題 Q&A

Q:完全沒學過程式也能做嗎? A:可以!就像你不會修車也能開車,Vibe Coding 讓你先用起來,有興趣再慢慢學原理。

Q:做出來的東西能商用嗎? A:當然可以,很多新創公司的第一版產品就是這樣生出來的。

Q:會不會被工程師笑? A:工程師自己也在用 AI 寫 Code,他們只會羨慕你做得比他們快。

今天就能試的 3 個小練習

  1. 個人名片網頁:輸入「幫我做一個像 LinkedIn 的個人頁面」
  2. 待辦事項 App:說「幫我做一個可以打勾的待辦清單」
  3. 成績計算機:問「幫我做一個輸入各科分數會算平均的網頁」

現在就打開 Cursor,貼上第一個練習的指令,5 分鐘後你就能看到成品!