# 策展 · X (Twitter) 🔥🔥

> 作者：Open Design (@nexudotio) · 平台：X (Twitter) · 日期：2026-05-03

> 原始來源：https://x.com/nexudotio/status/2049354083639742792

## 中文摘要

「Open Design」推出，Claude Design 的開源替代品，12 小時內獲 1.9K+ 星標。

「Open Design」是 Anthropic「Claude Design」（2026-04-17 發布，Opus 4.7）的開源替代方案，達成 95%+ 功能對等，完全開源、本地優先，支援 13 種程式碼 Agent CLI 作為設計引擎，內建 72 個品牌級設計系統與 31 個可組合技能，一個提示即可產生 landing page、簡報、儀表板等設計產物，無需雲端付費或模型鎖定。

**推出亮點**
- 僅 12 小時即獲 1.9K+ GitHub 星標，積極維護中。
- 單一提示生成 landing pages、decks、dashboards，95%+ 與「Claude Design」對等。
- 完全開源（Apache-2.0），local-first，web-deployable，支援 BYOK（Bring Your Own Key）於每個層級。

**存在原因與核心理念**
「Claude Design」雖展現 LLM 從散文轉向設計產物的潛力，但限於閉源、付費、雲端、綁定 Anthropic 模型與技能，無自託管、無 Vercel 部署、無 Agent 替換。「Open Design」複製其核心迴圈與 artifact-first 思維，消除鎖定，利用使用者現有 laptop Agent，透過 `pnpm tools-dev` 本地運行，可部署 web 層至 Vercel，每層皆 BYOK。
- 輸入「make me a magazine-style pitch deck for our seed round」，互動問卷先確認需求，Agent 選 5 種視覺方向，TodoWrite 計劃即時串流，daemon 在磁碟上建專案資料夾（含種子模板、佈局庫、自檢清單），Agent 讀取後執行五維批判，輸出單一 `<artifact>` 於沙盒 iframe 渲染。
- 這非「AI 試圖設計」，而是經提示堆疊訓練成資深設計師，具檔案系統、確定性調色盤與清單文化，正如「Claude Design」水準，但開源可控。

**開源基石**
建基四個開源專案：
- `alchaincyf/huashu-design`：設計哲學指南，萃取 Junior-Designer 工作流、5 步品牌 asset 協議、防 AI 垃圾清單、五維自批判、「5 schools × 20 design philosophies」方向選擇器（位於 `apps/web/src/prompts/discovery.ts`）。
- `op7418/guizang-ppt-skill`：deck 模式，原封不動整合於 `skills/guizang-ppt/`，保留原授權，含雜誌式佈局、WebGL hero、P0/P1/P2 清單。
- `OpenCoworkAI/open-codesign`：UX 北極星，借用串流 artifact 迴圈、沙盒 iframe 預覽（React 18 + Babel）、即時 Agent 面板（todos + tool calls + 中斷生成）、五種匯出格式（HTML / PDF / PPTX / ZIP / Markdown）；刻意差異：對方為 Electron 桌面綁 `pi-ai`，本專案為 web app + 本地 daemon 委託現有 CLI。
- `multica-ai/multica`：daemon 與 runtime 架構，PATH 掃描 Agent 偵測、本地 daemon 為唯一特權程序、Agent-as-teammate 世界觀。

