Open Design：Claude Design 的开源替代品，两周 40k stars

> 一句话版本： Claude Design 很好用，但它闭源、付费、绑死 Anthropic。Open Design 做了同一件事 —— 你笔记本上的任意 coding agent（Claude Code/Cursor/Codex 等 16 种）变成设计引擎，输出直接渲染在沙盒 iframe 里可导 HTML/PDF/PPTX —— 而且每一层都是开源的。

来源： https://github.com/nexu-io/open-design
网站： https://open-design.ai
日期： 2026 年 4–5 月，两周 40k stars
作者： nexu.io
许可： Apache 2.0
当前版本： v0.8.0-preview（0.7 可并行安装）

背景：Claude Design 炸了，但它是闭源的

2026 年 4 月 17 日，Anthropic 发布了 Claude Design（基于 Opus 4.7）。效果令人震惊 —— LLM 不再写文案，而是直接交付设计成品（HTML artifact），渲染在沙盒 iframe 里，可导出多种格式。

但它的问题也很明显：

闭源 —— 你改不了、也看不到怎么实现的
付费 —— 绑死 Anthropic 的 Opus 4.7
纯云 —— 不能本地跑
锁生态 —— 换不了模型，换不了 agent

Open Design 就是针对这些问题做的开源替代品。

核心设计理念

Open Design 不做 agent。它认为你的笔记本上已经有最强的 coding agent（Claude Code、Cursor、Codex、Gemini CLI 等 16 种）。它只是把这些 agent 接进一个设计工作流。

pnpm tools-dev 启动本地 daemon → daemon 扫描 PATH 检测有哪些 agent → 你选一个 → 开始设计。

一眼概览

功能	说明
支持的 agent CLIs	16 种自动检测：Claude Code · Codex · Cursor · Gemini CLI · OpenCode · Qwen Code · Qoder CLI · Copilot CLI · Hermes · Kimi · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek TUI
BYOK 兜底	没有 CLI 的，OpenAI 兼容代理填 baseUrl + apiKey 直接用
内置 Design System	129 套 —— Linear、Stripe、Vercel、Airbnb、Notion、Anthropic、Apple、Cursor、Figma、小红书…
内置 Skill	31 个（27 个 prototype + 4 个 deck）
媒体生成	gpt-image-2（图片）· Seedance 2.0（视频）· HyperFrames（HTML→MP4）
视觉方向	5 套精选流派：Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist
输出格式	HTML / PDF / PPTX / ZIP / Markdown / MP4
导入	直接拖入 Claude Design 导出的 ZIP
持久化	SQLite：项目 · 会话 · 消息 · 标签 · 模板
部署	本地 pnpm tools-dev · Vercel Web 层 · Electron 桌面端

工作流程


用户输入描述 → 初始化问题表单（锁需求）
  → Agent 选择设计方向（5 档可选）
    → Daemon 创建真实项目目录（模板 + 布局库 + checklist）
      → Agent pre-flight 读取，五维自审
        → 输出 <artifact> → 沙盒 iframe 渲染
          → 导出 HTML / PDF / PPTX / ZIP / MP4

关键步骤解释：

1. 初始化表单 — 在模型动笔前先锁住：surface（什么设备）、受众、语调、品牌上下文、规模。30 秒勾选项，避免 30 分钟方向拉扯。

2. 方向选择器 — 如果用户没有品牌色板，Agent 弹出 5 档方向选项。每个方向带有确定的 OKLch 色板 + 字体栈。Agent 没有 freestyle 空间。

3. TodoWrite 实时计划 — Agent 的步骤以活卡片流入 UI，in_progress → completed 实时更新。

4. 五维自审 — 输出后 Agent 对产物做 5 维度自我批评，确保质量达标。

内置 Skills（31 个）

两种模式：

prototype（27 个） — 任何能渲染成单页 artifact 的东西：web-prototype、saas-landing、dashboard、mobile-app、gamified-app、social-carousel、magazine-poster、dating-web、sprite-animation、motion-frames、critique、tweaks、wireframe-sketch、pm-spec、eng-runbook、finance-report、hr-onboarding、invoice、kanban-board、team-okrs…
deck（4 个） — 横向滑动演示：guizang-ppt（杂志风）、simple-deck、replit-deck、weekly-update

媒体生成与 HyperFrames 集成

Open Design 集成了三套媒体生成：

媒体类型	引擎	来源
图像	gpt-image-2	Azure / OpenAI
AI 视频	Seedance 2.0	字节跳动
HTML→MP4	HyperFrames	heyGen（我们刚分析的）

Prompt gallery 有 93 条可一键复用：43 条 gpt-image-2 + 39 条 Seedance + 11 条 HyperFrames。

技术架构

Web：Next.js 16 + React 18
Agent 运行时：本地 daemon spawn CLI 子进程
存储：SQLite（.od/app.sqlite）
桌面：可选 Electron 壳（sandbox renderer + sidecar IPC）
开发入口：pnpm tools-dev（唯一入口，管理 daemon + web + desktop）
Nix flake 提供可复现开发环境
导出：HTML/PDF/PPTX/ZIP/Markdown/MP4

评分

维度	评分	说明
项目热度	★★★★★	两周 40k stars，社区极其活跃
开源纯度	★★★★★	Apache 2.0，真正的开源
Agent 集成	★★★★★	16 种 agent 自动检测 + BYOK 兜底
设计质量	★★★★★	5 档方向选择器消除 freestyle，五维自审保质量
成熟度	★★★★☆	v0.8.0-preview 迭代极快，但还在 early stage
与我们关联	★★★★★	Agent Skills + HyperFrames 集成 + open design system 概念直接相关

值得关注的细节

1. 与 HyperFrames 的直接关系 — Open Design 的 media generation 层直接集成了 HyperFrames。这两个项目我们接连分析到了，说明 agent-native 的视频渲染和 agent-native 的设计工具正在合并。

2. "不做 agent"的设计哲学 — 和大多数 AI 设计工具不同，Open Design 不打包自己的 agent，而是利用用户已经装好的 CLI。这个"委托"模式减少了维护成本，也让用户可以用自己偏好的模型和 agent。

3. 方向选择器的设计 — 5 档流派不是让模型随意发挥，而是用确定的 OKLch 色板 + 字体栈锁住方向。这个"控制自由度"的思路值得借鉴：不给完全自由，但给出有品位的选择。

4. 和 Claude Design 的关系 — 既是致敬也是竞争。README 说"it went viral — and stayed closed-source"。Open Design 复刻了 Claude Design 的核心循环，但每一层都是开放的。从 Anthropic 的角度看，这是最有力的开源反击。

5. 多语言支持 — README 翻译了 12 种语言，CONTRIBUTING 也有多语言。这在国际开源项目中不多见。

6. 迭代速度 — 231 open issues、134 open PRs，两周从 0 到 40k stars。项目处于极速增长期。

一句话总结

> Claude Design 的开源替代品，40k stars 两周 —— 让你的 Claude Code / Cursor / Codex 变成设计引擎，129 套设计系统 + 31 个 skill + HyperFrames 视频生成，全部本地优先且可 Vercel 部署。