Open Design開源AI設計平台操作指南
整理版優先睇
Open Design 開源 AI 設計平台操作指南——本地優先、多 Agent 兼容，內置 19 個 Skills 同 71 套 Design Systems
呢篇文章係由 nexu-io 團隊撰寫嘅 Open Design 操作指南。Open Design 係一個本地優先、完全開源（Apache-2.0）嘅 AI 設計生成平台，定位係 Anthropic Claude Design 嘅開源替代方案。作者團隊喺 Claude Design 發佈後約 72 小時內完成逆向工程，編寫超過 18,700 行代碼，還原咗超過 95% 嘅核心體驗。文章主要面向已經用緊 Claude Code 或類似 CLI 工具嘅獨立開發者、PM 同設計師，想引入 AI 輔助設計工作流嘅讀者。
文章嘅核心架構係「Web App + 本地 Daemon + 用戶已有嘅 Agent CLI」，平台唔內置 AI Agent，反而將 Agent 運行委託畀用戶電腦上已經裝好嘅 CLI 工具，自己只負責 Skill 編排、Design System 注入同提示詞堆棧。截至 2026 年 4 月，Open Design 內置 19 個可組合嘅 Skills（覆蓋原型設計、演示文稿、辦公文檔）同 71 套品牌級 Design Systems（如 Linear、Stripe、Vercel 等），理論組合超過 1,300 種。另外仲有 6 重反 AI-Slop 機制，包括強制初始化表單、品牌資產五步協議、五維自評、P0/P1/P2 檢查清單等，確保輸出質量。
總括嚟講，Open Design 嘅最大賣點係靈活性同開源…
- 【結論】Open Design 係本地優先、開源嘅 AI 設計平台，唔內置 Agent，改為委託畀用戶本地 CLI，支援 Claude Code、Codex、Cursor Agent 等多種工具。
- 【方法】透過 19 個文件式 Skills（分 Prototype/Deck/Template 三類）同 71 套 Design Systems（9 段式 Markdown），組合超過 1,300 種設計風格，全部可自定義。
- 【差異】同 Claude Design 最大分別係 Apache-2.0 許可證、Agent 來源靈活、Skills/Design Systems 可擴展，同埋內置 6 重反 AI-Slop 機制（包括初始化表單、品牌資產協議、五維自評等）。
- 【啟發】強制初始化表單（Discovery Form）同品牌資產五步協議能防止 80% 返工；五維自評同 P0/P1/P2 檢查清單確保質量；誠實佔位符避免 AI 編造數據。
- 【可行動點】立即安裝 Node.js 24 同 pnpm 10.33.2，然後 git clone 倉庫，執行 `pnpm tools-dev run web` 啟動，揀 web-prototype Skill 同 Neutral Modern Design System 試第一個設計。
Open Design GitHub 倉庫
官方 GitHub 倉庫，包含完整代碼、文檔同所有 Skills/Design Systems
結構示例
# nvm
nvm install 24
nvm use 24
# fnm
fnm install 24
fnm use 24項目背景同核心特性
Open Design 係由 nexu-io 團隊開發嘅本地優先開源 AI 設計平台，作為 Claude Design 嘅開源替代方案。團隊喺 Claude Design 發佈後 72 小時內逆向還原超過 95% 核心體驗，編寫超過 18,700 行代碼。平台目前有超過 4,500 個 GitHub Star，內置 19 個 Skills 同 71 套 Design Systems。
完全開源（Apache-2.0）
不內置 AI Agent，委託畀本地 CLI
- 多 Agent 兼容：自動檢測 PATH 中嘅 Claude Code、Codex、Cursor Agent 等，無需額外配置
- 19 個內置 Skills：覆蓋原型設計（Web、SaaS、Dashboard、移動端）、演示文稿（Deck/PPT）、辦公文檔（PRD、週報、會議紀要等）
- 71 套品牌級 Design Systems：Linear、Stripe、Vercel、Airbnb、Notion 等，9 段式 DESIGN.md 格式
- 反 AI-Slop 機制：6 重質量控制，包括強制初始化表單、品牌資產五步協議、五維自評等
- BYOK 模式：支援自帶 API Key，可接入 Anthropic 官方或第三方 API 中轉
安裝同快速上手
安裝 Open Design 只需要三步：克隆倉庫、啟用 pnpm 並安裝依賴、啟動本地服務。系統要求 Node.js 24.x 同 pnpm 10.33.x，推薦用 nvm 或 fnm 管理版本。
- 1 git clone https://github.com/nexu-io/open-design.git 然後 cd open-design
- 2 corepack enable && corepack pnpm --version 確認版本，然後 pnpm install
- 3 pnpm tools-dev run web 啟動前台 daemon + web，默認打開 http://localhost:3000
首次啟動會自動掃描 PATH 識別可用 Agent CLI
如果冇 CLI，自動回退到 BYOK 模式，需要粘貼 API Key
驗證安裝：打開瀏覽器訪問 localhost:3000，確認頂部 Agent 選擇器顯示已識別嘅 CLI，左側 Skill 選擇器有 19 個 Skill，右側 Design System 選擇器有 71 個品牌系統。中間為聊天輸入區域。
Skill 同 Design System 系統詳解
Open Design 內置 19 個 Skills，按模式分為三類：設計交付類（Prototype，8 個）、演示文稿類（Deck，2 個）、辦公文檔類（Template，9 個）。每個 Skill 係一個文件夾，包含 SKILL.md、assets 同 references，可以自由自定義。
- Prototype 模式：web-prototype（默認）、saas-landing、dashboard、pricing-page、docs-page、blog-post、mobile-app、simple-deck
- Deck 模式：guizang-ppt（雜誌風格 Web PPT，默認）、magazine-poster
- Template 模式：pm-spec、weekly-update、meeting-notes、eng-runbook、finance-report、hr-onboarding、invoice、kanban-board、team-okrs
71 套品牌級 Design Systems，按行業分類，每套係 9 段式 DESIGN.md
Design System 嘅 9 段 Schema 包括 Visual Theme、Color、Typography、Spacing & Grid、Layout & Components、Motion、Voice、Anti-patterns。Agent 只讀取 Skill 指定嘅 Section，節省 token。
視覺方向選擇器：5 種確定性方向，鎖定 OKLch 配色同字體棧，Agent 唔會自由發揮
配置、自定義同 BYOK 接入
Open Design 嘅配置分佈喺多個位置：Daemon 全局配置（~/.open-design/config.toml）、項目級配置（./.od/config.json）、Skill 清單同 Design System 文件。所有配置都係純文字，可納入版本控制。
自定義 Skill：只需創建一個文件夾，放 SKILL.md、種子模板同 references
自定義 Design System：在 design-systems/<slug>/ 下創建 DESIGN.md，必須包含全部 9 個 Section
- 1 SKILL.md 必須包含 name、description、triggers、od 字段（mode、platform、design_system sections 等）
- 2 必須附帶真實嘅 example.html（手搓設計交付物）同 references/checklist.md
- 3 必須通過 Anti-AI-Slop 檢查清單，禁止紫色漸變、通用 Emoji 等
BYOK 接入：設定 ANTHROPIC_API_KEY 環境變量，或者用 ANTHROPIC_BASE_URL 指向第三方 API 中轉。Claude Code CLI 嘅配置會自動畀 Open Design 重用。
BYOK 模式：冇本地 CLI 時嘅瀏覽器回退方案，Key 存喺 localStorage 或 Daemon config.toml
使用技巧同反 AI-Slop
- 第一次使用：由 web-prototype 開始，搭配 Neutral Modern Design System，輸入簡單需求
- 漸進探索：試 saas-landing + Linear 或 Stripe 風格
- Deck 製作：用 guizang-ppt（雜誌風 PPT 默認 Skill）
- 辦公文檔：用 Template 模式嘅 9 個 Skill 快速產出 PRD、週報等
初始化表單能防止 80% 返工
品牌資產五步協議：定位 → 下載 → 提取色值 → 編碼規範 → 複述確認
Prompt 技巧：明確 Design Surface、提供品牌上下文、指定約束條件、善用 Discovery Form、迭代優於一次性完美。優先使用 Claude Code CLI 因為流式格式還原度最高。
呢篇文章係寫畀獨立開發者、PM同設計師，系統咁介紹Open Design嘅安裝部署、19個Skills嘅完整用法、71套Design Systems嘅配置同自訂方法、BYOK API接入，以及由本地開發到Vercel生產部署嘅完整操作流程。適合已經用緊Claude Code或類似CLI工具、想引入AI輔助設計工作流程嘅讀者。
目錄
概述
1.1 項目背景
1.2 核心特性
1.3 同Claude Design嘅對比環境準備與安裝
2.1 系統要求
2.2 三步安裝
2.3 驗證安裝
2.4 版本選擇同升級快速上手
3.1 首次啓動流程
3.2 第一個設計原型
3.3 運行時目錄結構功能操作詳解
4.1 Skill系統
4.2 Design System系統
4.3 視覺方向選擇器
4.4 初始化表單同品牌資產協議
4.5 預覽同導出
4.6 Agent管理配置同定製
5.1 基礎配置
5.2 自訂Skill
5.3 自訂Design System
5.4 BYOK API接入
5.5 接入新嘅Agent CLI使用技巧同最佳實踐
6.1 Skill選擇策略
6.2 Prompt編寫技巧
6.3 性能優化
6.4 安全考量常見問題同故障排除
7.1 啓動同連接問題
7.2 Agent相關問題
7.3 輸出質量問題
7.4 部署問題實戰案例
8.1 案例一：SaaS產品落地頁
8.2 案例二：融資路演Deck
8.3 案例三：移動App原型總結
參考文獻
1. 概述
1.1 項目背景
Open Design係由nexu-io團隊開發嘅一個本地優先（Local-first）、完全開源（Apache-2.0）嘅AI設計生成平台，定位係Anthropic Claude Design嘅開源替代方案。個項目喺Claude Design發佈咗大約72個鐘頭之內完成咗核心逆向工程，寫咗超過18,700行代碼，還原咗Claude Design超過95%嘅核心體驗。
Open Design最大嘅設計理念係「唔內置AI Agent」——佢將Agent嘅運行委託畀用戶電腦上已經裝好嘅CLI工具（Claude Code、Codex CLI、Cursor Agent、Gemini CLI、OpenCode、Qwen Code等），自己淨係負責Skill編排、Design System注入、提示詞堆疊（prompt stack）同沙盒化預覽渲染。
截至2026年4月，個項目喺GitHub上獲得超過4,500個Star，內置19個可組合嘅Skills同71套品牌級Design Systems。
1.2 核心特性
多Agent兼容：自動偵測PATH入面嘅Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen Code，唔使額外配置 19個內置Skills：涵蓋原型設計（Web、SaaS、Dashboard、手機端）、簡報（Deck/PPT）、辦公文檔（PRD、週報、會議紀錄、OKR等） 71套品牌級Design Systems：Linear、Stripe、Vercel、Airbnb、Notion、Apple、Tesla等知名產品嘅視覺體系，9段式DESIGN.md格式 檔案式擴展：Skill即係資料夾（SKILL.md + assets + references），Design System即係單一個Markdown檔案，唔使註冊步驟 反AI-Slop機制：6重質量控制，包括強制初始化表單、品牌資產五步協議、五維自評、P0/P1/P2檢查清單、AI Slop黑名單、誠實佔位符 多格式導出：HTML（自包含）、PDF、PPTX、ZIP、Markdown 三種部署拓撲：全本地、Vercel + 本地Daemon、Vercel直連API BYOK模式：支持自帶API Key，可以接入Anthropic官方或第三方API中轉服務
1.3 同Claude Design嘅對比
2. 環境準備同安裝
2.1 系統要求
建議用nvm或者fnm嚟管理Node.js版本：
# nvm
nvm install 24
nvm use 24
# fnm
fnm install 24
fnm use 242.2 三步安裝
第一步：clone倉庫
git clone https://github.com/nexu-io/open-design.git
cd open-design第二步：啓用pnpm並安裝依賴
corepack enable
corepack pnpm --version # 應輸出 10.33.2
pnpm install第三步：啓動本地服務
# 前台運行 daemon + web（推薦開發使用）
pnpm tools-dev run web
# 後台運行 daemon + web + desktop
pnpm tools-dev啓動之後Daemon會自動完成：
掃描PATH環境變量，認出可用嘅Agent CLI 載入曬全部19個Skills同71套Design Systems 創建 .od/運行時目錄（包括SQLite數據庫、項目檔案同渲染結果）喺瀏覽器打開Web界面（預設 http://localhost:3000）
2.3 驗證安裝
打開瀏覽器訪問 http://localhost:3000，確認下面嘅嘢都準備好：
頂部Agent選擇器顯示已經認出嘅CLI（例如「Claude Code」或「Anthropic API · BYOK」） 左邊Skill選擇器顯示19個Skill（按Prototype / Deck / Template分組） 右邊Design System選擇器顯示71個品牌系統（按分類分組） 中間係聊天輸入區域
如果Agent冇被認出，檢查CLI係咪喺PATH入面：
which claude
which codex
which cursor-agent
which gemini2.4 版本選擇同升級
Open Design而家處於早期快速迭代階段，建議成日都用main分支最新嘅代碼：
git pull origin main
pnpm install # 依賴可能有更新
pnpm tools-dev restart如果需要的話重置返去乾淨狀態：
pnpm tools-dev stop
rm -rf .od # 清除所有運行時數據
pnpm tools-dev run web3. 快速上手
3.1 首次啓動流程
首次啓動嘅時候，Open Design嘅行為係咁：
Daemon啓動，掃描PATH入面嘅Agent CLI 如果冇偵測到任何CLI，自動回落到「Anthropic API · BYOK」模式，彈出歡迎對話框叫你貼API Key 自動建立 .od/目錄（運行時數據，已經加入.gitignore）載入所有Skills同Design Systems到記憶體註冊表 Web界面準備就緒，預設揀咗 web-prototypeSkill +Neutral ModernDesign System
3.2 第一個設計原型
下面嘅操作示範由零開始生成一個SaaS落地頁嘅完整流程：
第一步：喺頂部欄揀Skill做「web-prototype」（預設），Design System揀「Linear」或「Default (Neutral Modern)」
第二步：喺聊天框輸入設計需求：
Create a landing page for an AI-powered code review tool called "CodeSight".
Target audience: software engineering teams.
Include: hero section, 3 key features, pricing tiers (Free/Pro/Enterprise), CTA.第三步：㩒Send。如果呢次係首次對話，Agent會先畀返一個初始化表單（Discovery Form），收集：
目標受眾 視覺風格偏好 品牌背景 設計規模
第四步：填完表單之後提交，Agent開始設計。左邊聊天面板顯示Agent嘅TodoWrite計劃同工具調用，右邊預覽面板即時渲染生成嘅HTML。
第五步：設計完成之後，㩒「Save to disk」保存到 .od/artifacts/，或者揀導出格式（HTML/PDF/ZIP）。
成個流程嘅交互順序如下：
流程執行說明：
步驟1-2：用戶喺Web界面輸入設計需求，前端透過SSE協議將請求發送到本地Daemon 步驟3：Daemon組裝三層Prompt Stack（基礎系統提示詞 + 當前Design System內容 + 當前Skill工作流程），然後spawn本地Agent CLI 步驟4-5：首次對話時Agent必須先返回初始化表單（Discovery Form），收集需求細節之後先開始設計。呢個係Open Design嘅硬性規則 步驟6-7：用戶填完表單之後，Agent進入正式設計階段 步驟8-10：Agent先輸出TodoWrite計劃，再透過工具調用讀寫檔案，所有進度即時串流傳輸 步驟11-13：Agent生成 index.html之後，前端喺沙盒iframe入面渲染預覽
3.3 運行時目錄結構
首次運行之後，項目根目錄會自動建立 .od/：
.od/
├── app.sqlite # 項目、會話、消息、標籤頁數據
├── artifacts/ # "Save to disk" 的渲染結果（按時間戳命名）
└── projects/<project-id>/ # 每個項目的工作目錄（也是 Agent 的 cwd）ls -la .od && sqlite3 .od/app.sqlite '.tables' | |
rm -rf .od，重新啓動 | |
.od/projects/<id>/ 目錄 |
4. 功能操作詳解
4.1 Skill系統
4.1.1 Skill概覽
Open Design內置19個Skills，按模式（Mode）分為四類：
設計交付類（Prototype模式，8個）：
web-prototype | ||
saas-landing | ||
dashboard | ||
pricing-page | ||
docs-page | ||
blog-post | ||
mobile-app | ||
simple-deck |
簡報類（Deck模式，2個）：
guizang-ppt | ||
magazine-poster |
辦公文檔類（Template模式，9個）：
pm-spec | |
weekly-update | |
meeting-notes | |
eng-runbook | |
finance-report | |
hr-onboarding | |
invoice | |
kanban-board | |
team-okrs |
4.1.2 Skill選擇同切換
喺Web界面頂部欄嘅Skill下拉菜單度：
㩒左邊下拉框，按Mode（Prototype / Deck / Template）篩選 每個Mode有個預設Skill（標註 · default）切換Skill之後，下一次Send會用新嘅Skill工作流程
Skill同Design System可以組合使用——揀 saas-landing Skill + Stripe Design System，Agent就會按照SaaS落地頁嘅結構，用Stripe嘅配色、字體同組件風格嚟生成。
4.1.3 Skill工作流程示例：saas-landing
選擇 saas-landing Skill之後，Agent內部工作流程如下：
流程執行說明：
步驟1：Agent首先讀取工作目錄入面嘅DESIGN.md（由Daemon自動放低），獲取配色、字體、佈局規則 步驟2：由Skill嘅assets目錄複製種子模板到工作目錄 步驟3-7：按照結構化流程逐個區域填充內容，pricing區域根據 has_pricing參數決定係咪生成步驟8：生成完成之後執行五維自評，每個維度1-5分，低過3分嘅維度需要修復 步驟9：通過自評之後寫入最終HTML檔案
4.2 Design System系統
4.2.1 系統概覽
71套Design Systems按行業分類，每套都係一個跟足9段式Schema嘅 DESIGN.md 文件：
4.2.2 9段式DESIGN.md Schema
每套Design System嘅檔案結構固定為下面9個Section：
# Design System Inspired by <Brand>
> Category: Developer Tools
> 一行摘要
## 1. Visual Theme & Atmosphere
## 2. Color
## 3. Typography
## 4. Spacing & Grid
## 5. Layout & Composition
## 6. Components
## 7. Motion & Interaction
## 8. Voice & Brand
## 9. Anti-patternsAgent喺生成設計嘅時候，會按照Skill聲明嘅 od.design_system.sections 字段，只讀取需要嘅Section（例如[color, typography, layout, components]），從而慳返token消耗。
4.2.3 Design System選擇操作
喺頂部欄右邊下拉框中揀 切換之後下一次Send即刻見效 預覽視窗會展示每個系統嘅4色簽名（signature swatch） 㩒系統名可以展開睇完整嘅DESIGN.md內容、色板網格同實時展示樣例
4.3 視覺方向選擇器
當用戶冇明確品牌規範嗰陣，Open Design提供5種確定性視覺方向。每種方向鎖定咗OKLch配色方案同字體棧，Agent唔會自由發揮：
操作方式：喺Discovery Form嘅第二步，Agent會畀返一個視覺方向選擇表單，用戶透過單選按鈕揀咗方向之後，Agent會將佢綁定到種子模板嘅 :root CSS變量入面。
4.4 初始化表單同品牌資產協議
4.4.1 Discovery Form（初始化表單）
Open Design嘅Prompt Stack硬編碼咗一條RULE 1：每次新設計對話嘅第一輪必須先回一個 <question_form> 收集需求，唔可以直接生成代碼。
表單收集嘅信息包括：
設計類型（Surface）：網頁、手機端、儀錶板等 目標受眾（Audience） 視覺風格偏好（Tone） 品牌背景（Brand Context） 設計規模（Scale） 約束條件（Constraints）
呢個機制可以防止80%嘅返工——用30秒填表單取代咗30分鐘嘅反覆調整。
4.4.2 品牌資產五步協議
當用戶附帶品牌截圖或URL嗰陣，Agent執行五步協議：
定位（Locate）：揾到品牌官網或品牌資產頁面 下載（Download）：獲取Logo、截圖、品牌指南檔案 提取色值（Grep Hex）：由品牌資產入面用工具提取實際用到嘅十六進制色值 編碼規範（Write brand-spec.md）：將提取結果寫入標準化嘅 brand-spec.md複述確認（Vocalise）：用自然語言向用戶複述提取結果，等確認咗先寫入CSS
核心原則：Agent絕對唔可以從記憶入面猜品牌色值。
4.5 預覽同導出
4.5.1 預覽模式
生成嘅Artifact喺沙盒iframe入面渲染（<iframe sandbox="allow-scripts">），同宿主頁面完全隔離：
冇辦法訪問宿主DOM、Cookie、localStorage 靜態HTML透過 srcdoc直接加載JSX Artifact注入vendored React 18 + Babel standalone進行動態編譯 Agent每次寫入檔案之後觸發防抖重載（100ms debounce）
4.5.2 導出操作
4.6 Agent管理
4.6.1 Agent檢測同選擇
Daemon啓動嗰陣自動掃描PATH入面嘅CLI：
claude | |||
codex | codex exec <prompt> | ||
cursor-agent | cursor-agent -p | ||
gemini | gemini -p | ||
opencode | opencode run | ||
qwen | qwen -p | ||
喺Web界面頂部欄嘅Agent下拉框中切換Agent，下一次Send會用新揀嘅Agent。
4.6.2 BYOK模式配置
當冇本地CLI嗰陣，用「Anthropic API · BYOK」模式。喺Settings面板入面貼Anthropic API Key，Key會儲存在瀏覽器localStorage（Topology C）或Daemon嘅config.toml（Topology A）。
支援透過標準Anthropic SDK環境變量接入第三方API中轉：
export ANTHROPIC_BASE_URL="https://your-api-proxy.com"
export ANTHROPIC_API_KEY="sk-your-key-here"
pnpm tools-dev run web5. 配置同定製
5.1 基礎配置
Open Design嘅配置文件分佈如下：
~/.open-design/config.toml | |
~/.open-design/agents.json | |
./.od/config.json | |
./skills/<skill>/SKILL.md | |
./DESIGN.md |
所有配置都係純文字（TOML/JSON/Markdown），可以納入版本控制。
5.2 自訂Skill
5.2.1 Skill檔案結構
建立一個Skill只需要一個資料夾：
skills/my-skill/
├── SKILL.md # 必須：清單 + 工作流指令
├── assets/template.html # 可選但強烈推薦：種子模板
├── references/ # 可選：Agent 規劃階段讀取的知識文件
│ ├── layouts.md
│ ├── components.md
│ └── checklist.md
└── example.html # 強烈推薦：手搓的真實樣例5.2.2 SKILL.md格式
---
name: my-saas-landing
description: |
一段電梯演講。Agent 會讀取這段文本來判斷用戶需求是否匹配。
寫具體：界面類型、受眾、Artifact 包含什麼、不包含什麼。
triggers:
- "saas landing"
- "marketing page"
- "產品落地頁"
od:
mode: prototype # prototype | deck | template | design-system
platform: desktop # desktop | mobile
scenario: marketing # 自由標籤，用於分組
featured:1 # 任意正整數 → 出現在 "Showcase examples"
preview:
type:html # html | jsx | pptx | markdown
entry: index.html
design_system:
requires: true
sections: [color, typography, layout, components]
example_prompt: "一段可複製粘貼的提示詞，最能體現這個 Skill 的能力。"
---
# My Skill
正文是自由 Markdown，描述 Agent 應該遵循的工作流……5.2.3 安裝Skill
將Skill資料夾放入 skills/ 目錄就得，重啓Daemon之後會自動出現喺選擇器入面。
Skill發現優先級（當同名Skill有多個嗰陣）：
./.claude/skills/ | ||
./skills/ | ||
~/.claude/skills/ |
5.2.4 自訂Skill嘅合併標準
必須附帶一份真實嘅 example.html（自己整嘅、本地可以直接打開嘅設計交付物）必須通過Anti-AI-Slop檢查清單（禁止紫色漸變、通用Emoji圖標、圓角左邊框卡片、Inter做Display字體、作數據） 用誠實佔位符：冇真實數據嗰陣寫 —或標註灰塊，唔寫「10× faster」附帶 references/checklist.md，至少包含P0關卡
5.3 自訂Design System
5.3.1 建立Design System
在 design-systems/<slug>/ 下創建 DESIGN.md（一個檔案，零代碼）：
design-systems/my-brand/
└── DESIGN.md5.3.2 DESIGN.md編寫規範
必須包含全部9個Section（內容可以空，但標題一定要有，否則提示詞grep會斷） 十六進制色值一定要從品牌官網或產品入面實際取色，唔可以從記憶入面猜 強調色用OKLch係加分項（令色板喺光/暗模式之間可預測咁插值） 唔寫營銷廢話（品牌tagline唔係設計token） slug用ASCII（例如 linear-app、x-ai）
完成之後重啓Daemon，新Design System會自動出現喺選擇器入面。
5.4 BYOK API接入
5.4.1 環境變量配置
Open Design嘅Daemon喺調用Anthropic API嗰陣會讀取標準Anthropic SDK環境變量：
# 使用 Anthropic 官方 API
export ANTHROPIC_API_KEY="sk-ant-xxx"
# 使用第三方中轉 API
export ANTHROPIC_BASE_URL="https://your-proxy.com"
export ANTHROPIC_API_KEY="sk-your-key"
# 啓動
pnpm tools-dev run web5.4.2 Claude Code CLI配合使用
如果係用Claude Code CLI做Agent，先喺Claude Code度配置API：
claude config set api-url https://your-proxy.com
claude config set api-key sk-your-key
claude --version
claude "你好" --max-tokens 100 # 驗證連接Open Design調用Claude Code嗰陣會自動重用呢啲配置。
5.5 接入新嘅Agent CLI
接入一個新嘅Agent CLI（例如某新廠商嘅 foo-coder）只需要喺 apps/daemon/src/agents.ts 入面加一項：
{
id: 'foo',
name: 'Foo Coder',
bin: 'foo',
versionArgs: ['--version'],
buildArgs: (prompt) => ['exec', '-p', prompt],
streamFormat: 'plain',
}如果個CLI輸出類型化事件（例如Claude Code嘅 --output-format stream-json），在 apps/daemon/src/claude-stream.ts 入面寫返對應嘅Parser，並將 streamFormat 設為 'claude-stream-json'。
6. 使用技巧同最佳實踐
6.1 Skill選擇策略
根據經驗推薦嘅Skill上手指南：
第一次用：由 web-prototype開始，搭配Neutral ModernDesign System，輸入簡單需求（例如「a personal portfolio page」）逐步探索：掌握基本流程之後，試下 saas-landing+Linear或Stripe風格Deck製作：用 guizang-ppt（雜誌風PPT預設Skill），支持雜誌佈局、WebGL Hero背景辦公文檔：Template模式嘅9個Skill適合快速產出PRD、週報、OKR等 組合測試：同一個需求，切換唔同Design System嚟睇視覺差異，建立對71套系統嘅直觀認識
6.2 Prompt編寫技巧
講明Design Surface：話畀佢知係網頁、手機端、儀錶板定係簡報 提供品牌背景：貼官網URL或上傳Logo/截圖，等Agent執行品牌資產協議 指定約束條件：例如「只用兩欄佈局」、「一定要有數據表格」、「唔好用漸變色」 善用初始化表單：第一輪嘅Discovery Form係質量嘅關鍵入口，認真填寫每個字段 迭代好過一次過完美：第一版快速生成，然後透過Comment Mode或新嘅Send逐步修改
6.3 性能優化
優先使用Claude Code CLI：串流格式係 claude-stream-json，還原度最高Skill嘅 od.design_system.sections字段只聲明實際需要嘅Section，減少prompt token消耗用Codex嗰陣設定環境變量 OD_CODEX_DISABLE_PLUGINS=1嚟禁用Codex插件加載，加快啓動反覆迭代同一個項目嗰陣，Agent嘅cwd唔變，已經生成嘅檔案（例如brand-spec.md）可以重用 切換Design System只需要一次重新生成，唔使重建成個項目
6.4 安全考量
API Key儲存喺Daemon嘅 config.toml（mode 0600）或瀏覽器localStorage入面，唔會發送到Open Design嘅伺服器（項目冇伺服器端）Artifact預覽喺沙盒iframe入面運行（ sandbox="allow-scripts"），冇allow-same-origin，冇辦法訪問宿主頁面Agent嘅cwd限制喺 .od/projects/<id>/目錄下，權限控制繼承自Agent CLI自身嘅權限系統由不可信來源安裝Skill嗰陣會有安裝時警告
7. 常見問題同故障排除
7.1 啓動同連接問題
Q: 啓動之後瀏覽器話「no agents found on PATH」
安裝至少一個支援嘅CLI（claude、codex、cursor-agent、gemini、opencode、qwen、copilot），或者喺頂部欄切換到「Anthropic API · BYOK」模式並貼API Key。
Q: Daemon 500 on /api/chat
檢查Daemon終端嘅stderr輸出。通常係CLI拒絕咗參數格式。唔同CLI嘅參數格式都唔同，參考 apps/daemon/src/agents.ts 中的 buildArgs 方法。
Q: 瀏覽器報 net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)
Nginx嘅gzip緩衝咗分塊SSE響應。喺Nginx配置入面設定：
location /api/ {
proxy_pass http://127.0.0.1:7456;
proxy_buffering off;
gzip off;
proxy_read_timeout 86400s;
proxy_send_timeout 86400s;
proxy_http_version 1.1;
proxy_set_header Connection "";
}7.2 Agent相關問題
Q: 媒體生成報 OD_BIN: parameter not set 或Daemon URL係 :0
重建Daemon CLI並重啓：
pnpm --filter @open-design/daemon build
pnpm tools-dev restart --daemon-port 7457 --web-port 5175
ls -la apps/daemon/dist/cli.js
curl -s http://127.0.0.1:7457/api/health然後由Open Design應用重新打開項目（唔好恢復舊嘅終端Agent會話）。
Q: Codex加載太多插件上下文導致好慢
OD_CODEX_DISABLE_PLUGINS=1 pnpm tools-dev7.3 輸出質量問題
Q: Artifact一直唔渲染
模型輸出咗文字但冇包裝喺 <artifact> 標籤入面。檢查Daemon日誌確認系統提示詞係咪正確傳遞，考慮轉用能力更強嘅模型或更嚴格嘅Skill。
Q: 生成嘅設計有明顯嘅「AI味」（AI Slop）
Open Design內置嘅Anti-AI-Slop機制會阻止大部分AI Slop模式。如果仍然出現，可能原因：
用嘅模型能力唔夠，冇跟足Prompt Stack入面嘅約束 用嘅Skill比較簡單，冇附帶 references/checklist.md喺Prompt入面額外強調約束（例如「唔好用漸變色」、「數據留空用 — 代替」）
7.4 部署問題
Q: 部署到Vercel之後冇辦法訪問本地.od目錄
Vercel係Serverless架構，冇持久化檔案系統。需要採用混合模式：Web層部署到Vercel，Daemon仍然喺本地或自有伺服器運行，透過隧道（例如Cloudflare Tunnel）曝露畀Vercel嘅Web層。
Q: 點樣喺生產環境中運行？
pnpm build # 生產構建 + 靜態導出到 apps/web/out/
pnpm --filter @open-design/daemon build # 構建 Daemon CLI
# Daemon 本身在 localhost:7456 提供靜態文件和 API8. 實戰案例
8.1 案例一：SaaS產品落地頁
目標：2個鐘頭內產出一個可以上線部署嘅SaaS產品落地頁。
操作步驟：
流程執行說明：
步驟1：揀 saas-landingSkill（提供Hero/Features/Pricing/CTA結構）+ Linear Design System（冷峻、結構化風格）步驟2：輸入產品描述，包括產品名、目標受眾、核心賣點 步驟3-4：Agent返回Discovery Form，鎖定設計方向同約束 步驟5-9：Agent按saas-landing Skill嘅結構化流程逐個區域填充內容 步驟10：五維自評通過之後輸出 步驟11：預覽滿意之後導出HTML，部署到Vercel
API用量估算：單次生成大約30K-50K input + 8K-15K output tokens。如果迭代3-5次，總消耗大約15萬-25萬tokens。
8.2 案例二：融資路演Deck
目標：15分鐘內生成一份8頁嘅雜誌風格融資路演PPT。
操作步驟：
步驟1：Deck模式揀 guizang-ppt（雜誌風格Web PPT，預設Deck Skill）步驟2：Design System揀 Stripe（金融科技風格，適合融資場景）步驟3：輸入Prompt：「Create an 8-slide seed round pitch deck for an AI-powered developer tools startup. Include: problem, solution, market size, product demo, business model, team, traction, ask.」 步驟4：Agent返回Discovery Form收集公司名、品牌色、目標融資金額等細節 步驟5：Agent由 guizang-ppt的references/themes.md入面揀雜誌佈局模板步驟6：Agent逐頁生成內容，預覽視窗即時展示橫向滑動效果 步驟7：導出PPTX或PDF用嚟正式路演
技術要點：
guizang-ppt來自op7418/guizang-ppt-skill，保留原始MIT License附帶 assets/template.html（種子模板）+ 4個references檔案（themes、layouts、components、checklist）P0/P1/P2檢查清單確保每頁幻燈片嘅質量
8.3 案例三：移動App原型
目標：1日內產出5個屏幕嘅移動App交互原型。
操作步驟：
步驟1：揀 mobile-appSkill，Device Frame揀iPhone 15 Pro步驟2：Design System揀 Spotify（暗色主題，沉浸式體驗）或Airbnb（温暖友好）步驟3：分屏生成：首頁 → 列表頁 → 詳情頁 → 設定頁 → Onboarding流程 步驟4：每屏獨立對話，但共享同一個Design System，確保視覺一致性 步驟5：導出HTML，前端開發者可以直接參考CSS變量同佈局結構
設備框（Device Frames）說明：
Open Design內置5種設備框：iPhone 15 Pro、Pixel、iPad Pro、MacBook、Browser Chrome 設備框共享喺 assets/frames/目錄，所有Skill可以跨Skill引用像素級精確：iPhone 15 Pro框包含Dynamic Island、狀態欄SVG、Home Indicator
9. 總結
Open Design係一個本地優先、開源嘅AI設計平台，核心架構係「Web App + 本地Daemon + 用戶已有嘅Agent CLI」，唔內置AI Agent而係委託畀本地已有工具 19個Skills（設計交付類8個 + 簡報類2個 + 辦公文檔類9個）同71套Design Systems構成可組合嘅能力×風格矩陣，理論組合超過1,300種 Skills同Design Systems都採用檔案式擴展：Skill即係資料夾（SKILL.md + assets + references），Design System即係單一個Markdown檔案（9段式Schema），唔使註冊步驟 6重Anti-AI-Slop機制（初始化表單、品牌資產協議、五維自評、檢查清單、Slop黑名單、誠實佔位符）係Open Design區別於普通AI設計工具嘅核心壁壘 適用場景包括：獨立開發者嘅產品落地頁、PM嘅原型同PRD文檔、技術博主嘅封面圖、設計師嘅重複性工作加速 唔適合場景：需要複雜交互邏輯嘅生產級前端應用、需要像素級精確UI還原嘅專業設計任務（應該用Figma）、需要多人實時協作嘅設計項目
參考文獻
[1] Open Design GitHub倉庫：https://github.com/nexu-io/open-design
[2] Open Design QUICKSTART.md：https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md
[3] Open Design CONTRIBUTING.zh-CN.md：https://github.com/nexu-io/open-design/blob/main/CONTRIBUTING.zh-CN.md
[4] Open Design Skills Protocol：https://github.com/nexu-io/open-design/blob/main/docs/skills-protocol.md
[5] Open Design Architecture：https://github.com/nexu-io/open-design/blob/main/docs/architecture.md
[6] Anthropic Claude Design：https://claude.ai/design
[7] awesome-design-md (71套Design Systems上游)：https://github.com/VoltAgent/awesome-design-md
[8] guizang-ppt-skill (雜誌PPT Skill來源)：https://github.com/op7418/guizang-ppt-skill
[9] huashu-design (設計哲學核心)：https://github.com/alchaincyf/huashu-design
[10] open-codesign (UX模式參考)：https://github.com/OpenCoworkAI/open-codesign
本文面向獨立開發者、PM 和設計師，系統介紹 Open Design 的安裝部署、19 個 Skills 的完整使用方式、71 套 Design Systems 的配置與自定義方法、BYOK API 接入、以及從本地開發到 Vercel 生產部署的完整操作流程。適合已經使用 Claude Code 或類似 CLI 工具、希望引入 AI 輔助設計工作流的讀者。
目錄
概述
1.1 項目背景
1.2 核心特性
1.3 與 Claude Design 的對比環境準備與安裝
2.1 系統要求
2.2 三步安裝
2.3 驗證安裝
2.4 版本選擇與升級快速上手
3.1 首次啓動流程
3.2 第一個設計原型
3.3 運行時目錄結構功能操作詳解
4.1 Skill 系統
4.2 Design System 系統
4.3 視覺方向選擇器
4.4 初始化表單與品牌資產協議
4.5 預覽與導出
4.6 Agent 管理配置與定製
5.1 基礎配置
5.2 自定義 Skill
5.3 自定義 Design System
5.4 BYOK API 接入
5.5 接入新的 Agent CLI使用技巧與最佳實踐
6.1 Skill 選擇策略
6.2 Prompt 編寫技巧
6.3 性能優化
6.4 安全考量常見問題與故障排除
7.1 啓動與連接問題
7.2 Agent 相關問題
7.3 輸出質量問題
7.4 部署問題實戰案例
8.1 案例一：SaaS 產品落地頁
8.2 案例二：融資路演 Deck
8.3 案例三：移動 App 原型總結
參考文獻
1. 概述
1.1 項目背景
Open Design 是由 nexu-io 團隊開發的一個本地優先（Local-first）、完全開源（Apache-2.0）的 AI 設計生成平台，定位為 Anthropic Claude Design 的開源替代方案。項目在 Claude Design 發佈後約 72 小時內完成了核心逆向工程，編寫了超過 18,700 行代碼，還原了 Claude Design 超過 95% 的核心體驗。
Open Design 最大的設計理念是"不內置 AI Agent"——它將 Agent 的運行委託給用戶電腦上已經安裝的 CLI 工具（Claude Code、Codex CLI、Cursor Agent、Gemini CLI、OpenCode、Qwen Code 等），自己只負責 Skill 編排、Design System 注入、提示詞堆棧（prompt stack）和沙盒化預覽渲染。
截至 2026 年 4 月，項目在 GitHub 上獲得超過 4,500 個 Star，內置 19 個可組合的 Skills 和 71 套品牌級 Design Systems。
1.2 核心特性
多 Agent 兼容：自動檢測 PATH 中的 Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen Code，無需額外配置 19 個內置 Skills：覆蓋原型設計（Web、SaaS、Dashboard、移動端）、演示文稿（Deck/PPT）、辦公文檔（PRD、週報、會議紀要、OKR 等） 71 套品牌級 Design Systems：Linear、Stripe、Vercel、Airbnb、Notion、Apple、Tesla 等知名產品的視覺體系，9 段式 DESIGN.md 格式 文件式擴展：Skill 即文件夾（SKILL.md + assets + references），Design System 即單個 Markdown 文件，無需註冊步驟 反 AI-Slop 機制：6 重質量控制，包括強制初始化表單、品牌資產五步協議、五維自評、P0/P1/P2 檢查清單、AI Slop 黑名單、誠實佔位符 多格式導出：HTML（自包含）、PDF、PPTX、ZIP、Markdown 三種部署拓撲：全本地、Vercel + 本地 Daemon、Vercel 直連 API BYOK 模式：支持自帶 API Key，可接入 Anthropic 官方或第三方 API 中轉服務
1.3 與 Claude Design 的對比
2. 環境準備與安裝
2.1 系統要求
推薦使用 nvm 或 fnm 管理 Node.js 版本：
# nvm
nvm install 24
nvm use 24
# fnm
fnm install 24
fnm use 242.2 三步安裝
第一步：克隆倉庫
git clone https://github.com/nexu-io/open-design.git
cd open-design第二步：啓用 pnpm 並安裝依賴
corepack enable
corepack pnpm --version # 應輸出 10.33.2
pnpm install第三步：啓動本地服務
# 前台運行 daemon + web（推薦開發使用）
pnpm tools-dev run web
# 後台運行 daemon + web + desktop
pnpm tools-dev啓動後 Daemon 會自動完成：
掃描 PATH 環境變量，識別可用的 Agent CLI 加載全部 19 個 Skills 和 71 套 Design Systems 創建 .od/運行時目錄（包含 SQLite 數據庫、項目文件和渲染結果）在瀏覽器打開 Web 界面（默認 http://localhost:3000）
2.3 驗證安裝
打開瀏覽器訪問 http://localhost:3000，確認以下內容均已就緒：
頂部 Agent 選擇器顯示已識別的 CLI（如 "Claude Code" 或 "Anthropic API · BYOK"） 左側 Skill 選擇器顯示 19 個 Skill（按 Prototype / Deck / Template 分組） 右側 Design System 選擇器顯示 71 個品牌系統（按分類分組） 中間為聊天輸入區域
如果 Agent 未被識別，檢查 CLI 是否在 PATH 中：
which claude
which codex
which cursor-agent
which gemini2.4 版本選擇與升級
Open Design 當前處於早期快速迭代階段，推薦始終使用 main 分支最新代碼：
git pull origin main
pnpm install # 依賴可能有更新
pnpm tools-dev restart如需重置到乾淨狀態：
pnpm tools-dev stop
rm -rf .od # 清除所有運行時數據
pnpm tools-dev run web3. 快速上手
3.1 首次啓動流程
首次啓動時，Open Design 的行為如下：
Daemon 啓動，掃描 PATH 中的 Agent CLI 如未檢測到任何 CLI，自動回退到 "Anthropic API · BYOK" 模式，彈出歡迎對話框提示粘貼 API Key 自動創建 .od/目錄（運行時數據，已加入 .gitignore）加載所有 Skills 和 Design Systems 到內存註冊表 Web 界面準備就緒，默認選中 web-prototypeSkill +Neutral ModernDesign System
3.2 第一個設計原型
以下操作演示了從零到生成一個 SaaS 落地頁的完整流程：
第一步：在頂部欄選擇 Skill 為 "web-prototype"（默認），Design System 選擇 "Linear" 或 "Default (Neutral Modern)"
第二步：在聊天框輸入設計需求：
Create a landing page for an AI-powered code review tool called "CodeSight".
Target audience: software engineering teams.
Include: hero section, 3 key features, pricing tiers (Free/Pro/Enterprise), CTA.第三步：點擊 Send。如果這是首次會話，Agent 會先返回一個初始化表單（Discovery Form），收集：
目標受眾 視覺風格偏好 品牌上下文 設計規模
第四步：填寫表單後提交，Agent 開始設計。左側聊天面板顯示 Agent 的 TodoWrite 計劃和工具調用，右側預覽面板實時渲染生成的 HTML。
第五步：設計完成後，點擊 "Save to disk" 保存到 .od/artifacts/，或選擇導出格式（HTML/PDF/ZIP）。
整個流程的交互時序如下：
流程執行說明：
步驟 1-2：用戶在 Web 界面輸入設計需求，前端通過 SSE 協議將請求發送到本地 Daemon 步驟 3：Daemon 組裝三層 Prompt Stack（基礎系統提示詞 + 當前 Design System 內容 + 當前 Skill 工作流），然後 spawn 本地 Agent CLI 步驟 4-5：首次會話時 Agent 必須先返回初始化表單（Discovery Form），收集需求細節後才開始設計。這是 Open Design 的硬性規則 步驟 6-7：用戶填寫表單後，Agent 進入正式設計階段 步驟 8-10：Agent 先輸出 TodoWrite 計劃，再通過工具調用讀寫文件，所有進度實時流式傳輸 步驟 11-13：Agent 生成 index.html後，前端在沙盒 iframe 中渲染預覽
3.3 運行時目錄結構
首次運行後，項目根目錄會自動創建 .od/：
.od/
├── app.sqlite # 項目、會話、消息、標籤頁數據
├── artifacts/ # "Save to disk" 的渲染結果（按時間戳命名）
└── projects/<project-id>/ # 每個項目的工作目錄（也是 Agent 的 cwd）ls -la .od && sqlite3 .od/app.sqlite '.tables' | |
rm -rf .od，重新啓動 | |
.od/projects/<id>/ 目錄 |
4. 功能操作詳解
4.1 Skill 系統
4.1.1 Skill 概覽
Open Design 內置 19 個 Skills，按模式（Mode）分為四類：
設計交付類（Prototype 模式，8 個）：
web-prototype | ||
saas-landing | ||
dashboard | ||
pricing-page | ||
docs-page | ||
blog-post | ||
mobile-app | ||
simple-deck |
演示文稿類（Deck 模式，2 個）：
guizang-ppt | ||
magazine-poster |
辦公文檔類（Template 模式，9 個）：
pm-spec | |
weekly-update | |
meeting-notes | |
eng-runbook | |
finance-report | |
hr-onboarding | |
invoice | |
kanban-board | |
team-okrs |
4.1.2 Skill 選擇與切換
在 Web 界面頂部欄的 Skill 下拉菜單中：
點擊左側下拉框，按 Mode（Prototype / Deck / Template）篩選 每個 Mode 有默認 Skill（標註 · default）切換 Skill 後，下一次 Send 使用新的 Skill 工作流
Skill 與 Design System 組合使用——選擇 saas-landing Skill + Stripe Design System，Agent 會按照 SaaS 落地頁的結構，使用 Stripe 的配色、字體和組件風格來生成。
4.1.3 Skill 工作流示例：saas-landing
選擇 saas-landing Skill 後，Agent 內部工作流如下：
流程執行說明：
步驟 1：Agent 首先讀取工作目錄中的 DESIGN.md（由 Daemon 自動放置），獲取配色、字體、佈局規則 步驟 2：從 Skill 的 assets 目錄複製種子模板到工作目錄 步驟 3-7：按照結構化流程逐區域填充內容，pricing 區域根據 has_pricing參數決定是否生成步驟 8：生成完成後執行五維自評，每個維度 1-5 分，低於 3 分的維度需要修復 步驟 9：通過自評後寫入最終 HTML 文件
4.2 Design System 系統
4.2.1 系統概覽
71 套 Design Systems 按行業分類，每套都是一個遵循 9 段式 Schema 的 DESIGN.md 文件：
4.2.2 9 段式 DESIGN.md Schema
每套 Design System 的文件結構固定為以下 9 個 Section：
# Design System Inspired by <Brand>
> Category: Developer Tools
> 一行摘要
## 1. Visual Theme & Atmosphere
## 2. Color
## 3. Typography
## 4. Spacing & Grid
## 5. Layout & Composition
## 6. Components
## 7. Motion & Interaction
## 8. Voice & Brand
## 9. Anti-patternsAgent 在生成設計時，會按照 Skill 聲明的 od.design_system.sections 字段，只讀取需要的 Section（如 [color, typography, layout, components]），從而節省 token 消耗。
4.2.3 Design System 選擇操作
在頂部欄右側下拉框中選擇 切換後下一次 Send 立即生效 預覽窗口會展示每個系統的 4 色簽名（signature swatch） 點擊系統名可展開查看完整的 DESIGN.md 內容、色板網格和實時展示樣例
4.3 視覺方向選擇器
當用戶沒有明確品牌規範時，Open Design 提供 5 種確定性視覺方向。每種方向鎖定了 OKLch 配色方案和字體棧，Agent 不會自由發揮：
操作方式：在 Discovery Form 的第二步，Agent 會返回一個視覺方向選擇表單，用戶通過單選按鈕選定方向後，Agent 將其綁定到種子模板的 :root CSS 變量中。
4.4 初始化表單與品牌資產協議
4.4.1 Discovery Form（初始化表單）
Open Design 的 Prompt Stack 硬編碼了一條 RULE 1：每次新設計對話的第一輪必須先返回一個 <question_form> 收集需求，不允許直接生成代碼。
表單收集的信息包括：
設計類型（Surface）：網頁、移動端、儀表板等 目標受眾（Audience） 視覺風格偏好（Tone） 品牌上下文（Brand Context） 設計規模（Scale） 約束條件（Constraints）
這個機制能防止 80% 的返工——將 30 秒的表單填寫取代了 30 分鐘的反覆調整。
4.4.2 品牌資產五步協議
當用戶附帶品牌截圖或 URL 時，Agent 執行五步協議：
定位（Locate）：找到品牌官網或品牌資產頁面 下載（Download）：獲取 Logo、截圖、品牌指南文件 提取色值（Grep Hex）：從品牌資產中用工具提取實際使用的十六進制色值 編碼規範（Write brand-spec.md）：將提取結果寫入標準化的 brand-spec.md複述確認（Vocalise）：用自然語言向用戶複述提取結果，等待確認後再寫入 CSS
核心原則：Agent 絕不允許從記憶中猜測品牌色值。
4.5 預覽與導出
4.5.1 預覽模式
生成的 Artifact 在沙盒 iframe 中渲染（<iframe sandbox="allow-scripts">），與宿主頁面完全隔離：
無法訪問宿主 DOM、Cookie、localStorage 靜態 HTML 通過 srcdoc直接加載JSX Artifact 注入 vendored React 18 + Babel standalone 進行動態編譯 Agent 每次寫入文件後觸發防抖重載（100ms debounce）
4.5.2 導出操作
4.6 Agent 管理
4.6.1 Agent 檢測與選擇
Daemon 啓動時自動掃描 PATH 中的 CLI：
claude | |||
codex | codex exec <prompt> | ||
cursor-agent | cursor-agent -p | ||
gemini | gemini -p | ||
opencode | opencode run | ||
qwen | qwen -p | ||
在 Web 界面頂部欄的 Agent 下拉框中切換 Agent，下一次 Send 使用新選擇的 Agent。
4.6.2 BYOK 模式配置
當沒有本地 CLI 時，使用 "Anthropic API · BYOK" 模式。在 Settings 面板中粘貼 Anthropic API Key，Key 存儲在瀏覽器 localStorage 中（Topology C）或 Daemon 的 config.toml 中（Topology A）。
支持通過標準 Anthropic SDK 環境變量接入第三方 API 中轉：
export ANTHROPIC_BASE_URL="https://your-api-proxy.com"
export ANTHROPIC_API_KEY="sk-your-key-here"
pnpm tools-dev run web5. 配置與定製
5.1 基礎配置
Open Design 的配置文件分佈如下：
~/.open-design/config.toml | |
~/.open-design/agents.json | |
./.od/config.json | |
./skills/<skill>/SKILL.md | |
./DESIGN.md |
所有配置均為純文本（TOML/JSON/Markdown），可納入版本控制。
5.2 自定義 Skill
5.2.1 Skill 文件結構
創建一個 Skill 只需一個文件夾：
skills/my-skill/
├── SKILL.md # 必須：清單 + 工作流指令
├── assets/template.html # 可選但強烈推薦：種子模板
├── references/ # 可選：Agent 規劃階段讀取的知識文件
│ ├── layouts.md
│ ├── components.md
│ └── checklist.md
└── example.html # 強烈推薦：手搓的真實樣例5.2.2 SKILL.md 格式
---
name: my-saas-landing
description: |
一段電梯演講。Agent 會讀取這段文本來判斷用戶需求是否匹配。
寫具體：界面類型、受眾、Artifact 包含什麼、不包含什麼。
triggers:
- "saas landing"
- "marketing page"
- "產品落地頁"
od:
mode: prototype # prototype | deck | template | design-system
platform: desktop # desktop | mobile
scenario: marketing # 自由標籤，用於分組
featured:1 # 任意正整數 → 出現在 "Showcase examples"
preview:
type:html # html | jsx | pptx | markdown
entry: index.html
design_system:
requires: true
sections: [color, typography, layout, components]
example_prompt: "一段可複製粘貼的提示詞，最能體現這個 Skill 的能力。"
---
# My Skill
正文是自由 Markdown，描述 Agent 應該遵循的工作流……5.2.3 安裝 Skill
將 Skill 文件夾放入 skills/ 目錄即可，重啓 Daemon 後自動出現在選擇器中。
Skill 發現優先級（當同名 Skill 存在多個時）：
./.claude/skills/ | ||
./skills/ | ||
~/.claude/skills/ |
5.2.4 自定義 Skill 的合併標準
必須附帶一份真實的 example.html（手搓的、本地可直接打開的設計交付物）必須通過 Anti-AI-Slop 檢查清單（禁止紫色漸變、通用 Emoji 圖標、圓角左邊框卡片、Inter 作 Display 字體、編造數據） 使用誠實佔位符：沒有真實數據時寫 —或標註灰塊，不寫 "10× faster"附帶 references/checklist.md，至少包含 P0 關卡
5.3 自定義 Design System
5.3.1 創建 Design System
在 design-systems/<slug>/ 下創建 DESIGN.md（一個文件，零代碼）：
design-systems/my-brand/
└── DESIGN.md5.3.2 DESIGN.md 編寫規範
必須包含全部 9 個 Section（內容可以空，但標題必須在，否則提示詞 grep 會斷） 十六進制色值必須從品牌官網或產品中實際取色，不允許從記憶中猜測 強調色使用 OKLch 是加分項（使色板在亮/暗模式間可預測地插值） 不寫營銷廢話（品牌 tagline 不是設計 token） slug 使用 ASCII（如 linear-app、x-ai）
完成後重啓 Daemon，新 Design System 自動出現在選擇器中。
5.4 BYOK API 接入
5.4.1 環境變量配置
Open Design 的 Daemon 在調用 Anthropic API 時讀取標準 Anthropic SDK 環境變量：
# 使用 Anthropic 官方 API
export ANTHROPIC_API_KEY="sk-ant-xxx"
# 使用第三方中轉 API
export ANTHROPIC_BASE_URL="https://your-proxy.com"
export ANTHROPIC_API_KEY="sk-your-key"
# 啓動
pnpm tools-dev run web5.4.2 Claude Code CLI 配合使用
如果使用 Claude Code CLI 作為 Agent，先在 Claude Code 中配置 API：
claude config set api-url https://your-proxy.com
claude config set api-key sk-your-key
claude --version
claude "你好" --max-tokens 100 # 驗證連接Open Design 調用 Claude Code 時會自動複用這些配置。
5.5 接入新的 Agent CLI
接入一個新的 Agent CLI（如某新廠商的 foo-coder）只需在 apps/daemon/src/agents.ts 中添加一項：
{
id: 'foo',
name: 'Foo Coder',
bin: 'foo',
versionArgs: ['--version'],
buildArgs: (prompt) => ['exec', '-p', prompt],
streamFormat: 'plain',
}如果該 CLI 輸出類型化事件（如 Claude Code 的 --output-format stream-json），在 apps/daemon/src/claude-stream.ts 中編寫對應的 Parser，並將 streamFormat 設為 'claude-stream-json'。
6. 使用技巧與最佳實踐
6.1 Skill 選擇策略
按經驗推薦的 Skill 上手指南：
第一次使用：從 web-prototype開始，搭配Neutral ModernDesign System，輸入簡單需求（如 "a personal portfolio page"）漸進探索：掌握基本流程後，嘗試 saas-landing+Linear或Stripe風格Deck 製作：使用 guizang-ppt（雜誌風 PPT 默認 Skill），支持雜誌佈局、WebGL Hero 背景辦公文檔：Template 模式的 9 個 Skill 適合快速產出 PRD、週報、OKR 等 組合測試：同一需求，切換不同 Design System 觀察視覺差異，建立對 71 套系統的直觀認知
6.2 Prompt 編寫技巧
明確 Design Surface：說明是網頁、移動端、儀表板還是演示文稿 提供品牌上下文：粘貼官網 URL 或上傳 Logo/截圖，讓 Agent 執行品牌資產協議 指定約束條件：如 "只用兩列布局"、"必須包含數據表格"、"不要使用漸變色" 善用初始化表單：第一輪的 Discovery Form 是質量的關鍵入口，認真填寫每個字段 迭代優於一次性完美：第一版快速生成，然後通過 Comment Mode 或新的 Send 逐步修改
6.3 性能優化
優先使用 Claude Code CLI：流式格式為 claude-stream-json，還原度最高Skill 的 od.design_system.sections字段只聲明實際需要的 Section，減少 prompt token 消耗使用 Codex 時設置環境變量 OD_CODEX_DISABLE_PLUGINS=1來禁用 Codex 插件加載，加快啓動反覆迭代同一個項目時，Agent 的 cwd 不變，已生成的文件（如 brand-spec.md）可被複用 切換 Design System 只需一次重新生成，無需重建整個項目
6.4 安全考量
API Key 存儲在 Daemon 的 config.toml（mode 0600）或瀏覽器localStorage中，不會發送到 Open Design 的服務器（項目沒有服務器端）Artifact 預覽在沙盒 iframe 中運行（ sandbox="allow-scripts"），沒有allow-same-origin，無法訪問宿主頁面Agent 的 cwd 限制在 .od/projects/<id>/目錄下，權限控制繼承自 Agent CLI 自身的權限系統從不可信來源安裝 Skill 時會有安裝時警告
7. 常見問題與故障排除
7.1 啓動與連接問題
Q: 啓動後瀏覽器提示 "no agents found on PATH"
安裝至少一個支持的 CLI（claude、codex、cursor-agent、gemini、opencode、qwen、copilot），或在頂部欄切換到 "Anthropic API · BYOK" 模式並粘貼 API Key。
Q: Daemon 500 on /api/chat
檢查 Daemon 終端的 stderr 輸出。通常是 CLI 拒絕了參數格式。不同 CLI 的參數格式不同，參見 apps/daemon/src/agents.ts 中的 buildArgs 方法。
Q: 瀏覽器報 net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)
Nginx 的 gzip 緩衝了分塊 SSE 響應。在 Nginx 配置中設置：
location /api/ {
proxy_pass http://127.0.0.1:7456;
proxy_buffering off;
gzip off;
proxy_read_timeout 86400s;
proxy_send_timeout 86400s;
proxy_http_version 1.1;
proxy_set_header Connection "";
}7.2 Agent 相關問題
Q: 媒體生成報 OD_BIN: parameter not set 或 Daemon URL 是 :0
重建 Daemon CLI 並重啓：
pnpm --filter @open-design/daemon build
pnpm tools-dev restart --daemon-port 7457 --web-port 5175
ls -la apps/daemon/dist/cli.js
curl -s http://127.0.0.1:7457/api/health然後從 Open Design 應用重新打開項目（不要恢復舊的終端 Agent 會話）。
Q: Codex 加載過多插件上下文導致緩慢
OD_CODEX_DISABLE_PLUGINS=1 pnpm tools-dev7.3 輸出質量問題
Q: Artifact 一直不渲染
模型輸出了文本但沒有包裹在 <artifact> 標籤中。檢查 Daemon 日誌確認系統提示詞是否正確傳遞，考慮切換到能力更強的模型或更嚴格的 Skill。
Q: 生成的設計有明顯的 "AI 味"（AI Slop）
Open Design 內置的 Anti-AI-Slop 機制會阻止大部分 AI Slop 模式。如果仍然出現，可能原因：
使用的模型能力不足，未遵循 Prompt Stack 中的約束 使用的 Skill 較簡單，沒有附帶 references/checklist.md在 Prompt 中額外強調約束（如 "不要使用漸變色"、"數據留空用 — 代替"）
7.4 部署問題
Q: 部署到 Vercel 後無法訪問本地 .od 目錄
Vercel 是 Serverless 架構，沒有持久化文件系統。需要採用混合模式：Web 層部署到 Vercel，Daemon 仍運行在本地或自有服務器，通過隧道（如 Cloudflare Tunnel）暴露給 Vercel 的 Web 層。
Q: 如何在生產環境中運行？
pnpm build # 生產構建 + 靜態導出到 apps/web/out/
pnpm --filter @open-design/daemon build # 構建 Daemon CLI
# Daemon 本身在 localhost:7456 提供靜態文件和 API8. 實戰案例
8.1 案例一：SaaS 產品落地頁
目標：2 小時內產出一個可上線部署的 SaaS 產品落地頁。
操作步驟：
流程執行說明：
步驟 1：選擇 saas-landingSkill（提供 Hero/Features/Pricing/CTA 結構）+ Linear Design System（冷峻、結構化風格）步驟 2：輸入產品描述，包含產品名、目標受眾、核心賣點 步驟 3-4：Agent 返回 Discovery Form，鎖定設計方向和約束 步驟 5-9：Agent 按 saas-landing Skill 的結構化流程逐區域填充內容 步驟 10：五維自評通過後輸出 步驟 11：預覽滿意後導出 HTML，部署到 Vercel
API 用量預估：單次生成約 30K-50K input + 8K-15K output tokens。如果迭代 3-5 次，總消耗約 15 萬-25 萬 tokens。
8.2 案例二：融資路演 Deck
目標：15 分鐘內生成一份 8 頁的雜誌風格融資路演 PPT。
操作步驟：
步驟 1：Deck 模式選擇 guizang-ppt（雜誌風格 Web PPT，默認 Deck Skill）步驟 2：Design System 選擇 Stripe（金融科技風格，適合融資場景）步驟 3：輸入 Prompt："Create an 8-slide seed round pitch deck for an AI-powered developer tools startup. Include: problem, solution, market size, product demo, business model, team, traction, ask." 步驟 4：Agent 返回 Discovery Form 收集公司名、品牌色、目標融資金額等細節 步驟 5：Agent 從 guizang-ppt的references/themes.md中選擇雜誌佈局模板步驟 6：Agent 逐頁生成內容，預覽窗口實時展示橫向滑動效果 步驟 7：導出 PPTX 或 PDF 用於正式路演
技術要點：
guizang-ppt來自op7418/guizang-ppt-skill，保留原始 MIT License附帶 assets/template.html（種子模板）+ 4 個 references 文件（themes、layouts、components、checklist）P0/P1/P2 檢查清單確保每頁幻燈片的質量
8.3 案例三：移動 App 原型
目標：1 天內產出 5 個屏幕的移動 App 交互原型。
操作步驟：
步驟 1：選擇 mobile-appSkill，Device Frame 選擇iPhone 15 Pro步驟 2：Design System 選擇 Spotify（暗色主題，沉浸式體驗）或Airbnb（温暖友好）步驟 3：分屏生成：首頁 → 列表頁 → 詳情頁 → 設置頁 → Onboarding 流程 步驟 4：每屏獨立對話，但共享同一個 Design System，確保視覺一致性 步驟 5：導出 HTML，前端開發者可直接參考 CSS 變量和佈局結構
設備框（Device Frames）說明：
Open Design 內置 5 種設備框：iPhone 15 Pro、Pixel、iPad Pro、MacBook、Browser Chrome 設備框共享在 assets/frames/目錄，所有 Skill 可跨 Skill 引用像素級精確：iPhone 15 Pro 框包含 Dynamic Island、狀態欄 SVG、Home Indicator
9. 總結
Open Design 是一個本地優先、開源的 AI 設計平台，核心架構為"Web App + 本地 Daemon + 用戶已有的 Agent CLI"，不內置 AI Agent 而是委託給本地已有工具 19 個 Skills（設計交付類 8 個 + 演示類 2 個 + 辦公文檔類 9 個）和 71 套 Design Systems 構成可組合的能力×風格矩陣，理論組合超過 1,300 種 Skills 和 Design Systems 均採用文件式擴展：Skill 即文件夾（SKILL.md + assets + references），Design System 即單個 Markdown 文件（9 段式 Schema），無需註冊步驟 6 重 Anti-AI-Slop 機制（初始化表單、品牌資產協議、五維自評、檢查清單、Slop 黑名單、誠實佔位符）是 Open Design 區別於普通 AI 設計工具的核心壁壘 適用場景包括：獨立開發者的產品落地頁、PM 的原型和 PRD 文檔、技術博主的封面圖、設計師的重複性工作加速 不適合場景：需要複雜交互邏輯的生產級前端應用、需要像素級精確 UI 還原的專業設計任務（應使用 Figma）、需要多人實時協作的設計項目
參考文獻
[1] Open Design GitHub 倉庫：https://github.com/nexu-io/open-design
[2] Open Design QUICKSTART.md：https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md
[3] Open Design CONTRIBUTING.zh-CN.md：https://github.com/nexu-io/open-design/blob/main/CONTRIBUTING.zh-CN.md
[4] Open Design Skills Protocol：https://github.com/nexu-io/open-design/blob/main/docs/skills-protocol.md
[5] Open Design Architecture：https://github.com/nexu-io/open-design/blob/main/docs/architecture.md
[6] Anthropic Claude Design：https://claude.ai/design
[7] awesome-design-md (71 套 Design Systems 上游)：https://github.com/VoltAgent/awesome-design-md
[8] guizang-ppt-skill (雜誌 PPT Skill 來源)：https://github.com/op7418/guizang-ppt-skill
[9] huashu-design (設計哲學核心)：https://github.com/alchaincyf/huashu-design
[10] open-codesign (UX 模式參考)：https://github.com/OpenCoworkAI/open-codesign