02 · 安裝:桌面版與三行命令
兩條路:下一個打包好的桌面應用,或者從原始碼跑。前者三分鐘,後者需要你機器上有對版本的 Node。功能上沒有大差別——桌面版本身就是把同一套 daemon 和 web 介面包進了 Electron 殼。
路線一:桌面版(推薦第一次用)
去 open-design.ai/download,選對應的包:
| 平臺 | 包 | 大小 | 系統要求 |
|---|---|---|---|
| macOS · Apple Silicon | DMG | 約 367 MB | macOS 11 Big Sur 或更新 |
| macOS · Intel | DMG | 約 379 MB | macOS 11 Big Sur 或更新 |
| Windows | 安裝包(也有 portable zip) | 約 400 MB | Windows 10 / 11,x64 |
裝完直接開。它會掃你的 PATH,把已經裝好的 Agent CLI 找出來,不用配 Node,不用配 pnpm,也不用寫配置檔案。
下載頁在手機上打不開
它是桌面應用,官網在移動端會直接提示你換電腦開啟。手機上收藏一下連結就行。
路線二:從原始碼跑
適合兩種人:想改技能或者加設計系統的,以及公司電腦不讓裝未簽名應用的。
先確認環境
| 依賴 | 版本 | 說明 |
|---|---|---|
| Node.js | 24 | Node 22 不支援,這是硬要求 |
| pnpm | 10.33.2 | 通過 Corepack 啟用,跟著 lockfile 走 |
| git | 任意近期版本 | |
| 一個 Agent | Claude Code / Codex / Cursor / Gemini CLI / OpenCode / Qwen 任選 | 沒有 Agent 裝上也跑不出東西 |
bash
nvm install 24 && nvm use 24
corepack enable
node -v # 應該是 v24.x三行命令
bash
git clone https://github.com/nexu-io/open-design
cd open-design
pnpm install然後起服務。tools-dev 是唯一的生命週期入口,別繞過它自己起 node:
bash
pnpm tools-dev健康的輸出長這樣:
text
→ 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瀏覽器開啟它列印的那個 web 地址。埠預設穩定,但別在腳本里寫死——用 --daemon-port 和 --web-port 能改。
幾個日常命令
bash
pnpm tools-dev check # 體檢:環境缺什麼它會直接列出來
pnpm tools-dev status # 現在有什麼在跑
pnpm tools-dev stop # 全停
pnpm tools-dev run web # 只起 web 那一路第一次跑不通的時候,先跑 check。它比讀日誌快。
命令列直接出貨
裝好之後還有一個 od 命令,可以完全不開介面:
bash
od skill run open-design-landing --output ./artifact.html這條路適合塞進 CI,或者你本來就習慣在終端裡幹活。
裝不上的時候
| 症狀 | 原因 | 怎麼辦 |
|---|---|---|
pnpm install 報 EBADENGINE | Node 大版本不對 | 切到 Node 24 |
Windows 上 better-sqlite3 編譯卡住 | Node 24 上的已知情況 | 先裝 Visual Studio Build Tools,再重來 |
| 埠被佔 | 上一次沒停乾淨 | pnpm tools-dev stop,或者加 --daemon-port / --web-port |
| 介面裡看不到 Agent | CLI 不在 PATH 裡,或者憑據沒配 | 見 03 · 接上 Agent |
| 一直彈權限確認 | 環境沒配全 | pnpm tools-dev check 會告訴你缺哪一項 |
更長的排錯清單在 參考 / 排錯手冊。
Windows 使用者的額外一句
社群裡有相當一部分人是在 WSL 裡跑原始碼版的,尤其是原生 Windows 上 better-sqlite3 編譯不過的時候。如果你只是想用,不打算改程式碼,Windows 安裝包省事得多。
懶人路線
其實還有第三條路:把倉庫地址甩給你的 Agent,讓它按 dev 模式幫你裝。社群教程裡不少人是這麼幹的——畢竟你手上就有一個會讀文件、會跑命令的東西。
下一步
03 · 接上 Agent — 21 個介面卡怎麼挑,key 放哪,以及怎麼做到一個 key 都不暴露。