Open Design 快速開始。

環境要求

• Node.js 24 — 透過系統套件管理器或 nodejs.org 安裝。不支援 Node 22。
• pnpm 10.33.2 — 透過 Corepack 啟用，使用 lockfile 固定版本。
• git — 任意較新的版本即可。
• 一個 Agent — Claude Code、Codex、Cursor、Gemini CLI、OpenCode 或 Qwen。

三條命令開始交付

在一個乾淨 shell 中執行：

1. clone 並安裝. clone open-design repo，並用 pnpm 安裝 workspace 依賴。需要 Node 24 與 pnpm 10.33.2。

   git clone https://github.com/nexu-io/open-design
   cd open-design
   pnpm install

2. 啟動 daemon 與 Web UI. 執行 tools-dev 啟動本地 daemon 與 Web runtime。這是唯一的本地 lifecycle 入口。

   pnpm tools-dev

3. 生成第一個 artifact. 打開 Web UI，從目錄裡選擇一個 Skill，讓你的 Agent 渲染。也可以直接用 od CLI 驅動 daemon。

   od skill run open-design-landing --output ./artifact.html

完整說明見 QUICKSTART.md。

你應該看到什麼

當 pnpm tools-dev 正常時，終端會顯示 daemon、Web runtime 與 sidecar IPC namespace 已 ready：

# tools-dev — startup
→ daemon  listening on http://127.0.0.1:17456 (namespace tools-dev/main)
→ web     listening on http://127.0.0.1:17573 (proxy → daemon)
→ sidecar /tmp/open-design/ipc/tools-dev-main/daemon.sock
→ ready in 1.4s

實際連接埠由 tools-dev 參數決定（--daemon-port、--web-port）；預設值在多次執行中保持穩定。

排障

• pnpm install 出現 EBADENGINE: Node 大版本不對，請切到 Node 24。
• Windows 上 better-sqlite3 編譯卡住: 這是 Node 24 上的預期行為，請先安裝 Visual Studio Build Tools。
• 連接埠被占用: 傳入 --daemon-port 與 --web-port，或停止之前的執行。
• Agent 沒出現: 檢查 /agents/ 以及 .od/media-config.json 中的憑據。
• 權限提示反覆出現: 執行 pnpm tools-dev check 檢查環境並輸出缺失項。

下一步

• 浏览 Skill 目录 — 选择一个工作流开始渲染。
• 选择 DESIGN.md 系统 — 让生成 artifact 继承品牌。
• 比较 Open Design — 了解它和 Claude Design、Figma Make、v0、Lovable 的差异。
• 订阅 GitHub Releases — 获取新版本。