🎬 Lecture 12.5: Vibe Coding 導演生存手冊：非專業開發者的黃金提示詞範本與避坑指南

歡迎來到「Vibe Coding」的進階指南！在前面的課程中，我們學會了如何請 AI 幫忙寫程式。但你可能會發現，有時候 AI 就像個聽不懂人話的新手實習生，不僅寫出無法運行的代碼，還會留下滿坑滿谷的「請在這裡實作」空白，讓你這個不懂程式的老闆崩潰。

這堂課，我們將帶領你完成華麗的轉身，從「敲鍵盤的寫碼工人」，正式升級為「發號施令的大導演」！無論你是完全不懂程式的文組學生，還是依賴螢幕閱讀器的視障使用者，這本生存手冊將是你在 AI 時代最鋒利的寶劍。

🎥 第一幕：Vibe Coding 導演的核心心法

什麼是「Vibe Coding」？這是一個在國外爆紅的詞彙，意思是「憑藉著直覺與氛圍，不寫一行代碼，全靠與 AI 對話來完成軟體開發」。

• 從「寫碼工人」到「電影導演」：過去，寫程式端賴一磚一瓦蓋房子；現在，寫程式就像是在片場拍電影。你不需要親自下去扛攝影機，你需要做的是「清楚地向劇組（AI）描述你腦海中的畫面」。
• 你才是總編輯：AI 是一個寫字速度極快、但記性不好且容易偷懶的作家。作為總編輯，你的職責是「審核他的稿子」，並給出「極度明確的規則限制（Constraints）」。

📜 第二幕：非專業開發者的「黃金提示詞」範本

當你想要開發一個全新專案時，千萬不要只丟一句「幫我寫一個貪吃蛇遊戲」。請直接複製並修改以下這個「角色-背景-限制（Role-Context-Constraints）」黃金提示詞範本，這能幫你避開 90% 的初學者地雷：

只要貼上這段咒語，你就會發現 AI 瞬間從「高傲的工程師」變成「溫柔細心的家教」。

🕳️ 第三幕：Vibe Coding 的四大地雷與避坑指南

在與 AI 合作的過程中，不懂程式的我們最容易踩到四個萬年大坑。現在，我們就來一一拆解：

💣 地雷一：「請在這裡實作」的省略地獄 (The Placeholder Hell)

• 災情畫面：AI 給了你一段程式碼，中間夾著一行 // TODO: 請把剩下的邏輯寫在這裡。你不懂程式，根本不知道該怎麼接下去！
• 避坑指南：這就是為什麼我們在上面的黃金提示詞中，將「絕對禁止佔位符」放在第一條。如果 AI 還是偷懶，請毫不留情地對它說：「不要給我 TODO 或省略號，我是新手不會組合程式碼，請給我從第一行到最後一行的完整原始碼。」

💣 地雷二：「顧此失彼」的失憶症 (The Regression Trap)

• 災情畫面：你請 AI 修復了「按鈕不能點」的問題，結果按鈕修好了，旁邊的「文字變不見了」！這是因為 AI 忘記了之前的上下文。
• 避坑指南：建立「專案藍圖（Spec Sheet）」！ 隨著對話變長，請 AI 幫你總結一份包含「目前所有功能、檔案結構與按鈕邏輯」的藍圖。當你開啟新的對話視窗時，把這份藍圖貼給 AI，讓它瞬間恢復記憶，避免改 A 壞 B。

💣 地雷三：陷入安裝地獄 (Environment Configuration Overwhelm)

• 災情畫面：AI 叫你安裝 Node.js、設定 Webpack，然後要在終端機輸入一大串 npm install。結果終端機噴出一大堆紅字錯誤，你連程式都還沒看到就放棄了。
• 避坑指南：堅持「Vanilla First（原生優先）」。對於初學者，最好的程式是「只要把程式碼存成 .html，點兩下瀏覽器就能跑」的東西。嚴格限制 AI 使用最基礎的網頁技術，遠離複雜的開發環境。

💣 地雷四：盲目貼上的無窮迴圈 (Blind Error Patching)

• 災情畫面：程式報錯了，你把紅字錯誤貼給 AI，AI 給你新代碼；貼上去又報錯，再貼給 AI... 重複了一百次還是壞的。
• 避坑指南：停止盲目的「複製貼上」！當錯誤超過三次時，深呼吸，對 AI 說：「停下來，不要再給我程式碼了。請用白話文告訴我，這個錯誤發生的『根本原因』是什麼？我們的邏輯是不是哪裡有盲點？」讓 AI 重新思考，而不是盲目亂湊。

🗣️ 第四幕：會說話的無障礙咒語 (The "Speak to Screen Readers" Prompt Hack)

對於視障開發者來說，讓 AI 寫出有畫面感的程式還不夠，我們需要的是「會說話的程式」。請把這套專屬的「無障礙咒語」牢記在心，在每次開發結束前對 AI 進行抽考：

1. Tab 鍵巡邏測試：「請幫我模擬一次鍵盤操作，如果我只用 Tab 鍵，能不能順利逛完並點擊網頁上的每一個功能？」
2. 焦點強制報讀：「當網頁有新視窗彈出，或者有錯誤訊息時，請使用 role="alert" 或 aria-live="assertive"，確保 NVDA 螢幕閱讀器會立刻大聲念出來打斷我。」
3. 語義化標籤審查：「請檢查所有的 <div onClick...>，把它們全部換成原生的 <button> 標籤，讓螢幕閱讀器能正確辨識它是個按鈕。」

👉 下一堂課：Lecture 13 無障礙網頁實戰：用 Vibe Coding 打造視障專屬「節拍器」Web App
👉 回課程大綱：學習地圖