**一覽規格**
| 項目 | 細節 |
|------|------|
| **程式碼 Agent CLI (13 種)** | Claude Code、Codex CLI、Devin for Terminal、Cursor Agent、Gemini CLI、OpenCode、Qwen Code、GitHub Copilot CLI、Hermes (ACP)、Kimi CLI (ACP)、Pi (RPC)、Kiro CLI (ACP)、Mistral Vibe CLI (ACP) — PATH 自動偵測，一鍵切換。 |
| **BYOK 備援** | `/api/proxy/stream` OpenAI 相容代理，輸入 `baseUrl` + `apiKey` + `model`，支援 Anthropic-via-OpenAI、DeepSeek、Groq、MiMo、OpenRouter、自託 vLLM 等，daemon 邊緣阻擋內部 IP/SSRF。 |
| **內建設計系統** | **129 個** — 2 手作 starter + 70 產品系統（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma、小紅書等）來自 `awesome-design-md`，另加 57 設計技能至 `design-systems/`。 |
| **內建技能** | **31 個** — 27 prototype 模式（web-prototype、saas-landing、dashboard、mobile-app、gamified-app、social-carousel、magazine-poster 等）+ 4 deck 模式（guizang-ppt、simple-deck、replit-deck、weekly-update）；依 scenario 分組：design / marketing / operation / engineering / product / finance / hr / sale / personal。 |
| **媒體生成** | 圖像（gpt-image-2）、影片（Seedance 2.0）、音頻並行設計迴圈；**93 個**即用提示庫（43 gpt-image-2 + 39 Seedance + 11 HyperFrames），輸出真實 `.mp4` / `.png` 至 workspace。 |
| **視覺方向** | 5 種精選（Editorial Monocle、Modern Minimal、Warm Soft、Tech Utility、Brutalist Experimental），各配確定性 OKLch 調色盤 + 字體堆疊。 |
| **裝置框架** | iPhone 15 Pro、Pixel、iPad Pro、MacBook、Browser Chrome，像素精準，跨技能共享於 `assets/frames/`。 |
| **Agent runtime** | 本地 daemon 在專案資料夾 spawn CLI，Agent 獲真實 Read/Write/Bash/WebFetch，Windows ENAMETOOLONG 備援 stdin/prompt-file。 |
| **匯入** | 拖「Claude Design」ZIP 至歡迎對話，`POST /api/import/claude-design` 解析成真實專案，讓 Agent 續編。 |
| **持久化** | SQLite 於 `.od/app.sqlite`：projects、conversations、messages、tabs、saved templates，重開即復位。 |
| **生命週期** | 單入口 `pnpm tools-dev`（start/stop/run/status/logs/inspect/check），啟動 daemon + web (+ desktop)。 |
| **桌面** | 可選 Electron 殼，沙盒 renderer + sidecar IPC（STATUS/EVAL/SCREENSHOT/CONSOLE/CLICK/SHUTDOWN）。 |
| **部署** | 本地、`pnpm tools-dev`、Vercel web 層、Electron 封裝（進行中）。 |
| **授權** | Apache-2.0。 |

**技能細目（31 個內建）**
每個技能為 `skills/` 下資料夾，遵循 Claude Code `SKILL.md` 慣例，加 `od:` frontmatter（mode、platform、scenario 等），daemon 直讀。兩大模式：**prototype**（27 種，單頁 artifact，如雜誌 landing 至手機畫面、PM spec 文件）；**deck**（4 種，水平滑動簡報）。
- **設計與行銷表面（prototype）**：
  - `web-prototype`：桌面，design，單頁 HTML（landing、hero pages）。
  - `saas-landing`：桌面，marketing，hero/features/pricing/CTA。
  - `dashboard`：桌面，operation，管理/分析側邊欄 + 密集資料。
  - `mobile-app`：行動，design，iPhone 15 Pro/Pixel 框架 app 畫面。
  - `email-marketing`：桌面，marketing，產品發布 HTML 郵件（table-fallback）。
  - `social-carousel`：桌面，marketing，3 卡 1080×1080 社群輪播。
  - `dating-web`：桌面，personal，約會 dashboard（導航、KPI、圖表）。
  - 其他：`gamified-app`、`motion-frames`、`sprite-animation`、`wireframe-sketch`、`critique`（五維自評分）、`tweaks` 等。
- **Deck 表面**：
  - `guizang-ppt`：預設，雜誌式 web PPT，原 `op7418/guizang-ppt-skill`。
  - `simple-deck`：極簡水平滑動。
  - `replit-deck`：產品走查（Replit 風）。
  - `weekly-update`：團隊週報（進度/阻礙/下一步）。
- **辦公與營運表面**：`pm-spec`（產品規格）、`team-okrs`、`kanban-board`、`finance-report`、`hr-onboarding` 等。
新增技能僅需一資料夾，重啟 daemon 即現於選擇器。

**六大核心概念**
- **不內建 Agent，使用者現有即足**：daemon 掃描 PATH 偵測 13 CLI，一鍵切換；無 CLI 則用 BYOK proxy 轉 SSE，阻 SSRF。
- **技能即檔案，非 plugin**：`SKILL.md` + assets + references，拖入 `skills/` 即用。
- **設計系統為可攜 Markdown，非 JSON 主題**：9 節 `DESIGN.md`（顏色、排版等），切換即生效，內含 Linear/Stripe 等 129 系統。
- **互動問卷防 80% 重新導向**：首輪強制 `<question-form>` 鎖定 surface/audience/tone/brand/scale，30 秒勝 30 分鐘重來，源自 `huashu-design` Junior-Designer 模式。
- **Daemon 讓 Agent 如在 laptop**：spawn 於真實專案 cwd，具檔案工具，輸出 `.pptx`/`.zip` 等即現 workspace，SQLite 持久化。
- **提示堆疊即產品**：合成 DISCOVERY 指令 + identity + DESIGN.md + SKILL.md + metadata + side files，每層可編輯（見 `apps/web/src/prompts/`）。

