# open-design

> 把 Open Design 本地设计工作区以 MCP 服务形式挂到 dsh，让 dsh 能直接读项目文件、预览生成的设计稿、调 27 种编码 Agent CLI 产出网页原型/PPT/海报/视频。

## 元数据

- 作者: [@nexu-io](https://github.com/nexu-io)
- 仓库: <https://github.com/nexu-io/open-design.git>
- GitHub: [nexu-io/open-design](https://github.com/nexu-io/open-design)
- Star: 88,204
- 主语言: TypeScript
- License: [Apache-2.0](https://spdx.org/licenses/Apache-2.0.html)
- 主页: <https://open-design.ai>
- Topics: `agent-skills`, `ai-design`, `byok`, `claude-code-for-design`, `claude-design`, `codex-design`, `coding-agents`, `cursor-design`, `deepseek`, `deepseek-harness`, `design-systems`, `desktop-app`, `dsh`, `dsh-plugin`, `figma-alternative`, `hermes-agent`, `local-first`, `prototyping`, `ui-generator`, `vibe-coding`
- Fork: 10,189
- Open Issues: 815
- 最后推送: 2026-08-17T16:42:41.000Z

## 安装

```bash
dsh plugin --profile web add github:nexu-io/open-design
```

## 百科

## 一句话定位
把本地的 Open Design 设计工作区以 stdio MCP 服务的方式挂到 DeepSeek Harness（或任何兼容 MCP 的 Agent），让 dsh 能直接读取项目文件、预览生成的设计稿，并通过 `od` 调用本地已安装的编码 Agent CLI 产出网页原型、PPT、海报、视频等设计产物。

## 核心能力
- 以 stdio MCP 服务形式把项目列表、文件读取、设计稿预览等工具暴露给 dsh
- 通过 `od` 后端自动调用本地 27 套 Agent CLI 中的任意一个生成设计稿，无需 dsh 自己写文件
- 复用 DeepSeek Harness 自带的会话存档与冷启动恢复，支持流式 thinking / tool_call / usage 结构化事件
- 直接消费 Open Design 自带的 164+ 个功能 skill、40+ 渲染模板、150+ 个 `DESIGN.md` 品牌系统
- 设计稿走沙箱 iframe 实时预览，可一键导出 HTML / PDF / PPTX / MP4 / ZIP

## 技术实现
- **语言**: TypeScript（Node ~24）
- **关键依赖**: `@open-design/sidecar`、`@open-design/contracts`、`better-sqlite3`、`sharp`、`electron`
- **架构模式**: 本地守护进程 + stdio MCP 服务桥接；DSH 适配器通过严格的 JSONL 协议与官方 `dsh --profile open-design --stdio` 子进程通信
- **入口文件**: `plugins/open-design/.mcp.json`（stdio MCP 配置） → `apps/daemon/src/cli.ts`（`od` CLI 与 MCP 服务实现）

## 适用场景
想在 DeepSeek Harness（或 Claude Code / Codex / Cursor 等已支持的 Agent）里直接让 AI 产出真实可预览的网页原型、PPT 海报、视频动效，而不是只吐出一段描述性文字的设计师/产品经理。也适合已经在用 Open Design 本地桌面端、想把现有项目无缝接入 dsh 自动化流水线的工作室团队。

## 前置依赖与兼容性
| 依赖 | 最低版本 | 说明 |
|---|---|---|
| DSH | 0.1.0-rc.6 | 适配器白名单硬编码仅支持此版本 |
| Node.js | ~24 | 仓库 `engines` 强制要求 24.x |
| pnpm | 10.33.2（<11） | 仅源码构建/Docker 自托管时需要 |
| 平台 | macOS / Windows / Linux | 桌面端主力 macOS+Windows，Linux AppImage 为可选发布通道 |
| 原生模块 | better-sqlite3 / electron / sharp | SQLite 持久化 + Electron 桌面壳 + 图片处理 |

## 安装方式
```bash
dsh plugin --profile web add github:nexu-io/open-design
```

## 配置项
| 配置 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| `daemon-url` | string | MCP 服务要连接的 `od` 守护进程地址 | `http://127.0.0.1:7456` |
| 代理协议版本 | integer | DSH profile JSONL 协议版本 | `1` |
| 远程模型目录 | auto | 通过 `dsh --profile open-design --models` 自动发现 | 动态 |
| DeepSeek API Key | string | 在 `dsh web` 自己的设置页里配置，OD 不读取 | 用户自填 |

## 常见问题
**Q: 装这个插件一定要装 Open Design 桌面端吗？**

A: 不强制装桌面端，但 `od` 命令必须能在 PATH 里被 dsh 找到。最省事的做法是先装桌面端/源码并启动一次让 `od` 可用，再在 dsh 里安装这个插件。

**Q: 我没装 Claude Code、Codex 这些本地 Agent 怎么办？**

A: 不影响。`od` 会自动检测 PATH 上的 Agent；如果一个都没装，可以在 Open Design 设置里切换到 BYOK 模式，直接把 OpenAI/Anthropic/Azure/Google 等兼容接口的 baseUrl+key 填进去，照样能生成设计稿。

**Q: 会不会把我的项目文件上传到云端？**

A: 不会。`od` 默认监听 127.0.0.1，BYOK 代理在守护进程边缘做了 SSRF 防护；只有在显式设置 `OD_BIND_HOST` 和 `OD_ALLOWED_ORIGINS` 后才会监听局域网。

**Q: DeepSeek API Key 需要在 Open Design 里再填一次吗？**

A: 不需要。Key 在 `dsh web` 的「设置 → 模型 → DeepSeek」里配置并保存；OD 不会读取、也不会回显这个 Key；如果你机器上已经有 `DEEPSEEK_API_KEY` 环境变量，OD 也直接复用。

**Q: 跟 Open Design 自带的 web UI / 桌面端有冲突吗？**

A: 没有冲突。`od` 同时支持 MCP stdio 服务和 HTTP 端口，两者共用同一份 SQLite 项目库，已生成的项目文件对两边都可见。

**Q: 卸载会影响我之前生成的项目吗？**

A: 不会。`dsh plugin --profile web remove nexu-io/open-design` 只移除 MCP 桥接，项目文件、设计系统、技能都保留在 Open Design 的数据目录里。

**Q: macOS 终端里 `od` 报错说找不到怎么办？**

A: macOS 自带的 `/usr/bin/od` 是八进制转储工具，会盖住 Open Design 的 `od` 命令。建议直接通过桌面端「设置 → MCP server」复制那个走绝对路径的客户端片段，不要在终端裸跑 `od mcp install <agent>`。

## 上手难度
入门 — 只要本机已装好 Open Design 与 DeepSeek Harness，复制一行安装命令即可在 dsh 中生效；DSH profile 与适配器版本不匹配时会有明确提示并引导安装缺失组件。

## 已知问题与限制
- DSH 适配器硬绑定 `0.1.0-rc.6`，其它版本会直接被 `versionPolicy.supportedVersions` 拦下并要求切换到受支持版本（apps/daemon/src/runtimes/defs/deepseek-harness.ts:56）
- Alpine Linux 不在 DSH 一键安装脚本的自动补齐范围，遇到 Alpine 容器需要手动装 Node + `dsh`（docs/deepseek-harness-one-click-install.zh-CN.md:32）
- Claude Desktop 的自动 MCP 配置目前仅支持 macOS 与 Windows，Linux 上需要手动写 `~/.config/claude-desktop/open-design.json`（README.md:139）
- 首次在 DSH 上启用 Open Design 适配器时，必须经过一次明确确认，Open Design 才会调用 `dsh plugin --profile open-design add` 把连接组件装进 `~/.dsh/profiles/open-design`；如果取消，DSH 不会被选中也不会改 profile（docs/agent-adapters.md:397）
- macOS 终端里裸跑 `od mcp install <agent>` 可能命中系统 `/usr/bin/od` 导致安装失败，建议从桌面端「设置 → MCP server」复制带绝对路径的片段（README.md:320）

---

本文档由 [deepseek-plugin.org](https://deepseek-plugin.org) 自动生成，对应 HTML 页面: [open-design](https://deepseek-plugin.org/plugins/nexu-io/open-design)
百度百科由 AI 生成 (模型: `MiniMax-M3`)