Open Design：Claude Design 的开源替代，19 个 Skills + 71 套设计系统，让你的 AI 编码助手秒变设计师

2026 年 4 月 17 日，Anthropic 发布了 Claude Design——当 LLM 不再写散文，而是直接出设计稿。它刷屏了。但它闭源、付费、云端运行，锁定在 Anthropic 的模型和技能体系里，没有自部署选项。

Open Design（OD）就是开源替代品。 同样的循环，同样的设计优先思维，但没有任何锁定。它不自带 Agent——最强的编码 Agent 已经在你的电脑上了。它做的是把这些 Agent 接入一个技能驱动的设计工作流，支持 pnpm dev 本地运行、Vercel 部署、每层 BYOK。

它能做什么？

一句话：让你的 AI 编码助手变成一个高级设计师。

输入一句 make me a magazine-style pitch deck for our seed round，OD 会：

1. 弹出交互式问卷，锁定设计方向（表面、受众、调性、品牌、规模）
2. 从 5 个策展视觉方向中挑选一个（每个方向附带确定性调色板和字体栈）
3. 生成实时 TodoWrite 计划，流式展示到 UI
4. 构建真实的项目文件夹，包含种子模板、布局库和自检清单
5. Agent 读取模板，执行五维自评，然后输出一个 <artifact>，在沙盒 iframe 中秒级渲染

这不是"AI 试着设计点什么"，而是一个被 prompt 栈训练成高级设计师的 AI——有工作文件系统、确定性调色板库和清单文化。

核心亮点一览

效果演示

入口视图 — 选择 Skill、设计系统，输入需求描述：

第一轮发现问卷 — 在模型动笔画一个像素之前，锁定需求：

方向选择器 — 5 个策展视觉方向，一键确定调色板和字体：

实时 Todo 进度 — Agent 的计划实时流式展示：

沙盒预览 — 每个作品在干净的 iframe 中渲染，支持 HTML/PDF/ZIP 导出：

71 套设计系统库 — 每个产品系统展示其四色签名：

杂志风 PPT — 内置 guizang-ppt Skill，杂志排版、WebGL 背景：

移动端原型 — 像素级精确的 iPhone 15 Pro 框架：

六个核心理念

1. 不自带 Agent——你手上的就够了

守护进程启动时扫描 PATH 中的 claude、codex、cursor-agent、gemini、opencode、qwen。找到哪个就用哪个作为设计引擎。没找到？Anthropic API BYOK 同样能跑。

2. Skill 是文件，不是插件

遵循 Claude Code 的 SKILL.md 规范——每个 Skill 就是 SKILL.md + assets/ + references/。往 skills/ 丢一个文件夹，重启守护进程，它就出现在选择器里。

3. 设计系统是 Markdown，不是 JSON

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

4. 交互式问卷阻止 80% 的返工

OD 的 prompt 栈硬编码了一条规则：每个新设计任务的第一轮必须是问卷表单，而不是代码。30 秒的勾选胜过 30 分钟的返工。

5. 守护进程让 Agent 真正活在你的电脑上

守护进程以项目文件夹为 cwd 启动 CLI，Agent 获得 Read、Write、Bash、WebFetch——真实工具、真实文件系统。会话、对话、标签页持久化在本地 SQLite 数据库中。

6. Prompt 栈就是产品

发送时组合的不只是"system + user"，而是：

• 发现指令（第1轮表单 + 第2轮品牌分支 + TodoWrite + 5维自评）
• 身份章程（官方设计师 Prompt + 反 AI 味 + 初级设计师流程）
• 活跃 DESIGN.md（71 套系统可选）
• 活跃 SKILL.md（19 个 Skill 可选）
• 项目元数据
• Skill 侧文件（自动注入：读取模板 + 参考文档）

19 个内置 Skill

展示类 Skill

文档类 Skill

设计系统库

71 套设计系统开箱即用，涵盖 AI & LLM、开发者工具、生产力、金融科技、电商、媒体、汽车等多个领域，包括 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma 等知名品牌的设计风格。

快速开始

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install
pnpm dev:all         # 启动守护进程 (:7456) + Vite (:5173)
open http://localhost:5173

首次启动会自动检测 Agent CLI、加载 19 个 Skill 和 71 套设计系统、弹出欢迎对话框让你粘贴 Anthropic API Key。然后就可以开始设计了。

架构概览

• 前端：Vite 5 + React 18 + TypeScript
• 守护进程：Node 18+ · Express · SSE 流式 · better-sqlite3
• Agent 传输：child_process.spawn，claude-stream-json 解析器 + 行缓冲
• 存储：.od/projects/ 文件夹 + SQLite 数据库
• 预览：沙盒 iframe (srcdoc) + 每Skill artifact 解析器
• 导出：HTML / PDF / PPTX / ZIP / Markdown

与竞品对比

项目地址

GitHub：https://github.com/nexu-io/open-design

Apache-2.0 开源，欢迎 Star、PR、贡献新 Skill 和设计系统。