**架構概述**
```
瀏覽器 (Next.js 16) → /api/* → 本地 daemon (Express + SQLite) → spawn CLI (13 Agent) 或 BYOK proxy
```
- 前端：Next.js 16 + React 18 + TypeScript，Vercel 可部署。
- Daemon：Node 24 + Express + SSE + better-sqlite3，API 涵 projects/chat/skills 等。
- Agent 傳輸：child_process.spawn，各 CLI 專屬解析器（claude-stream-json、acp-json-rpc 等）。
- 儲存：`.od/projects/<id>/` 檔案 + `.od/app.sqlite`（gitignore）。
- 預覽：沙盒 srcdoc iframe。
- 匯出：HTML/PDF/PPTX/ZIP/Markdown。
- 生命週期：`pnpm tools-dev` 單指令管理。

**快速入門**
```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web
```
需 Node ~24、pnpm 10.33.x；首載自動偵 Agent、載 31 技能 + 72 系統、建 `.od/`（SQLite + 專案）。輸入提示 → 問卷 → todo → artifact 渲染 → 儲存/下載 ZIP。

**媒體生成整合**
同 chat 介面驅動圖像/影片/音頻，輸出真實檔案：
- **gpt-image-2**（Azure/OpenAI）：海報、頭像、資訊圖，43 提示範例。
- **Seedance 2.0**（ByteDance）：15s 電影級 t2v/i2v，39 提示。
- **HyperFrames**（heygen-com/hyperframes）：HTML→MP4 動圖，11 模板（如產品揭露、資料圖表）。
**93 提示庫**於 `prompt-templates/`，含預覽、來源歸屬，一鍵載入。

**防 AI 垃圾機制**
源自 `huashu-design`：
- 首輪僅問卷，無思考/工具。
- 品牌擷取 5 步協議（定位/下載/grep hex/寫 brand-spec.md/發聲），禁記憶猜測。
- 五維批判（philosophy/hierarchy/execution/specificity/restraint），<3/5 須修。
- P0/P1/P2 清單閘門。
- 垃圾黑名單：紫漸層、通用 emoji、假統計等。
- 誠實佔位符優於假資料。

**與競爭比較**
| 軸線 | Claude Design | Open CoDesign | **Open Design** |
|------|---------------|---------------|-----------------|
| 授權 | 閉源 | MIT | **Apache-2.0** |
| Agent | 綁 Opus 4.7 | 綁 pi-ai | **13 CLI + BYOK** |
| 技能 | 專有 | 12 TS + SKILL.md | **31 檔案技能** |
| 設計系統 | 專有 | 未來 DESIGN.md | **129 DESIGN.md** |
| 問卷/方向 | ❌ | ❌ | **✅** |
| ZIP 匯入 | n/a | ❌ | **✅** |
| 檔案 workspace | ❌ | 部分 | **✅ SQLite 全持久** |
| 自批判/檢查 | ❌ | ❌ | **✅** |

**支援 Agent 清單**
13 CLI 自動 PATH 偵測，含 Claude Code (`claude -p ...`)、Copilot (`copilot -p ...`)、Gemini (`gemini - ...`) 等，各有流式解析；BYOK 代理防 SSRF。新 CLI 加 `agents.ts` 一筆即可。

**設計系統目錄（72 個）**
AI/LLM（claude、cohere 等）、開發工具（cursor、vercel）、生產力（notion、figma）、Fintech（stripe）、電商（airbnb）、媒體（spotify）、汽車（tesla）等，來自 `awesome-design-md` + `awesome-design-skills`。

**視覺方向（5 種）**
無品牌時第二問卷：Editorial Monocle（墨水+奶油）、Modern Minimal（Linear 風）、Tech Utility、Brutalist、Soft Warm，各定 OKLch + 字體，無 AI 即興。

**額外功能**
- 「Claude Design」ZIP 匯入，直續編。
- 使用者模板儲存、tab 持久。
- Artifact lint API 供自批判。
- Sidecar IPC + 桌面自動化。
- Windows 非同步 spawn 備援。

**路線圖與現況**
已完成 daemon、web、技能/系統、SQLite、BYOK、ZIP 匯入、sidecar 等；待：外科編輯、tweaks 面板、Vercel 配方、`npx od init`、技能市集、Electron 封裝。早期實作，提示與技能庫穩定，UI 日更。

**貢獻與社群**
歡迎 issues/PR、新技能（拖 `skills/`）、新系統（`DESIGN.md`）、新 CLI 適配器。高槓桿貢獻為單資料夾/Markdown。貢獻者圖表顯示活躍，星史曲線上揚，呼籲 ★ 推廣。

## 標籤

開源專案, 新產品, Agent, CLI, Open Design, Anthropic, Claude