系列文章: Opendesign (10/11)

← Open Design 反 AI-slop 機器：問題表格、五維自評、P0 閘門完整拆解Open Design 真實工作流：用 AI Agent 做提案簡報、Dashboard、App 原型 →
Open Design Prompt Stack 架構：作者說『這才是真正的產品』
#open-design#prompt-stack#prompt-engineering#ai-architecture

Open Design Prompt Stack 架構：作者說『這才是真正的產品』

8 min read

反 AI-slop 機器 講完，這篇是這個系列最硬的一篇——拆 Open Design 真正的核心資產：prompt stack。作者直白地寫：

What you compose at send time isn't "system + user". The prompt stack is the product.

這句話不是行銷話術，是事實。Open Design 的程式碼可以複製、UI 可以抄、daemon 架構可以重做——但 prompt stack 的這六層，是一年實驗的結晶。看完這篇你會理解這個工具的 IP 在哪。

六層架構鳥瞰

每次發 prompt 前，daemon 會把這六層按順序疊起來，組成最終送給 agent CLI 的 system prompt：

┌────────────────────────────────────────────────────┐
│ 1. DISCOVERY directives                            │
│    (turn-1 form, turn-2 brand 分支, TodoWrite,     │
│     5-dim critique)                                │
├────────────────────────────────────────────────────┤
│ 2. Identity charter                                │
│    (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop,        │
│     junior-pass)                                   │
├────────────────────────────────────────────────────┤
│ 3. Active DESIGN.md (從 71 套選一套)               │
├────────────────────────────────────────────────────┤
│ 4. Active SKILL.md (從 19 個選一個)                │
├────────────────────────────────────────────────────┤
│ 5. Project metadata                                │
│    (kind, fidelity, speakerNotes, animations,      │
│     inspiration ids)                               │
├────────────────────────────────────────────────────┤
│ 6. Skill side files                                │
│    (auto-injected pre-flight: 讀 template.html     │
│     + references/*.md)                             │
└────────────────────────────────────────────────────┘

第六層之上有時還會加一條 DECK_FRAMEWORK_DIRECTIVE（deck mode 沒指定 skill 時自動補上）。完整組裝程式碼在 apps/web/src/prompts/system.ts 跟 apps/web/src/prompts/discovery.ts 看得到。

第 1 層：DISCOVERY directives

這層管「對話流程」——每一輪該做什麼、不該做什麼。包含四個子規則：

RULE 1：turn 1 只能 form
新對話第一輪，agent 只能 emit <od:question_form>。不准 think、call tool、寫文字。

RULE 2：turn 2 brand 分支
turn 2 看使用者填的 form：有 brand spec 走 brand-spec extraction（反 slop 那篇 講過的五步驟）；沒有就 emit 第二張 form 給使用者選 visual direction。

RULE 3：TodoWrite 規劃
agent 動工前要先 emit 一份 TodoWrite 計畫，UI 把它 stream 成 live card。使用者可以即時 redirect。

RULE 4：5-dim critique
emit <artifact> 之前要跑五維自評（哲學 / 階層 / 執行 / specificity / 克制），任一維度 < 3 重做。

這四條把整輪對話的節奏寫死。Agent 模型本身可能想自由發揮，但 RULE 1–4 把它的行為夾在很窄的軌道裡。

第 2 層：Identity charter

這層管「agent 是誰、信念是什麼」。三個核心子文件：

  • OFFICIAL_DESIGNER_PROMPT — 把 agent 設定為「資深設計師」的角色定義：注重細節、克制、有品味
  • anti-AI-slop — 完整的 slop 黑名單（紫漸層、emoji icon、Inter display face、編造數據…）
  • junior-pass — Junior-Designer 模式：先發問再動手、每個決定要寫下理由

這層比 RULE 1–4 更基礎，是 agent 整體心智的設定。換掉這層 = 工具人格徹底改變。

第 3 層：Active DESIGN.md

從 71 套 design system 選一套，整份 DESIGN.md 全文注入。9 段（color / typography / spacing / layout / components / motion / voice / brand / anti-patterns）全部進 prompt。

這層的設計選擇很關鍵：不是 token JSON，是人類可讀 Markdown。為什麼？因為 LLM 對自然語言理解比對 JSON 結構好。「不要紫色漸層」直接寫成這句話，agent 的遵守度比寫成 {"forbidden_colors": ["#8b5cf6"]} 高很多。

切換 design system = 換掉這層的內容、其他五層不動。

第 4 層：Active SKILL.md

從 19 個 skill 選一個，SKILL.md 全文注入。這份檔案告訴 agent：

  • 這個 skill 在做什麼類型的設計品（mode + scenario）
  • 預期的輸出長相
  • 該讀哪些 side files 才能上手（pre-flight 規則）
  • 這個 skill 專屬的禁區

跟第 3 層搭：design system 管「視覺 token」，skill 管「視覺結構」。兩層都換 = 完全不同的輸出。

第 5 層：Project metadata

這層管「這個 specific 專案的細節」：

kind: deck                    ← prototype | deck | template | design-system
fidelity: high                ← low | mid | high
speakerNotes: true            ← deck 用，要不要備註
animations: subtle            ← none | subtle | rich
inspiration: [linear, stripe] ← 額外靈感來源

這些是使用者在 UI 細部設定面板選的。給 agent 一些可調的小旋鈕——同一個 SaaS landing skill，調 fidelity high 跟 low 出來的精細度差很多。

第 6 層：Skill side files（pre-flight 注入）

最後一層也是最有意思的一層。daemon 在 send 之前會自動把 skill 目錄裡的這幾個檔案 read 進來，當作對話脈絡：

skills/<active>/assets/template.html       ← seed 模板
skills/<active>/references/layouts.md      ← 排版規格
skills/<active>/references/components.md   ← 元件規格
skills/<active>/references/checklist.md    ← P0/P1/P2 閘門

agent 拿到的不只是 SKILL.md 的「指令」，還有 template 的「具體種子」。這就是為什麼 Open Design 的輸出有「設計師 paid attention」的感覺——它真的拿到了參考種子，不是憑記憶生成。

為什麼這個架構叫「stack」

注意這六層不是 concat 在一起就完事，順序很重要：

  • 第 1 層（DISCOVERY）放最前面，是「對話節奏的硬規則」，agent 看到第一件事就是這個
  • 第 2 層（identity）次之，定下 agent 的人格
  • 第 3、4 層（DESIGN.md、SKILL.md）是這次任務的具體規格
  • 第 5 層（metadata）是這個專案的微調
  • 第 6 層（side files）是參考材料

順序倒過來就會壞——agent 先看到 template.html 才看到 RULE 1，可能跳過 form 直接開始畫。stack 的順序本身就是設計。

每一層都可改

這是 Open Design 比 Claude Design 強的核心點：每一層都是檔案、都可改：

層 改檔案
1. DISCOVERY apps/web/src/prompts/discovery.ts
2. Identity apps/web/src/prompts/system.ts 裡的 OFFICIAL_DESIGNER_PROMPT
3. DESIGN.md design-systems/*/DESIGN.md
4. SKILL.md skills/*/SKILL.md
5. metadata UI 細部設定面板
6. side files skills/*/assets/、skills/*/references/

不爽哪一層的設計？改它。Claude Design 你連 system prompt 是什麼都看不到。

一個務實小提醒

Prompt stack 雖然強，但每一層都會吃 token。整個 stack 疊起來通常 8–15K token——這是 Open Design 為什麼第一次跑會覺得「有點慢」的原因。CLI 收到一大包 system prompt，agent 要花時間處理。

折衷做法是：對重複任務開新 conversation 而不是新 project。Daemon 把 prompt stack 快取進當前 conversation 的 KV cache，第二輪跑會快很多。

下一站：套到真案子

理論講完了。最後一篇我們把這 9 篇學到的東西套到三個真案子：做提案簡報、Dashboard、Mobile App 原型，從打開 prompt 到 export 全程示範。讀完那篇，你應該能自己跑一輪了。