Open Design 是 2026 年 4 月 28 日开源的 DeepSeek Harness (DSH) 设计插件 —— “Best Open Source Claude Design Alternative”。3 个月内斩获 87K stars（仅次于 DSH / OpenCode / Claude Code 在 Vibe Coding 赛道），Apache-2.0 ✅ 零商用风险。 核心创新 ——“ 你的 Coding Agent 变成 Design Engine”：本地优先桌面应用 + 支持 20+ AI CLI（Claude Code / Codex / Cursor / DSH / OpenCode 等）+ 真实文件导出（HTML / PDF / PPTX / MP4）—— 让 Vibe Coding 工具直接产出 prototype / landing page / dashboard / slide / image / video。本文带你深入 Open Design 的核心能力、BYOK 架构、跟 Claude Design 的对比，以及它跟飞熊已调研的 Vibe Coding 横评 (346) 5 工具的协同关系。
写在前面
Claude Design 是 Anthropic 推出的 AI 设计工具——把 Coding Agent 变成 Design Engine。
但 Claude Design 是闭源 SaaS——只能用 Anthropic 的账号、模型和工作流。国内用户 + 隐私敏感 + 多模型用户 用不了。
Open Design 是开源替代品——
DSH 设计插件 + Claude Code / Codex / Cursor / DSH / OpenCode 等 20+ CLI 通过 BYOK 调用 + 本地优先桌面应用 + 真实文件导出
这是飞熊 Vibe Coding 横评 (346) 之后 第一个杀手锏插件调研——DSH 生态的 ”killer plugin”。
一、它解决什么问题
一句话 ：Open Design 把你的 Coding Agent（Claude Code / Codex / Cursor / DSH / OpenCode 等 20+ CLI） 变成 Design Engine——通过 BYOK 直接调用 ，产出 prototype / landing page / dashboard / slide / image / video，全部是 真实文件（HTML / PDF / PPTX / MP4）。
| 场景 | 例子 | Open Design 表现 |
|---|---|---|
| AI 编程工具的 UI 输出 | Claude Code 写代码 + Open Design 出 prototype | ✅ 20+ CLI 集成 |
| Claude Design 替代品 | Claude Design 闭源 SaaS | ✅ Apache-2.0 开源 |
| 本地设计工具 | Figma 替代品 | ✅ Local-first 桌面应用 |
| 多模型 BYOK | 用 Claude / GPT / DeepSeek 设计 | ✅ BYOK 架构 |
| 真实文件导出 | HTML / PDF / PPTX / MP4 | ✅ 6+ 格式 |
基本信息：
| 维度 | 数据 |
|---|---|
| GitHub | nexu-io/open-design |
| Stars | 87,434 ⭐（Vibe Coding 赛道 第四高） |
| Forks | 10,147（极高） |
| Open Issues | 800（健康） |
| License | Apache-2.0 ✅（无任何商用风险） |
| 首次 commit | 2026-04-28（3.5 个月） |
| 最近 commit | 2026-08-16（今天还在推代码） |
| 仓库大小 | 1.8 GB（含桌面应用 + 模板） |
| 主语言 | TypeScript（+ 桌面应用 native） |
| 自我定位 | “Best Open Source Claude Design Alternative” |
| 官网 | open-design.ai |
| 跟 DSH 关系 | DSH 设计插件（dsh-plugin） |
二、核心能力全景：5 大杀手锏
1. Coding Agent → Design Engine ⭐ 核心创新
最大创新——Open Design 不是单独的 AI 设计工具，而是 DSH 设计插件，把任何 Coding Agent 变成 Design Engine：
Claude Code (vibe coding)
↓
+ Open Design (design engine)
↓
Claude Code 设计能力：✅ 写代码（原本就有）✅ 出 prototype（Open Design 加的）✅ 出 landing page（Open Design 加的）✅ 出 dashboard（Open Design 加的）✅ 出 slides（Open Design 加的）✅ 出 image / video（Open Design 加的）从 ” 写代码 ” 升级到 ” 做产品 ”——Claude Code 不再只是程序员工具，而是 产品经理 + 设计师 + 程序员 三合一。
2. 20+ CLI 集成 ⭐ 兼容性极强
不是 DSH 专属——Open Design 集成 20+ AI CLI：
| CLI | 来源 | 集成方式 |
|---|---|---|
| Claude Code | Anthropic | BYOK API |
| Codex | OpenAI | BYOK API |
| Cursor | Cursor Inc. | BYOK API |
| DSH | DeepSeek | DSH Plugin 协议 |
| OpenCode | 社区 | BYOK API |
| Pi / Aider / Continue / Cline / etc. | — | BYOK API |
意味着 ：不管你的 Vibe Coding 工具是哪个， 都能用 Open Design 加设计能力。
3. 真实文件导出 ⭐ 解决 AI 设计最大痛点
| 格式 | 用途 |
|---|---|
| HTML | Prototype / Landing Page |
| 报告 / 设计文档 | |
| PPTX | 演示文稿 |
| MP4 | 视频 / 动画 |
| PNG / SVG | 海报 / 图标 / Logo |
| JSON | 设计系统 / Token |
对比 Claude Design / Midjourney 等 AI 设计工具只输出 ” 图片 ”——Open Design 输出真实文件，可直接用于生产。
4. Local-First 桌面应用 ⭐ 隐私友好
- ✅ 桌面 GUI 应用（Electron / Tauri 类）
- ✅ 本地处理——设计任务在本地跑，不上传云端
- ✅ BYOK（Bring Your Own Key）——用自己的 API Key
- ✅ 多模型支持——Claude / GPT / DeepSeek / Gemini / 本地 Ollama
国内用户 + 隐私敏感 + 多模型用户 的首选。
5. 设计系统 + Figma 替代 ⭐ 设计资产完整
- ✅ Design Systems（设计系统 / 主题 / Token）
- ✅ Figma 替代品（不再需要 Figma）
- ✅ Prototype / Landing Page / Dashboard / Slide 全覆盖
三、差异化能力（4 个核心）
1. DSH 生态 Killer Plugin ⭐⭐⭐⭐
最关键的差异化——Open Design 是 DSH 插件：
- ✅ 深度集成 DSH 协议（340 篇 DSH 调研 已讲过 Cordis 插件架构）
- ✅ DSH 用户一键启用——安装 Open Design 插件即可
- ✅ DSH 生态反哺——为 DSH 带来设计能力
意义：DSH 不只是 ”AI 编程框架 ”——加上 Open Design，DSH 变成 ”AI 编程 + 设计 + 产品 ” 全栈。
2. Claude Design 完美替代 ⭐⭐⭐
| 维度 | Claude Design | Open Design |
|---|---|---|
| License | 闭源 | Apache-2.0 ✅ |
| 价格 | Claude Pro 订阅 | 免费（BYOK） |
| 模型 | Claude 限定 | 20+ CLI 通用 |
| 部署 | 云端 SaaS | Local-first 桌面 |
| 数据隐私 | 上传 Anthropic | 本地处理 |
| 文件导出 | 有限 | HTML/PDF/PPTX/MP4 真实文件 |
| 国内可用 | ⚠️ 难 | ✅ 可用 |
Open Design = Claude Design 的开源 + 增强版。
3. Coding Agent 通用（不只是 DSH）⭐⭐⭐
Open Design 不绑定 DSH——兼容 20+ CLI：
- ✅ Claude Code 用户——用 Claude Code 编程 + Open Design 设计
- ✅ Codex 用户——用 Codex 编程 + Open Design 设计
- ✅ Cursor 用户——用 Cursor 编程 + Open Design 设计
- ✅ DSH 用户——用 DSH 编程 + Open Design 设计
- ✅ OpenCode 用户——用 OpenCode 编程 + Open Design 设计
- ✅ Pi / Aider / Continue / Cline / etc.——都能用
不是 DSH 专属——这是 Open Design 87K stars 的关键原因。
4. 3.5 个月 87K stars 增长记录 ⭐
- ✅ 2026-04-28 首次 commit
- ✅ 2026-08-16 87K stars（3.5 个月）
- ✅ 增长速率 ~25K stars/ 月 —— 比 Claude Code 更快
- ✅ Apache-2.0 ✅ —— 商用友好
- ✅ 极高 forks（10K） —— 生态扩散
四、生态系统：BY 生态 + 设计生态
1. DSH 生态集成
Open Design 是 DSH 官方插件：
| 集成 | 详情 |
|---|---|
| DSH 协议 | 通过 Cordis 插件机制加载 |
| DSH 用户 | npx @deepseek-ai/dsh install open-design 一键安装 |
| DSH 官方插件市场 | Open Design 是头部插件之一 |
2. AI CLI 生态（BYOK）
| CLI | 集成 | 状态 |
|---|---|---|
| Claude Code | BYOK API | ✅ 主要 |
| Codex | BYOK API | ✅ |
| Cursor | BYOK API | ✅ |
| DSH | 原生插件 | ✅ 核心 |
| OpenCode | BYOK API | ✅ |
| Pi | BYOK API | ✅ |
| Aider | BYOK API | ✅ |
| Continue | BYOK API | ✅ |
| Cline | BYOK API | ✅ |
| 20+ 其他 | — | ✅ |
3. 模型支持（BYOK）
| 模型 | 状态 |
|---|---|
| Claude 3.5 / 3.7 / 4 (Sonnet / Opus / Haiku) | ✅ |
| GPT-4o / o1 / o3 | ✅ |
| DeepSeek-V3 / R1 | ✅ |
| Gemini Pro / Flash | ✅ |
| Ollama 本地模型 | ✅ |
| 其他 OpenAI 兼容 API | ✅ |
4. 设计生态
| 工具 | 集成 |
|---|---|
| Figma 导入 | ✅ |
| Sketch 导入 | ✅ |
| Adobe XD 导入 | ✅ |
| 设计 Token (W3C) | ✅ |
| Material Design / Ant Design / Tailwind | ✅ |
五、对比 Claude Design / Figma / Vibe Coding 工具
1. 对比 Claude Design（核心替代关系）
| 维度 | Open Design | Claude Design |
|---|---|---|
| License | Apache-2.0 ✅ | 闭源 SaaS |
| 价格 | 免费（BYOK） | Claude Pro 订阅（$20/ 月） |
| 模型 | 20+ CLI 通用 | Claude 限定 |
| 部署 | Local-first | 云端 SaaS |
| 数据隐私 | 本地处理 | 上传 Anthropic |
| Coding Agent 集成 | ✅ 20+ CLI | ⚠️ 仅 Claude Code |
| 真实文件导出 | ✅ HTML/PDF/PPTX/MP4 | ⚠️ 有限 |
| 国内可用 | ✅ 可用 | ⚠️ 难 |
2. 对比 Figma（设计工具替代）
| 维度 | Open Design | Figma |
|---|---|---|
| 定位 | AI Design + Coding | 纯设计 |
| License | Apache-2.0 ✅ | 闭源 |
| 价格 | 免费 | 免费 + 付费 |
| AI 集成 | ✅ 原生 | ⚠️ Figma AI（付费） |
| Coding Agent 集成 | ✅ | ❌ |
| 实时协作 | ⚠️ | ✅ |
3. 对比 Vibe Coding 横评 (346) 5 工具
Open Design 不是 Vibe Coding 工具替代品——而是 Vibe Coding 的增强插件：
| 工具 | 类型 | 跟 Open Design 关系 |
|---|---|---|
| DSH (340) | Vibe Coding 框架 | ✅ Open Design 是 DSH 插件 |
| Codex | Vibe Coding CLI | ✅ Open Design 集成 |
| Claude Code | Vibe Coding CLI | ✅ Open Design 集成 |
| OpenCode | Vibe Coding CLI | ✅ Open Design 集成 |
| Pi | Vibe Coding CLI | ✅ Open Design 集成 |
Open Design = Vibe Coding + AI Design 桥梁 ——让 5 个 Vibe Coding 工具 全部具备设计能力。
六、实战：3 步跑通 Open Design
Step 1：安装 Open Design
# 选项 A：通过 DSH 安装（推荐）npx @deepseek-ai/dsh install @nexu-io/open-design
# 选项 B：直接安装桌面应用
# 下载地址：https://open-design.ai/
# 选项 C：通过 npm 全局安装
npm install -g @nexu-io/open-design
open-design
Step 2：配置 BYOK（Bring Your Own Key）
# ~/.open-design/config.yaml
providers:
claude:
type: anthropic
api_key: ${ANTHROPIC_API_KEY}
default_model: claude-sonnet-4-5
openai:
type: openai
api_key: ${OPENAI_API_KEY}
default_model: gpt-4o
deepseek:
type: openai-compatible
base_url: https://api.deepseek.com
api_key: ${DEEPSEEK_API_KEY}
default_model: deepseek-chat
ollama:
type: ollama
base_url: http://localhost:11434
default_model: llama3
# 关联 Coding Agent
agents:
claude-code:
cli: claude
default_provider: claude
codex:
cli: codex
default_provider: openai
dsh:
cli: npx @deepseek-ai/dsh
default_provider: deepseek
opencode:
cli: opencode
default_provider: claude
Step 3：让 Coding Agent 出设计
# 在 Claude Code / Codex / DSH 里输入：" 用 Open Design 给我出一个 SaaS landing page 的 prototype，深色主题，包含 5 个 section，导出 HTML + PDF。"
# Claude Code / Codex / DSH 会调用 Open Design
# Open Design 输出：# - landing-page.html（真实 HTML）# - landing-page.pdf（PDF 导出）七、风险与坑
1. 1.8 GB 巨型仓库
含桌面应用 + 模板 + 工具链——clone 慢、build 慢。
缓解：用预编译桌面应用（不需要 clone 仓库）
2. 3.5 个月项目（年轻）
- ✅ 增长快
- ⚠️ 还在快速迭代
- ⚠️ API 可能变动
3. 800 open issues
生态年轻——issue 处理不及时是可能的。
4. 模型支持虽广但深度有限
20+ CLI 集成是 BYOK，但每个 CLI 的 深度优化 可能不如官方版本（如 Claude Code 的设计能力可能比 OpenCode 强）。
5. 桌面应用内存占用
桌面应用 + 本地模型处理 → 8GB+ RAM 推荐。
6. 设计质量依赖 LLM
Open Design 的设计质量 取决于你用的 LLM——Claude Opus > GPT-4o > DeepSeek-V3。
7. 跟 Claude Design 仍有差距
Claude Design 是 Anthropic 闭源投入——Open Design 还在追赶。
八、总结
Open Design 不是 ” 又一款 AI 设计工具 ”——它是 Coding Agent + AI Design 的桥梁。
3 个最值得用的理由：
- DSH 生态 Killer Plugin + Claude Design 完美替代 ：Apache-2.0 ✅ + 本地优先 + BYOK 20+ CLI 通用 + 真实文件导出——国内用户 + 隐私敏感 + 多模型用户 首选
- 3.5 个月 87K stars 增长记录：Apache-2.0 + 极高 forks（10K）+ Coding Agent 集成广——DSH 生态的核心插件
- 真实文件导出（HTML/PDF/PPTX/MP4）：不输出图片——直接产出可生产文件——设计师 + 程序员 + 产品经理 三合一工具
1 句建议：
如果你的场景是 Vibe Coding + AI 设计 + 本地优先 + BYOK 多模型——用 Open Design（Apache-2.0 ✅ / 87K stars / 20+ CLI / 真实文件导出）。
如果你的场景是 Claude Code 专用 + 闭源 SaaS 接受——用 Claude Design（但接受 $20/ 月 + 数据上传 Anthropic）。
如果你的场景是 DSH 生态深耕 ——用 DSH + Open Design 组合（ 最强 Vibe Coding + AI Design 全栈）。
如果你的场景是 Figma 替代——用 Open Design（AI 原生 + Figma 兼容）。
飞熊做 AI 技术咨询，Open Design 是 Vibe Coding + AI Design 跨界场景的必讲项目——客户问 ” 如何让 AI 直接出设计稿 + 代码 + 真实文件 ” 时，Open Design 是 2026 年的标准答案。
参考
- Open Design GitHub · 87K stars ⭐ / Apache-2.0 / TypeScript
- Open Design 官网 · 官方主页
- DeepSeek Harness (340) · Open Design 的 DSH 插件宿主
- Vibe Coding 横评 (346) · Open Design 兼容的 5 个 CLI
- AI Agent 框架对比横评 (342) · AI Agent 框架背景
- Claude Code GitHub · Open Design 集成的核心 CLI
- OpenCode GitHub · Open Design 集成的高 stars CLI
- Open Design CSDN 报道 · 中文资料
- Open Design Claude Design 对比 · 开源替代分析
- Open Design Launch Week · 2026-08-10 Launch Week Vol.01
- Figma Alternative 对比 · AI 设计工具
- Apache ECharts (324) · 飞熊已调研的可视化库
- Streamlit (334) · Python 数据应用