Open Design：开源版 Claude Design 的全方位拆解

两周收获 40k Star，这个项目正在重新定义 AI 辅助设计的工作流。

说到这个

Open Design（GitHub: nexu-io/open-design）是个啥？
简单说，它是 Anthropic Claude Design 的开源替代品。
不是要跟 Figma 拼功能，而是想干一件事：让任何会用编码代理的人，都能靠聊天做出品牌级的设计原型。

它的核心理念叫 "Agent-native"——
不是给人类设计师用的 GUI 工具，而是给 AI 代理用的设计引擎。
你的 Claude Code、Codex、Cursor Agent、Kimi CLI 这些编码代理，一接入 Open Design，立马就能读设计规范、出视觉稿、生成可交付文件。

第一个坑：架构到底多简单？

别被复杂图吓到，它就三层：

┌─────────────────────────────────────────┐
│  Agent CLI Layer                        │
│  Claude Code / Codex / Cursor / Kimi... │
│  (16个编码代理自动检测)                   │
└──────────────┬──────────────────────────┘
               │ spawn / IPC
┌──────────────▼──────────────────────────┐
│  Open Design Daemon                     │
│  - Skill Registry (31 skills)           │
│  - Design System Catalog (72 systems)   │
│  - Media Pipeline (image/video/audio)   │
│  - SQLite Persistence                   │
└──────────────┬──────────────────────────┘
               │ render / preview
┌──────────────▼──────────────────────────┐
│  Output Layer                           │
│  HTML / PDF / PPTX / MP4 / ZIP          │
└─────────────────────────────────────────┘

重点来了：

• 本地优先：所有数据存在本地 SQLite（.od/app.sqlite），不上传云端
• BYOK：支持 Anthropic、OpenAI、Azure、Google、Ollama 等多个模型提供商
• 自动发现代理：启动时自动扫 PATH 上的 16 个编码代理，不用手动配
• Skill 即插即用：只要按格式放个 SKILL.md 文件进 skills/ 目录，就能被识别

回到正题：31 个 Skills 是怎么干活的？

这些 skill 就像乐高积木，覆盖从发现到交付全流程：

每个 skill 都是一个 SKILL.md 文件，里面有触发条件、流程、工具调用和输出格式。
社区可以像贡献 npm 包一样贡献 design skill，真香。

设计系统这块儿也卷起来了

有 72 套设计系统，藏在 design-systems/<brand>/DESIGN.md 里。
每套都按 9 段式 schema 写清楚了：

1. 品牌概述
2. 色彩系统（OKLch 色空间）
3. 字体栈
4. 间距与网格
5. 组件规范
6. 动效语言
7. 声音/语气
8. 使用示例
9. 禁忌清单

来源很丰富：

• VoltAgent/awesome-claude-design 和 awesome-design-md 的 70 套产品系统
• bergside/awesome-design-skills 的 57 套设计技能

你想让 AI 做个 Airbnb 登录页？直接说：“用 Airbnb 的设计系统”，它就知道该用什么颜色、字体、间距。

不止写代码，还能做视频！

Open Design 的野心不止于 HTML 原型。
它有个统一的媒体管道，能搞定三种内容：

还有 93 个 prompt 模板（43 图片 + 39 视频 + 11 HyperFrames）放在 prompt-templates/ 目录下，带缩略图、提示词原文、目标模型和署名，拿来就能用。

五种视觉风格，让你的 AI 不“像 AI”

为了让 AI 出来的设计更自然，内置了 5 种策展过的视觉方向：

1. Editorial Monocle：编辑排版风，大量留白，衬线体
2. Modern Minimal：现代极简，中性色，无衬线
3. Warm Soft：温暖柔和，大地色调，圆角
4. Tech Utility：技术实用，等宽字体，高对比
5. Brutalist Experimental：粗野实验，大字体，高饱和

设备框架也安排上了：iPhone 15 Pro、Pixel、iPad Pro、MacBook、浏览器窗口。
生成的原型可以直接嵌套进真实设备中预览，效果拉满。

怎么跑起来？三选一就行

Electron 桌面端还支持 sidecar IPC 自动化（截图、点击、控制台日志），适合自动化演示或 E2E 测试。

和 Claude Design 对比一下，谁赢？

一眼看出差距了吧？Open Design 更灵活、更开放、更适合开发者玩。

为什么强调“Agent-native”？

这才是最特别的地方。
它不是让人点按钮的工具，而是给 AI 代理准备的基础设施——
让它能读设计规范、执行任务、输出成果。

这意味着：

• 设计师可以用自然语言描述需求，让 AI 完成全流程
• 开发者可以在编码代理对话中直接生成 UI 原型，不用切工具
• 团队可以把自己的 DESIGN.md 和 SKILL.md 沉淀下来，变成知识库

当前进展 & 下一步计划

现在基本闭环跑通了：检测 → 选 skill + design system → 对话 → 解析 artifact → 预览 → 保存。
提示词堆叠和 skill 库是价值最大的部分，目前稳定。

Roadmap 上几个重点：

• npx od init 一键脚手架
• Skill Marketplace（od skills install <github-repo>）
• 打包版 Electron 应用（macOS / Windows）
• Vercel + Tunnel 部署方案
• 评论模式下的精准编辑（surgical edits）
• AI 调整的 tweaks 面板

最后一句总结

Open Design 正在改写工作流：
AI 代理不再是工具使用者，而是设计过程的执行者。
人类从“动手做设计”变成“描述意图 + 审核输出 + 沉淀知识”。

两周 40k Star，说明市场真的需要这个方向。
如果你已经在用 Claude Code、Codex 或 Cursor 写代码，那 Open Design 值得试试——
同一个 AI 代理，也能帮你搞定设计。

---

项目地址：https://github.com/nexu-io/open-design
官网：https://open-design.ai
关键词：Open Design、Claude Design、AI 设计、Agent-native、开源设计工具