不會寫程式也能做！Vibe Coding 實戰：完整 Prompt 讓你的程式直接上線 | Louis Yang

上一篇介紹了 Vibe Coding 的概念與流程，但實際操作還是會碰到很多問題，

這篇我就用一個完整實例來說明——我太太是中文老師，這是她為了學生做的一個小遊戲，功能是讓學生練習「漢字與拼音配對」，另外搭配有機器朗讀和分數統計增加互動性。

下面我會依照三種常見情境：「啟動」「debug」「理解」，逐步拆解她在製作過程中怎麼問 ChatGPT、AI 給出什麼、我們又是透過什麼樣的 prompt 一步步修正成品的。

成品網址：https://afangchinese.github.io/wordmatch/

＊關於 Vibe Coding 的適用範圍和限制，可以參考上一篇：
Vibe Coding 是什麼？誰適合用？能做到哪些事？

情境一：啟動階段「我想做一個遊戲，怎麼開始？」

這是初學者最常遇到的第一步，往往會因為不知道從哪開始而感到卡關。

她的起手 prompt (指令) 是這樣的：

我想做一個拼音配對遊戲，請用 HTML + JS 幫我建立一個簡單的網頁，功能包括：使用者可以輸入多行「中文字拼音」，然後點開始遊戲後顯示配對卡片。

AI 回了一個能動的 demo，支援：

使用者輸入多組「中文字, 拼音」
按下開始後顯示卡片
點選中文字可以播中文語音（SpeechSynthesis API）
配對成功的卡片會消失

小技巧：

附上「程度」、「偏好技術」、「使用環境」，能讓 AI 回答更貼近你
初版不完美沒關係，來回多試幾次就能調整
這邊說了 HTML, JS, server, local storage, ReactJS 等關鍵字，不懂是什麼沒關係，這是對應上一篇說的對初學者最簡單的開發組合，可以直接把下面範例的 prompt 複製後放在 prompt 最後面直接用即可：

補充說明，我完全不會寫程式，想直接用網頁開啟就能跑，不要用 server，也不要用 ReactJS 等框架，請用 HTML 和原生 JS，如果有資料要存放瀏覽器的 local storage 即可。

例如我幫她補充跟調整後的 prompt 是：

我想做一個中文的拼音配對遊戲，有一個輸入匡可以讓我放上多組中文漢字與拼音的組合，可以記憶上次輸入的內容，重新整理也不會消失，按下開始後，就會依照我輸入的內容，讓學生用卡片配對，到全部配對完成成功為止遊戲結束，如果答錯則該組合還是會重複出現，直到答對為止，最後會顯示答對答錯各幾題。補充說明，我完全不會寫程式，想直接用網頁開啟就能跑，不要用 server，也不要用 ReactJS 等框架，請用 HTML 和原生 JS，如果有資料要存放瀏覽器的 local storage 即可。

情境二：Debug 階段「功能壞掉了怎麼辦？」

這是每個人都會遇到的過程，以下整理幾個常見問題與修正 prompt：

1. 配對成功後卡片變少

配對成功後，請從還沒配對的詞語中補滿至 4 組卡片，請幫我修正。

2. 答錯沒有紅色提示

答錯時，讓兩張卡片變紅色稍等後重設

3. 點擊拼音卡片也播音

請改成只有點中文字卡片才播放語音

小技巧：

如果你碰到錯誤，尤其是畫面完全跑不出來時，或是某個功能沒有理由的完全壞掉，可以嘗試下方 prompt ，這時 AI 會一步步指導你做更細節的修正：

我貼上程式後畫面沒反應，請一步步教我開瀏覽器的開發者工具，並貼給你錯誤訊息。

情境三：理解階段「這段說明是什麼意思？」

有些功能 AI 給了，但她看不懂，或是直接請 AI 修改一直改不到想要的效果，可以請 AI 解釋他修改的邏輯，這樣我們就可以知道原理，並更精準的請 AI 修正。

例如：

你剛剛那段 speechSynthesis 是什麼意思？為什麼需要它？

你給的那段程式碼，我不知道這個 element.classList.add("error") 是做什麼的... 可逐行解釋嗎？

AI 通常會很有耐心地說明：

這段是做什麼的
每一行的功能
是否可以修改或省略

想要做得更好時的延伸工具建議

(A) ChatGPT (或其他 AI) + 瀏覽器就夠了

程式碼寫好貼在 .html 檔，用瀏覽器打開就能用
不需要裝任何開發工具

但會有以下限制：

只能在自己電腦開
→ 可以透過本節的 (D) GitHub Pages 解決
程式變複雜後，AI 常常會改壞，甚至常常把已經做好的功能移除
→ 可以用 (B) 的 Cursor 這類工具，只改部分，也更知道 AI 改了什麼
→ 可以用 (C) 提的 GitHub 做版本控管，改壞可以隨時回到之前的版本

(B) Cursor（AI Coding Editor）

將程式編輯與 AI 對話整合，可以清楚看到 AI 改了哪些地方
可以管理多個程式檔案、避免破壞原功能

限制：

需要費用（但可以先試用）
雖然可以減低改壞的機率，但要回到穩定版本，還是要搭配 (C) 的 GitHub 做使用

(C) GitHub（版本控制）(進階功能，可先跳過)

GitHub 是專業開發者用來備份程式的地方，功能強大但學習成本較高，初學者可以先跳過，想要版本控制時再研究。

如果想要繼續，我把步驟簡化如下，可以一步步照做：：

開設 GitHub 帳號
在 GitHub 建立 repository
設定帳號連結
將本地資料夾連上 GitHub

以上步驟可以直接用這段 prompt 請 AI 帶你做一遍：

我要把我程式放上 github 保存請一步步告訴我怎麼做到 (1) 開設 Github 帳號 (2) 在 Github 建立 repository (3) 建立認證機制 (4) 把我電腦的程式放到這個 repository 做管理

當上方步驟完成後，就可以打開 Terminal（或叫終端機）這個程式，執行以下指令更新，這邊大概就是做把目前的更新全部更新到新版，並放到雲端的意思，這些指令看不懂沒關係，照著做就行：

cd [你的程式的資料夾位置]
git add .
git commit -m "Update"
git push -u origin main:main

把 [你的程式的資料夾位置] 改成你實際的資料夾路徑，複製貼上後，再按下 Enter 即可把你的程式更新到雲端！每次有穩定版本後要記得再來執行一次上述指令，保持雲端是最新的穩定版本。

(D) 免費發布到網路 - 可用 GitHub Pages 或其他服務

可讓作品免費發布到網路上
如果完成了 (C) 的 GitHub 設定，可以用下面的 prompt 讓 AI 教你發布。如果沒設定 GitHub，也可以請 AI 推薦其他免費的網站託管服務。

我現在把我程式放到 github 了，請告訴我怎麼透過 github pages 公開出來給大家用

小結：從想法到作品，你其實可以自己做

寫程式的過程，我感覺到很多時候其實是不知道該怎麼問，或是對工具的不熟悉。

這次的專案，其實只花了兩晚，大部分時間都在試 prompt 和學習怎麼上線，反而真正「寫程式」的時間很少。

這也讓我更相信：

AI 寫程式已經成熟，但「怎麼讓它變成可用的工具」，還有落地的最後一哩路。

希望這篇文章讓你也能試著做出第一個作品，體會把點子變成實體的成就感。