怎麼下 Prompt，AI 才會一次做對

大部分「AI 寫的前端很爛」的情況，問題不在模型，在於 prompt 裡沒有任何可以被檢查的東西。

「做得現代一點」不可驗證。「間距只能用 --ds-space-*，不可以出現裸數字」可以驗證 —— 你可以搜尋原始碼，模型也可以自己檢查。這份文件講的就是怎麼把前者換成後者。

一份能用的 prompt 有六段

順序有意義，不要調換。

1. 角色與目標      一句話。不要寫「你是 10x 工程師」。
2. 輸入            現有檔案、token、資料結構、API 合約。
3. 任務            要做什麼，做到哪裡為止。
4. 硬性規則        違反就是做錯，不是風格差異。
5. 框架專屬規則    只在需要轉換框架時出現。
6. 完成條件        一份 checklist，模型做完要能自己跑一遍。

為什麼「輸入」要放在「任務」前面

因為模型是往前讀的。先看到任務，它會先在腦中生成一套自己的解法，再回頭把你的檔案硬塞進去；先看到你的 token 與檔案結構，它會直接在你的體系裡思考。

這也是本站產生的每一份 prompt 都先貼 token 表、再講要做什麼的原因。

把形容詞換成約束

不要寫	改成
乾淨、現代	只用 var(--ds-*)，不得出現十六進位色碼
好看的間距	垂直節奏用 --ds-space-6／--ds-space-9，不得出現裸 px
RWD 要做好	360 / 768 / 1440 三個寬度不得橫向捲動
注意無障礙	每個互動元素都要有可見 focus；不得 outline: none 而不補 box-shadow
效能要好	首屏不得載入超過 200KB JS；圖片一律指定寬高
加點動畫	只動 transform 與 opacity；時間用 --ds-dur-*；尊重 prefers-reduced-motion

規則的判準很簡單：你能不能寫一個 grep 或點三下滑鼠證明它被違反了？ 不能的話，那不是規則，是心情。

三個反覆出現的錯誤

1. 一次要求太多

「做一個 SaaS 官網」會得到六個平庸的區塊。拆開：先做 hero，驗收；再做定價，驗收。每一輪的 diff 你都看得完，才有辦法在歪掉的第一步就攔下來。

2. 沒有說「不要做什麼」

模型的預設行為是「幫忙加東西」。你不禁止，它就會自己裝 Tailwind、自己引入 icon 套件、自己加一個狀態管理。明確寫：

不要引入任何 UI 套件或 CSS 框架。
不要新增 package.json 的依賴，需要新套件先問我。
不要重構我沒有提到的檔案。

3. 沒有驗收條件

沒有 checklist 的 prompt，回來的東西一定是「看起來對」。加上這一段，模型會在交付前自我檢查，而你也有東西可以對：

完成後請自己確認：
- [ ] 360px 寬度下沒有橫向捲動
- [ ] 搜尋原始碼找不到 `#` 開頭的色碼
- [ ] 只用鍵盤能走完所有互動，每一步都看得到 focus
- [ ] 換一個 tokens.css 版面不會壞

給 Claude Code 的補充

Claude Code 會實際讀寫檔案，所以 prompt 可以更具體：

先讓它讀。「先讀 src/lib/styles/contract.css 和 src/lib/registry/themes.ts，告訴我你打算怎麼做，先不要動手。」看過計畫再放行，比看 diff 便宜得多。

指定檔案位置。「新元件放在 src/lib/modules/pricing/，命名照現有的 PascalCase。」不講的話它會自己發明一個資料夾。

要求它跑驗證。「改完跑 npm run check，有錯就修到全過。」把驗證交給工具，不要交給人的眼睛。

要求小步提交。「一次只改一個區塊，改完停下來讓我看。」

本站產生的 prompt 長什麼樣

在任何模組頁按「複製完整 Prompt」，你會拿到照上面六段寫好的東西：風格說明、檔案清單、要做的區塊、硬性規則、框架轉換規則、完成條件。

直接貼給 Claude Code 就能開工；要改的話，通常只需要在第 3 段加一句你的產品情境。

延伸

• vibe-coding-pitfalls：不寫規則會長出什麼東西
• token-contract：為什麼「只能用 token」是可以被機器檢查的
• code-review：拿到東西以後怎麼審