先填問題表單
做什麼 surface · 給誰看 · 調性 · 品牌 · 規模。30 秒勾幾個 radio,省下 30 分鐘來回返工。
開源 · 本地優先 · 自備 Key
Open Design
開源替代 Claude Design。
靠你已經裝好的 coding-agent CLI 驅動 —— Claude Code、Codex、Cursor、Gemini、OpenCode,再加另外十一款。110 個 Skill · 141 套設計系統 · 5 套視覺方向 · Apache-2.0。
Apache-2.0 · 免註冊 · 你的 CLI、你的 Key
Open Design · 即時演示
看全部 110 個 Skill 為什麼要做這件事
Claude Design 紅了。但它鎖著。
Anthropic 的 Claude Design(Opus 4.7,2026 年 4 月)第一次讓人看見:LLM 不再寫廢話,而是直接交付能落地的設計成品。它瞬間爆紅 —— 然後保持閉源、付費、只跑在雲端、綁定 Anthropic 的模型和 Anthropic 內部的 Skill。Open Design 就是它的開源替代。同一套 loop,同一種 artifact-first 心智模型,但沒有任何鎖定。
閉源 → 開源
Apache-2.0,從頭到腳。
每個 Skill 是一份檔案,每套設計系統是一份 Markdown,每段 prompt 是一個你能讀、能改的 TypeScript 模組。
綁定 Agent → 自備
用你已有的 CLI。
16 款 coding-agent CLI,從 PATH 自動偵測。一個都沒裝?貼任何 OpenAI 相容的 baseUrl + apiKey 就行。
雲端 → 本地
本地跑,可部署到 Vercel。
pnpm tools-dev 起本地。SQLite 落在 .od/。要不要部署到 Vercel 你自己定。資料、檔案系統、決定權,全在你手上。
一段 prompt 怎麼變成 artifact
四步走完。不讓模型自由發揮。
OD 不讓模型亂畫一個像素。在動筆之前,需求先被鎖死。
選視覺方向
沒有品牌規範?從 5 套精選方向裡挑一個 —— 每套都是確定的 OKLch 色票加字型棧。
TodoWrite 即時流
Agent 的計畫以活卡片的形式流入介面。in_progress → completed 即時切換。中途想糾偏,幾乎沒成本。
<artifact> 渲染
沙盒 iframe 預覽。可在原位編輯。可匯出 HTML、PDF、PPTX、ZIP。
盒子裡到底裝了什麼
110 個 Skill × 141 套設計系統。
每個 Skill 是一個資料夾。每套設計系統是一份九節式 Markdown。把資料夾扔進來,重啟 daemon,選擇器裡就出現。換一套系統,下一次渲染就用新 token。
Skill 聚光燈 · html-ppt
一個 Skill。 36 套主題、31 種版面、47 種動畫、14 套 deck 範本。
捆綁的 html-ppt Skill 把一個 deck Agent 需要的所有原料都備齊了:簡報者模式、版面庫、動效集、14 套可直接 fork 的範本。把資料夾扔進來,重啟 daemon,你就有了一台瀏覽器內的 PPT 引擎。
鎖定調性的變體
同一個引擎, 三種調性。
html-ppt-taste-brutalist 和 html-ppt-taste-editorial 作為「鎖定調性」的獨立包裝出貨 —— 同一份 Skill,調性寫死,不再可變。Web 原型那邊再來三種:web-prototype-taste-{brutalist,editorial,soft}。
自己的 Agent 自己帶
16 款 CLI,從 PATH 自動偵測。
你裝了哪幾款,哪幾款就成為候選設計引擎。在模型選擇器裡一鍵切換。
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
一個 CLI 都沒裝?POST /api/proxy/stream 接收任何 OpenAI 相容、Azure 相容、Google 相容的 baseUrl + apiKey + model。Anthropic-via-OpenAI 相容層、DeepSeek、Groq、OpenRouter、Azure OpenAI、Google Vertex、你自己跑的 vLLM —— 全是同一條 loop。daemon 邊界拒絕 loopback / link-local / RFC1918 防 SSRF。
六條承重的想法
我們相信這六件事。
01
我們不做 Agent。你那個就夠了。
+
01
我們不做 Agent。你那個就夠了。
daemon 在 PATH 上掃描 16 款已知的 coding-agent CLI。裝了哪幾款,哪幾款就成為候選設計引擎,透過 stdio 驅動,一款 CLI 一份介接器。
02
Skill 是檔案,不是外掛。
+
02
Skill 是檔案,不是外掛。
每個 Skill 都是 SKILL.md + assets/ + references/。把資料夾放進 skills/,重啟 daemon,選擇器裡就出現。捆綁的 magazine-web-ppt 原樣提交,LICENSE 保留。
03
設計系統是可移植的 Markdown,不是主題 JSON。
+
03
設計系統是可移植的 Markdown,不是主題 JSON。
九節式 DESIGN.md —— 顏色、字型、間距、版面、元件、動效、文案語氣、品牌、反模式。每個 artifact 都從當前啟用的系統讀 token。換系統 → 下一次渲染就用新 token。
04
互動式問題表單擋掉 80% 的返工。
+
04
互動式問題表單擋掉 80% 的返工。
第一回合只允許出 <question-form>,不思考、不調工具、不閒聊。surface · 受眾 · 調性 · 品牌 · 規模。猜錯方向的成本是一次對話,不是一份做完的 deck。
05
daemon 讓 Agent 像在你筆電上一樣工作。
+
05
daemon 讓 Agent 像在你筆電上一樣工作。
daemon 把 CLI 起在你專案的 artifact 目錄下。Agent 拿到的是真實的 Read、Write、Bash、WebFetch —— 真工具,真磁碟。SQLite 持久化專案、對話、訊息、tab。
06
Prompt 棧本身就是產品。
+
06
Prompt 棧本身就是產品。
發現指令 + 身份憲章 + 當前 DESIGN.md + 當前 SKILL.md + 專案 metadata + Skill 側邊檔案。每一層都可組合,每一層都是你能改的檔案。
07
Open Design 不是孤島。你別的 Agent 也讀得到。
+
07
Open Design 不是孤島。你別的 Agent 也讀得到。
`od mcp` 把整個專案當成 stdio MCP server 對外暴露。Claude Code、Codex、Cursor、VS Code、Antigravity、Zed、Windsurf —— 任何講 MCP 的工具,都能直接讀你專案裡的 artifact、檔案和 metadata。邊界唯讀:檔案讀、搜尋、metadata。不寫、不外發。
Prompt 棧
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
每一層都可組合。每一層都是一份你能改的檔案。
比較
Open Design 跟同類專案放一起。
閉源雲產品、開源桌面同行、開源 Web 應用。我們大量借鑑 open-codesign,在 /about 裡署名 —— 形態不同、prompt 棧不同,但目標是同一顆北極星。
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| 授權與價格 | |||
| 授權 | 閉源 | MIT | Apache-2.0 |
| 最低付費 | Pro / Max / Team | BYOK | BYOK —— 貼任何 OpenAI 相容 URL |
| 形態 | |||
| 形態 | Web(claude.ai) | 桌面(Electron) | Web 應用 + 本地 daemon |
| Vercel 可部署 | — | — | 可以 |
| AI 執行階段與流程 | |||
| Agent 執行階段 | 綁定(Opus 4.7) | 綁定(pi-ai) | 你已有的 CLI |
| 模型可換性 | 只能 Anthropic | 透過 pi-ai 7+ 家 | 16 款 CLI + BYOK 代理 |
| 問題表單(第 1 回合) | — | — | 硬規則 |
| 5 套視覺方向 | — | — | 有 |
| 五維自評審 | — | — | 出圖前的硬門 |
| Skill、設計系統與遷移 | |||
| Skill | 私有 | 12 個 TS 模組 | 110 個可拖入的 SKILL.md |
| 設計系統 | 私有 | DESIGN.md(v0.2) | 141 套已發 |
| Claude Design ZIP 匯入 | n/a | — | 可以 —— 接著 Anthropic 停下的地方繼續改 |
Claude Design 是 Anthropic 的商標。Open Design 與 Anthropic 無關聯,也未獲其背書。
不只聊天
圖、影片、音訊 —— 同一個面板。
產 <artifact> HTML 的那個對話,也驅動圖、影片、音訊生成。每一次渲染都落成專案工作區裡的一份真實 .png 或 .mp4。prompt-templates/ 下 95 條可一鍵複刻的 prompt。
01
gpt-image-2
海報 · 頭像 · 插畫地圖 · 資訊圖 · 雜誌風社群卡 · 遊戲 UI · 敘事性遊戲劇照
放大 gpt-image-2
3D 石階演化
放大 gpt-image-2
城市美食插畫地圖
放大 gpt-image-2
電影感電梯場景
放大 gpt-image-2
賽博龐克動漫人像
放大 gpt-image-2
棚拍魅力人像
放大 gpt-image-2
動漫格鬥遊戲 —— 龍牙隊長 vs 風煉神
放大 gpt-image-2
三國 —— 關羽斬顏良
放大 gpt-image-2
三國 —— 呂布轅門射戟
放大 gpt-image-2
三國 —— 趙雲懷抱阿斗突圍
放大 gpt-image-2
古中國開放世界 MMO HUD
放大 gpt-image-2
蠟筆兒童畫 → 寫實重製
放大 gpt-image-2
宅舞分鏡拆解 —— 16 格
放大 gpt-image-2
話題感舞蹈分鏡 —— 8 鏡
02
Seedance 2.0
15 秒電影感 t2v + i2v,帶音訊 · 敘事短片 · 產品片
Seedance 2.0
音樂 Podcast 與吉他
Seedance 2.0
情緒化臉部特寫
Seedance 2.0
豪車電影感
Seedance 2.0
故宮貓吐槽
Seedance 2.0
日式戀愛短片
Seedance 2.0
電影感龍的飛行
Seedance 2.0
廢土工廠追逐
Seedance 2.0
賽博龐克遊戲預告
Seedance 2.0
猩紅地平線 · 科幻
Seedance 2.0
魔法學院分鏡
Seedance 2.0
吸血鬼小巷打鬥
Seedance 2.0
復古港式武俠美學
Seedance 2.0
三國 —— 關羽斬顏良
Seedance 2.0
三國 —— 呂布轅門射戟
Seedance 2.0
三國 —— 趙雲懷抱阿斗突圍
Seedance 2.0
3D 動畫男孩拼樂高
Seedance 2.0
古代守護者營救巨龍
Seedance 2.0
古印度王國 —— FPV
Seedance 2.0
角色介紹動效
Seedance 2.0
東亞女子手部舞蹈
Seedance 2.0
海洋生物學家探秘
Seedance 2.0
街頭賽車電影感
Seedance 2.0
烤麵包機火箭驚嚇
Seedance 2.0
復古迪士尼海盜鱷魚
Seedance 2.0
好萊塢高訂幻想
03
HyperFrames
HTML→MP4 動效圖形 · 產品揭示 · 動力學排版 · 數據圖表
放大 HyperFrames
Logo 收尾電影感
放大 HyperFrames
三機位 App 展示
放大 HyperFrames
TikTok 卡拉 OK
放大 HyperFrames
長條圖競速
放大 HyperFrames
航線地圖
放大 HyperFrames
金額計數器爆點
放大 HyperFrames
社群浮層堆疊
放大 HyperFrames
UI 3D 揭示
快速上手
三條指令。免註冊。
Node ~24,pnpm 10.33.x。macOS、Windows、Linux 都跑得起來(Linux 用 `pnpm tools-pack linux build --to appimage` 打 AppImage)。daemon 自動建本地 .od/ 目錄,放 SQLite 和各專案 artifact。沒有 init 步驟。
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run web新動態 · v0.5.0
v0.4.0 之後的 四個轉彎。
v0.5.0 把 artifact 這條 loop 從「一次出圖就完」拉成「能一直改」—— Inspect 模式逐元素調樣式,live dashboard 升格成一類正式 artifact,Design Jury 的評分細則也收緊了。v0.4.0 那個 `od mcp` 還在那兒,繼續把這一切串到你筆電上別的 coding agent 裡。
逐元素調樣
Inspect 模式 —— 在預覽裡點哪改哪。
滑鼠懸停、點擊元素,直接調它的 computed style —— 顏色、間距、字級 —— 不必每次繞回 Agent。Artifact 當場更新。改滿意了,變化自動回寫到原始檔。
v0.5.0 · PR #362
正式立類
Live dashboard 從 demo 升成標配。
三個新的 dashboard skill(`live-dashboard`、`live-artifact` 下掛的 `clinic-console` 模板、`flowai-live-dashboard-template`),外加一個 Notion 風團隊 dashboard 的 prompt template,把 artifact 接到真實的 Composio 連接器上。預覽面板裡跑的是活資料,不是凍住的 mock。
v0.5.0 · PR #778 + #795 + #801 + #799
品質門 · 第 5 階段
Design Jury 評分細則現在走 system composer。
每位評審的評分細則裝在一份 panel 級 prompt template 裡,經共享的 system composer 注入。多次跑下來,評分口徑穩。Phase 4 那套(持久化、轉錄、編排)繼續生效。
v0.5.0 · PR #524
協定
od mcp —— 把 Open Design 當成 MCP server。
跑一下 `od mcp`,任何講 MCP 的 coding agent(Claude Code、Codex、Cursor、VS Code、Antigravity、Zed、Windsurf)都能直接讀你專案的檔案、搜尋索引和 metadata。邊界唯讀。OD 現在打開的專案,就是別的 Agent 現在看到的專案。
v0.4.0 · PR #399
Open Design 的傳承
Open Design 由這些前作組合而來。
alchaincyf
設計哲學的指南針
huashu-design ↗
Junior-Designer 工作流、5 步品牌資產協定、anti-AI-slop 清單、五維自評審,以及 Open Design 方向選擇器背後的「5 流派 × 20 種設計哲學」庫。
op7418
Deck 模式
guizang-ppt-skill ↗
原樣捆綁在 skills/guizang-ppt/ 下,LICENSE 保留。雜誌風版式、WebGL hero、P0/P1/P2 清單文化,被沿用到 Open Design 其他每個 Skill。
OpenCoworkAI
最近的同行 · UX 北極星
open-codesign ↗
串流 artifact 循環、沙盒 iframe 預覽、即時 Agent 面板(todo + 工具呼叫 + 可中斷)、五種匯出格式、批註模式預覽。形態上刻意分流 —— open-codesign 出 Electron + pi-ai,Open Design 出 Web + 本地 daemon + 你的 CLI。
multica-ai
Daemon 架構
multica ↗
PATH 掃描式 Agent 偵測,本地 daemon 作為唯一特權行程,Agent-as-teammate 的世界觀。Open Design 採用了這個架構模型,但沒有引入 multica 的程式碼。
按個 Star
如果它幫你省下了三十分鐘 —— 給顆 ★。
Star 不能交房租,但它告訴下一位設計師、下一個 Agent、下一位貢獻者:這個東西值得一看。
Apache-2.0
開源
110
Skill
141
設計系統
16 + BYOK
CLI
FAQ
常見問題
Open Design 是什麼?
+
Open Design 是 Anthropic Claude Design 的開源替代。本地用 pnpm tools-dev 跑,Web 層可部署到 Vercel,設計引擎是你已經裝好的 coding-agent CLI(Claude Code、Codex、Cursor、Gemini、OpenCode,再加十一款)。Apache-2.0。
Open Design 跟 Claude Design 有什麼不一樣?
+
Claude Design 閉源、付費(Pro/Max/Team)、只跑在雲端、綁死在 Anthropic 的模型和 Skill 上。Open Design 開源、BYOK、本地優先,模型可以在 16 款 CLI 介接器或任何 OpenAI / Azure / Google 相容端點之間隨便換。
Open Design 能替代我團隊裡的 Claude Design 嗎?
+
如果你需要自架、模型自由度、自訂 Skill,可以。整條 loop(偵測 Agent → 選 Skill 和設計系統 → 對話 → 解析 <artifact> → 預覽 → 儲存)端到端跑通。v0.4.x 又加了 Critique Theater(出圖前先過五位評審的設計陪審)、Tweaks 模式(在預覽裡點元素 + 掛上對話)、Manual edit 模式,還有從 Composio 拉活資料的 live artifact。
用 Open Design 必須訂 Claude Pro 嗎?
+
不用。Open Design 用你 PATH 上現有的 coding-agent CLI,或者透過 BYOK 代理用任何 OpenAI 相容的 API Key。你想用哪家 provider 就帶哪家的 Key。
Open Design 支援哪些 coding-agent CLI?
+
預設 16 款:Claude Code、Codex CLI、Cursor Agent、Gemini CLI、OpenCode、Qwen Code、Qoder CLI、GitHub Copilot CLI、Devin for Terminal、Hermes、Kimi CLI、Kiro CLI、Kilo、Mistral Vibe、DeepSeek TUI、Pi。daemon 啟動時從 PATH 自動偵測。
怎麼把現有的 Claude Design 專案匯進 Open Design?
+
把 Claude Design 匯出的 ZIP 拖到歡迎彈窗。POST /api/import/claude-design 把它解到真實的 .od/projects/<id>/ 目錄,把入口檔案作為 tab 開啟,並預置一段「接著 Anthropic 停下的地方繼續改」的 prompt 給本地 Agent。
可以把 Open Design 自己部署到 Vercel 嗎?
+
可以。Web 層是 Next.js 16 + React 18 + TypeScript,直接部署到 Vercel。本地 daemon 留在你筆電上。完全遠端的 Topology B(Vercel + 隧道)還在路線圖上。
怎麼往 Open Design 裡加自訂設計系統?
+
在 design-systems/<your-brand>/ 下放一份 DESIGN.md,遵循九節範本規範(顏色、字型、間距、版面、元件、動效、文案語氣、品牌、反模式)。重啟 daemon,選擇器裡就出現。
Open Design 免費嗎?授權是什麼?
+
Apache-2.0。捆綁的 skills/guizang-ppt/ 和 skills/html-ppt/ 保留各自原本的 MIT 授權和署名。沒有付費檔,沒有用量限制。唯一成本是你選的 LLM provider 自己收的錢。
Open Design 怎麼避免那種「AI 流水成品」的味道?
+
第一回合的問題表單先把需求鎖死,模型才能動筆。沒有品牌規範時,5 套方向選擇器給確定的色票。出圖前過一遍五維自評審。每個 Skill 都附帶 P0/P1/P2 清單,透過 pre-flight 側邊檔案強制注入。咄咄逼人的紫色漸層、套話 emoji 圖示、用 Inter 當展示字體,這些在 prompt 棧裡被明令禁止。
可以不裝任何 CLI 就用 Open Design 嗎?
+
可以。POST /api/proxy/stream 把 SSE 串流轉到任何 OpenAI / Azure / Google 相容端點。貼 baseUrl、apiKey、model —— DeepSeek、Groq、OpenRouter、MiMo、Azure OpenAI、Google Vertex、你自己跑的 vLLM、Anthropic-via-OpenAI 相容層,全都能跑。帶 SSRF 防護,擋 loopback 和私有網段。
怎麼不開聊天就先驗證 BYOK 設定?
+
Settings → Execution 裡加了一個 Connection test 按鈕(v0.5.0,PR #507)。把 baseUrl、apiKey、model 三件套貼進去,點 Test —— Open Design 給供應商發一次最小握手,要麼把回應給你看,要麼把準確的錯誤訊息貼出來。Anthropic、OpenAI 相容、Azure、Google 都支援。Key 寫錯、model 名打歪、gateway 被卡的時候,就不用再開個聊天慢慢追錯。
我用 Open Design 時資料會被發給 Anthropic 嗎?
+
只有當你選 Anthropic 的模型時(Claude Code 或者 BYOK 代理帶 Anthropic Key)才會。Open Design 自己把所有東西存在本地 SQLite(.od/app.sqlite)和每個專案的 .od/projects/ 檔案裡。沒有任何東西上傳到 Open Design 的伺服器 —— 因為 Open Design 沒有伺服器。
我別的 coding agent 能讀 Open Design 的專案嗎?
+
可以。跑一下 `od mcp`,Open Design 就把自己暴露成一個 stdio MCP server。Claude Code、Codex、Cursor、VS Code、Antigravity、Zed、Windsurf —— 任何講 MCP 的工具,都能讀你專案裡的檔案、跑搜尋、看 metadata。邊界唯讀:檔案讀、搜尋、metadata。不寫、不外發。v0.4.0 起。
Critique Theater 是什麼?
+
出圖前先過一輪五位評審的設計陪審 —— 可及性、品牌契合、做工、內容、結構。從 v0.4.0 Phase 4 開始,持久化、轉錄、編排都端到端跑通。低於門檻,Agent 自己改一遍重打分;過線才出圖。
Live artifact 是什麼?都支援哪些連接器?
+
Live artifact 讓預覽面板裡的 artifact 透過 Composio 連接器目錄拉活資料 —— GitHub、Linear、Notion、Gmail 等等。捆綁的 orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion 這幾個 Skill 和 social-media-dashboard,接線都已經做好了。v0.4.0 起(PR #381)。