Open Design(GitHub: nexu-io/open-design)是当前 GitHub 上最炙手可热的开源 AI 设计工具之一。自 2026 年 4 月 28 日发布以来,短短三周内斩获超过 47,000 Star 和 5,400+ Fork,成为 Anthropic Claude Design 的开源替代方案。
项目采用 Apache 2.0 许可证,基于 TypeScript 构建,定位为本地优先(Local-first)、AI 原生的设计工作空间,支持生成 Web 原型、移动端原型、桌面应用原型、演示文稿(PPT)、图片和视频等多种设计产物。
一、项目概览
| 项目名称 | Open Design |
| GitHub 地址 | nexu-io/open-design |
| Star | 47,400+ |
| Fork | 5,400+ |
| 主语言 | TypeScript |
| 许可证 | Apache License 2.0 |
| 创建时间 | 2026-04-28 |
| 官方网站 | open-design.ai |
| 包管理 | pnpm workspace monorepo |
二、为什么 Open Design 值得关注
2026 年 4 月 17 日,Anthropic 推出了 Claude Design(基于 Opus 4.7),展示了 LLM 从"写文章"到"出设计物"的范式转变。但 Claude Design 存在几个核心限制:闭源、付费、仅限 Anthropic 模型、仅限云端,没有自部署选项,无法替换底层 Agent。
Open Design 正是为了解决这些痛点而生:
- 完全开源:Apache 2.0 许可证,代码完全开放
- 本地优先:所有设计在本地运行,数据不出机器
- BYOK(Bring Your Own Key):不绑定任何特定 AI 模型或厂商
- 多 Agent 兼容:支持 16 种编码 Agent CLI,包括 Claude Code、Codex、Cursor Agent、Gemini CLI、Qwen、Copilot 等
- 可部署:支持本地运行、Vercel 部署、Electron 桌面应用(macOS + Windows)
三、核心能力详解
1. 131 个可组合 Skills(技能)
Open Design 内置了 131 个设计技能,分为两大模式:
- Prototype 模式(27 个核心 + 扩展):Web 原型、SaaS 落地页、仪表盘、移动端应用、社交轮播、杂志海报、线框草图、PM 规格文档、工程运维手册、财务报告、HR 入职材料、发票、看板、团队 OKR 等
- Deck 模式(4 个):guizang-ppt(杂志风格)、simple-deck、replit-deck、weekly-update
- 媒体生成技能:图片生成(gpt-image-2)、视频生成(Seedance 2.0)、HTML 转 MP4 动态图形(HyperFrames)
- 专业设计技能:D3 数据可视化、GSAP 动画、Three.js 3D、Figma 集成、SwiftUI 设计、shadcn-ui 等
每个技能按场景分类:设计 / 营销 / 运营 / 工程 / 产品 / 财务 / HR / 销售 / 个人,方便快速定位。
2. 149 套品牌级设计系统
内置 149 套设计系统,覆盖全球顶级产品设计语言:
- 科技产品系:Apple、Linear、Stripe、Vercel、Notion、Figma、Cursor、Supabase、GitHub、Slack 等
- 车企/奢侈品牌:Tesla、Ferrari、Lamborghini、Bugatti、BMW、Nike 等
- AI 公司系:Anthropic、OpenAI、Perplexity、Mistral、Cohere、HuggingFace 等
- 设计风格系:Glassmorphism、Neumorphism、Brutalism、Editorial、Minimal、Retro 等
- 中国产品:小红书、微信、百度等
每套系统包含完整的色彩规范、字体栈和组件示例,Agent 会自动读取并严格遵循。
3. 五大视觉方向
当用户没有明确品牌需求时,Agent 会展示 5 种策展级视觉方向供选择:
- Editorial Monocle — 编辑式单色风格
- Modern Minimal — 现代极简
- Warm Soft — 温暖柔和
- Tech Utility — 科技实用
- Brutalist Experimental — 野兽派实验风
每种方向配备确定性 OKLch 色彩方案和字体栈,避免 AI "自由发挥"导致的不一致性。
4. 智能设计工作流
Open Design 的设计流程模拟资深设计师的工作方式:
- 需求收集:交互式问卷表单锁定设计需求(平台、受众、品牌、风格、规模)
- 方向选择:5 种视觉方向一键切换
- 计划生成:实时 TodoList 流式展示 Agent 的设计计划
- 项目构建:在磁盘创建真实项目文件夹,包含模板、组件库和检查清单
- 五维自评:Agent 对自己的输出进行五个维度的批评和修正
- 沙盒预览:在 iframe 沙盒中实时渲染设计产物
- 多格式导出:支持 HTML / PDF / PPTX / ZIP / Markdown 五种格式导出
5. 媒体生成能力
- 图片:通过 gpt-image-2(Azure/OpenAI)生成海报、头像、信息图、插画地图
- 视频:通过 Seedance 2.0(字节跳动)生成电影级 15 秒文字/图片转视频
- 动态图形:通过 HyperFrames(HeyGen)将 HTML 转为 MP4 动态图形(产品展示、数据图表、社交叠加、Logo 片尾)
- 93 个预设提示词:43 图片 + 39 视频 + 11 动态图形,开箱即用
四、代码结构与架构分析
Open Design 是一个 pnpm workspace monorepo,项目总计 5,776 个文件,代码结构清晰,模块化程度高。
核心目录结构
open-design/
├── apps/ # 应用层
│ ├── daemon/ # 本地守护进程(核心运行时)
│ ├── web/ # Web 前端应用(Next.js)
│ ├── desktop/ # Electron 桌面应用
│ ├── landing-page/ # 官网落地页
│ ├── packaged/ # 打包发布配置
│ └── telemetry-worker/ # 遥测服务
│
├── packages/ # 共享包层
│ ├── contracts/ # 类型契约/接口定义
│ ├── host/ # 宿主环境抽象
│ ├── platform/ # 平台公共逻辑
│ ├── plugin-runtime/ # 插件运行时
│ ├── registry-protocol/ # 插件注册协议
│ ├── sidecar/ # Sidecar 进程通信
│ └── diagnostics/ # 诊断工具
│
├── skills/ # 131 个设计技能
│ ├── frontend-dev/ # 前端开发技能
│ ├── deck-guizang-editorial/ # PPT 技能
│ ├── threejs/ # 3D 设计技能
│ ├── imagegen/ # 图片生成
│ ├── figma-*/ # Figma 集成系列
│ └── ... # 更多技能
│
├── design-systems/ # 149 套设计系统
│ ├── apple/ # Apple 设计系统
│ ├── linear-app/ # Linear 设计系统
│ ├── stripe/ # Stripe 设计系统
│ ├── vercel/ # Vercel 设计系统
│ └── ... # 更多设计系统
│
├── design-templates/ # 设计模板(90+)
│ ├── web-prototype/ # Web 原型模板
│ ├── mobile-app/ # 移动端模板
│ ├── dashboard/ # 仪表盘模板
│ ├── saas-landing/ # SaaS 落地页模板
│ └── ... # 更多模板
│
├── prompt-templates/ # 93 个媒体生成提示词
├── craft/ # 设计规范与最佳实践
├── plugins/ # 插件系统
├── templates/ # 通用 HTML 模板
├── e2e/ # E2E 测试(Playwright)
├── docs/ # 项目文档
├── tools/ # 开发工具链
└── scripts/ # 自动化脚本
语言构成
| 语言 | 占比(估算) | 用途 |
|---|---|---|
| TypeScript | ~55% | 核心逻辑、守护进程、Web 应用、桌面应用 |
| HTML | ~35% | 设计模板、设计系统定义、组件 |
| CSS | ~7% | 样式系统 |
| JavaScript | ~3% | 构建脚本、辅助工具 |
| Python | ~2% | 测试脚本、自动化工具 |
| Astro | <1% | 文档站点 |
架构设计亮点
1. Daemon + Web 双层架构
核心采用本地守护进程(Daemon)+ Web 前端的架构。Daemon 是唯一拥有特权(文件系统、网络)的进程,负责 Agent CLI 的生命周期管理、文件读写和沙盒预览。Web 层通过 API 与 Daemon 通信,实现关注点分离。
2. Agent 即队友(Agent-as-Teammate)
Open Design 不内置 AI Agent,而是将用户本地已有的编码 Agent CLI(Claude Code、Codex、Cursor Agent 等)作为"队友"接入设计流程。通过 PATH 自动检测已安装的 Agent,一键切换。
3. Skill 驱动的可组合设计
每个 Skill 是一个独立文件夹,遵循 Claude Code 的 SKILL.md 约定,通过扩展的 od: 前置元数据定义模式、平台、场景、预览类型等。Skills 可自由组合,实现模块化设计。
4. 插件系统
项目内置了插件运行时和注册协议,支持社区贡献和扩展。插件可以添加新的设计技能、设计系统和媒体生成能力。
5. BYOK 代理
对于没有 CLI Agent 的用户,Open Design 提供了 OpenAI 兼容的 API 代理,支持 Anthropic / OpenAI / Azure / Google / Ollama 等多种后端,统一 SSE 流式输出。
五、应用场景
场景一:创业公司快速出原型
创始人用一句话描述产品需求,Open Design 自动生成完整的 SaaS 落地页、移动端原型和投资路演 PPT,支持 HTML/PDF/PPTX 导出,直接用于客户演示和融资路演。
场景二:设计师的 AI 辅助工具
设计师利用 149 套设计系统和五大视觉方向快速探索不同风格方案,通过五维自评机制确保设计质量,大幅缩短探索阶段的时间成本。
场景三:产品团队的规格文档生成
产品经理使用 PM Spec、Engineering Runbook、HR Onboarding 等技能,快速生成专业的产品规格文档、技术运维手册和入职材料。
场景四:社交媒体内容批量生产
运营团队利用 93 个预设提示词模板,批量生成海报、短视频、动态图形等社交媒体内容,支持小红书、Twitter 等多平台尺寸适配。
场景五:开发者文档和仪表盘
技术团队使用 Dashboard、Docs Page、Finance Report 等模板,快速生成内部数据看板、技术文档和财务报告,告别重复的页面搭建工作。
场景六:教育和演示
讲师使用 Deck 模式中的多种 PPT 技能(guizang-ppt、simple-deck、weekly-update 等),快速生成杂志风格、科技风格或极简风格的教学课件和周报。
六、快速开始
# 克隆项目
git clone https://github.com/nexu-io/open-design.git
cd open-design
# 安装依赖
pnpm install
# 启动开发环境
pnpm tools-dev
也可以直接从 open-design.ai 下载 macOS 或 Windows 桌面应用安装包。
七、总结与评价
Open Design 在短时间内获得如此高的关注度并非偶然。它精准地击中了 AI 设计工具领域的三个核心痛点:厂商锁定、云端依赖、无法定制。通过开源 + 本地优先 + 多 Agent 兼容的策略,Open Design 为 AI 驱动设计提供了一条真正开放的道路。
推荐人群:
- 寻找 Claude Design 替代方案的设计师和产品经理
- 需要快速出原型的创业团队
- 对 AI 设计工具感兴趣的开发者和研究者
- 希望自部署设计系统的企业团队
项目当前处于 0.8.0-preview 阶段,迭代速度极快,社区活跃度很高。如果你正在寻找一款开源、灵活、功能强大的 AI 设计工具,Open Design 绝对值得尝试。
项目地址:https://github.com/nexu-io/open-design | 许可证:Apache 2.0 | 文章撰写时间:2026-05-20
