## 项目概述

Open Design 是一个开源的 Claude Design 替代品，采用本地优先的桌面应用形态，将你的编码代理（如 Claude Code、Codex、Cursor 等）转变为设计引擎。它能够生成网页、桌面、移动端原型、实时仪表盘、演示文稿、图片和视频，并导出为 HTML、PDF、PPTX、MP4 等真实文件。项目遵循 Apache-2.0 许可证，主要使用 TypeScript 开发。

## 核心功能

- **Agent 原生，模型无关**：支持 25+ 种编码代理 CLI（如 Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen 等），通过 BYOK（自带密钥）方式接入任意 OpenAI 兼容端点。
- **品牌级设计系统**：内置 151 个设计系统包，以 `DESIGN.md` 为核心品牌契约，支持 `tokens.css`、组件清单等。
- **多类型产物生成**：在 Studio 中可生成原型、实时仪表盘、演示文稿（Deck）、图片、视频（HyperFrames 动效）。
- **本地优先与隐私**：数据默认保存在本地，支持 macOS、Windows、Linux（AppImage），提供 Docker 和 Vercel 部署选项。
- **插件与技能生态**：内置 100+ 功能技能、277 个官方插件，支持社区贡献和发布。
- **MCP 服务器**：可作为 stdio MCP 服务器集成到其他编码代理中，实现文件读写、项目操作等。

## 适用与不适用场景

**适用场景：**
- 设计师和开发者希望使用编码代理快速生成设计原型和演示文稿。
- 团队需要统一品牌设计系统，并希望在设计流程中复用 `DESIGN.md`。
- 需要本地优先、数据隐私可控的设计工具，避免云端锁定。
- 希望将设计产物直接导出为 HTML、PDF、PPTX、MP4 等格式，便于交付和开发。

**不适用场景：**
- 需要像素级精确的复杂矢量编辑（类似 Figma 的完整画布编辑）。
- 没有安装任何支持的编码代理 CLI，且不愿意使用 BYOK 代理。
- 需要云端协作实时编辑（团队工作区功能仍在发展中）。
- 对模型输出质量要求极高，且不愿意进行人工调整。

## 技术架构与依赖

- **前端**：Next.js 16 App Router + React 18 + TypeScript。
- **后端守护进程**：Node 24 + Express + SSE 流式传输 + better-sqlite3。
- **存储**：SQLite 数据库，项目文件存储在本地或 S3 兼容存储（可选）。
- **桌面端**：Electron shell + 沙箱化渲染器 + sidecar IPC。
- **运行时**：通过运行时注册表（`RuntimeAgentDef`）定义每个编码代理的启动、参数、流格式等，由通用引擎统一管理。
- **依赖**：需要 Node ~24、pnpm 10.33.x，以及可选的编码代理 CLI（如 Claude Code、Codex 等）。

## 安装与快速开始

**桌面应用（推荐）**：从 [open-design.ai](https://open-design.ai) 或 GitHub Releases 下载 macOS（Apple Silicon/Intel）或 Windows（x64）安装包，安装后自动检测 PATH 中的编码代理 CLI。

**通过 MCP 集成到编码代理**：
```bash
od mcp install <agent>  # 例如 claude、codex、cursor 等
```

**Docker 部署**：
```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# 打开 http://localhost:7456
```

**从源码运行**：
```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web
```

## 典型使用方法

1. **创建项目**：在首页选择技能和设计系统，输入 brief，点击生成。
2. **在 Studio 中迭代**：生成原型、仪表盘、Deck、图片或视频，通过 tweaks 面板调整参数。
3. **导出产物**：导出为 HTML、PDF、PPTX、MP4 或 ZIP。
4. **集成到编码代理**：在 Claude Code 等代理中调用 `@open-design` 或通过 MCP 工具使用。
5. **迁移现有代码**：使用插件将 Figma 或现有代码库迁移到 React/Next.js/Vue。

## 配置与部署要点

- **环境变量**：`OD_API_TOKEN`（API 令牌）、`OD_BIND_HOST`（绑定主机）、`OD_ALLOWED_ORIGINS`（允许的来源）、`OD_ALLOWED_INTERNAL_HOSTS`（内部主机白名单）等。
- **安全**：守护进程默认绑定 127.0.0.1，SSRF 防护默认开启，可配置内部主机白名单。
- **部署**：支持 Docker Compose、Sealos、Vercel 等，生产环境需配置反向代理和 SSE 缓冲。
- **数据目录**：通过 `OD_DATA_DIR` 指定，默认在用户数据目录下。

## 限制、风险与许可证

- **限制**：需要安装编码代理 CLI 才能使用本地模式；BYOK 模式需要 API 密钥；部分功能（如团队工作区）仍在开发中。
- **风险**：依赖第三方 CLI 的稳定性和权限模型；生成内容可能受模型限制；本地存储数据需自行备份。
- **许可证**：Apache-2.0，但部分捆绑技能和模板保留其原始许可证（如 MIT）。

## 官方链接

- GitHub 仓库：https://github.com/nexu-io/open-design
- 官方网站：https://open-design.ai
- Discord 社区：https://discord.gg/mHAjSMV6gz
- X/Twitter：https://x.com/OpenDesignHQ

## 信息来源和分析时间

- 信息来源：GitHub 仓库 README、CHANGELOG、架构文档、贡献指南等。
- 分析时间：2026-08-07（基于最新发布版本 0.18.1）。