用 DESIGN.md 讓 AI 寫前端時少一點「AI 味」

進階打造工具· 約一個晚上

用 DESIGN.md 讓 AI 寫前端時少一點「AI 味」

Cursor 或 Claude Code 做出來的介面常常配色混亂、元件風格不統一。把一份 DESIGN.md 放進專案根目錄，並明確要求照它生成，先對同一頁前後差。

開始第 1 步 ↓

想解決什麼

你已經會請 AI 寫頁面，但產出常常一眼就是「預設紫按鈕＋亂圓角＋三種字級」。你不是要學設計系統，只是想讓同一個專案的畫面看起來像同一套產品。

用了哪些工具

Cursor、Claude Code 或 Codex
一份 DESIGN.md

怎麼做

1
先固定一頁當對照組
挑一個已有的設定頁或落地頁區塊。先截圖或記下「現在哪裡看起來像預設 AI 稿」。
2
把 DESIGN.md 放進專案根目錄
只放一份。檔名用 DESIGN.md，內容保持短：顏色 token、字級、間距、禁止事項（例如「不要用紫色漸層英雄區」）。
3
明確要求依檔案重做，不要自由發揮視覺
提示詞要點名檔案路徑，並禁止另起一套配色。做完只看這一頁，不要順便重構路由。
提示詞
4
並排 before／after，只收斂一輪
對照字級是否一致、主按鈕是否只有一種樣式、背景是否還在用高飽和漸層。若仍很「AI」，先改 DESIGN.md 的禁止事項，再重跑同一則提示詞；不要同時換三套風格檔。