Open Design - Claude Design 的开源替代方案

19内置 Skills

71设计系统

8支持的 AI 代理

5视觉方向

5设备帧

Apache开源协议

Why Open Design

为什么存在

Anthropic 的 Claude Design（2026-04-17 发布）展示了 LLM 直接输出设计产物的可能性，但它是闭源、付费、云端锁定的。Open Design 是同样循环的开源实现——无锁定、可自托管、BYOK 全层自由。

🔓

不绑定任何代理

守护进程启动时自动扫描 PATH，检测到哪个 CLI 就用哪个——Claude Code、Codex、Gemini CLI、Cursor Agent、OpenCode、Qwen、Copilot 均支持。没有 CLI？直接 BYOK Anthropic API。

📁

Skill 即文件

每个 Skill 是一个文件夹（SKILL.md + assets/ + references/），放入 skills/ 目录重启守护进程即出现在选择器中。无需插件系统，无需编译。

🎨

设计系统是可移植的 Markdown

9 节 DESIGN.md 格式——颜色、排版、间距、布局、组件、动效、语调、品牌、反模式。切换设计系统，下一次渲染立即使用新 token。

❓

交互问卷防止 80% 的返工

Turn 1 强制弹出 question-form：界面类型、受众、语调、品牌上下文、规模。30 秒的单选题胜过 30 分钟的反复修改。

💻

守护进程让代理真实落地

守护进程以项目 artifact 文件夹为 cwd 启动 CLI，代理获得真实的 Read、Write、Bash、WebFetch 工具，操作真实文件系统，会话持久化到本地 SQLite。

🧠

Prompt Stack 即产品

发送时组合：DISCOVERY 指令 + 身份宪章 + 活跃 DESIGN.md + 活跃 SKILL.md + 项目元数据 + Skill 侧文件。每一层都是可编辑的文件。

Skills

19 个内置 Skill

覆盖原型设计、演示文稿、文档模板三大类，每个 Skill 都是一个可独立运行的文件夹，附带真实的 example.html 示例。

prototype

web-prototype

单页 HTML 落地页、营销页、Hero 页

prototype

saas-landing

Hero / 功能 / 定价 / CTA 营销布局

prototype

dashboard

管理后台 / 数据分析，侧边栏 + 数据密集布局

prototype

pricing-page

独立定价页 + 对比表格

prototype

docs-page

三栏文档布局

prototype

blog-post

编辑长文排版

prototype

mobile-app

iPhone 15 Pro / Pixel 设备帧应用界面

deck

guizang-ppt

杂志风格 Web PPT，WebGL Hero，默认 deck 模式

deck

simple-deck

极简横向滑动演示文稿

template

pm-spec

PM 规格文档，含 TOC + 决策日志

template

weekly-update

团队周报：进展 / 阻塞 / 下周计划

template

eng-runbook

故障处理 Runbook

template

kanban-board

看板快照

template

team-okrs

OKR 评分表

template

invoice

单页发票

template

finance-report

高管财务摘要

template

hr-onboarding

岗位入职计划

template

meeting-notes

会议决策日志

prototype

mobile-onboarding

多屏移动端引导流程

Design Systems

71 个品牌级设计系统

每个设计系统是一个 9 节 DESIGN.md 文件，涵盖颜色、排版、间距、组件、动效、品牌语调。切换即生效，无需改代码。

AI & LLM

claudecoheremistral-aireplicateelevenlabsollamax-airunwayml

Developer Tools

cursorvercellinear-appsupabaseposthogsentrywarpframer

Productivity

notionfigmamiroairtableraycastsuperhumancal

Fintech

stripecoinbaserevolutwisemastercard

E-Commerce & Media

shopifyairbnbspotifynikepinterest

Automotive & Other

teslaapplenvidiaspacexibmbmw

Visual Directions

5 个视觉方向

当用户没有品牌规范时，代理弹出第二个表单，提供 5 个精心策划的视觉方向——每个方向都是确定性规格（OKLch 调色板 + 字体栈），一键选择，无 AI 即兴发挥。

Editorial — Monocle / FT

印刷杂志感，墨水 + 奶油 + 暖锈色

参考：Monocle · FT Weekend · NYT Magazine

Modern Minimal — Linear / Vercel

冷静、结构化、极简强调色

参考：Linear · Vercel · Stripe

Tech Utility

