nexu-io / open-design

nexu-io/open-design

open_in_new前往仓库

🎨 开源替代Claude Design的设计工具。🖥️ 本地优先桌面应用，让编码代理成为设计引擎：原型、落地页、仪表盘、幻灯片、图片与视频，生成真实文件并导出HTML/PDF/PPTX/MP4。🤖 支持Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen等20+ CLI，自带密钥接入。

项目概览

项目概述

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 或 GitHub Releases 下载 macOS（Apple Silicon/Intel）或 Windows（x64）安装包，安装后自动检测 PATH 中的编码代理 CLI。

通过 MCP 集成到编码代理：

od mcp install <agent>  # 例如 claude、codex、cursor 等

Docker 部署：

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

从源码运行：

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 仓库 README、CHANGELOG、架构文档、贡献指南等。
  • 分析时间：2026-08-07（基于最新发布版本 0.18.1）。