Design Spec for AI：點樣令 AI 生成統一風格的 UI？
你有冇試過用 Cursor、v0、或者 Claude 幫你生成 UI？試過幾次之後，你會發現一個反常識嘅現象：AI 生成嘅介面，每次睇落都唔同。唔係唔靚，而係冇一致性。同一個產品，三個 session 出嚟三個樣。呢個問題，V2EX 上面最近有一個討論，好多開發者都講到痛點。
我認為呢個問題嘅核心，唔係 AI 唔夠叻，而係我哋冇畀到足夠嘅「設計指引」。設計系統（Design System）以前係畀人用嘅，而家要變成畀 AI 用嘅。呢個轉變，係工程實踐上面一個好大嘅機會。
Design Spec 本身唔係新嘢，但佢嘅角色變咗
設計系統喺科技公司入面已經行咗十幾年。Google 有 Material Design，Apple 有 HIG，就算係細 startup，都會有一份 Figma library 或者 Tailwind config。但以前呢啲系統主要係畀設計師同工程師睇嘅——人讀完之後，腦入面會有一個概念，然後靠人嘅判斷去應用。
而家嘅情況完全唔同。當 AI 可以直接生成 UI 代碼嘅時候，Design Spec 就變成咗 AI 嘅「操作手冊」。問題係：AI 唔識得睇「感覺」，佢只係識得睇「規則」。你同佢講「簡約風格」，佢可能會出十個唔同嘅解釋。但你同佢講「所有按鈕必須用 16px padding、border-radius 8px、字體用 Inter」，佢就會乖乖跟住做。
呢個轉變代表咩？代表 Design Spec 嘅粒度要改變。以前寫「遵循品牌色調」就夠，而家要寫到 hex code、spacing scale、component variants 全部明確列出。呢個唔係退步，而係進步——因為當你嘅設計指引夠具體，AI 嘅輸出就夠穩定。
實戰：點樣寫一份 AI-friendly 嘅 Design Spec
我自己試過幾次用 AI 生成 UI，慢慢總結出一個有效嘅框架。一份好嘅 AI Design Spec，應該包含呢幾個部分：
第一，Token 定義。 呢個係最基礎嘅。你要列出所有顏色、字體、spacing、border-radius 嘅具體數值。唔好寫「primary color」，要寫「#2563EB（blue-600）」。唔好寫「大標題」，要寫「font-size: 24px, font-weight: 700, line-height: 1.2」。AI 唔會同你玩猜謎遊戲，你畀咩佢就用咩。
第二，Component 規範。 你要列出每個常用組件嘅具體結構。例如一個 Button，你要寫明：「包含 icon 時 icon 在左、text 在右、之間 gap 8px；hover 狀態 background darken 10%；disabled 狀態 opacity 0.5」。呢啲細節，人可能會自動補足，但 AI 需要你明確講清楚。
第三，Layout Pattern。 你要定義常見嘅佈局模式。例如：「卡片組件必須有 16px padding、box-shadow: 0 1px 3px rgba(0,0,0,0.1)、hover 時 shadow 加深」。呢啲 pattern 一旦定義好，AI 就可以一致咁應用喺唔同嘅場景。
第四，Do’s and Don’ts。 呢個部分好重要。你要列出「唔好做咩」，因為 AI 有時會做一啲「技術上正確但設計上唔合理」嘅嘢。例如：「唔好用超過三種字體大小」、「唔好喺同一個頁面放超過兩個 primary button」。呢啲限制，會令 AI 嘅輸出更加專業。
工程實踐：將 Design Spec 嵌入 AI 工作流
寫完 Design Spec 之後，下一步係點樣令佢真正发挥作用。我見過好多人寫咗一份好靚嘅 spec，但最後都係冇用，因為冇整合入 workflow。
最直接嘅做法，係將 Design Spec 變成 AI 嘅 system prompt。每次開新 session 嘅時候，將份 spec 擲入 context，等 AI 知道佢要跟住呢啲規則做。呢個方法簡單有效，但有個問題：context 有限，Design Spec 如果太長就會佔晒 token。
另一個做法，係將 Design Spec 轉換成結構化嘅 JSON 或者 YAML 檔案，然後寫一個 wrapper 喺每次呼叫 AI 之前自動注入 relevant sections。例如：生成 button 嘅時候，自動注入 button 嘅 spec；生成 page layout 嘅時候，自動注入 layout 嘅 spec。呢個做法工程上面複雜少少，但效果會好很多。
仲有一個進階做法，係將 Design Spec 同 component library 直接綁定。例如：寫一個自定義嘅 AI tool，令佢可以直接呼叫你嘅 component library，而唔係從頭生成代碼。咁樣做嘅好處係：AI 唔需要「想像」你嘅 UI 係咩樣，佢直接用你已經驗證過嘅組件。呢個係最穩定嘅做法，但需要額外嘅工程投資。
呢個趨勢嘅意義：設計同工程嘅邊界模糊化
呢個轉變最有趣嘅地方，係佢令設計同工程嘅邊界變得更加模糊。以前，設計師出稿、工程師實現，兩者之間有一個交接嘅過程。而家，AI 可以直接從 spec 生成 UI，中間嘅交接步驟被壓縮咗。
但呢個唔代表設計師嘅角色變得唔重要。反而，設計師嘅價值更加集中喺「定義規則」呢一步。一份好嘅 Design Spec，需要設計師嘅審美判斷、品牌理解、同用戶體驗知識。AI 只係執行者，設計師先係決策者。
對開發者嚟講，呢個趨勢代表咩？代表你要學識點樣寫一份「AI 可以理解」嘅設計指引。呢個係一個新嘅技能，唔係純粹嘅前端開發，而係 design engineering 嘅一個新範疇。
如果你而家仲未開始整理你嘅 Design Spec，我建議你由最常用嘅 five components 開始。唔需要一次寫晒，先將最影響 AI 輸出品質嘅部分定義好，然後喺實戰入面慢慢完善。記住：一份唔完美但有嘅 Design Spec，好過冇 Design Spec。
行動建議： 下次你用 AI 生成 UI 之前，花 30 分鐘寫一份「最小可行 Design Spec」——列出你嘅 primary color、font stack、spacing scale、同最常用嘅三個 component 嘅具體規範。你會即刻見到 AI 輸出品質嘅提升。呢個投資，回報率好高。