信息密度高，等宽字体，终端感

参考：Bloomberg · Bauhaus 工具

Brutalist

原始感，超大字体，无阴影，强烈对比

参考：Bloomberg Businessweek · Achtung

Soft Warm

宽松、低对比度、桃色中性调

参考：Notion 营销页 · Apple Health

Quickstart

3 条命令启动

需要 Node ~24 和 pnpm 10.33.x。守护进程自动检测 PATH 中的 CLI 代理，无需额外配置。

bash

# 克隆并安装

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

cd open-design

corepack enable

pnpm install

# 启动守护进程 (:7456) + Next.js 开发服务器 (:3000)

pnpm dev:all

# 打开浏览器

open http://localhost:3000

首次加载：自动检测 PATH 中的 CLI 代理 → 加载 19 Skills + 71 设计系统 → 弹出欢迎对话框（可粘贴 Anthropic Key 作为 BYOK 备用）→ 自动创建 .od/ 运行时目录。

Architecture

系统架构

浏览器 → Next.js 16 → 本地守护进程（Express + SQLite）→ spawn CLI 代理，三层分离，守护进程是唯一的特权进程。

┌──────────────── browser ────────────────────────────────┐
│  Next.js 16 App Router  (chat · file workspace · iframe) │
└──────────────┬──────────────────────────┬────────────────┘
               │ /api/* (dev rewrite)     │ direct (BYOK)
               ▼                          ▼
   ┌─────────────────────┐     ┌──────────────────────┐
   │   Local Daemon      │     │   Anthropic SDK      │
   │  Express + SQLite   │     │  (browser fallback)  │
   │  /api/agents        │     └──────────────────────┘
   │  /api/skills        │
   │  /api/design-systems│
   │  /api/chat (SSE)    │
   └──────────┬──────────┘
              │ spawn(cli, { cwd: .od/projects/<id> })
              ▼
   ┌──────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · gemini · opencode   │
   │  qwen · copilot  ← reads SKILL.md + DESIGN.md       │
   │  writes artifacts to disk (.od/projects/<id>/)      │
   └──────────────────────────────────────────────────────┘

层	技术栈
Frontend	Next.js 16 App Router + React 18 + TypeScript
Daemon	Node 24 · Express · SSE streaming · `better-sqlite3`
Agent 传输	`child_process.spawn`，Claude Code 用 `stream-json`，其余 line-buffered
存储	文件存 `.od/projects/<id>/` + SQLite at `.od/app.sqlite`
预览	沙箱 iframe via `srcdoc` + per-skill `<artifact>` 解析器
导出	HTML · PDF · PPTX · ZIP · Markdown

Supported Agents

支持的 AI 代理

守护进程启动时自动扫描 PATH，无需配置。找到哪个就用哪个，也可多个共存。

claude

Claude Code

一等公民，stream-json 类型化事件，最高保真度

codex

Codex CLI

OpenAI 出品，line-buffered，codex exec

cursor-agent

Cursor Agent

Cursor CLI，cursor-agent -p

gemini

Gemini CLI

Google Gemini，gemini -p

opencode

OpenCode

opencode.ai，opencode run

qwen

Qwen Code

阿里 Qwen，qwen -p

copilot

GitHub Copilot CLI

stream-json 类型化事件，--allow-all-tools

API

Anthropic API · BYOK

无 CLI 时的浏览器直连备用路径

Comparison

与同类产品对比

维度	Claude Design	Open Design ✦	Open CoDesign
开源协议	闭源	Apache-2.0	MIT
部署方式	claude.ai 云端	Web + 本地守护进程	Electron 桌面
可部署到 Vercel	❌	✅	❌
代理运行时	内置 Opus 4.7	委托给用户现有 CLI	内置 pi-ai
Skills 数量	专有	19 个文件式 SKILL.md	12 个 TS 模块
设计系统	专有	71 个 DESIGN.md	v0.2 路线图
交互问卷（Turn 1）	❌	✅ 强制规则	❌
5 个视觉方向选择器	❌	✅ 确定性调色板	❌
5 维自我评审	❌	✅ 发送前强制	❌
沙箱 iframe 预览	❌	✅	✅
导出格式	有限	HTML / PDF / PPTX / ZIP / MD	HTML / PDF / PPTX / ZIP / MD
最低费用	Pro / Max / Team	BYOK	BYOK