只說「用我們的設計系統」不夠：一段可重複貼上的 primer，讓 AI 少用 18px 和 48px

在提示裡寫「用我們的設計系統做一個定價頁」，通常得到的是一個看起來差不多、但細節對不上的畫面。LogRocket 整理的案例很典型：系統只定義了 16px 和 24px 兩種間距，AI 卻交出了 18px 和 48px 的內距。畫面看不出大問題，但每一處這樣的偏差，之後都得有人找出來、改回去。

問題出在「沒說清楚」，不是 AI 不聽話

aiuxplayground 的指南列出了幾種常見的失手方式：直接輸出 padding: 16px、color: #333 這種寫死的值，而不是你的 token；沒有給系統背景時，生成出泛用的元件，慢慢偏離你的系統；命名不一致（btn-primary 和 ButtonPrimary 混用）時，AI 會挑一個或混著用；LogRocket 則提醒，AI 可能發明看起來合理、但元件庫裡根本不存在的變體，例如「帶圖示的次要外框按鈕」。

換句話說，「modern and clean」這類形容詞幫不上忙，具體的規則才有用。LogRocket 的建議是把形容詞換成可驗證的條件，例如「24px 垂直節奏、最多三種字級、卡片內距 16px、圓角 8px」。

一段可以重複貼上的 primer

做法是把設計系統的核心資訊整理成一段固定文字，每次生成前先貼上。以下是依照 LogRocket 範例中的數值整理的版本（間距 8px 階、主色 #2563EB、字型 Inter、有限的元件清單），可以直接改成你自己的：

You are designing within our design system. Use ONLY the elements below.
Anything not listed must be flagged as "a custom element that needs design system approval."

Spacing scale: 8px increments (tokens: space-8, space-16, space-24 ...)
Primary button color: #2563EB (token: color-action-primary)
Font: Inter
Components: Card, Button (primary / secondary), Badge, H1-H4
Rules:

Use our spacing tokens, not raw pixel values.
Use our color tokens, not hex codes.
After generating the component, check that all spacing values exist in the spacing scale, and list any deviations.

接著才寫任務，例如：「依照上面的設計系統，做一個設定頁的卡片元件，包含標題、描述和一個切換開關。」兩個重點：第一，清單以外的東西要求 AI 明講「這是自訂元件，需要核准」，這樣新發明的東西不會悄悄混進來；第二，最後一句是自我檢查，要求它回頭核對間距是否都在階層內，並列出偏差。

token 怎麼給、給多少

兩份指南都建議用結構化資料提供 token，例如 JSON，而不是用散文描述。給的量可以分層：一般需求只給間距階、色盤和可用元件；比較複雜的工作再加字體規則和語氣指引；完整文件則留給全新、需要處理邊界情況與互動模式的設計。

另外兩個容易被忽略的細節：一，命名只留一種慣例，讓 AI 不必猜；二，要求 AI 把每個生成的元素對應到既有元件，無法對應的就是你要先處理的缺口。如果你用 Figma，也要檢查圖層是否真的綁在 token 變數上，而不是原始的十六進位色碼或任意間距。

這跟你的錢有什麼關係

這段 primer 省的是重做的次數。每次因為間距對不上、元件被發明而重跑一次，就是多花一次額度（各工具的額度計法不同，總之是真的會消耗的）。建議花半小時做兩件事：把你最常用的設計系統規則寫成一頁 primer，並且在接下來一週，記錄每次生成有幾次可以直接用、幾次要重做，比較有 primer 和沒有時的差別。

也要記得 primer 本身要維護。兩份指南都沒有提供量化的前後數據，LogRocket 唯一的數字是「三個概念五分鐘內生成」的個人經驗，所以我無法告訴你它能省多少，這個數字要靠你自己的紀錄。