Open Design 反 AI-slop 機器:問題表格、五維自評、P0 閘門完整拆解

Open Design 反 AI-slop 機器:問題表格、五維自評、P0 閘門完整拆解

8 min read

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 不准看一眼就開始畫。它必須跑這五步驟:

  1. Locate — 找到品牌資產的權威來源(官網 / 品牌頁 / press kit)
  2. Download — 把 LOGO、CSS、字體實際抓下來進 cwd
  3. Grep hex — 對下載到的 CSS 跑 grep 找 hex 色值,不憑記憶猜
  4. Codify brand-spec.md — 把抓到的色、字、間距寫成正式檔案
  5. 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 看得到、會遵守。

為什麼這套機器有效?三個原因

  1. 強制 + 可驗證 — 不是「希望 agent 聰明點」,是 prompt 寫死規則 + 真實的 Read/Write tool 做驗證
  2. 每一條都對應到一個常見 slop 模式 — 不是抽象的「請做好」,是針對性的「這個不准做」
  3. 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 到底在哪。