系列文章: Opendesign (11/11)

← Open Design Prompt Stack 架構：作者說『這才是真正的產品』
Open Design 真實工作流：用 AI Agent 做提案簡報、Dashboard、App 原型
#open-design#workflow#pitch-deck#dashboard#mobile-app#tutorial

Open Design 真實工作流：用 AI Agent 做提案簡報、Dashboard、App 原型

8 min read

第 1 篇到 第 9 篇 把背景、安裝、哲學、組件、機器、架構全部講過了。這最後一篇是把所有東西串起來——三個真案子，從打開 prompt 到 export，每個都跑完。讀完這篇你不會再卡在「我懂概念但不知道怎麼用」。

案子一：seed round pitch deck（雜誌風）

情境：你的副業要 raise seed round，下週要見投資人，需要一份 pitch deck。

步驟

1. 選 skill 跟 design system

  • skill：guizang-ppt（雜誌風 web PPT）
  • design system：warm-editorial（如果你沒自己的品牌）或你公司的

2. prompt

make me a magazine-style pitch deck for our seed round.
company: ⟨your one-liner⟩
problem: ⟨customer pain in one sentence⟩
solution: ⟨what your product does⟩
traction: ⟨real numbers if you have them, dashes if you don't⟩
ask: $⟨amount⟩ for ⟨runway⟩

3. 預期會看到的 turn 1

不會直接出 deck。會跳一張 form 問你：

  • Audience：seed VC / angel / 朋友家人
  • Tone：confident / curious / urgent
  • Scale：8–12 頁 / 5–7 頁
  • Brand context：有品牌嗎？貼 URL 或 LOGO

4. turn 2 跟 turn 3

  • 沒品牌的話 turn 2 會問你選哪個 visual direction（5 個方向 那篇講過）
  • 有品牌的話 turn 2 跑 brand-spec extraction，把你品牌的色票、字體寫進 brand-spec.md，念給你聽
  • turn 3 開始 emit TodoWrite，stream 出每一頁的計畫

5. 出 artifact

每頁是一個 HTML，agent 跑完五維自評才送進 sandboxed iframe。雜誌風的特色：襯線顯示字、warm rust accent、大留白、文字當主視覺。

6. export

Deck 模式可以直接 export PDF 或 PPTX。下載一份、丟給投資人。

心得

  • 第一次跑會覺得 form 「囉唆」——但第二次之後你會感謝它，因為跳過 form 的版本通常要改三輪
  • guizang-ppt 預設帶 P0 checklist，所以「不要紫漸層」「不要 emoji icon」這些不用你下指令
  • 數據沒有就寫 —，比假數字好

案子二：SaaS dashboard（Linear 風）

情境：你的 SaaS 產品要做後台 admin 介面，老闆要 demo 給投資人看「產品看起來成熟」。

步驟

1. 選 skill 跟 design system

  • skill：dashboard
  • design system：linear-app 或 vercel（兩個都很適合 dashboard 場景）

2. prompt

admin dashboard for an analytics SaaS:
- left sidebar with 6 nav items: overview, users, revenue, churn, segments, settings
- top section: 4 KPI cards (MRR, active users, churn rate, NPS)
- main: 30-day revenue chart + recent activity table
- use placeholder numbers, label them as samples

3. 預期的 form 互動

  • Audience：internal team / customers / investors
  • Tone：professional / friendly / utility
  • Scale：1 頁 / multi-page

4. agent 怎麼動工

dashboard skill 的 assets/template.html 是一個有 sidebar + grid + chart placeholder 的種子。agent 會：

  1. Read template.html
  2. Read linear-app 的 DESIGN.md（拿到具體 token：oklch 色票、Inter Display + Inter、4/8/12/16 spacing）
  3. 按 prompt 填內容
  4. 五維自評（執行 / 階層特別重要——dashboard 視覺階層亂掉就壞）
  5. emit

5. 看 artifact

