Open Design 是什麼？
Open Design 是一個開源設計工作室（Apache-2.0），作為 Anthropic Claude Design 的開源替代品。
它將你現有的 coding agent（Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen 等）變成設計引擎，通過 118 個可組合技能 和 146 個品牌級設計系統，讓 AI 生成專業級的設計產出。
核心能力
- 118 個技能：基於 SKILL.md 格式的文件化技能包
- 146 個設計系統：涵蓋 Apple、Vercel、Stripe、Linear、Figma 等品牌風格
- 12 個 Agent 適配器：支持主流 coding agent CLI
- 本地運行：
pnpm tools-dev本地開發，Vercel 部署 - BYOK 架構：Bring Your Own Key，每層都可自定義
技能觸發機制
方式一：自然語言觸發（最常用）
直接告訴我你想做什麼，我會自動識別對應技能：
| 你想做的 | 你可以講的 | |---|---| | 做簡報 / PPT | 「做一個 seed round 的 pitch deck」 | | 做網頁原型 | 「整一個 web prototype」 | | 做 Landing Page | 「做一個 SaaS landing page」 | | 做 Dashboard | 「做一個數據儀表板」 | | 做手機原型 | 「做一個 mobile app」 | | 設計評審 | 「評審下呢個設計」/「5 维度评审」 | | 做小紅書貼文 | 「做一個小紅書 post」 |
方式二：指定技能名稱
如果你想用特定技能：
用 web-prototype 技能整個網頁
用 mobile-app 技能做個手機原型
用 critique 技能評審我個設計
方式三：指定設計風格
用 Stripe 風格整一個 landing page
用 Apple 風格做 pitch deck
用 brutalist 風格做網頁
技能分類與使用場景
🎯 設計評審類
Critique · 5 維度設計評審
觸發關鍵字：「評審」/「design review」/「5 维度评审」/「design audit」
這個技能會生成一份 HTML 設計評審報告，包含：
- 哲學一致性 (Philosophy Consistency) — 設計方向是否清晰一致
- 視覺層級 (Visual Hierarchy) — 信息層次是否清晰
- 細節執行 (Detail Execution) — 對齊、間距、排版等細節
- 功能性 (Functionality) — 是否滿足使用場景
- 創新性 (Innovation) — 是否有令人眼前一亮的設計
輸出內容：
- 雷達圖（SVG，展示 5 個維度分數）
- 5 個維度卡片（含證據和評分 0-10）
- Keep / Fix / Quick-wins 行動清單
使用場景：
- 生成設計後請求評審
- 比較兩個設計方案
- 自我檢查（生成前先評審）
📊 簡報 / 演示類
HTML-PPT 系列
| 技能 | 觸發關鍵字 | 適用場景 | |---|---|---| | html-ppt | 「簡報」/「PPT」 | 基礎 HTML 簡報 | | html-ppt-pitch-deck | 「pitch deck」/「seed round」 | 融資路演簡報 | | html-ppt-weekly-report | 「週報」/「weekly report」 | 週報簡報 | | html-ppt-product-launch | 「產品發布」/「product launch」 | 產品發布簡報 | | html-ppt-taste-editorial | 「編輯風格」/「magazine」 | 雜誌風格簡報 | | html-ppt-taste-brutalist | 「粗野主義」/「brutalist」 | 粗野風格簡報 | | html-ppt-xhs-post | 「小紅書」/「xhs」 | 小紅書貼文風格 | | html-ppt-xhs-pastel-card | 「小紅書 pastel」 | 小紅書粉彩風格 | | html-ppt-tech-sharing | 「技術分享」/「tech sharing」 | 技術分享簡報 | | html-ppt-knowledge-arch-blueprint | 「知識架構」/「blueprint」 | 知識架構藍圖 |
Magazine PPT (Guizang PPT)
觸發關鍵字：「雜誌風格 PPT」/「magazine ppt」/「歸藏」
高品質雜誌風格簡報，包含：
- WebGL 動效
- 多種排版模板
- 自定義字體支持
🌐 網頁原型類
| 技能 | 觸發關鍵字 | 風格 | |---|---|---| | web-prototype | 「web prototype」/「網頁原型」 | 基礎網頁原型 | | web-prototype-taste-brutalist | 「brutalist」/「粗野」 | 粗野主義 | | web-prototype-taste-editorial | 「editorial」/「編輯」 | 雜誌編輯風格 | | web-prototype-taste-soft | 「soft」/「柔和」 | 柔和風格 | | saas-landing | 「landing page」/「落地頁」 | SaaS 落地頁 | | open-design-landing | 「open design landing」 | Open Design 風格落地頁 | | pricing-page | 「pricing page」/「價格頁」 | 定價頁面 | | waitlist-page | 「waitlist page」/「等候名單」 | 等候名單頁面 | | kanban-board | 「kanban」/「看板」 | 看板界面 | | dashboard | 「dashboard」/「儀表板」 | 數據儀表板 | | social-media-dashboard | 「social dashboard」/「社交儀表板」 | 社交媒體儀表板 |
📱 移動應用類
| 技能 | 觸發關鍵字 | 用途 | |---|---|---| | mobile-app | 「mobile app」/「手機應用」 | 手機應用原型 | | mobile-onboarding | 「onboarding」/「新手引導」 | 新手引導流程 |
📝 內容 / 文檔類
| 技能 | 觸發關鍵字 | 用途 | |---|---|---| | blog-post | 「blog」/「博文」 | 博客文章 | | email-marketing | 「email marketing」/「營銷郵件」 | 營銷郵件模板 | | meeting-notes | 「meeting notes」/「會議記錄」 | 會議記錄 | | hr-onboarding | 「HR onboarding」/「入職」 | 員工入職文檔 | | weekly-update | 「weekly update」/「週更新」 | 週更新報告 | | digital-eguide | 「e-guide」/「電子指南」 | 電子指南 | | docs-page | 「docs page」/「文檔頁」 | 文檔頁面 | | eng-runbook | 「runbook」/「運維手冊」 | 運維手冊 |
🎨 創意 / 媒體類
| 技能 | 觸發關鍵字 | 用途 | |---|---|---| | audio-jingle | 「audio jingle」/「音效」 | 音頻廣告/音效 | | motion-frames | 「motion frames」/「動畫幀」 | 動畫幀序列 | | hatch-pet | 「hatch pet」/「孵化寵物」 | 虛擬寵物遊戲 | | gamified-app | 「gamified app」/「遊戲化」 | 遊戲化應用 | | sprite-animation | 「sprite animation」/「精靈動畫」 | Sprite 動畫 | | video-shortform | 「short video」/「短視頻」 | 短視頻腳本 |
💼 商業 / 分析類
| 技能 | 觸發關鍵字 | 用途 | |---|---|---| | finance-report | 「finance report」/「財務報告」 | 財務報告 | | dcf-valuation | 「DCF valuation」/「DCF 估值」 | DCF 估值模型 | | trading-analysis-dashboard-template | 「trading analysis」/「交易分析」 | 交易分析儀表板 | | pm-spec | 「PM spec」/「產品規格」 | 產品規格文檔 | | design-brief | 「design brief」/「設計簡報」 | 設計簡報 | | team-okrs | 「OKR」/「目標管理」 | 團隊 OKR 文檔 |
72+ 品牌設計系統
Open Design 提供大量品牌級設計系統，可以套用喺生成嘅內容上：
科技 / 互聯網品牌
| 設計系統 | 風格描述 | 適合場景 | |---|---|---| | Apple | 極簡、高端、大量留白 | 產品發布、高端品牌 | | Vercel | 現代、技術感、深色模式 | 開發者工具、技術產品 | | Stripe | 優雅、漸變色、流暢動畫 | SaaS 落地頁、支付產品 | | Linear | 深色、極簡、精緻細節 | 技術產品、工具類 | | Figma | 活潑、彩色、創意 | 設計工具、創意產品 | | Cursor | 現代 IDE 風格 | 開發者工具 |
媒體 / 出版品牌
| 設計系統 | 風格描述 | 適合場景 | |---|---|---| | Monocle | 雜誌編輯風格、高雅 | 高端簡報、品牌故事 | | WIRED | 科技媒體、前衛 | 科技簡報、創新主題 | | Kinfolk | 慢生活、極簡、溫暖 | 生活方式品牌 | | Burgundy Editorial | 酒紅色調、高級感 | 高端品牌簡報 |
完整工作流
標準流程：生成 → 評審 → 修改
1. 告訴我想做什麼（生成設計）
2. 我生成 HTML 原型
3. 你要求「評審」（5 維度評審）
4. 我輸出評審報告
5. 根據評審修改設計
6. 循環直到滿意
實戰例子
例子 1：生成融資簡報
闆：幫我整一個 seed round 的 pitch deck
公司：Best Agentics
業務：AI Agent 解決方案
風格：Modern, Professional
頁數：10 頁左右
內容：問題、解決方案、市場、商業模式、團隊
我會：
- 讀取
html-ppt-pitch-deck/SKILL.md - 根據技能指示生成 HTML 簡報
- 輸出簡報文件
例子 2：生成 Landing Page
闆：幫我整一個 web prototype
類型：Best Agentics 落地頁
包含：Hero section, Features, Pricing, CTA
風格：Brutalist
我會：
- 讀取
web-prototype-taste-brutalist/SKILL.md - 生成粗野風格網頁原型
- 輸出 HTML 文件
例子 3：設計評審
闆：critique / 評審下剛才個設計
我會：
- 讀取
critique/SKILL.md - 對設計進行 5 維度評審
- 生成含雷達圖的 HTML 評審報告
例子 4：指定設計風格
闆：用 Stripe 風格重新設計剛才個簡報
我會：
- 套用 Stripe 設計系統的配色、字體、風格
- 重新生成簡報
進階技巧
1. 組合技能
你可以要求組合多個技能：
先整一個 landing page，然後做 5 維度評審
2. 迭代優化
第一版：整一個簡報
第二版：加多啲動畫效果
第三版：評審下，然後根據評審修改
3. 風格混合
用 Apple 的極簡風格，加少少 Stripe 的漸變色
4. 批量生成
幫我整一套簡報，包含：
- 封面
- 問題頁
- 解決方案頁
- 市場規模頁
- 商業模式頁
- 團隊介紹頁
- 融資需求頁
- 聯繫方式頁
技術架構
文件結構
skills/open-design/
├── [skill-name]/
│ ├── SKILL.md # 技能定義文件
│ └── [其他資源文件]
├── design-systems/ # 146 個設計系統
│ └── [design-system-name]/
│ └── DESIGN.md # 設計系統定義
└── templates/ # 模板文件
SKILL.md 結構
每個技能的 SKILL.md 包含：
---
name: skill-name
description: 技能描述
triggers:
- "觸發關鍵字 1"
- "觸發關鍵字 2"
od:
mode: prototype # 模式
platform: desktop # 平台
scenario: design # 場景
---
總結
Open Design 技能系統的核心優勢：
- 自然語言驅動 — 用口語表達需求，自動匹配技能
- 118 個技能 — 覆蓋簡報、網頁、移動應用、內容等多個領域
- 146 個設計系統 — 品牌級設計風格，即取即用
- 5 維度評審 — 確保設計質量的評審機制
- 迭代優化 — 生成 → 評審 → 修改的閉環工作流
簡單嚟講：你只需要講你想做什麼，我就會自動匹配技能同設計系統，生成專業級嘅設計原型！ 🫡