Open Design 的五個視覺方向：客戶沒品牌時的決定論答案

上一篇講 71 套內建 design system 怎麼用。但有個常見場景：使用者根本沒有自己的品牌——個人專案、副業點子、還沒成案的 idea。這時候 agent 該按什麼做？Open Design 的答案是：五個 curated 視覺方向，每個都是決定論的規格。這篇講這五個方向各自是什麼、為什麼這樣設計、什麼時候選哪個。

為什麼需要 fallback

反 AI-slop 的核心觀念是「不准 agent 自由發揮顏色、字型、排版」——但如果使用者沒給 brand spec，agent 又被禁止自由發揮，那要怎麼出東西？

Open Design 的解法很乾脆：給 agent 五個預先設定好的方向，使用者選一個 radio click 就決定一切。這套源自 huashu-design 的「5 schools × 20 design philosophies」fallback 的精神：先用便宜成本鎖死方向，再讓 agent 動工。

完整規格寫在 apps/web/src/prompts/directions.ts 裡，每個方向都包含：OKLch 色票、字體 stack、排版姿勢、參考品牌——agent 直接把這份規格 verbatim 綁進 seed 模板的 :root，沒有改編空間。

1. Editorial — Monocle / FT 風

情緒：印刷雜誌、ink + cream + 暖鏽紅

參考：Monocle、FT Weekend、NYT Magazine

色票走的是「印刷品出身」的感覺：奶油紙底、深墨色文字、warm rust 當點綴。字體是襯線顯示字 + 無襯線內文 + mono 標籤。排版多用大留白、不對稱欄寬、文字當主視覺。

什麼時候選：個人作品集、長文 essay 站、文化機構頁、書店 / 咖啡店、有「文化」氣味的副業。

不適合：科技產品、後台介面、需要 dense 資料的 dashboard。

2. Modern Minimal — Linear / Vercel 風

情緒：cool、結構化、極簡點綴

參考：Linear、Vercel、Stripe

當代 SaaS 的標準長相：純白或極淺灰底、單一強烈品牌色當 accent、Inter / Geist 系字體、卡片 + grid 為主的排版。所有東西都極度精準、沒有多餘裝飾。

什麼時候選：SaaS landing、產品官網、開發工具、面向工程師的服務。九成現代科技產品都是這個方向，不知道選什麼就選這個。

不適合：消費端、要溫度感、要驚喜感的場景。

3. Tech Utility — 資訊密度走向

情緒：information density、monospace、terminal

參考：Bloomberg Terminal、Bauhaus 工具書

整套向「資料工具」靠攏：等寬字當主、極小字級堆很多資料、表格 / 數字 / 時序圖當主視覺、配色高反差但克制。Bauhaus 那種「一切為功能」的氣味。

什麼時候選：金融工具、admin / 後台 dashboard、CLI 工具的網頁、quant / 交易 / 數據分析產品。

不適合：消費 app、行銷頁、品牌敘事重的場景。

4. Brutalist — 粗糙原生派

情緒：raw、超大字級、零陰影、辛辣 accent

參考：Bloomberg Businessweek、Achtung 雜誌

故意「不修飾」的設計：超大標題壓滿版、粗體無襯線、零圓角零陰影、強對比配色（黑白 + 螢光色或紅色）。看起來像沒設計過，其實每個錯位都是計算過的。

什麼時候選：藝廊、音樂祭、獨立出版、設計工作室自己的網站、想刷存在感的 launch 頁。

不適合：金融、醫療、教育——使用者預期「正經感」的領域。

5. Soft Warm — Notion / Apple Health 風

情緒：寬鬆、低反差、桃色暖中性

參考：Notion 行銷頁、Apple Health

最近三年消費端產品的主流方向：暖中性底（米色、淺粉、淺杏）、低反差不刺眼、圓角溫和、字體偏柔（Söhne、Inter Display 之類）、插畫多用低彩度水彩感。

什麼時候選：健康 app、心理 / 冥想 / 學習產品、母嬰、生活風格、消費端 onboarding。

不適合：B2B、企業端、需要「專業可靠」氣味的場景。

怎麼選：兩個問題就決定

不確定選哪個？問自己兩件事：

Q1：你的使用者預期看到什麼？

工程師、企業端 → Modern Minimal（2）或 Tech Utility（3）
一般消費者 → Soft Warm（5）
文化 / 媒體讀者 → Editorial（1）
想被注意到 → Brutalist（4）

Q2：資料密度多高？

一頁就幾個重點 → Editorial、Soft Warm、Brutalist 都行
中等密度 → Modern Minimal
大量數字 / 表格 / 時序 → Tech Utility 沒得選

兩題答案重疊的就是答案。基本上 80% 的場景會落在 Modern Minimal 或 Soft Warm，剩下 20% 才考慮另外三個。

跟 71 套 design system 並存

很多人問：那這 5 個方向跟 71 套 design system 是什麼關係？答：互斥但同層。

有 brand spec → 用 design system（Linear、Vercel、Stripe…）
沒 brand spec → 用 visual direction（這 5 個）
兩邊都選 → design system 優先

agent 拿到的 prompt stack 裡，這兩條路只會走一條，不會混搭。設計上故意這樣——混搭就會 slop。

一個小但重要的細節

5 個方向都用 OKLch 色彩空間定義，不是 RGB / HSL。原因：OKLch 在感知上是均勻的，調亮度 / 飽和度時不會出現 HSL 那種「同一個 lightness 看起來亮度差很多」的問題。Agent 拿到 OKLch token，把它編譯成現代瀏覽器的 color() 或退回 sRGB hex 都可以。

實務上你不會直接看到 OKLch 數值，但你會感覺到：5 個方向的色票看起來都很均衡——這就是 OKLch 在背後做的事。

下一站：反 AI-slop 機器

OK，現在你懂三件大事了：skill 決定畫面、design system 決定 token、visual direction 是 fallback。但 Open Design 真正讓輸出不 slop 的關鍵不是這三件——是「五維自評」「P0 閘門」「brand-spec 五步驟」這套反 AI-slop 機器。

下一篇拆這套機器，這是 Open Design 對比 Claude Design 最大的差異化資產。