先填问题表单
做什么 surface · 给谁看 · 调性 · 品牌 · 规模。30 秒勾几个 radio,省下 30 分钟来回返工。
开源 · 本地优先 · 自带 Key
Open Design
开源替代 Claude Design。
靠你已经装好的 coding-agent CLI 驱动 —— Claude Code、Codex、Cursor、Gemini、OpenCode,再加另外十一款。110 个 Skill · 141 套设计系统 · 5 套视觉方向 · Apache-2.0。
Apache-2.0 · 不用注册 · 你的 CLI、你的 Key
Open Design · 实时演示
看全部 110 个 Skill 为什么要做这件事
Claude Design 出圈了。但它锁着。
Anthropic 的 Claude Design(Opus 4.7,2026 年 4 月)第一次让人看见:LLM 不再写废话,而是直接交付能落地的设计成品。它瞬间出圈 —— 然后保持闭源、付费、只跑在云上、绑定 Anthropic 的模型和 Anthropic 内部的 Skill。Open Design 就是它的开源替代。同一套 loop,同一种 artifact-first 心智模型,但没有任何锁定。
闭源 → 开源
Apache-2.0,从头到脚。
每个 Skill 是一份文件,每套设计系统是一份 Markdown,每段 prompt 是一个你能读、能改的 TypeScript 模块。
捆绑 Agent → 自带
用你已有的 CLI。
16 款 coding-agent CLI,从 PATH 自动探测。一个都没装?粘任何 OpenAI 兼容的 baseUrl + apiKey 就行。
云 → 本地
本地跑,可部署到 Vercel。
pnpm tools-dev 起本地。SQLite 落在 .od/。要不要部署到 Vercel 你自己定。数据、文件系统、决策权,全在你手上。
一段 prompt 怎么变成 artifact
四步走完。不让模型自由发挥。
OD 不让模型乱画一个像素。在动笔之前,需求先被锁死。
选视觉方向
没有品牌规范?从 5 套精选方向里挑一个 —— 每套都是确定的 OKLch 色板加字体栈。
TodoWrite 实时流
Agent 的计划以活卡片的形式流入界面。in_progress → completed 实时切换。中途想纠偏,几乎没成本。
<artifact> 渲染
沙盒 iframe 预览。可在原位编辑。可导成 HTML、PDF、PPTX、ZIP。
盒子里到底装了什么
110 个 Skill × 141 套设计系统。
每个 Skill 是一个文件夹。每套设计系统是一份九节式 Markdown。把目录扔进来,重启 daemon,选择器里就出现。换一套系统,下一次渲染就用新 token。
Skill 聚光灯 · html-ppt
一个 Skill。 36 套主题、31 种布局、47 种动画、14 套 deck 模板。
捆绑的 html-ppt Skill 把一个 deck Agent 需要的所有原料都备齐了:演示者模式、布局库、动效集、14 套可直接 fork 的模板。把目录扔进来,重启 daemon,你就有了一台浏览器内的 PPT 引擎。
锁定调性的变体
同一个引擎, 三种调性。
html-ppt-taste-brutalist 和 html-ppt-taste-editorial 作为「锁定调性」的独立包装出货 —— 同一份 Skill,调性写死,不再可变。Web 原型那边再来三种:web-prototype-taste-{brutalist,editorial,soft}。
自己的 Agent 自己带
16 款 CLI,从 PATH 自动探测。
你装了哪几款,哪几款就成为候选设计引擎。在模型选择器里一键切换。
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
一个 CLI 都没装?POST /api/proxy/stream 接收任何 OpenAI 兼容、Azure 兼容、Google 兼容的 baseUrl + apiKey + model。Anthropic-via-OpenAI 兼容层、DeepSeek、Groq、OpenRouter、Azure OpenAI、Google Vertex、你自己跑的 vLLM —— 全是同一条 loop。daemon 边界拒绝 loopback / link-local / RFC1918 防 SSRF。
六条承重的想法
我们相信这六件事。
01
我们不做 Agent。你那个就够了。
+
01
我们不做 Agent。你那个就够了。
daemon 在 PATH 上扫描 16 款已知的 coding-agent CLI。装了哪几款,哪几款就成为候选设计引擎,通过 stdio 驱动,一款 CLI 一份适配器。
02
Skill 是文件,不是插件。
+
02
Skill 是文件,不是插件。
每个 Skill 都是 SKILL.md + assets/ + references/。把目录放进 skills/,重启 daemon,选择器里就出现。捆绑的 magazine-web-ppt 原样提交,LICENSE 保留。
03
设计系统是可移植的 Markdown,不是主题 JSON。
+
03
设计系统是可移植的 Markdown,不是主题 JSON。
九节式 DESIGN.md —— 颜色、字体、间距、布局、组件、动效、文案口吻、品牌、反模式。每个 artifact 都从当前激活的系统读 token。换系统 → 下一次渲染就用新 token。
04
互动式问题表单挡掉 80% 的返工。
+
04
互动式问题表单挡掉 80% 的返工。
第一回合只允许出 <question-form>,不思考、不调工具、不闲聊。surface · 受众 · 调性 · 品牌 · 规模。猜错方向的成本是一次对话,不是一份做完的 deck。
05
daemon 让 Agent 像在你笔记本上一样工作。
+
05
daemon 让 Agent 像在你笔记本上一样工作。
daemon 把 CLI 启在你项目的 artifact 目录下。Agent 拿到的是真实的 Read、Write、Bash、WebFetch —— 真工具,真磁盘。SQLite 持久化项目、对话、消息、tab。
06
Prompt 栈本身就是产品。
+
06
Prompt 栈本身就是产品。
发现指令 + 身份宪章 + 当前 DESIGN.md + 当前 SKILL.md + 项目元信息 + Skill 侧边文件。每一层都可组合,每一层都是你能改的文件。
07
Open Design 不是孤岛。你别的 Agent 也读得到。
+
07
Open Design 不是孤岛。你别的 Agent 也读得到。
`od mcp` 把整个项目作为 stdio MCP server 暴露出来。Claude Code、Codex、Cursor、VS Code、Antigravity、Zed、Windsurf —— 任何讲 MCP 的工具,都能直接读你项目里的 artifact、文件和元信息。边界只读:文件读、搜索、元信息。不写、不外发。
Prompt 栈
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
每一层都可组合。每一层都是一份你能改的文件。
对比
Open Design 跟同类项目放一起。
闭源云产品、开源桌面同行、开源 Web 应用。我们大量借鉴 open-codesign,在 /about 里署名 —— 形态不同、prompt 栈不同,但目标是同一颗北极星。
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| 协议与价格 | |||
| 协议 | 闭源 | MIT | Apache-2.0 |
| 最低付费 | Pro / Max / Team | BYOK | BYOK —— 粘任何 OpenAI 兼容 URL |
| 形态 | |||
| 形态 | Web(claude.ai) | 桌面(Electron) | Web 应用 + 本地 daemon |
| Vercel 可部署 | — | — | 可以 |
| AI 运行时与流程 | |||
| Agent 运行时 | 捆绑(Opus 4.7) | 捆绑(pi-ai) | 你已有的 CLI |
| 模型可换性 | 只能 Anthropic | 通过 pi-ai 7+ 家 | 16 款 CLI + BYOK 代理 |
| 问题表单(第 1 回合) | — | — | 硬规则 |
| 5 套视觉方向 | — | — | 有 |
| 五维自评审 | — | — | 出图前的硬门 |
| Skill、设计系统与迁移 | |||
| Skill | 私有 | 12 个 TS 模块 | 110 个可拖入的 SKILL.md |
| 设计系统 | 私有 | DESIGN.md(v0.2) | 141 套已发 |
| Claude Design ZIP 导入 | n/a | — | 可以 —— 接着 Anthropic 停下的地方继续改 |
Claude Design 是 Anthropic 的商标。Open Design 与 Anthropic 无关联,也未获其背书。
不止聊天
图、视频、音频 —— 同一个面板。
产 <artifact> HTML 的那个对话,也驱动图、视频、音频生成。每一次渲染都落成项目工作区里的一份真实 .png 或 .mp4。prompt-templates/ 下 95 条可一键复刻的 prompt。
01
gpt-image-2
海报 · 头像 · 插画地图 · 信息图 · 杂志风社交卡 · 游戏 UI · 叙事性游戏剧照
放大 gpt-image-2
3D 石阶演化
放大 gpt-image-2
城市美食插画地图
放大 gpt-image-2
电影感电梯场景
放大 gpt-image-2
赛博朋克动漫人像
放大 gpt-image-2
棚拍魅力人像
放大 gpt-image-2
动漫格斗游戏 —— 龙牙队长 vs 风炼神
放大 gpt-image-2
三国 —— 关羽斩颜良
放大 gpt-image-2
三国 —— 吕布辕门射戟
放大 gpt-image-2
三国 —— 赵云怀抱阿斗突围
放大 gpt-image-2
古中国开放世界 MMO HUD
放大 gpt-image-2
蜡笔儿童画 → 写实重制
放大 gpt-image-2
宅舞分镜拆解 —— 16 格
放大 gpt-image-2
话题感舞蹈分镜 —— 8 镜
02
Seedance 2.0
15 秒电影感 t2v + i2v,带音频 · 叙事短片 · 产品片
Seedance 2.0
音乐播客与吉他
Seedance 2.0
情绪化面部特写
Seedance 2.0
豪车电影感
Seedance 2.0
故宫猫吐槽
Seedance 2.0
日式恋爱短片
Seedance 2.0
电影感龙的飞行
Seedance 2.0
废土工厂追逐
Seedance 2.0
赛博朋克游戏预告
Seedance 2.0
猩红地平线 · 科幻
Seedance 2.0
魔法学院分镜
Seedance 2.0
吸血鬼小巷打斗
Seedance 2.0
复古港式武侠美学
Seedance 2.0
三国 —— 关羽斩颜良
Seedance 2.0
三国 —— 吕布辕门射戟
Seedance 2.0
三国 —— 赵云怀抱阿斗突围
Seedance 2.0
3D 动画男孩拼乐高
Seedance 2.0
古代守护者营救巨龙
Seedance 2.0
古印度王国 —— FPV
Seedance 2.0
角色介绍动效
Seedance 2.0
东亚女子手部舞蹈
Seedance 2.0
海洋生物学家探秘
Seedance 2.0
街头赛车电影感
Seedance 2.0
烤面包机火箭惊吓
Seedance 2.0
复古迪士尼海盗鳄鱼
Seedance 2.0
好莱坞高定幻想
03
HyperFrames
HTML→MP4 动效图形 · 产品揭示 · 动力学排版 · 数据图表
放大 HyperFrames
Logo 收尾电影感
放大 HyperFrames
三机位 App 展示
放大 HyperFrames
TikTok 卡拉 OK
放大 HyperFrames
条形图竞速
放大 HyperFrames
航线地图
放大 HyperFrames
金额计数器爆点
放大 HyperFrames
社交浮层堆叠
放大 HyperFrames
UI 3D 揭示
快速上手
三条命令。不用注册。
Node ~24,pnpm 10.33.x。macOS、Windows、Linux 都跑得起来(Linux 用 `pnpm tools-pack linux build --to appimage` 打 AppImage)。daemon 自动建本地 .od/ 目录,放 SQLite 和各项目 artifact。没有 init 步骤。
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run web新动态 · v0.5.0
v0.4.0 之后的 四个转弯。
v0.5.0 把 artifact 这条 loop 从「一次出图就完」拉成「能一直改」—— Inspect 模式逐元素调样式,live dashboard 升格成一类正式 artifact,Design Jury 的评分细则也收紧了。v0.4.0 那个 `od mcp` 还在那儿,继续把这一切串到你笔记本上别的 coding agent 里。
逐元素调样
Inspect 模式 —— 在预览里点哪改哪。
鼠标悬停、点击元素,直接调它的 computed style —— 颜色、间距、字号 —— 不必每次绕回 Agent。Artifact 当场更新。改满意了,变化自动回写到源文件。
v0.5.0 · PR #362
正式立类
Live dashboard 从 demo 升成标配。
三个新的 dashboard skill(`live-dashboard`、`live-artifact` 下挂的 `clinic-console` 模板、`flowai-live-dashboard-template`),外加一个 Notion 风团队 dashboard 的 prompt template,把 artifact 接到真实的 Composio 连接器上。预览面板里跑的是活数据,不是冻住的 mock。
v0.5.0 · PR #778 + #795 + #801 + #799
质量门 · 第 5 阶段
Design Jury 评分细则现在走 system composer。
每位评委的评分细则装在一份 panel 级 prompt template 里,经共享的 system composer 注入。多次跑下来,评分口径稳。Phase 4 那套(持久化、转录、编排)继续生效。
v0.5.0 · PR #524
协议
od mcp —— 把 Open Design 当成 MCP server。
跑一下 `od mcp`,任何讲 MCP 的 coding agent(Claude Code、Codex、Cursor、VS Code、Antigravity、Zed、Windsurf)都能直接读你项目的文件、搜索索引和元信息。边界只读。OD 现在打开的项目,就是别的 Agent 现在看到的项目。
v0.4.0 · PR #399
Open Design 的传承
Open Design 由这些前作组合而来。
alchaincyf
设计哲学的指南针
huashu-design ↗
Junior-Designer 工作流、5 步品牌资产协议、anti-AI-slop 清单、五维自评审,以及 Open Design 方向选择器背后的「5 流派 × 20 种设计哲学」库。
op7418
Deck 模式
guizang-ppt-skill ↗
原样捆绑在 skills/guizang-ppt/ 下,LICENSE 保留。杂志风版式、WebGL hero、P0/P1/P2 清单文化,被沿用到 Open Design 其它每个 Skill。
OpenCoworkAI
最近的同行 · UX 北极星
open-codesign ↗
流式 artifact 循环、沙盒 iframe 预览、实时 Agent 面板(todo + 工具调用 + 可中断)、五种导出格式、批注模式预览。形态上刻意分流 —— open-codesign 出 Electron + pi-ai,Open Design 出 Web + 本地 daemon + 你的 CLI。
multica-ai
Daemon 架构
multica ↗
PATH 扫描式 Agent 检测,本地 daemon 作为唯一特权进程,Agent-as-teammate 的世界观。Open Design 采用了这个架构模型,但没有引入 multica 的代码。
点个 Star
如果它帮你省下了三十分钟 —— 给颗 ★。
Star 不能交房租,但它告诉下一位设计师、下一个 Agent、下一位贡献者:这个东西值得一看。
Apache-2.0
开源
110
Skill
141
设计系统
16 + BYOK
CLI
FAQ
常见问题
Open Design 是什么?
+
Open Design 是 Anthropic Claude Design 的开源替代。本地用 pnpm tools-dev 跑,Web 层可部署到 Vercel,设计引擎是你已经装好的 coding-agent CLI(Claude Code、Codex、Cursor、Gemini、OpenCode,再加十一款)。Apache-2.0。
Open Design 跟 Claude Design 有什么不一样?
+
Claude Design 闭源、付费(Pro/Max/Team)、只跑在云上、绑死在 Anthropic 的模型和 Skill 上。Open Design 开源、BYOK、本地优先,模型可以在 16 款 CLI 适配器或任何 OpenAI / Azure / Google 兼容端点之间随便换。
Open Design 能替代我团队里的 Claude Design 吗?
+
如果你需要自托管、模型自由度、自定义 Skill,可以。整条 loop(探测 Agent → 选 Skill 和设计系统 → 对话 → 解析 <artifact> → 预览 → 保存)端到端跑通。v0.4.x 又加了 Critique Theater(出图前先过五位评委的设计陪审)、Tweaks 模式(在预览里点元素 + 挂上对话)、Manual edit 模式,还有从 Composio 拉活数据的 live artifact。
用 Open Design 必须订 Claude Pro 吗?
+
不用。Open Design 用你 PATH 上现有的 coding-agent CLI,或者通过 BYOK 代理用任何 OpenAI 兼容的 API Key。你想用哪家 provider 就带哪家的 Key。
Open Design 支持哪些 coding-agent CLI?
+
默认 16 款:Claude Code、Codex CLI、Cursor Agent、Gemini CLI、OpenCode、Qwen Code、Qoder CLI、GitHub Copilot CLI、Devin for Terminal、Hermes、Kimi CLI、Kiro CLI、Kilo、Mistral Vibe、DeepSeek TUI、Pi。daemon 启动时从 PATH 自动探测。
怎么把现有的 Claude Design 项目导进 Open Design?
+
把 Claude Design 导出的 ZIP 拖到欢迎弹窗。POST /api/import/claude-design 把它解到真实的 .od/projects/<id>/ 目录,把入口文件作为 tab 打开,并预置一段「接着 Anthropic 停下的地方继续改」的 prompt 给本地 Agent。
可以把 Open Design 自己部署到 Vercel 吗?
+
可以。Web 层是 Next.js 16 + React 18 + TypeScript,直接部署到 Vercel。本地 daemon 留在你笔记本上。完全远程的 Topology B(Vercel + 隧道)还在路线图上。
怎么往 Open Design 里加自定义设计系统?
+
在 design-systems/<your-brand>/ 下放一份 DESIGN.md,遵循九节模板规范(颜色、字体、间距、布局、组件、动效、文案口吻、品牌、反模式)。重启 daemon,选择器里就出现。
Open Design 免费吗?协议是什么?
+
Apache-2.0。捆绑的 skills/guizang-ppt/ 和 skills/html-ppt/ 保留各自原本的 MIT 协议和署名。没有付费档,没有用量限制。唯一成本是你选的 LLM provider 自己收的钱。
Open Design 怎么避免那种「AI 流水产物」的味道?
+
第一回合的问题表单先把需求锁死,模型才能动笔。没有品牌规范时,5 套方向选择器给确定的色板。出图前过一遍五维自评审。每个 Skill 都附带 P0/P1/P2 清单,通过 pre-flight 侧边文件强制注入。咄咄逼人的紫色渐变、套话 emoji 图标、用 Inter 当展示字体,这些在 prompt 栈里被明令禁止。
可以不装任何 CLI 就用 Open Design 吗?
+
可以。POST /api/proxy/stream 把 SSE 流转发到任何 OpenAI / Azure / Google 兼容端点。粘 baseUrl、apiKey、model —— DeepSeek、Groq、OpenRouter、MiMo、Azure OpenAI、Google Vertex、你自己跑的 vLLM、Anthropic-via-OpenAI 兼容层,全都能跑。带 SSRF 防护,挡 loopback 和私有网段。
怎么不开聊天就先验证 BYOK 配置?
+
Settings → Execution 里加了一个 Connection test 按钮(v0.5.0,PR #507)。把 baseUrl、apiKey、model 三件套粘进去,点 Test —— Open Design 给提供商发一次最小握手,要么把响应给你看,要么把准确的错误帧贴出来。Anthropic、OpenAI 兼容、Azure、Google 都支持。Key 写错、model 名打歪、gateway 被卡的时候,就不用再开个聊天慢慢追错。
我用 Open Design 时数据会被发给 Anthropic 吗?
+
只有当你选 Anthropic 的模型时(Claude Code 或者 BYOK 代理带 Anthropic Key)才会。Open Design 自己把所有东西存在本地 SQLite(.od/app.sqlite)和每个项目的 .od/projects/ 文件里。没有任何东西上传到 Open Design 的服务器 —— 因为 Open Design 没有服务器。
我别的 coding agent 能读 Open Design 的项目吗?
+
可以。跑一下 `od mcp`,Open Design 就把自己暴露成一个 stdio MCP server。Claude Code、Codex、Cursor、VS Code、Antigravity、Zed、Windsurf —— 任何讲 MCP 的工具,都能读你项目里的文件、跑搜索、看元信息。边界只读:文件读、搜索、元信息。不写、不外发。v0.4.0 起。
Critique Theater 是什么?
+
出图前先过一轮五位评委的设计陪审 —— 可访问性、品牌契合、做工、内容、结构。从 v0.4.0 Phase 4 开始,持久化、转录、编排都端到端跑通。低于阈值,Agent 自己改一遍重打分;过线才出图。
Live artifact 是什么?都支持哪些连接器?
+
Live artifact 让预览面板里的 artifact 通过 Composio 连接器目录拉活数据 —— GitHub、Linear、Notion、Gmail 等等。捆绑的 orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion 这几个 Skill 和 social-media-dashboard,接线都已经做好了。v0.4.0 起(PR #381)。