iframe 渲染出來會是一個你可以滑動、interact 的真網頁。看不順眼的地方在 file workspace 直接改 HTML / CSS。

6. export

dashboard 通常是長期專案，export HTML + ZIP，丟回你的 codebase 當 reference。

心得

  • 「placeholder 標 sample」這句話很重要——不下這個指令 agent 會編數字，反 slop 機器 會擋下來但保險點自己也說
  • linear-app 跟 vercel 兩套 design system 風格相近但不一樣：linear 偏冷、accent 紫；vercel 偏黑白純粹。試兩個都跑一次看哪個合
  • dashboard 是 desktop only——選 mobile platform 不適合這個 skill

案子三：mobile app onboarding 三畫面

情境：你的 app 要重做 onboarding，PM 要看三張畫面流程：splash → value-prop → sign-in。

步驟

1. 選 skill 跟 design system

  • skill：mobile-onboarding
  • design system：soft-warm（消費端 app 通常這個方向最合）

2. prompt

mobile onboarding for ⟨app name⟩, an app that ⟨one-liner⟩.
3 frames:
1. Splash with logo + tagline
2. Value prop ("here's what you'll get") with 3 bullets + illustration placeholder
3. Sign-in with apple / google / email options

3. 預期的 form

mobile-onboarding 的 form 會多問一個欄位：

  • Frame：iPhone 15 Pro / Pixel / iPad

選 iPhone 15 Pro，輸出會用 Open Design 內建的 pixel-accurate iPhone frame（status bar、Dynamic Island、home indicator 全部對的）。

4. agent 動工

mobile-onboarding 是 multi-frame skill，輸出三張獨立 frame 拼在一個展示舞台上。agent：

  1. Read template.html（裡面已經有三個 frame 的 placeholder）
  2. Read soft-warm DESIGN.md（暖中性、低反差）
  3. 把每一 frame 填進來
  4. 跑五維自評（restraint 很重要——onboarding 一頁塞太多資訊就死）
  5. emit

5. 看 artifact

iframe 裡面會看到三支 iPhone 並排在 stage 上，每一張都是真的 frame、可以滑、可以 click 進 sign-in。視覺上跟 Behance 那些「Mobile Onboarding Concept」差不多水準。

6. export

PNG / PDF 都行。給 PM 看完拍板了，再進 Figma 或直接交給工程師寫。

心得

  • mobile 場景強烈建議用 soft-warm 或 modern-minimal，不要硬上 brutalist
  • 三個 frame 不要一次塞太多，splash 越乾淨越好
  • iPhone frame 是 pixel-accurate 的，意思是輸出可以直接給 reviewer 看，不用再加裝飾

工作流通用心法

跑完三個案子，提幾個跨案子都成立的訣竅：

1. 不要跳過 form：30 秒 form 換 30 分鐘 redirect 划算到不行。每次都填到底。

2. design system 先選對：選錯一切白搭。記住基本配對：科技 → linear/vercel；文化 → editorial；消費 → soft-warm；金融 → tech-utility；想刷存在感 → brutalist。

3. 真數字就貼，沒有就寫 —：不要叫 agent 編數字，反 slop 機器 雖然會擋但更乾脆是你直接說。

4. 第一輪不滿意是常態：五維自評通常需要兩輪。第二輪 emit 出來才會比較穩。

5. 重複任務開新 conversation 不是新 project：prompt stack 8–15K token，KV cache 重用會差很多。

系列收

恭喜你讀到這——10 篇下來你應該已經掌握 Open Design 的整套世界觀：

下次需要做設計品的時候，不要再丟「請幫我做個漂亮的 X」這種 prompt——選 skill、選 design system、填 form、讓機器幫你擋掉 80% 的方向錯誤。然後專心修剩下 20%。

工具不會替你想清楚要做什麼，但 Open Design 至少會逼你先把要做什麼寫下來——這就是它跟「直接丟 prompt 給 ChatGPT 出 HTML」的關鍵差異。