Day 2｜臨時改 Logo、改文案全靠 Prompt，結果版面崩壞！

貝老闆的靈光一閃

這幾天小可也開始摸熟如何與 Replit 協作了，夜深 11 點，小可終於把新版首頁收尾，Logo、色票、RWD 都驗過了。她準備打卡下班。

 這時貝老闆傳來訊息（語音轟炸模式）：

 貝老闆（亢奮）：小可！我忽然想到，如果 Logo 改成金色獅子更能顯示我們的霸氣，再加 3 條語言的 Slogan，明天記者會一定超吸睛！

 小可（已經腦袋放空）：老闆⋯⋯明天九點就要 Demo，現在改來得及嗎？

 貝老闆：來得及啦！我剛剛已經在 Replit 下 Prompt，應該在幾分鐘三分鐘圖和文案就改好了。我這次有記得叫他要產生 HTML & CSS，等等你幫我確認！

 小可：你已經下 Prompt 了！？改在哪個版本?....

越改越崩

凌晨 1 點，Github action 狂噴 build fail，小可打開頁面看(昏倒)：

1. Header 高度膨脹：AI 產出的 SVG 比例失控，直接把整個 Navbar 撐到兩倍高。
2. 語言混搭：Slogan 同時出現中／英／日三語，還自動加了 emoji，字串衝到 78 字。
3. CSS 全域污染：.golden-lion 的 class 名被 AI 直接改成 .lion，覆蓋到所有卡片，Button 全變金光閃閃。
4. 無版本控管：貝老闆直接 push main，覆蓋了小可辛苦調的 SCSS，Git diff 慘不忍睹。

小可試著 rollback，結果發現昨晚的 commit 消失——因為貝老闆沒拉最新 origin 就 force push。🫠

案件卡住，版面毀滅，小可無法結案，只好凌晨 2 點打電話給好威求救。

好威的電話診療

好威（半夢半醒）：喂⋯⋯（看時間）小可，你家貝哥哥又弄炸什麼？

小可：他說只是 Landing page 小改而已，結果整站整排歪掉！我的心血全毀了！！

好威：他有開 Branch 嗎？

小可：你說勒，有我就不會這麼慘了!他老大直接在 Replit 按 Save All，直接 deploy，還說剩下 AI 不是會自己調？

好威：😮‍💨 是啊你家哥哥對技術一點都不熟，省略了三件事：版本控管、可回滾策略、Prompt 不可控性。Prompt 就像抽卡包—— 每天都想抽到 SSR，但是常常都只抽到雜魚。他沒鎖條件，AI 當然放飛自我。

小可：那怎麼辦？

好威：先把昨天小可收工前的 commit 從遠端 refs/original/ 找回來，再切 feature/golden-lion，把你那串「金色獅子」Prompt 用 AC 重寫；最後加 GitHub Actions 做自動驗收，通過再 merge。乖，照做就能睡覺，記得增加 DoD 的 rule 進去，免得下次又被你家貝哥哥突襲

小可：DoD? AC? 那是什麼啊....QQ~

🔍 概念拆解

1️⃣ Prompt 不是萬能遙控器，必須搭配規格書

AI 在生成 UI 時，會根據語料「合理猜測」缺失的規格。少了尺寸、配色、命名規則，AI 只能自由發揮；結果常常「視覺完成度」看似 100%，卻與品牌規範、載入效能相衝突。這種不確定性（Stochastic Parrot）在臨門一腳時尤其危險——小改動可能牽一髮動全身。

2️⃣ 版本控管是 Prompt 開發的安全網

傳統程式碼改動要走 Pull Request；Prompt 也應等同配置檔進 Git。建立 feature branch → PR → Review → Merge 流程，可隨時回滾、追蹤誰改了哪個 Prompt。忽略 Git，等於把核彈與紅色按鈕交給每個人；一鍵崩壞，全團陪葬。

3️⃣ User Story＋Acceptance Criteria + DoD，替 AI 套上安全帶

User Story 闡述 Why，Acceptance Criteria（AC）界定 Done 的條件，並且把 Defination of Done 應該要做完什麼也要寫清楚，舉例AC：Logo 長寬比 3:1、尺寸 ≤ 30 KB、色碼 #F5C451 不得覆蓋其他元件DoD：每次修改完，都必須跑 unit test 並且開啟瀏覽器檢查以下情境...寫進 Prompt，AI 產物才可機器驗收。少了 AC and DoD，Prompt 生成就是開盲盒 —— 好抽壞抽全憑運氣。

💡 Takeaways

1️⃣ 先鎖規格、再玩創意

臨時靈感 OK，但記得每次修改前都要開 feature branch、定 AC，避免毀掉穩定版。Prompt 應以「增量修補」而非「整頁重寫」思維進行。🛠️

2️⃣ Prompt 與程式碼同等級管控

把 DoD 寫進 Prompt 當 Config file：需 Review、需 Version、需測試。搭配 Git Hook 或 GitHub Actions，讓 CI 在 merge 前跑視覺回歸測試（如 Percy）。Prompt 出問題，30 秒即可回滾。各家 AI 都有一些規格可以用，如 clinerule, claude.md...等，就算都沒有，你也可以寫一個 DoD.md 每次運作前叫 AI 都先 follow。

3️⃣ 不可控 ≠ 不可用：用測試馴服

AI 生成具隨機性，但加上自動化 Screenshot Diff、Lighthouse test，就能用失敗率衡量風險。將「Prompt 成功率」納入 Sprint Metrics，持續優化指令，才是真正的 Prompt Engineering。

今日提問 🤔

你有沒有在「Demo 前一晚」接到老闆的急改需求？結果如何收拾？歡迎留言血淚史！

小作業 Prompt

「根據下列 AC：Logo must be 120×40 px SVG、File size < 30 KB、Must use #F5C451 as accent、Cannot override existing Tailwind classes，撰寫一段 Prompt 讓 AI 只修改 Logo 與 Slogan，不影響其他元件，並將修改放入 feature/logo-refactor 分支。」

另外思考，你們團隊或你跟 AI 的 DoD 內容應該有什麼？

把你的 Prompt 貼上來，一起互評！