2026-05-06 20:50:24 +02:00
# Open Design
> **[Claude Design][cd] 的開源替代品。** 本地優先、可部署到 Vercel、每一層都 BYOK —— **16 套 coding-agent CLI** 在 `PATH` 上自動檢測（ ） ， ，
< p align = "center" >
< img src = "docs/assets/banner.png" alt = "Open Design 封面：與本地 AI 智慧體共同設計" width = "100%" / >
< / p >
< p align = "center" >
< a href = "https://github.com/nexu-io/open-design/stargazers" > < img alt = "Stars" src = "https://img.shields.io/github/stars/nexu-io/open-design?style=for-the-badge&labelColor=0d1117&color=ffd700&logo=github&logoColor=white" / > < / a >
< a href = "https://github.com/nexu-io/open-design/network/members" > < img alt = "Forks" src = "https://img.shields.io/github/forks/nexu-io/open-design?style=for-the-badge&labelColor=0d1117&color=2ecc71&logo=github&logoColor=white" / > < / a >
< a href = "https://github.com/nexu-io/open-design/issues" > < img alt = "Issues" src = "https://img.shields.io/github/issues/nexu-io/open-design?style=for-the-badge&labelColor=0d1117&color=ff6b6b&logo=github&logoColor=white" / > < / a >
< a href = "https://github.com/nexu-io/open-design/pulls" > < img alt = "Pull Requests" src = "https://img.shields.io/github/issues-pr/nexu-io/open-design?style=for-the-badge&labelColor=0d1117&color=9b59b6&logo=github&logoColor=white" / > < / a >
< a href = "https://github.com/nexu-io/open-design/graphs/contributors" > < img alt = "Contributors" src = "https://img.shields.io/github/contributors/nexu-io/open-design?style=for-the-badge&labelColor=0d1117&color=3498db&logo=github&logoColor=white" / > < / a >
< a href = "https://github.com/nexu-io/open-design/commits/main" > < img alt = "Commit activity" src = "https://img.shields.io/github/commit-activity/m/nexu-io/open-design?style=for-the-badge&labelColor=0d1117&color=e67e22&logo=git&logoColor=white" / > < / a >
< a href = "https://github.com/nexu-io/open-design/commits/main" > < img alt = "Last commit" src = "https://img.shields.io/github/last-commit/nexu-io/open-design?style=for-the-badge&labelColor=0d1117&color=8e44ad&logo=git&logoColor=white" / > < / a >
< / p >
< p align = "center" >
< a href = "https://open-design.ai/" > < img alt = "下載客戶端" src = "https://img.shields.io/badge/%E4%B8%8B%E8%BC%89-%E5%AE%A2%E6%88%B6%E7%AB%AF-ff6b35?style=flat-square" / > < / a >
< a href = "LICENSE" > < img alt = "License" src = "https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square" / > < / a >
< a href = "#支援的-coding-agent" > < img alt = "Agents" src = "https://img.shields.io/badge/agents-16%20CLIs%20%2B%20BYOK%20proxy-black?style=flat-square" / > < / a >
< a href = "#design-system" > < img alt = "Design systems" src = "https://img.shields.io/badge/design%20systems-72-orange?style=flat-square" / > < / a >
< a href = "#內建-skills" > < img alt = "Skills" src = "https://img.shields.io/badge/skills-31-teal?style=flat-square" / > < / a >
< a href = "https://discord.gg/qhbcCH8Am4" > < img alt = "Discord" src = "https://img.shields.io/badge/discord-加入-5865F2?style=flat-square&logo=discord&logoColor=white" / > < / a >
< a href = "QUICKSTART.md" > < img alt = "Quickstart" src = "https://img.shields.io/badge/quickstart-3%20commands-green?style=flat-square" / > < / a >
< / p >
< p align = "center" > < a href = "README.md" > English< / a > · < a href = "README.es.md" > Español< / a > · < a href = "README.pt-BR.md" > Português (Brasil)< / a > · < a href = "README.de.md" > Deutsch< / a > · < a href = "README.fr.md" > Français< / a > · < a href = "README.zh-CN.md" > 简体中文< / a > · < b > 繁體中文< / b > · < a href = "README.ko.md" > 한국어< / a > · < a href = "README.ja-JP.md" > 日本語< / a > · < a href = "README.ar.md" > العربية< / a > · < a href = "README.ru.md" > Русский< / a > · < a href = "README.uk.md" > Українська< / a > < / p >
---
## 為什麼要做這個
Anthropic 的 [Claude Design][cd]（ ， ，
**Open Design（ ） ， `pnpm tools-dev` 跑完整本地閉環，雲端可單獨部署 Web 層，每一層都 BYOK（ ）
輸入「幫我做一份雜誌風的種子輪 pitch deck」。在模型揮灑第一個畫素之前， `TodoWrite` 計畫卡片即時流入 UI。Daemon 在磁碟上構建出一個真實的專案目錄，裡面有 seed 模板、佈局庫、自檢 checklist。Agent **強制 pre-flight** 讀取它們，對自己的輸出跑一輪**五維評審**，幾秒後吐出一個 `<artifact>` ，渲染在沙盒 iframe 裡。
這不是「AI 試圖做點設計」。這是一個被提示詞堆疊訓練得像高階設計師一樣工作的 AI —— 有可用的檔案系統、有確定性的色票庫、有 checklist 文化 —— 也就是 Claude Design 立下的那條線，只是這次它開源、歸你。
OD 站在四個開源專案的肩膀上：
- [**`alchaincyf/huashu-design`**（花叔的畫術） ](https://github.com/alchaincyf/huashu-design ) —— 設計哲學的指南針。Junior-Designer 工作流、5 步品牌資產協議、anti-AI-slop checklist、五維自評審、以及方向選擇器背後的「5 流派 × `apps/web/src/prompts/discovery.ts` ](apps/web/src/prompts/discovery.ts )。
- [**`op7418/guizang-ppt-skill`**（歸藏的雜誌風 PPT skill） ](https://github.com/op7418/guizang-ppt-skill ) —— Deck 模式。原樣納入在 [`skills/guizang-ppt/` ](skills/guizang-ppt/ ) 下，原 LICENSE 保留；
- [**`OpenCoworkAI/open-codesign`** ](https://github.com/OpenCoworkAI/open-codesign ) —— UX 北極星，也是我們最接近的同類。第一個開源的 Claude-Design 替代品。我們借鑑了它的流式 artifact 迴圈、沙盒 iframe 預覽模式（自帶 React 18 + Babel） （ ） （ ） ； ，
- [**`multica-ai/multica`** ](https://github.com/multica-ai/multica ) —— Daemon 與執行時架構。PATH 掃描式 agent 檢測，本地 daemon 作為唯一的特權程序，
## 一眼概覽
| | 你拿到的 |
|---|---|
| **Coding-agent CLI（ | Claude Code · Codex CLI · Devin for Terminal · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Qoder CLI · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP) · Kilo (ACP) · Mistral Vibe CLI (ACP) · DeepSeek TUI —— 在 `PATH` 上自動檢測，
| **BYOK 備援** | OpenAI 相容代理 `/api/proxy/stream` —— 填 `baseUrl` + `apiKey` + `model` ，任意 vendor（ ， ）
| **內建 design system** | **72 套** —— 2 套手寫起手 + 70 套從 [`awesome-design-md`][acd2] 匯入的產品系統（ ）
| **內建 skill** | **31 個** —— 27 個 `prototype` 模式（ ） `deck` 模式（`guizang-ppt` · `simple-deck` · `replit-deck` · `weekly-update` ） `scenario` 分組：
| **視覺方向** | 5 套精選流派（ ） ， ）
| **裝置外殼** | iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome —— 畫素級精確，跨 skill 共享，統一在 [`assets/frames/` ](assets/frames/ ) |
| **Agent 執行時** | 本地 daemon 在你的專案目錄裡 spawn CLI —— agent 擁有真實的 `Read` / `Write` / `Bash` / `WebFetch` ，作用在真實磁碟上；每個 adapter 都有 Windows `ENAMETOOLONG` 備援（
| **匯入** | 把 [Claude Design][cd] 匯出的 ZIP 直接拖到歡迎彈窗 —— `POST /api/import/claude-design` 解壓成真實專案，
| **持久化** | SQLite 在 `.od/app.sqlite` ： ，
| **生命週期** | 唯一入口 `pnpm tools-dev` （ ） （ ）
| **桌面版** | 可選 Electron 殼：渲染器 sandbox + sidecar IPC（ ） `tools-dev inspect desktop screenshot` ，跑 E2E |
| **部署目標** | 本地 `pnpm tools-dev` · Vercel Web 層 · 打包好的 Electron 桌面端，支援 macOS（ ） （ ） open-design.ai ](https://open-design.ai/ ) 或 [最新 release ](https://github.com/nexu-io/open-design/releases ) 直接下載 |
| **License** | Apache-2.0 |
[acd2]: https://github.com/VoltAgent/awesome-design-md
## 效果展示
< table >
< tr >
< td width = "50%" >
< img src = "docs/screenshots/01-entry-view.png" alt = "01 · 入口頁" / > < br / >
< sub > < b > 入口頁< / b > —— 選 skill、選 design system、寫一行需求。同一個表面服務原型、deck、行動版、dashboard、editorial 頁面所有 mode。< / sub >
< / td >
< td width = "50%" >
< img src = "docs/screenshots/02-question-form.png" alt = "02 · 初始化問題表單" / > < br / >
< sub > < b > 初始化問題表單< / b > —— 模型動筆之前， ： < / sub >
< / td >
< / tr >
< tr >
< td width = "50%" >
< img src = "docs/screenshots/03-direction-picker.png" alt = "03 · 方向選擇器" / > < br / >
< sub > < b > 方向選擇器< / b > —— 使用者沒有品牌上下文時， ， （ ） < / sub >
< / td >
< td width = "50%" >
< img src = "docs/screenshots/04-todo-progress.png" alt = "04 · 即時 todo 進度" / > < br / >
< sub > < b > 即時 todo 進度< / b > —— Agent 的計畫以即時卡片形式流入 UI。< code > in_progress< / code > → < code > completed< / code > 即時切換。使用者能在中途以極低成本介入修正。< / sub >
< / td >
< / tr >
< tr >
< td width = "50%" >
< img src = "docs/screenshots/05-preview-iframe.png" alt = "05 · 沙盒預覽" / > < br / >
< sub > < b > 沙盒預覽< / b > —— 每個 < code > < artifact> < / code > 都在乾淨的 srcdoc iframe 裡渲染。可在檔案工作區裡就地編輯；可下載為 HTML / PDF / ZIP。< / sub >
< / td >
< td width = "50%" >
< img src = "docs/screenshots/06-design-systems-library.png" alt = "06 · 72 套 design system 庫" / > < br / >
< sub > < b > 72 套 design system 庫< / b > —— 每套產品系統都展示 4 色色卡。點進去看完整的 < code > DESIGN.md< / code > 、色票網格、live showcase。< / sub >
< / td >
< / tr >
< tr >
< td width = "50%" >
< img src = "docs/screenshots/07-magazine-deck.png" alt = "07 · 雜誌風 deck" / > < br / >
< sub > < b > Deck 模式（ ） < / b > —— 內建的 < a href = "https://github.com/op7418/guizang-ppt-skill" > < code > guizang-ppt-skill< / code > < / a > 原樣接入。雜誌版式、WebGL hero 背景、單檔案 HTML 輸出、可導 PDF。< / sub >
< / td >
< td width = "50%" >
< img src = "docs/screenshots/08-mobile-app.png" alt = "08 · 行動版原型" / > < br / >
< sub > < b > 行動版原型< / b > —— 畫素級精確的 iPhone 15 Pro chrome（ ） < code > /frames/< / code > 共享資源， < / sub >
< / td >
< / tr >
< / table >
## 內建 Skills
**31 個 skill， `od:` frontmatter， `mode` 、`platform`、`scenario`、`preview.type`、`design_system.requires`、`default_for`、`featured`、`fidelity`、`speaker_notes`、`animations`、`example_prompt`（
兩種頂層 **mode** 撐起整個目錄：**`prototype`**（ ** `deck` **（ `marketing` · `operation` · `engineering` · `product` · `finance` · `hr` · `sale` · `personal` 。
### 示例展示（ ）
視覺表現最強、最適合入門第一跑的幾條 skill。每條都附帶可直接開啟的 `example.html` —— 不用登入、不用配置，先看產出再動手。
< table >
< tr >
< td width = "50%" valign = "top" >
< a href = "skills/dating-web/" > < img src = "docs/screenshots/skills/dating-web.png" alt = "dating-web" / > < / a > < br / >
< sub > < b > < a href = "skills/dating-web/" > < code > dating-web< / code > < / a > < / b > · < i > prototype< / i > < br / > 消費級約會 / 婚戀儀表盤 —— 左側欄、社群動態 ticker、頭部 KPI、30 天雙向匹配柱狀圖， < / sub >
< / td >
< td width = "50%" valign = "top" >
< a href = "skills/digital-eguide/" > < img src = "docs/screenshots/skills/digital-eguide.png" alt = "digital-eguide" / > < / a > < br / >
< sub > < b > < a href = "skills/digital-eguide/" > < code > digital-eguide< / code > < / a > < / b > · < i > template< / i > < br / > 兩頁數字 e-guide —— 封面（ （ < / sub >
< / td >
< / tr >
< tr >
< td width = "50%" valign = "top" >
< a href = "skills/email-marketing/" > < img src = "docs/screenshots/skills/email-marketing.png" alt = "email-marketing" / > < / a > < br / >
< sub > < b > < a href = "skills/email-marketing/" > < code > email-marketing< / code > < / a > < / b > · < i > prototype< / i > < br / > 品牌新品釋出郵件 —— 頂部 wordmark、hero 圖、標題鎖排、主 CTA、規格網格。居中單列 + 表格降級，郵件客戶端安全。< / sub >
< / td >
< td width = "50%" valign = "top" >
< a href = "skills/gamified-app/" > < img src = "docs/screenshots/skills/gamified-app.png" alt = "gamified-app" / > < / a > < br / >
< sub > < b > < a href = "skills/gamified-app/" > < code > gamified-app< / code > < / a > < / b > · < i > prototype< / i > < br / > 三螢幕遊戲化移動 app 原型，黑色舞臺 —— 封面 / 今日任務（ < / sub >
< / td >
< / tr >
< tr >
< td width = "50%" valign = "top" >
< a href = "skills/mobile-onboarding/" > < img src = "docs/screenshots/skills/mobile-onboarding.png" alt = "mobile-onboarding" / > < / a > < br / >
< sub > < b > < a href = "skills/mobile-onboarding/" > < code > mobile-onboarding< / code > < / a > < / b > · < i > prototype< / i > < br / > 三螢幕行動版引導流 —— splash、價值主張、登入。狀態列、滑動點、主 CTA。< / sub >
< / td >
< td width = "50%" valign = "top" >
< a href = "skills/motion-frames/" > < img src = "docs/screenshots/skills/motion-frames.png" alt = "motion-frames" / > < / a > < br / >
< sub > < b > < a href = "skills/motion-frames/" > < code > motion-frames< / code > < / a > < / b > · < i > prototype< / i > < br / > 單幀 motion 設計 hero， < / sub >
< / td >
< / tr >
< tr >
< td width = "50%" valign = "top" >
< a href = "skills/social-carousel/" > < img src = "docs/screenshots/skills/social-carousel.png" alt = "social-carousel" / > < / a > < br / >
< sub > < b > < a href = "skills/social-carousel/" > < code > social-carousel< / code > < / a > < / b > · < i > prototype< / i > < br / > 1080× ， ， < / sub >
< / td >
< td width = "50%" valign = "top" >
< a href = "skills/sprite-animation/" > < img src = "docs/screenshots/skills/sprite-animation.png" alt = "sprite-animation" / > < / a > < br / >
< sub > < b > < a href = "skills/sprite-animation/" > < code > sprite-animation< / code > < / a > < / b > · < i > prototype< / i > < br / > 畫素 / 8-bit 動畫直譯器單幀 —— 米白通螢幕、畫素吉祥物、動感日文標題、迴圈 CSS keyframes， < / sub >
< / td >
< / tr >
< / table >
### 設計與營銷類（
| Skill | 平臺 | 場景 | 產出 |
|---|---|---|---|
| [`web-prototype` ](skills/web-prototype/ ) | 桌面 | design | 單頁 HTML —— landing、營銷、hero（
| [`saas-landing` ](skills/saas-landing/ ) | 桌面 | marketing | hero / features / pricing / CTA 營銷版式 |
| [`dashboard` ](skills/dashboard/ ) | 桌面 | operation | 帶側欄 + 資料密集型的後臺 |
| [`pricing-page` ](skills/pricing-page/ ) | 桌面 | sale | 獨立定價頁 + 對比表 |
| [`docs-page` ](skills/docs-page/ ) | 桌面 | engineering | 三欄文件版式 |
| [`blog-post` ](skills/blog-post/ ) | 桌面 | marketing | 長文 editorial |
| [`mobile-app` ](skills/mobile-app/ ) | 移動 | design | 帶 iPhone 15 Pro / Pixel 外殼的 app 螢幕 |
| [`mobile-onboarding` ](skills/mobile-onboarding/ ) | 移動 | design | 多螢幕行動版引導流（
| [`gamified-app` ](skills/gamified-app/ ) | 移動 | personal | 三螢幕遊戲化 app 原型 |
| [`email-marketing` ](skills/email-marketing/ ) | 桌面 | marketing | 品牌新品釋出郵件（表格降級郵件客戶端安全） |
| [`social-carousel` ](skills/social-carousel/ ) | 桌面 | marketing | 1080×
| [`magazine-poster` ](skills/magazine-poster/ ) | 桌面 | marketing | 單頁雜誌風海報 |
| [`motion-frames` ](skills/motion-frames/ ) | 桌面 | marketing | CSS 迴圈動畫的 motion hero |
| [`sprite-animation` ](skills/sprite-animation/ ) | 桌面 | marketing | 畫素 / 8-bit 動畫直譯器 |
| [`dating-web` ](skills/dating-web/ ) | 桌面 | personal | 消費級約會 / 婚戀儀表盤 |
| [`digital-eguide` ](skills/digital-eguide/ ) | 桌面 | marketing | 兩頁數字 e-guide（
| [`wireframe-sketch` ](skills/wireframe-sketch/ ) | 桌面 | design | 手繪風線框稿 —— 服務於 "先把灰塊拼出來給使用者看" 的早期回合 |
| [`critique` ](skills/critique/ ) | 桌面 | design | 五維自評分卡（ ）
| [`tweaks` ](skills/tweaks/ ) | 桌面 | design | AI 自吐 tweaks 面板 —— 模型自己丟擲值得調的引數 |
### Deck 類（
| Skill | 預設 | 產出 |
|---|---|---|
| [`guizang-ppt` ](skills/guizang-ppt/ ) | **deck 預設** | 雜誌風網頁 PPT —— 來自 [op7418/guizang-ppt-skill][guizang]，原 LICENSE 保留 |
| [`simple-deck` ](skills/simple-deck/ ) | — | 極簡橫滑 deck |
| [`replit-deck` ](skills/replit-deck/ ) | — | 產品演示 deck（
| [`weekly-update` ](skills/weekly-update/ ) | — | 團隊週報橫滑 deck（
### 文件與辦公產物類（
| Skill | Scenario | 產出 |
|---|---|---|
| [`pm-spec` ](skills/pm-spec/ ) | product | PM 規格文件 + 目錄 + 決策日誌 |
| [`team-okrs` ](skills/team-okrs/ ) | product | OKR 計分表 |
| [`meeting-notes` ](skills/meeting-notes/ ) | operation | 會議決策紀要 |
| [`kanban-board` ](skills/kanban-board/ ) | operation | 看板快照 |
| [`eng-runbook` ](skills/eng-runbook/ ) | engineering | 故障 runbook |
| [`finance-report` ](skills/finance-report/ ) | finance | 高管財務摘要 |
| [`invoice` ](skills/invoice/ ) | finance | 單頁發票 |
| [`hr-onboarding` ](skills/hr-onboarding/ ) | hr | 崗位入職計畫 |
新增一個 skill 就是新增一個資料夾。讀 [`docs/skills-protocol.md` ](docs/skills-protocol.md ) 瞭解擴充套件 frontmatter， ， `GET /api/skills` ；單個 skill 的種子拼裝（ ） `GET /api/skills/:id/example` 。
## 六個底層設計
### 1 · 我們不帶 agent，
Daemon 啟動時掃 `PATH` ，找 [`claude` ](https://docs.anthropic.com/en/docs/claude-code )、[`codex`](https://github.com/openai/codex)、[`cursor-agent`](https://www.cursor.com/cli)、[`gemini`](https://github.com/google-gemini/gemini-cli)、[`opencode`](https://opencode.ai/)、[`qwen`](https://github.com/QwenLM/qwen-code)、`qodercli`、[`copilot`](https://github.com/features/copilot/cli)、`hermes`、`kimi` 和 [`pi` ](https://github.com/mariozechner/pi-ai )。能找到的都成為候選設計引擎 —— 走 stdio， ， `multica` ](https://github.com/multica-ai/multica ) 和 [`cc-switch` ](https://github.com/farion1231/cc-switch )。一個 CLI 都沒裝？`POST /api/proxy/stream` 就是同一條管線減去 spawn —— 填任意 OpenAI 相容 `baseUrl` + `apiKey` ， ，
### 2 · Skill 是檔案，不是外掛
遵循 Claude Code [`SKILL.md` 規範 ](https://docs.anthropic.com/en/docs/claude-code/skills )，每個 skill = `SKILL.md` + `assets/` + `references/` 。把一個資料夾丟進 [`skills/` ](skills/ )，重啟 daemon， `magazine-web-ppt` 就是 [`op7418/guizang-ppt-skill` ](https://github.com/op7418/guizang-ppt-skill ) **原樣**納入 —— 原 LICENSE 保留、原作者歸屬保留。
### 3 · Design System 是可移植的 Markdown，
[`VoltAgent/awesome-design-md`][acd2] 的 9 段式 `DESIGN.md` —— color、typography、spacing、layout、components、motion、voice、brand、anti-patterns。每個 artifact 都從啟用的 system 裡讀 token。切換 system → 下一次渲染就用新的 token。下拉框裡現成的有：
### 4 · 初始化問題表單幹掉 80% 的來回返工
OD 的提示詞堆疊把 `RULE 1` 寫死了：每個新設計任務都從 `<question-form id="discovery">` 開始，**不是程式碼**。Surface · 受眾 · 調性 · 品牌上下文 · 規模 · 約束。一段寫得很長的需求裡仍然有大量留白：視覺調性、色彩立場、規模 —— 而表單恰恰把這些用 30 秒勾選項鎖死。錯方向的代價是一輪對話，不是一份做完的 deck。
這就是從 [`huashu-design` ](https://github.com/alchaincyf/huashu-design ) 蒸餾出來的 **Junior-Designer 模式** ：開工前一次性批次問完，儘早 show 出一些可見的東西（哪怕只是灰色方塊的 wireframe） ， （ `grep` hex · 寫 `brand-spec.md` · 複述） ，
### 5 · Daemon 讓 agent 感覺自己就在你筆記本上 —— 因為它就是
Daemon `spawn` CLI 時，`cwd` 設到該專案在 `.od/projects/<id>/` 下的 artifact 資料夾。Agent 拿到的 `Read` / `Write` / `Bash` / `WebFetch` 都是真工具，作用在真檔案系統上。它能 `Read` skill 的 `assets/template.html` ，能 `grep` 你的 CSS 拿 hex， `brand-spec.md` ，能實作生成的圖片，能產出 `.pptx` / `.zip` / `.pdf` —— 這些檔案在 turn 結束的時候作為下載 chip 出現在檔案工作區裡。Session、對話、訊息、tab 都持久化在本地 SQLite 裡 —— 明天再開啟這個專案，
### 6 · 提示詞堆疊本身就是產品
傳送時拼裝的不是「system + user」。它是：
```
DISCOVERY 指令 （ ）
+ 身份與工作流憲章 （
+ 啟用的 DESIGN.md （
+ 啟用的 SKILL.md （
+ 專案後設資料 （ ）
+ Skill 副檔案 （自動注入 pre-flight： ）
+ （ （ ）
```
每一層都可組合。每一層都是一個你能改的檔案。看 [`apps/web/src/prompts/system.ts` ](apps/web/src/prompts/system.ts ) 和 [`apps/web/src/prompts/discovery.ts` ](apps/web/src/prompts/discovery.ts ) 就知道真實契約長什麼樣。
## 技術架構
```
┌─────────────── 瀏覽器（ ）
│ chat · 檔案工作區 · iframe 預覽 · 設定 · 匯入 │
└──────────────┬─────────────────────────────────┬───────────────┘
│ /api/*（ ）
▼ ▼
┌─────────────────────────────────┐ /api/proxy/stream (SSE)
│ 本地 daemon（ ）
│ │ 端點（ ）
│ /api/agents /api/skills│ 含 SSRF 防禦
│ /api/design-systems /api/projects/…
│ /api/chat (SSE) /api/proxy/stream (SSE)
│ /api/templates /api/import/claude-design
│ /api/artifacts/save /api/artifacts/lint
│ /api/upload /api/projects/:id/files…
│ /artifacts (靜態) /frames (靜態)
│
│ 可選 sidecar IPC： < ns > /< app > .sock
│ （ ）
└─────────┬───────────────────────┘
│ spawn(cli, [...], { cwd: .od/projects/< id > })
▼
┌──────────────────────────────────────────────────────────────────┐
│ claude · codex · gemini · opencode · cursor-agent · qwen │
│ qoder · copilot · hermes (ACP) · kimi (ACP) · pi (RPC) │
│ 讀 SKILL.md + DESIGN.md，
└──────────────────────────────────────────────────────────────────┘
```
| 層 | 技術堆疊 |
|---|---|
| 前端 | Next.js 16 App Router + React 18 + TypeScript，
| Daemon | Node 24 · Express · SSE 流 · `better-sqlite3` ；表：`projects` · `conversations` · `messages` · `tabs` · `templates` |
| Agent 傳輸層 | `child_process.spawn` ， `claude-stream-json` 、Qoder CLI 走 `qoder-stream-json` 、Copilot 走 `copilot-stream-json` 、Codex / Gemini / OpenCode / Cursor Agent 走 `json-event-stream` （每個 CLI 一個 parser） `acp-json-rpc` （ ） `pi-rpc` （ ） `plain` |
| BYOK 代理 | `POST /api/proxy/stream` → OpenAI 相容 `/v1/chat/completions` 透傳 SSE；
| 儲存 | 純檔案 `.od/projects/<id>/` + SQLite `.od/app.sqlite` （已 gitignore，
| 預覽 | 沙盒 iframe（ ） `<artifact>` parser（ ）
| 匯出 | HTML（ ） （ ， ） （ ） （ ）
| 生命週期 | `pnpm tools-dev start \| stop \| run \| status \| logs \| inspect \| check` ；埠走 `--daemon-port` / `--web-port` ，名稱空間走 `--namespace` |
| 桌面版（可選） | Electron 殼 —— 透過 sidecar IPC 拿 web URL， ； （ `tools-dev inspect desktop …` 跑 E2E |
## Quickstart
### 下載桌面端（不需建置）
試用 Open Design 最快的方式是直接下載預編譯的桌面端 —— 不用裝 Node、不用 pnpm、不用 clone：
- **[open-design.ai](https://open-design.ai/)** —— 官方下載頁
- **[GitHub releases](https://github.com/nexu-io/open-design/releases)**
### 從原始碼執行
```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version # 應輸出 10.33.2
pnpm install
pnpm tools-dev run web
# 開啟 tools-dev 輸出的 web URL
```
Windows 啟動器：請依照 `tools/launcher/README.md` 的說明自行建置 `OpenDesign.exe` ，或從 GitHub Releases 下載。接著將它放到 repo 根目錄並雙擊；它會在需要時執行 `pnpm install` ，再用 `pnpm tools-dev` 啟動 Open Design。
環境要求： `~24` ， `10.33.x` 。`nvm` / `fnm` 只是可選輔助工具，不是專案必需步驟；如果使用它們，先執行 `nvm install 24 && nvm use 24` 或 `fnm install 24 && fnm use 24` ，再執行 `pnpm install` 。
桌面版/後臺啟動、固定埠重啟，以及 media 生成派發器檢查（`OD_BIN`、`OD_DAEMON_URL`、`apps/daemon/dist/cli.js`）見 [`QUICKSTART.md` ](QUICKSTART.md )。
第一次載入會：
1. 檢測你 `PATH` 上有哪些 agent CLI，
2. 載入 31 個 skill + 72 套 design system。
3. 彈歡迎對話方塊，讓你貼 Anthropic key（
4. **自動建立 `./.od/`** —— 本地執行時目錄，存放 SQLite 專案庫、各專案工作區、儲存下來的 artifact。**沒有** `od init` 這一步， `mkdir` 。
輸入需求，回車，看 question form 跳出來，填，看 todo 卡片流動，看 artifact 渲染。點 **Save to disk** 或匯出整個專案 ZIP。
### 第一次跑起來（`./.od/` 解釋）
Daemon 在倉庫根下維護一個隱藏目錄，裡面所有內容都已 gitignore， ，
```
.od/
├── app.sqlite ← 專案 · 對話 · 訊息 · 開啟的 tab
├── artifacts/ ← Save to disk 一次性渲染（帶時間戳）
└── projects/< id > / ← 每個專案的工作目錄，也是 agent 的 cwd
```
| 想做什麼 | 怎麼做 |
|---|---|
| 看一眼裡面有啥 | `ls -la .od && sqlite3 .od/app.sqlite '.tables'` |
| 完全清空，從零再來 | `pnpm tools-dev stop` ，再 `rm -rf .od` ，然後重新 `pnpm tools-dev run web` |
| 換到別的位置 | 暫不支援 —— 路徑是相對倉庫根寫死的 |
完整檔案地圖、指令碼、排錯 → [`QUICKSTART.md` ](QUICKSTART.md )。
## 跑專案
Open Design 可以跑成瀏覽器裡的 web app，
### Web / Localhost（ ）
```bash
# 前景模式 —— 生命週期指令在前景跑（
pnpm tools-dev run web
# 看最近的 log：
pnpm tools-dev logs
# 背景模式 —— daemon + web 跑成背景行程
pnpm tools-dev start web
```
預設 `tools-dev` 會綁到可用的暫時埠號，啟動時把實際 URL 印出來。要在停止狀態下用固定埠：
```bash
pnpm tools-dev run web --daemon-port 17456 --web-port 17573
```
如果 daemon / web 已經在跑，用 `restart` 在現有 session 裡換埠：
```bash
pnpm tools-dev restart --daemon-port 17456 --web-port 17573
```
### Desktop / Electron
```bash
# 在背景啟動 daemon + web + desktop
pnpm tools-dev
# 看桌面版狀態
pnpm tools-dev inspect desktop status
# 對桌面版截圖
pnpm tools-dev inspect desktop screenshot --path /tmp/open-design.png
```
桌面版透過 sidecar IPC 自動探得 web URL —— 不用猜埠。
### 其他常用指令
| 指令 | 用途 |
|---|---|
| `pnpm tools-dev status` | 顯示 sidecar 執行狀態 |
| `pnpm tools-dev logs` | 看 daemon / web / desktop 的 log 尾端 |
| `pnpm tools-dev stop` | 停掉所有 sidecar |
| `pnpm tools-dev restart` | 全部停掉再重啟 |
| `pnpm tools-dev check` | 狀態 + 最近 log + 常見診斷 |
固定埠重啟、背景啟動、完整排錯 → [`QUICKSTART.md` ](QUICKSTART.md )。
## 從 coding agent 端使用 Open Design
Open Design 內建一個 stdio MCP server。把它接進 Claude Code、Codex、Cursor、VS Code、Antigravity、Zed、Windsurf， ， `search_files` 、`get_file`、`get_artifact` 沒帶 project 參數時， *「在我的 app 裡蓋這個」* 、*「對齊這套樣式」* 這類提示直接就能用。
**為什麼選 MCP？ ，
在 Open Design app 裡打開 **Settings → MCP server** 就有逐 client 的安裝流程。面板會把 `node` 二進位的絕對路徑、daemon 編好的 `cli.js` 路徑，烘進每段 snippet —— 所以即使是剛 clone 下來、`od` 不在 PATH 上的環境也能用。Cursor 給一鍵 deeplink； （ `claude mcp add-json` 一行指令，不必手改 `~/.claude.json` ）。裝完之後重啟或 reload 你的 client，
MCP 工具呼叫成功的前提是 daemon 在本機跑著。如果 agent 是在 Open Design 起來之前就啟動，等 OD 起來後請重啟 agent， `"daemon not reachable"` 的明確錯誤，不會 crash。
**安全性。** MCP server 是唯讀的 —— 它只暴露檔案讀取、檔案 metadata、搜尋， `127.0.0.1` ；要讓區網內的機器也能連，得明確設 `OD_BIND_HOST` 。
## 倉庫結構
```
open-design/
├── README.md ← 英文
├── README.de.md ← Deutsch
├── README.zh-CN.md ← 简体中文
├── README.zh-TW.md ← 本檔案
├── QUICKSTART.md ← 跑 / 構建 / 部署
├── package.json ← 單 bin: od
│
├── apps/
│ ├── daemon/ ← Node + Express，
│ │ ├── src/ ← TypeScript daemon 原始碼
│ │ │ ├── cli.ts ← `od` bin 原始碼，編譯到 dist/cli.js
│ │ │ ├── server.ts ← /api/* 路由（ ）
│ │ │ ├── agents.ts ← PATH 掃描器 + 各 CLI 的 argv 拼裝
│ │ │ ├── claude-stream.ts ← Claude Code stdout 流式 JSON 解析
│ │ │ ├── skills.ts ← SKILL.md frontmatter 載入器
│ │ │ └── db.ts ← SQLite schema（ ）
│ │ ├── sidecar/ ← tools-dev daemon sidecar wrapper
│ │ └── tests/ ← daemon 包測試
│ │
│ └── web/ ← Next.js 16 App Router + React 客戶端
│ ├── app/ ← App Router 入口
│ ├── next.config.ts ← dev rewrites + 生產 out/ 靜態匯出
│ └── src/ ← React + TS 客戶端模組
│ ├── App.tsx ← 路由、bootstrap、設定
│ ├── components/ ← chat、composer、picker、preview、sketch…
│ ├── prompts/ ← system、discovery、directions、deck framework
│ ├── artifacts/ ← streaming < artifact > parser + manifest
│ ├── runtime/ ← iframe srcdoc、markdown、匯出輔助
│ ├── providers/ ← daemon SSE + BYOK API 傳輸
│ └── state/ ← localStorage + daemon-backed 專案狀態
│
├── e2e/ ← Playwright UI + 外部整合/Vitest harness
│
├── packages/
│ ├── contracts/ ← web/daemon 共享 app contracts
│ ├── sidecar-proto/ ← Open Design sidecar protocol contract
│ ├── sidecar/ ← 通用 sidecar runtime primitives
│ └── platform/ ← 通用 process/platform primitives
│
├── skills/ ← 31 個 SKILL.md skill 包（ ）
│ ├── web-prototype/ ← prototype 預設
│ ├── saas-landing/ dashboard/ pricing-page/ docs-page/ blog-post/
│ ├── mobile-app/ mobile-onboarding/ gamified-app/
│ ├── email-marketing/ social-carousel/ magazine-poster/
│ ├── motion-frames/ sprite-animation/ digital-eguide/ dating-web/
│ ├── critique/ tweaks/ wireframe-sketch/
│ ├── pm-spec/ team-okrs/ meeting-notes/ kanban-board/
│ ├── eng-runbook/ finance-report/ invoice/ hr-onboarding/
│ ├── simple-deck/ replit-deck/ weekly-update/ ← deck 模式
│ └── guizang-ppt/ ← 內建 magazine-web-ppt（
│ ├── SKILL.md
│ ├── assets/template.html ← seed
│ └── references/{themes,layouts,components,checklist}.md
│
├── design-systems/ ← 72 套 DESIGN.md
│ ├── default/ ← Neutral Modern（ ）
│ ├── warm-editorial/ ← Warm Editorial（ ）
│ ├── linear-app/ vercel/ stripe/ airbnb/ notion/ cursor/ apple/ …
│ └── README.md
│
├── assets/
│ └── frames/ ← 跨 skill 共享裝置外殼
│ ├── iphone-15-pro.html
│ ├── android-pixel.html
│ ├── ipad-pro.html
│ ├── macbook.html
│ └── browser-chrome.html
│
├── templates/
│ └── deck-framework.html ← deck 基線（ ）
│
├── scripts/
│ └── sync-design-systems.ts ← 從上游 awesome-design-md tarball 重新匯入
│
├── docs/
│ ├── spec.md ← 產品定義、場景、差異化
│ ├── architecture.md ← 拓撲、資料流、元件
│ ├── skills-protocol.md ← 擴充套件 SKILL.md 的 od: frontmatter
│ ├── agent-adapters.md ← 各 CLI 檢測 + 派發
│ ├── modes.md ← prototype / deck / template / design-system
│ ├── references.md ← 詳盡的引用與師承
│ ├── roadmap.md ← 分階段交付
│ ├── schemas/ ← JSON schema
│ └── examples/ ← 標準 artifact 樣例
│
└── .od/ ← 執行時資料，已 gitignore，
├── app.sqlite ← 專案 / 對話 / 訊息 / tab
├── projects/< id > / ← 每個專案的工作目錄（ ）
└── artifacts/ ← 單次儲存的 artifact
```
## Design System
< p align = "center" >
< img src = "docs/assets/design-systems-library.png" alt = "72 套 Design Systems 庫 — 編輯版式雙頁" width = "100%" / >
< / p >
72 套開箱即用，每套一個 [`DESIGN.md` ](design-systems/README.md )：
< details >
< summary > < b > 完整目錄< / b > （點選展開）< / summary >
**AI & LLM** —— `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai`
**開發者工具** —— `cursor` · `vercel` · `linear-app` · `framer` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `webflow` · `sanity` · `mintlify` · `lovable` · `composio` · `opencode-ai` · `voltagent`
**生產力** —— `notion` · `figma` · `miro` · `airtable` · `superhuman` · `intercom` · `zapier` · `cal` · `clay` · `raycast`
**金融科技** —— `stripe` · `coinbase` · `binance` · `kraken` · `mastercard` · `revolut` · `wise`
**電商 / 出行** —— `shopify` · `airbnb` · `uber` · `nike` · `starbucks` · `pinterest`
**媒體** —— `spotify` · `playstation` · `wired` · `theverge` · `meta`
**汽車** —— `tesla` · `bmw` · `ferrari` · `lamborghini` · `bugatti` · `renault`
**其他** —— `apple` · `ibm` · `nvidia` · `vodafone` · `sentry` · `resend` · `spacex`
**起手** —— `default` （ ） `warm-editorial`
< / details >
整個庫透過 [`scripts/sync-design-systems.ts` ](scripts/sync-design-systems.ts ) 從 [`VoltAgent/awesome-design-md`][acd2] 匯入。重新執行即可重新整理。
## 視覺方向
當用戶沒有品牌資產時， ， `huashu-design` 的「設計方向顧問 · 5 流派 × ](https://github.com/alchaincyf/huashu-design#%E8%AE%BE%E8%AE%A1%E6%96%B9%E5%90%91%E9%A1%BE%E9%97%AE-fallback ) 在 OD 裡的實作。每一套都是確定性 spec —— OKLch 色票、字型堆疊、版式姿態、參考列表 —— agent 直接把它**原樣**綁進 seed 模板的 `:root` 。一個 radio 選完，整套視覺系統全部鎖定。零 freestyle，
| 方向 | 調性 | 參考 |
|---|---|---|
| Editorial — Monocle / FT | 印刷雜誌，墨水 + 米色紙 + 暖紅強調 | Monocle · FT Weekend · NYT Magazine |
| Modern minimal — Linear / Vercel | 冷調、結構化、剋制強調 | Linear · Vercel · Stripe |
| Tech utility | 資訊密度、等寬、終端感 | Bloomberg · Bauhaus 工具 |
| Brutalist | 粗糲、巨字、無陰影、刺眼強調 | Bloomberg Businessweek · Achtung |
| Soft warm | 大方、低對比、桃色中性 | Notion 營銷頁 · Apple Health |
完整 spec → [`apps/web/src/prompts/directions.ts` ](apps/web/src/prompts/directions.ts )。
## 媒體生成
OD 不只到程式碼為止。同一套產出 `<artifact>` HTML 的 chat 入口，也驅動**圖像**、**影片**、**音訊**生成 —— 模型 adapter 已經接進 daemon 的 media pipeline（ `.mp4` 在 turn 結束時直接以下載 chip 形式出現。
目前主力是三個模型族：
| Surface | 模型 | 提供方 | 用來做什麼 |
|---|---|---|---|
| **圖像** | `gpt-image-2` | Azure / OpenAI | 海報、頭像、城市插畫地圖、資訊圖、雜誌風社群卡、老照片修復、產品爆炸圖 |
| **影片** | `seedance-2.0` | 字節跳動 Volcengine | 15s 電影感 t2v + i2v + 音訊 —— 敘事短片、人物特寫、產品片、MV 編排 |
| **影片** | `hyperframes-html` | [HeyGen 開源 ](https://github.com/heygen-com/hyperframes ) | HTML→MP4 動態圖形 —— 產品揭曉、動力學排版、資料圖表、社群覆蓋層、Logo 收尾、TikTok 直式配卡拉 OK 字幕 |
不斷成長的 **prompt gallery** 在 [`prompt-templates/` ](prompt-templates/ ) —— 共 **93 條可一鍵複刻 prompt** ： ） （ `hyperframes-*` ） （ ， `source` 區塊。daemon 在 `GET /api/prompt-templates` 暴露它們； **Image templates** / **Video templates** 兩個 tab 把它們渲染成卡片網格，一鍵就把 prompt 拍進 composer，
### gpt-image-2 —— 圖像樣例（共 43 條，下面 5 張）
< table >
< tr >
< td width = "20%" valign = "top" > < img src = "https://cms-assets.youmind.com/media/1776661968404_8a5flm_HGQc_KOaMAA2vt0.jpg" alt = "3D Stone Staircase Evolution" / > < br / > < sub > < b > 3D Stone Staircase Evolution Infographic< / b > < br / > 三段式石材風資訊圖< / sub > < / td >
< td width = "20%" valign = "top" > < img src = "https://cms-assets.youmind.com/media/1776662673014_nf0taw_HGRMNDybsAAGG88.jpg" alt = "Illustrated City Food Map" / > < br / > < sub > < b > Illustrated City Food Map< / b > < br / > 編輯級手繪旅行海報< / sub > < / td >
< td width = "20%" valign = "top" > < img src = "https://cms-assets.youmind.com/media/1777453149026_gd2k50_HHCSvymboAAVscc.jpg" alt = "Cinematic Elevator Scene" / > < br / > < sub > < b > Cinematic Elevator Scene< / b > < br / > 電梯場景的單格時尚靜畫< / sub > < / td >
< td width = "20%" valign = "top" > < img src = "https://cms-assets.youmind.com/media/1777453164993_mt5b69_HHDoWfeaUAEA6Vt.jpg" alt = "Cyberpunk Anime Portrait" / > < br / > < sub > < b > Cyberpunk Anime Portrait< / b > < br / > 頭像 —— 霓虹臉字< / sub > < / td >
< td width = "20%" valign = "top" > < img src = "https://cms-assets.youmind.com/media/1777453184257_vb9hvl_HG9tAkOa4AAuRrn.jpg" alt = "Glamorous Woman in Black" / > < br / > < sub > < b > Glamorous Woman in Black Portrait< / b > < br / > 編輯級攝影棚肖像< / sub > < / td >
< / tr >
< / table >
完整列表 → [`prompt-templates/image/` ](prompt-templates/image/ )。來源：多數取自 [`YouMind-OpenLab/awesome-gpt-image-prompts` ](https://github.com/YouMind-OpenLab/awesome-gpt-image-prompts )（
### Seedance 2.0 —— 影片樣例（共 39 條，下面 5 段）
< table >
< tr >
< td width = "20%" valign = "top" > < a href = "https://customer-qs6wnyfuv0gcybzj.cloudflarestream.com/c4515f4f328539e1ded2cc32f4ce63e7/downloads/default.mp4" > < img src = "https://customer-qs6wnyfuv0gcybzj.cloudflarestream.com/c4515f4f328539e1ded2cc32f4ce63e7/thumbnails/thumbnail.jpg" alt = "Music Podcast Guitar" / > < / a > < br / > < sub > < b > Music Podcast & Guitar Technique< / b > < br / > 4K 電影感錄音棚片段< / sub > < / td >
< td width = "20%" valign = "top" > < a href = "https://customer-qs6wnyfuv0gcybzj.cloudflarestream.com/4a47ba646e7cedd79363c861864b8714/downloads/default.mp4" > < img src = "https://customer-qs6wnyfuv0gcybzj.cloudflarestream.com/4a47ba646e7cedd79363c861864b8714/thumbnails/thumbnail.jpg" alt = "Emotional Face" / > < / a > < br / > < sub > < b > Emotional Face Close-up< / b > < br / > 電影感微表情研究< / sub > < / td >
< td width = "20%" valign = "top" > < a href = "https://customer-qs6wnyfuv0gcybzj.cloudflarestream.com/7e8983364a95fe333f0f88bd1085a0e8/downloads/default.mp4" > < img src = "https://customer-qs6wnyfuv0gcybzj.cloudflarestream.com/7e8983364a95fe333f0f88bd1085a0e8/thumbnails/thumbnail.jpg" alt = "Luxury Supercar" / > < / a > < br / > < sub > < b > Luxury Supercar Cinematic< / b > < br / > 敘事化產品片< / sub > < / td >
< td width = "20%" valign = "top" > < a href = "https://customer-qs6wnyfuv0gcybzj.cloudflarestream.com/0279a674ce138ab5a0a6f020a7273d89/downloads/default.mp4" > < img src = "https://customer-qs6wnyfuv0gcybzj.cloudflarestream.com/0279a674ce138ab5a0a6f020a7273d89/thumbnails/thumbnail.jpg" alt = "Forbidden City Cat" / > < / a > < br / > < sub > < b > Forbidden City Cat Satire< / b > < br / > 風格化諷刺短片< / sub > < / td >
< td width = "20%" valign = "top" > < a href = "https://github.com/YouMind-OpenLab/awesome-seedance-2-prompts/releases/download/videos/1402.mp4" > < img src = "https://customer-qs6wnyfuv0gcybzj.cloudflarestream.com/7f63ad253175a9ad1dac53de490efac8/thumbnails/thumbnail.jpg" alt = "Japanese Romance" / > < / a > < br / > < sub > < b > Japanese Romance Short Film< / b > < br / > 15s Seedance 2.0 敘事短片< / sub > < / td >
< / tr >
< / table >
點任意縮圖即可播放實際渲染出的 MP4。完整列表 → [`prompt-templates/video/` ](prompt-templates/video/ )（ （
### HyperFrames —— HTML→MP4 動態圖形（
[**`heygen-com/hyperframes`** ](https://github.com/heygen-com/hyperframes ) 是 HeyGen 開源的 agent-native 影片框架 —— 你（或 agent） ， ； `skills/hyperframes/` 這個 skill， （ < slug > `）一起教給 agent。
11 條 HyperFrames prompt 放在 [`prompt-templates/video/hyperframes-*.json` ](prompt-templates/video/ )，每一條都是產生具體某個原型的明確 brief：
< table >
< tr >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-product-reveal-minimal.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt = "Product reveal" / > < / a > < br / > < sub > < b > 5s 極簡產品揭曉< / b > · 16:9 · 推近標題卡 + shader 轉場< / sub > < / td >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-saas-product-promo-30s.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" alt = "SaaS promo" / > < / a > < br / > < sub > < b > 30s SaaS 產品片< / b > · 16:9 · Linear / ClickUp 風格帶 UI 3D 揭曉< / sub > < / td >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-tiktok-karaoke-talking-head.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" alt = "TikTok karaoke" / > < / a > < br / > < sub > < b > TikTok 卡拉 OK 口播< / b > · 9:16 · TTS + 單字對齊字幕< / sub > < / td >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-brand-sizzle-reel.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt = "Brand sizzle" / > < / a > < br / > < sub > < b > 30s 品牌 sizzle< / b > · 16:9 · 節拍同步動力學排版、audio-reactive< / sub > < / td >
< / tr >
< tr >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-data-bar-chart-race.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" alt = "Data chart" / > < / a > < br / > < sub > < b > 動畫 bar-chart race< / b > · 16:9 · NYT 風資料資訊圖< / sub > < / td >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-flight-map-route.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" alt = "Flight map" / > < / a > < br / > < sub > < b > 航線地圖（起 → 終）< / b > · 16:9 · Apple 風電影感路徑揭曉< / sub > < / td >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-logo-outro-cinematic.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt = "Logo outro" / > < / a > < br / > < sub > < b > 4s 電影感 Logo 收尾< / b > · 16:9 · 逐部件拼合 + 光暈< / sub > < / td >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-money-counter-hype.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" alt = "Money counter" / > < / a > < br / > < sub > < b > $0 → $10K 數字飆升< / b > · 9:16 · Apple 風高燃綠光閃 + 鈔票四濺< / sub > < / td >
< / tr >
< tr >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-app-showcase-three-phones.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" alt = "App showcase" / > < / a > < br / > < sub > < b > 3 手機 app 展示< / b > · 16:9 · 懸浮三屏 + 功能旁注< / sub > < / td >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-social-overlay-stack.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" alt = "Social overlay" / > < / a > < br / > < sub > < b > 社群卡疊加< / b > · 9:16 · X · Reddit · Spotify · Instagram 依序入畫< / sub > < / td >
< td width = "25%" valign = "top" > < a href = "prompt-templates/video/hyperframes-website-to-video-promo.json" > < img src = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" alt = "Website to video" / > < / a > < br / > < sub > < b > 網站到影片管線< / b > · 16:9 · 抓 3 種視口 + 轉場串聯< / sub > < / td >
< td width = "25%" valign = "top" > < / td >
< / tr >
< / table >
流程跟其它一樣：挑樣板、改 brief、送出。Agent 讀取自帶的 `skills/hyperframes/SKILL.md` （裡面帶 OD 專用的渲染流程 —— composition 原始檔落到 `.hyperframes-cache/` ， ； `npx hyperframes render` ，繞開 macOS sandbox-exec / Puppeteer 卡死；最終只有 `.mp4` 作為專案 chip 出現），寫完 composition、產出 MP4。目錄元件縮圖版權歸 HeyGen， ；
> **已經接好但還沒出 prompt 樣板的：** Kling 2.0 / 1.6 / 1.5、Veo 3 / Veo 2、Sora 2 / Sora 2-Pro（ ） （ ） （ ） （ ） ，
## 聊天迴圈之外，還交付了什麼
Chat / artifact 迴圈最顯眼，但這套倉庫裡還有幾個能力被埋得有點深，對照其它產品做選型之前值得先掃一遍：
- **Claude Design ZIP 匯入。** 把 claude.ai 匯出的 ZIP 拖到歡迎彈窗，`POST /api/import/claude-design` 把它解壓成真實 `.od/projects/<id>/` ，把入口檔案作為 tab 開啟，並預置一句「接著 Anthropic 停下的地方繼續編輯」給本地 agent。不用再讓模型重述上下文， `/api/import/claude-design` )
- **OpenAI 相容 BYOK 代理。** `POST /api/proxy/stream` 接收 `{ baseUrl, apiKey, model, messages }` ，自動歸一化路徑（`…/v1/chat/completions`），把 SSE chunk 轉發回瀏覽器；同時拒絕 loopback / link-local / RFC1918 防 SSRF。任何說 OpenAI chat schema 的 vendor 都能直接用 —— Anthropic-via-OpenAI shim、DeepSeek、Groq、MiMo、OpenRouter、自託管 vLLM 都行。MiMo 會自動加 `tool_choice: 'none'` ，因為它的 tool schema 和 free-form 生成不太合得來。
- **使用者自存 templates。** 喜歡某次渲染？`POST /api/templates` 把 HTML + 後設資料快照進 SQLite `templates` 表。下個專案的 picker 裡多一行「你的模板」 —— 跟內建 31 套同一個挑選面，但是你的。
- **Tab 持久化。** 每個專案記得自己開啟的檔案和當前 tab， `tabs` 表裡。明天再開啟，工作區還是你昨天離開時的樣子。
- **Artifact lint API。** `POST /api/artifacts/lint` 對生成的 artifact 跑結構性檢查（`< artifact > ` 框架是否破損、必需的副檔案是否缺失、palette token 是否過期），返回 agent 下一回合可以讀回去的 findings。五維自評審就是用它把分數落到證據上而不是 vibe。
- **Sidecar 協議 + 桌面版自動化。** Daemon、web、desktop 程序都帶型別化的 5 欄位 stamp（ `/tmp/open-design/ipc/<namespace>/<app>.sock` 。`tools-dev inspect desktop status \| eval \| screenshot` 就跑在這條通道上，所以 headless E2E 直接打到真實 Electron 殼，不用造定製夾具（[`packages/sidecar-proto/`](packages/sidecar-proto/)、[`apps/desktop/src/main/`](apps/desktop/src/main/)）。
- **Windows 友好的 spawn。** 任何在長 prompt 上會撞 `CreateProcess` 32 KB argv 上限的 adapter（ ） `-p` ；連 stdin 都裝不下時 daemon 退回臨時 prompt 檔案。
- **按 namespace 隔離的 runtime data。** `OD_DATA_DIR` 加 `--namespace` 給你完全隔離的 `.od/` -style 目錄樹，
## 反 AI Slop 機制
下面整套機制都是 [`huashu-design` ](https://github.com/alchaincyf/huashu-design ) 的 playbook， `apps/web/src/prompts/discovery.ts` ](apps/web/src/prompts/discovery.ts ) 是真實文案：
- **先表單。** Turn 1 必須是 `<question-form>` ，
- **品牌資產協議。** 使用者貼截圖或 URL 時， `brand-spec.md` · 複述）才能開始寫 CSS。**絕不從記憶裡猜品牌色**。
- **五維評審。** 在吐 `<artifact>` 之前， – < 3 / 5 視為退步 —— 修完再評 。 兩輪是常態 。
- **P0/P1/P2 checklist。** 每個 skill 都自帶 `references/checklist.md` ，含硬性 P0。Agent 必須 P0 全過才能 emit。
- **Slop 黑名單。** 暴力紫漸變、通用 emoji 圖示、左 border 圓角卡片、手繪 SVG 真人臉、Inter 當 *display* 字型、自編指標 —— 提示詞裡全部明令禁止。
- **誠實佔位 > 假資料。** Agent 沒真數字時寫 `—` 或一個標註的灰塊，絕不寫「快 10 倍」。
## 橫向對比
| 維度 | [Claude Design][cd]（ ） **Open Design** |
|---|---|---|---|
| License | 閉源 | MIT | **Apache-2.0** |
| 形態 | Web (claude.ai) | 桌面 (Electron) | **Web 應用 + 本地 daemon** |
| 可部署 Vercel | ❌ | ❌ | ** ✅** |
| Agent 執行時 | 內建 (Opus 4.7) | 內建 ([`pi-ai`][piai]) | **委託給使用者已裝好的 CLI** |
| Skill | 私有 | 12 套自定義 TS 模組 + `SKILL.md` | **31 套基於檔案的 [`SKILL.md`][skill]，可丟入** |
| Design system | 私有 | `DESIGN.md` （ ** `DESIGN.md` ×
| Provider 靈活度 | 僅 Anthropic | 7+（ ） **16 套 CLI adapter + OpenAI 相容 BYOK 代理** |
| 初始化問題表單 | ❌ | ❌ | ** ✅ 硬規則 turn 1** |
| 方向選擇器 | ❌ | ❌ | ** ✅ 5 套確定性方向** |
| 即時 todo 進度 + tool 流 | ❌ | ✅ | ** ✅**（ ）
| 沙盒 iframe 預覽 | ❌ | ✅ | ** ✅**（模式來自 open-codesign）
| Claude Design ZIP 匯入 | n/a | ❌ | ** ✅ `POST /api/import/claude-design` —— 接著 Anthropic 停下的地方繼續編輯** |
| 評論模式手術刀編輯 | ❌ | ✅ | 🚧 路線圖（移植自 open-codesign）
| AI 自吐 tweaks 面板 | ❌ | ✅ | 🟡 部分 —— [`tweaks` skill ](skills/tweaks/ ) 已發，專屬 chat-side 面板 UX 仍在路線圖 |
| 檔案系統級工作區 | ❌ | 部分（ ** ✅ 真 cwd、真工具、SQLite 持久化（ ）
| 五維自評審 | ❌ | ❌ | ** ✅ Emit 前必跑** |
| Artifact lint | ❌ | ❌ | ** ✅ `POST /api/artifacts/lint` —— 把 findings 喂回 agent** |
| Sidecar IPC + 無頭桌面版 | ❌ | ❌ | ** ✅ stamped 程序 + `tools-dev inspect desktop status \| eval \| screenshot` ** |
| 匯出格式 | 受限 | HTML / PDF / PPTX / ZIP / Markdown | **HTML / PDF / PPTX（ |
| PPT skill 複用 | N/A | 內建 | ** [`guizang-ppt-skill`][guizang] 直接接入（
| 計費門檻 | Pro / Max / Team | BYOK | **BYOK —— 填任意 OpenAI 相容 `baseUrl`** |
[cd]: https://x.com/claudeai/status/2045156267690213649
[ocod]: https://github.com/OpenCoworkAI/open-codesign
[piai]: https://github.com/mariozechner/pi-ai
[acd]: https://github.com/VoltAgent/awesome-claude-design
[guizang]: https://github.com/op7418/guizang-ppt-skill
[skill]: https://docs.anthropic.com/en/docs/claude-code/skills
## 支援的 Coding Agent
Daemon 啟動時從 `PATH` 自動檢測，無需配置。流式分發邏輯在 [`apps/daemon/src/agents.ts` ](apps/daemon/src/agents.ts ) 的 `AGENT_DEFS` 裡；每個 CLI 的 parser 也在同目錄。模型列表的來源要麼是探測 `<bin> --list-models` / `<bin> models` / ACP 握手，要麼走精選 fallback。
| Agent | 二進位制 | 流式格式 | argv 形態（拼裝好的 prompt 路徑） |
|---|---|---|---|
| [Claude Code ](https://docs.anthropic.com/en/docs/claude-code ) | `claude` | `claude-stream-json` （型別化事件） | `claude -p <prompt> --output-format stream-json --verbose [--include-partial-messages] [--add-dir …] --permission-mode bypassPermissions` |
| [Codex CLI ](https://github.com/openai/codex ) | `codex` | `json-event-stream` + `codex` parser | `codex exec --json --skip-git-repo-check --sandbox workspace-write -c sandbox_workspace_write.network_access=true [-C cwd] [--model …] [-c model_reasoning_effort=…]` （ ）
| Devin for Terminal | `devin` | `acp-json-rpc` | `devin --permission-mode dangerous --respect-workspace-trust false acp` |
| [Gemini CLI ](https://github.com/google-gemini/gemini-cli ) | `gemini` | `json-event-stream` + `gemini` parser | `GEMINI_CLI_TRUST_WORKSPACE=true gemini --output-format stream-json --yolo [--model …]` （ ）
| [OpenCode ](https://opencode.ai/ ) | `opencode` | `json-event-stream` + `opencode` parser | `opencode run --format json --dangerously-skip-permissions [--model …] -` （ ）
| [Cursor Agent ](https://www.cursor.com/cli ) | `cursor-agent` | `json-event-stream` + `cursor-agent` parser | `cursor-agent --print --output-format stream-json --stream-partial-output --force --trust [--workspace cwd] [--model …] -` （ ）
| [Qwen Code ](https://github.com/QwenLM/qwen-code ) | `qwen` | `plain` （原始 stdout chunk） `qwen --yolo [--model …] -` （ ）
| Qoder CLI | `qodercli` | `qoder-stream-json` （型別化事件） | `qodercli -p --output-format stream-json --permission-mode bypass_permissions [--cwd cwd] [--model …] [--add-dir …]` （ ）
| [GitHub Copilot CLI ](https://github.com/features/copilot/cli ) | `copilot` | `copilot-stream-json` （型別化事件） | `copilot -p <prompt> --allow-all-tools --output-format json [--model …] [--add-dir …]` |
| [Hermes ](https://github.com/eqlabs/hermes ) | `hermes` | `acp-json-rpc` （ ） `hermes acp --accept-hooks` |
| Kimi CLI | `kimi` | `acp-json-rpc` | `kimi acp` |
| [Pi ](https://github.com/mariozechner/pi-ai ) | `pi` | `pi-rpc` （ ） `pi --mode rpc [--model …] [--thinking …]` （ `prompt` 命令） |
| [Kiro CLI ](https://kiro.dev ) | `kiro-cli` | `acp-json-rpc` | `kiro-cli acp` |
| Kilo | `kilo` | `acp-json-rpc` | `kilo acp` |
| [Mistral Vibe CLI ](https://github.com/mistralai/mistral-vibe ) | `vibe-acp` | `acp-json-rpc` | `vibe-acp` |
| DeepSeek TUI | `deepseek` | `plain` （原始 stdout chunk） `deepseek exec --auto [--model …] <prompt>` |
| **OpenAI 相容 BYOK** | n/a | SSE 透傳 | `POST /api/proxy/stream` → `<baseUrl>/v1/chat/completions` ；拒絕 loopback / link-local / RFC1918 |
加一個新 CLI = 在 [`apps/daemon/src/agents.ts` ](apps/daemon/src/agents.ts ) 里加一項。流式格式從 `claude-stream-json` / `qoder-stream-json` / `copilot-stream-json` / `json-event-stream` （搭配每 CLI 的 `eventParser` ） `acp-json-rpc` / `pi-rpc` / `plain` 中選一個。
## 引用與師承
每一個被借鑑的開源專案都列在這裡。點連結可以驗證師承。
| 專案 | 在這裡的角色 |
|---|---|
| [`Claude Design`][cd] | 本倉庫為之提供開源替代的閉源產品。 |
| [**`alchaincyf/huashu-design`**（花叔的畫術） ](https://github.com/alchaincyf/huashu-design ) | 設計哲學的核心。Junior-Designer 工作流、5 步品牌資產協議、anti-AI-slop checklist、五維自評審、以及方向選擇器背後的「5 流派 × `apps/web/src/prompts/discovery.ts` ](apps/web/src/prompts/discovery.ts ) 與 [`apps/web/src/prompts/directions.ts` ](apps/web/src/prompts/directions.ts )。 |
| [**`op7418/guizang-ppt-skill`**（歸藏）][guizang] | Magazine-web-PPT skill 原樣納入在 [`skills/guizang-ppt/` ](skills/guizang-ppt/ ) 下，原 LICENSE 保留。Deck 模式預設。P0/P1/P2 checklist 文化也被借給了所有其他 skill。 |
| [**`multica-ai/multica`** ](https://github.com/multica-ai/multica ) | Daemon + adapter 架構。PATH 掃描式 agent 檢測、本地 daemon 作為唯一特權程序、agent-as-teammate 世界觀。我們採納模型，不 vendor 程式碼。 |
| [**`OpenCoworkAI/open-codesign`**][ocod] | 第一個開源的 Claude-Design 替代品，也是我們最接近的同類。已採納的 UX 模式：流式 artifact 迴圈、沙盒 iframe 預覽（自帶 React 18 + Babel） （ ） （ ） ：
| [`VoltAgent/awesome-claude-design`][acd] / [`awesome-design-md`][acd2] | 9 段式 `DESIGN.md` schema 的來源， `scripts/sync-design-systems.ts` ](scripts/sync-design-systems.ts ) 匯入。 |
| [`farion1231/cc-switch` ](https://github.com/farion1231/cc-switch ) | 跨多個 agent CLI 的 symlink 式 skill 分發靈感來源。 |
| [Claude Code skills][skill] | `SKILL.md` 規範原樣採納 —— 任何 Claude Code skill 丟進 `skills/` 都能被 daemon 識別。 |
詳盡的師承說明（每一項我們採納了什麼、刻意沒採納什麼）在 [`docs/references.md` ](docs/references.md )。
## Roadmap
- [x] Daemon + agent 檢測（ ）
- [x] Web 應用 + 對話 + question form + 5 套方向選擇器 + todo progress + 沙盒預覽
- [x] 31 個 skill + 72 套 design system + 5 套視覺方向 + 5 個裝置外殼
- [x] SQLite 後端的 projects · conversations · messages · tabs · templates
- [x] OpenAI 相容 BYOK 代理（`/api/proxy/stream`）含 SSRF 防禦
- [x] Claude Design ZIP 匯入（`/api/import/claude-design`）
- [x] Sidecar 協議 + Electron 桌面版 + IPC 自動化（ ）
- [x] Artifact lint API + 五維自評審 emit-前 gate
- [ ] 評論模式手術刀編輯（點元素 → 指令 → 區域性 patch）
- [ ] AI 自吐 tweaks 面板 UX —— 基礎積木（[`tweaks` skill](skills/tweaks/)）已發，整合到 chat 的面板尚未完成
- [ ] Vercel + 隧道部署食譜（ ）
- [ ] 一行 `npx od init` 腳手架帶 `DESIGN.md`
- [ ] Skill 市場（`od skills install < github-repo > `）和 `od skill add | list | remove | test` CLI 表面（在 [`docs/skills-protocol.md` ](docs/skills-protocol.md ) 裡有草案，
- [x] `apps/packaged/` 出可分發 Electron 安裝包 —— macOS（ ） （ ） open-design.ai ](https://open-design.ai/ ) 和 [GitHub releases 頁面 ](https://github.com/nexu-io/open-design/releases )
分階段交付計畫在 [`docs/roadmap.md` ](docs/roadmap.md )。
## 專案狀態
這是一個早期實現 —— 閉環（檢測 → 選 skill + design system → 對話 → 解析 `<artifact>` → 預覽 → 儲存）已經端到端跑通。提示詞堆疊和 skill 庫是價值最重的部分，目前已穩定。元件級 UI 仍在每天迭代。
## 給我們點個 Star
< p align = "center" >
< a href = "https://github.com/nexu-io/open-design" > < img src = "docs/assets/star-us.png" alt = "給 Open Design 點個 Star —— github.com/nexu-io/open-design" width = "100%" / > < / a >
< / p >
如果這套東西幫你省了半小時，給它一個 ★。Star 不付房租，
## 貢獻
歡迎 issue、PR、新 skill、新 design system。收益最高的貢獻往往就是一個資料夾、一份 Markdown， ：
- **加一個 skill** —— 往 [`skills/` ](skills/ ) 丟一個資料夾，遵循 [`SKILL.md`][skill] 規範。
- **加一套 design system** —— 往 [`design-systems/<brand>/` ](design-systems/ ) 丟一份 `DESIGN.md` ，用 9 段式 schema。
- **接入一個新的 coding-agent CLI** —— 在 [`apps/daemon/src/agents.ts` ](apps/daemon/src/agents.ts ) 里加一項。
完整流程、合併硬線、程式碼風格、我們不接收的 PR 型別 → [`CONTRIBUTING.zh-CN.md` ](CONTRIBUTING.zh-CN.md )（ ， ，
## 貢獻者牆
感謝每一位讓 Open Design 變得更好的朋友 —— 無論是寫程式碼、修文檔、提 issue、加 skill 還是加 design system，
< a href = "https://github.com/nexu-io/open-design/graphs/contributors" >
2026-06-04 01:01:03 +02:00
< img src = "https://contrib.rocks/image?repo=nexu-io/open-design&cache_bust=2026-06-03" alt = "Open Design 貢獻者" / >
2026-05-06 20:50:24 +02:00
< / a >
第一次提 PR？ `good-first-issue`/`help-wanted` ](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22%2C%22help+wanted%22 ) 標籤起步。
## 倉庫活躍度
< picture >
< img alt = "Open Design 倉庫指標" src = "docs/assets/github-metrics.svg" / >
< / picture >
上面的 SVG 由 [`.github/workflows/metrics.yml` ](.github/workflows/metrics.yml ) 藉助 [`lowlighter/metrics` ](https://github.com/lowlighter/metrics ) 每天自動重新生成。想要立刻重新整理可以去 **Actions** 選項卡手動觸發； （ `METRICS_TOKEN` 。
## Star History
< a href = "https://star-history.com/#nexu-io/open-design&Date" >
< picture >
2026-06-04 01:01:03 +02:00
< source media = "(prefers-color-scheme: dark)" srcset = "https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&theme=dark&cache_bust=2026-06-03" / >
< source media = "(prefers-color-scheme: light)" srcset = "https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-06-03" / >
< img alt = "Open Design star history" src = "https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-06-03" / >
2026-05-06 20:50:24 +02:00
< / picture >
< / a >
曲線往上走 —— 那就是我們想看到的訊號。點 ★ 推它一把。
## 致謝 / Credits
[`skills/html-ppt/` ](skills/html-ppt/ ) 主 skill 以及 [`skills/html-ppt-*/` ](skills/ ) 下的逐樣板子 skill —— 含 15 套 full-deck、36 套主題、31 個單頁 layout、27 個 CSS 動畫 + 20 個 canvas FX、鍵盤 runtime 與磁吸卡片演講者模式 —— 整合自開源專案 [`lewislulu/html-ppt-skill` ](https://github.com/lewislulu/html-ppt-skill )（ ） `skills/html-ppt/LICENSE` ](skills/html-ppt/LICENSE )，原作者歸屬 [@lewislulu ](https://github.com/lewislulu )。每張逐樣板的 Examples 卡片（`html-ppt-pitch-deck`、`html-ppt-tech-sharing`、`html-ppt-presenter-mode`、`html-ppt-xhs-post` …）都把 authoring 指南委派給主 skill —— 點 **Use this prompt** 之後，沿用上游同樣的 prompt → 輸出行為。
[`skills/guizang-ppt/` ](skills/guizang-ppt/ ) 雜誌風橫向翻頁 deck 整合自 [`op7418/guizang-ppt-skill` ](https://github.com/op7418/guizang-ppt-skill )（ ） ， @op7418 ](https://github.com/op7418 )。
## License
Apache-2.0。內建的 [`skills/guizang-ppt/` ](skills/guizang-ppt/ ) 保留它原始的 [LICENSE ](skills/guizang-ppt/LICENSE )（ ） op7418 ](https://github.com/op7418 ) 的歸屬。內建的 [`skills/html-ppt/` ](skills/html-ppt/ ) 保留它原始的 [LICENSE ](skills/html-ppt/LICENSE )（ ） lewislulu ](https://github.com/lewislulu ) 的歸屬。
