Claude Design 开源平替，复刻71 套品牌设计Open Design 是 Claude Design 的开源

封面.png

2026 年 4 月 17 日，Anthropic 发布了 Claude Design。

它展示了当 LLM 不再写废话、开始直接交付设计成品时，会是什么样子。瞬间出圈——然后保持闭源、付费、只跑在云上、绑定 Anthropic 的模型和内部 skill。

没有 checkout，没有自托管，没有 Vercel 部署，也换不了自己的 agent。

今天介绍的 Open Design（OD），就是它的开源替代品。

GitHub：

github.com/nexu-io/ope…

同一套心智模型，没有锁定

Open Design 的核心理念很简单：同一套 loop、同一种「artifact-first」心智模型，但没有锁定。

Claude Design 让你输入一句话，AI 就开始设计。Open Design 也是——但它是开源的、本地优先的、可以部署到 Vercel 的、每一层都 BYOK（Bring Your Own Key）的。

最关键的是：它不自带 agent。

你笔记本上已经装好的 coding agent：Claude Code、Codex CLI、Cursor Agent、Gemini CLI、OpenCode就是它的设计引擎。

这意味着什么？

你可以复用现有的 Agent 会员额度，不需要为设计功能额外付费。

71 套品牌级设计系统

Open Design 内置了 71 套设计系统：

2 套手写起手模板
69 套从 awesome-design-md 导入的产品系统

包括：Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma...

这些不是简单的颜色搭配，而是完整的品牌级设计系统——色彩规范、字体栈、组件库、布局模式，全部 ready to use。

想做一个像 Linear 一样简洁的 SaaS 落地页？选一个设计系统，Agent 自动应用它的视觉语言。

19 个可组合 Skills

Open Design 不是让 Agent 自由发挥，而是用 19 个 Skills 来约束设计流程：

产品原型类：

prototype —— 通用原型
deck —— 演示文稿
mobile —— 移动应用
dashboard —— 数据仪表盘
pricing —— 定价页面
docs —— 文档站点
blog —— 博客
SaaS landing —— SaaS 落地页

文档工作类：

PM spec —— 产品需求文档
weekly update —— 周报
OKRs —— 目标管理
runbook —— 运维手册
kanban —— 看板
...等等

每个 Skill 都定义了：

初始化问题表单（锁定需求，防止 Agent 随意发挥）
视觉方向选择器
自检 checklist
五维评审标准

设计流程：不是 AI 尝试设计，而是 AI 像资深设计师一样工作

输入「帮我做一份杂志风的种子轮 pitch deck」，看看 Open Design 的工作流程：

第一步：初始化问题表单

在 Agent 挥洒第一个像素之前，问题表单先跳出来：

这是什么类型的项目？- 目标受众是谁？- 品牌调性是什么？- 规模多大？

30 秒的表单填写，胜过 30 分钟的反复修改。

第二步：视觉方向选择

如果用户没有品牌，Agent 会展示 5 套精选视觉方向：

Editorial Monocle（杂志编辑风）- Modern Minimal（现代极简）- Tech Utility（科技实用）- Brutalist（粗野主义）- Soft Warm（柔和温暖）

每套方向自带 OKLch 色板 + 字体栈，一点击就确定，Agent 不会自由发挥。

第三步：实时 Todo 计划

Agent 的设计计划以实时卡片形式流入 UI：

创建项目结构- 选择设计系统- 生成布局- 应用视觉风格- 自检评审

每个任务的状态实时更新：in_progress → completed。用户可以随时介入， mid-flight 调整方向。

第四步：Daemon 构建真实项目

本地 daemon 在磁盘上构建出一个真实的项目目录：

seed 模板
布局库
自检 checklist

Agent 强制 pre-flight 读取这些文件，不是可选的，是强制的。

第五步：五维自我评审

Agent 对自己的输出跑一轮五维评审：

视觉一致性
品牌符合度
可用性
技术可行性
内容准确性

评审通过后才生成最终 artifact。

第六步：沙盒预览

生成的 <artifact> 渲染在沙盒 iframe 里，几秒后就能看到效果。

可编辑、可下载（HTML / PDF / PPTX / ZIP / Markdown）、可部署。

技术架构：站在四个开源项目的肩膀上

Open Design 不是从零开始，它整合了四个优秀的开源项目：

alchaincyf/huashu-design —— 设计哲学指南针

Junior-Designer 工作流程
5 步品牌资产协议
反 AI-slop checklist
五维自我评审
"5 流派 × 20 设计哲学"的方向选择器

op7418/guizang-ppt-skill —— 演示文稿模式

杂志风格布局
WebGL hero 效果
P0/P1/P2 checklist

OpenCoworkAI/open-codesign —— UX 北极星

流式 artifact loop
沙盒 iframe 预览
实时 Agent 面板（todos + 工具调用 + 可中断生成）
五种格式导出

multica-ai/multica —— daemon 和运行时架构

PATH 扫描 Agent 检测
本地 daemon 作为唯一特权进程
Agent 作为队友的世界观

支持的 Agent

Open Design 支持所有主流 coding agent：Claude Code、 Codex CLI、Cursor Agent、Gemini CLI、OpenCode

安装时会自动检测 PATH 上有哪些 agent CLI，自动选择一个。

快速开始

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install
pnpm dev:all  # daemon (:7456) + Vite (:5173) 一起启动

打开 http://localhost:5173

第一次加载会：

检测 PATH 上的 agent CLI
加载 19 个 skill + 71 套设计系统
弹欢迎对话框（BYOK 路径需要贴 Anthropic key）
自动创建 ./.od/ 本地运行时目录

然后输入需求，回车，看 question form 跳出来，填，看 todo 卡片流动，看 artifact 渲染。

设备外壳支持

生成的设计可以套上真实设备外壳预览：

iPhone 15 Pro
Pixel
iPad Pro
MacBook
Browser Chrome

像素级精确，跨 skill 共享。

部署选项

本地开发：pnpm dev
Vercel：一键部署
单进程生产：npm start

适合谁用

想要 Claude Design 但不想被锁定的人 —— 开源、本地优先、BYOK，没有供应商锁定。

已经有 Claude Code/Cursor 会员的人 —— 复用现有额度，不需要额外付费。

需要品牌级设计系统的人 —— 71 套设计系统直接复刻，从 Linear 到 Airbnb。

想要控制设计流程的人 —— 19 个 skills 约束 Agent 行为，不是自由发挥。

需要本地文件系统集成的人 —— daemon 直接操作真实磁盘，不是云端沙盒。

GitHub：

github.com/nexu-io/ope…

写在最后

Open Design 的价值在于开源替代 + 本地优先 + 复用现有 Agent。

Claude Design 展示了 AI 设计的未来，但它是闭源的、付费的、锁定的。Open Design 把同样的能力开源出来，让你用已有的 Agent 就能实现。

71 套品牌设计系统、19 个可组合 skills、五维评审流程、沙盒预览——这些不是简单的功能堆砌，而是让 AI 像资深设计师一样工作的完整工作流。

如果你想要 Claude Design 的能力，但想要开源、本地、可控的方案，Open Design 值得一试。

关注

如果这篇文章对你有帮助，欢迎点赞、收藏、转发。我会持续分享优质的 AI 设计工具和开源项目，关注我，一起用 AI 打造更好的设计工作流。