系列文章: Opendesign (9/11)

Open Design 反 AI-slop 機器:問題表格、五維自評、P0 閘門完整拆解
Skill、Design System、Visual Direction 三個組件講完,但真正讓 Open Design 輸出不 slop 的不是這三個——是壓在它們之上的反 AI-slop 機器。這套機制借自 huashu-design,移植進 Open Design 的 prompt stack 並透過 skill 的 side-file pre-flight 做到可強制執行。這篇逐條拆。
什麼是 AI-slop?先定義清楚
slop 不是「品質差」這麼模糊的東西,是有具體 pattern 的。Open Design 的 slop 黑名單寫得很直白:
- 紫色漸層(特別是
from-purple-500 to-pink-500那套) - generic emoji 當 feature icon(🚀💡✨🎯)
- 圓角卡片左邊一條彩色 accent border
- 手繪 SVG 人形
- Inter 拿來當顯式字體(display face)
- 隨手編的數字(「10× faster」「500% increase」)
這六樣是 LLM 訓練資料裡反覆出現的模板,不下指令的話 model 預設會生成它們。Open Design 的策略不是「希望 model 聰明點」,是在 prompt 明文禁止。
機制 1:問題表格永遠先行(RULE 1)
prompt stack 寫死一條 RULE 1:每次新對話的 turn 1,只能用 <od:question_form> 回應。不准 think、不准 call tool、不准寫一個字 narration。
form 鎖死的維度:
- Surface — 你要做什麼類型的東西?landing / deck / mobile / dashboard…
- Audience — 誰會看?工程師 / 投資人 / 一般消費者 / 內部團隊
- Tone — 嚴肅 / 輕鬆 / 中性
- Brand context — 有 brand spec 嗎?有的話貼上來
- Scale — 一頁 / 三頁 / 十頁
- Constraints — 不准做的事
理由:一份冗長 brief 仍然會留一堆模糊空間(「視覺調性」「配色立場」「規模感」),這些東西不在 form 裡鎖死,agent 自由發揮 = slop。
30 秒選 radio 比 30 分鐘修改 redirect 便宜——這是這條規則的核心交易。
機制 2:品牌規格五步驟協議
當使用者貼了一個截圖、URL、或品牌指南進對話,agent 不准看一眼就開始畫。它必須跑這五步驟:
- Locate — 找到品牌資產的權威來源(官網 / 品牌頁 / press kit)
- Download — 把 LOGO、CSS、字體實際抓下來進 cwd
- Grep hex — 對下載到的 CSS 跑
grep找 hex 色值,不憑記憶猜 - Codify
brand-spec.md— 把抓到的色、字、間距寫成正式檔案 - Vocalise — 念回給使用者聽:「我從你的官網抓到主色 #0E1F3F、accent #D4AF37、字體 Söhne,要繼續嗎?」
這五步驟全部跑完才能開始改 CSS。為什麼?因為 LLM 預設會憑記憶亂猜品牌色——你說「做個 Stripe 風的頁面」,model 用訓練資料裡的 Stripe 印象生 CSS,可能對也可能錯。Open Design 的協議讓 agent 強制驗證,而不是 hallucinate。
機制 3:五維自評(5-dim critique)
這是最有意思的一條。Agent 在 emit 任何 <artifact> 之前,必須在內部跑一輪自評,按 5 個維度給自己打 1–5 分:
| 維度 | 在問什麼 |
|---|---|
| Philosophy(哲學) | 這個輸出對應的是哪一套設計哲學?有走偏嗎? |
| Hierarchy(階層) | 視覺階層是否清楚?讀者眼睛知道先看哪、再看哪? |
| Execution(執行) | 細節到位嗎?對齊、間距、邊角、襯線一致嗎? |
| Specificity(specificity) | 內容夠具體嗎?還是抽象的、generic 的? |
| Restraint(克制) | 該砍的有砍嗎?還是塞滿東西? |
任一維度 < 3/5 算 regression,重做、重評、再 emit。實務上兩輪是常態——agent 第一輪通常會打到 2.x,自我修正後才上 3+。
這個機制的精髓是 prompt 直接讓 model 變成自己的 reviewer,比起外部 RLHF 對齊,這套是 inference-time 的 self-critique,可由 prompt stack 強制執行。
機制 4:P0 / P1 / P2 checklist 硬閘門
每個 skill 的 references/checklist.md 都列三檔閘門:
- P0 — 必過,沒過不准 emit。例:色票必須來自 active DESIGN.md、沒有自編 hex;不准 Inter 當 display face;不准 emoji 當 feature icon
- P1 — 應該過,沒過要在輸出裡標記為已知問題
- P2 — 加分項,做到更好但不強制
P0 是這套機器最硬的一環——agent 跑完五維自評之後,還要再跑一次 P0 確認。沒過 P0 就算分數打到 5 也擋下來,重做。
機制 5:誠實的占位符 > 假數據
這是寫在 prompt 裡的另一條明文規則:
When you don't have a real number, write
—or a labelled grey block. Never invent metrics like "10× faster" or "500% growth".
LLM 訓練資料裡充滿「Increased revenue by 47%」「10× engineering productivity」這類沒根據的句子,預設它會生這種東西。Open Design 直接禁止——沒真的數字,就用 dash、或 placeholder block。Artifact 看起來會有點空,但空總比假好。
Slop 黑名單:寫在 prompt 裡的禁區
完整黑名單在 discovery.ts 裡是這樣寫的:
FORBIDDEN, no exceptions:
- Aggressive purple gradients
- Generic emoji icons (rocket, lightbulb, target, sparkle)
- Rounded card with left-border accent stripe
- Hand-drawn SVG humans
- Inter as a display face
- Invented metrics
每個 skill 的 SKILL.md 還能加自己的禁區(mobile-app skill 禁的東西跟 dashboard skill 不同)。這些都會在 send-time 注入 prompt,agent 看得到、會遵守。
為什麼這套機器有效?三個原因
- 強制 + 可驗證 — 不是「希望 agent 聰明點」,是 prompt 寫死規則 + 真實的 Read/Write tool 做驗證
- 每一條都對應到一個常見 slop 模式 — 不是抽象的「請做好」,是針對性的「這個不准做」
- Skill side-files 讓規則可組合 — 每個 skill 有自己的 P0,pre-flight 自動 read 進去;新增 skill 等於新增一組規則
一個務實提醒:機器不保證每次都神
這套機器壓低 slop 機率,但不保證消除。仍有兩種情況會破功:
- 使用者填 form 時把所有東西選 generic — 「audience: anyone, tone: balanced, scale: medium」這種,鎖不住任何方向
- brand spec 太鬆 — DESIGN.md 寫「用暖色系」這種模糊話,agent 還是會自由發揮
換句話說:這套機器幫你壓 slop 機率,但你給的輸入要夠精準。你越精準,輸出越好——這個關係不會變。
下一站:把所有東西串起來看
Skill、Design System、Visual Direction、反 slop 機器——四件事各自獨立看完了,但它們在 send-time 是怎麼疊起來的?答案是 Open Design 真正的核心資產:prompt stack。
下一篇拆 prompt stack 的完整組成:六層架構、每層在做什麼、為什麼作者說「prompt stack is the product」。讀完你會理解這個工具的 IP 到底在哪。