# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

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

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

## 中文摘要

Open Design 推出僅 12 小時即獲 1.9K+ 星標，開源替代 Claude Design 達 95%+ 相容性。

**nexudotio 發布 Open Design**，作為 Anthropic [Claude Design](https://x.com/claudeai/status/2045156267690213649)（2026-04-17 發布，Opus 4.7）的開源替代品，強調 local-first、web-deployable、BYOK 每一層，無 lock-in。專案自動偵測 `PATH` 上 13 種 coding-agent CLI（如 Claude Code、Codex、Devin for Terminal），由 31 個 composable Skills 與 72 個 brand-grade Design Systems 驅動，無 CLI 則 fallback 至 OpenAI-compatible BYOK proxy。一個 prompt 即可生成 landing pages、decks、dashboards，經 prompt stack 訓練成 senior designer，具 working filesystem、deterministic palette library、checklist culture，避免 AI freestyle 問題。

**核心架構與運作流程**
Open Design 採用 daemon-and-runtime architecture，基於四開源專案：
- [`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design)：提供 design-philosophy compass、Junior-Designer workflow、5-step brand-asset protocol、anti-AI-slop checklist、5-dimensional self-critique，濃縮至 `apps/web/src/prompts/discovery.ts`。
- [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill)：deck mode，直接 bundle 至 `skills/guizang-ppt/`，保留原 LICENSE，含 magazine-style layouts、WebGL hero、P0/P1/P2 checklists。
- [`OpenCoworkAI/open-codesign`](https://github.com/OpenCoworkAI/open-codesign)：UX north star，借用 streaming-artifact loop、sandboxed-iframe preview、五格式 export（HTML / PDF / PPTX / ZIP / Markdown）。
- [`multica-ai/multica`](https://github.com/multica-ai/multica)：PATH-scan agent detection、local daemon 為唯一 privileged process。

架構分層如下：
| Layer | Stack |
|-------|-------|
| Frontend | Next.js 16 App Router + React 18 + TypeScript，可部署至 Vercel |
| Daemon | Node 24 · Express · SSE streaming · `better-sqlite3`；tables: `projects` · `conversations` · `messages` · `tabs` · `templates` |
| Agent transport | `child_process.spawn`；支援 `claude-stream-json`、`copilot-stream-json`、`json-event-stream`、`acp-json-rpc`、`pi-rpc`、`plain` |
| BYOK proxy | `POST /api/proxy/stream` → OpenAI-compatible `/v1/chat/completions`，阻擋 Internal-IP/SSRF |
| Storage | `.od/app.sqlite` + `.od/projects/<id>/`（gitignored，auto-created）；可 override `OD_DATA_DIR` |
| Preview | Sandboxed iframe via `srcdoc` + per-skill `<artifact>` parser (`apps/web/src/artifacts/parser.ts`) |
| Export | HTML (inline assets) · PDF (browser print) · PPTX (agent-driven) · ZIP · Markdown |
| Lifecycle | `pnpm tools-dev start \| stop \| run \| status \| logs \| inspect \| check` |

Daemon 在 project folder spawn CLI，agent 獲真實 `Read`、`Write`、`Bash`、`WebFetch` 工具。Prompt stack 動態組合：DISCOVERY directives + identity charter + active DESIGN.md + active SKILL.md + project metadata + skill side files。

**快速啟動步驟**
```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version   # should print 10.33.2
pnpm install
pnpm tools-dev run web
# open the web URL printed by tools-dev
```
需 Node ~24 與 pnpm 10.33.x（用 `nvm install 24 && nvm use 24`）。首次載入偵測 agent CLI、載入 31 skills + 72 design systems、彈出 Anthropic key 對話框，auto-creates `./.od/`。Desktop/background 見 `QUICKSTART.md`。

**支援的 13 種 coding-agent CLI**
自動從 `PATH` 偵測，一鍵切換：
| CLI | Binary | Transport | Spawn command 示例 |
|----|--------|-----------|-------------------|
| Claude Code ([https://docs.anthropic.com/en/docs/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](https://github.com/openai/codex)) | `codex` | `json-event-stream` | `codex exec --json --skip-git-repo-check --full-auto [-C cwd] [--model …] [-c model_reasoning_effort=…] -` (stdin) |
| 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](https://github.com/google-gemini/gemini-cli)) | `gemini` | `json-event-stream` | `gemini --output-format stream-json --skip-trust --yolo [--model …] -` (stdin) |
| OpenCode ([https://opencode.ai/](https://opencode.ai/)) | `opencode` | `json-event-stream` | `opencode run --format json --dangerously-skip-permissions [--model …] -` (stdin) |
| Cursor Agent ([https://www.cursor.com/cli](https://www.cursor.com/cli)) | `cursor-agent` | `json-event-stream` | `cursor-agent --print --output-format stream-json --stream-partial-output --force --trust [--workspace cwd] [--model …] -` (stdin) |
| Qwen Code ([https://github.com/QwenLM/qwen-code](https://github.com/QwenLM/qwen-code)) | `qwen` | `plain` | `qwen --yolo [--model …] -` (stdin) |
| GitHub Copilot CLI ([https://github.com/features/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](https://github.com/eqlabs/hermes)) | `hermes` | `acp-json-rpc` | `hermes acp --accept-hooks` |
| Kimi CLI | `kimi` | `acp-json-rpc` | `kimi acp` |
| Kiro CLI ([https://kiro.dev](https://kiro.dev)) | `kiro-cli` | `acp-json-rpc` | `kiro-cli acp` |
| Mistral Vibe CLI ([https://github.com/mistralai/mistral-vibe](https://github.com/mistralai/mistral-vibe)) | `vibe-acp` | `acp-json-rpc` | `vibe-acp` |
| Pi ([https://github.com/mariozechner/pi-ai](https://github.com/mariozechner/pi-ai)) | `pi` | `pi-rpc` | `pi --mode rpc --no-session [--model …] [--thinking …]` |

新增 CLI 只需在 `apps/daemon/src/agents.ts` 加一筆。Windows 處理 `ENAMETOOLONG` 與 stdin fallback。

**31 個內建 Skills**
Skills 為檔案而非 plugin，跟隨 Claude Code `SKILL.md` convention（含 `od:` frontmatter 如 `mode`、`platform`、`scenario`），置於 `skills/` 下，重啟 daemon 即出現於 picker。分兩大模式：
- **Prototype mode (27 個)**：單頁 artifact，如 web-prototype、saas-landing、dashboard、mobile-app 等，按 scenario 分組（design / marketing / operation / engineering / product / finance / hr / sale / personal）。
  - 示例：`dating-web`（dating dashboard）、`gamified-app`（三畫面 gamified app）、`social-carousel`（三卡 1080×1080 carousel）、`motion-frames`（CSS 動畫 hero）。
- **Deck mode (4 個)**：水平滑動 presentation。
  | Skill | Default for | 產出 |
  |-------|-------------|------|
  | `guizang-ppt` | deck 預設 | Magazine-style web PPT |
  | `simple-deck` | — | Minimal deck |
  | `replit-deck` | — | Replit-style walkthrough |
  | `weekly-update` | — | 團隊週報 |

新增 skill：掉資料夾至 `skills/`，見 `docs/skills-protocol.md`。每個有 `example.html` 可直開。

**72+57 個 Design Systems**
內建 129 個（2 hand-authored + 70 product systems 來自 [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md)，57 design skills 來自 [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills)），每個為單一 `DESIGN.md`（9 節：color、typography、spacing 等）。分類如 AI & LLM（claude、cohere）、Developer Tools（cursor、vercel）、Fintech（stripe）、E-Commerce（airbnb）等。切換 system 即觸發重新 render。經 `scripts/sync-design-systems.ts` 匯入 upstream。

**視覺方向與互動流程**
無 brand 時，agent 發第二 form 供 5 種 curated directions（Editorial Monocle、Modern Minimal、Warm Soft、Tech Utility、Brutalist Experimental），一鍵產生 deterministic OKLch palette + font stack（`apps/web/src/prompts/directions.ts`）。互動流程：
1. Entry view：挑 skill/design system/brief。
2. Turn-1 discovery form：surface/audience/tone/brand context/scale（30s 鎖定，防 80% redirects）。
3. Direction picker。
4. Live TodoWrite plan 串流。
5. Sandboxed iframe 渲染 `<artifact>`，可現場編輯、export。

Device frames：iPhone 15 Pro、Pixel、iPad Pro、MacBook、Browser Chrome（`assets/frames/`）。

**媒體生成與 Prompt Gallery**
支援 Image · Video · Audio，輸出至 workspace：
| Surface | Model | Provider | 用途 |
|---------|-------|----------|------|
| Image | `gpt-image-2` | Azure / OpenAI | Posters、avatars、infographics |
| Video | `seedance-2.0` | ByteDance | 15s t2v/i2v |
| Video | `hyperframes-html` | [HeyGen](https://github.com/heygen-com/hyperframes) | HTML→MP4 motion graphics |

**93 個 prompt templates** 在 `prompt-templates/`（43 image、39 Seedance、11 HyperFrames），含 preview、source attribution。一鍵掉入 composer。示例：`prompt-templates/video/hyperframes-product-reveal-minimal.json`（5s product reveal）、`prompt-templates/video/hyperframes-tiktok-karaoke-talking-head.json`（TikTok karaoke）。

**反 AI-slop 機制**
借 [`huashu-design`](https://github.com/alchaincyf/huashu-design)：Question form first、5-step brand-spec extraction（locate → download → grep hex → `brand-spec.md` → vocalise）、5-dim critique（Philosophy · Hierarchy · Detail · Function · Innovation，<3/5 回退）、P0/P1/P2 checklist、slop blacklist（無 purple gradients、假 stats）。Artifact lint API (`POST /api/artifacts/lint`) 檢查 framing、tokens。

**進階功能**
- **Claude Design ZIP import**：拖至 welcome dialog，`POST /api/import/claude-design` 解析成 project。
- **Persistence**：SQLite 記 projects/conversations/messages/tabs/templates，重開復原。
- **Sidecar + Desktop**：Electron shell + IPC (`/tmp/open-design/ipc/<ns>/<app>.sock`)，支援 `tools-dev inspect desktop screenshot`。
- **User templates**：`POST /api/templates` 存 HTML + metadata。

**與 Claude Design 比較優勢**
| 項目 | Open Design | Claude Design |
|------|-------------|---------------|
| License | Apache-2.0 | Closed-source |
| Deploy | Vercel web + local daemon | Cloud-only |
| Agent | 13 CLI + BYOK | Locked to Anthropic |
| Skills | 31 file-based `SKILL.md` | Proprietary/12 |
| Design Systems | 129 `DESIGN.md` | Proprietary |
| Import | Claude ZIP | N/A |
| Critique | 5-dim + lint | N/A |
| Pricing | BYOK 無最低 | Paid-only |

**Roadmap 與貢獻**
已完成：daemon、web app、skills、SQLite、BYOK、ZIP import、sidecar。待辦：comment-mode edits、Vercel recipe、`npx od init`、skill marketplace（`docs/roadmap.md`）。貢獻：加 skill（掉 `skills/`）、design system（掉 `design-systems/`）、CLI adapter（改 `apps/daemon/src/agents.ts`），見 `CONTRIBUTING.md`。Credits：`guizang-ppt` 歸 [@op7418](https://github.com/op7418) (MIT)；HTML PPT 歸 [@lewislulu](https://github.com/lewislulu) (MIT)。

## 標籤

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