nexu-io/open-design · 上手攻略
- 仓库：nexu-io/open-design
- 链接：https://github.com/nexu-io/open-design
- 分类：ai
- 作者：Tom
- 更新：2026-07-04
这是什么
Open Design 是 Claude Design（Anthropic 2026 年 4 月发布的 AI 设计工具）的开源替代方案。它是一个本地优先的 Agentic 设计工作空间，让你的代码 Agent（Claude Code / Codex / Cursor 等）直接成为设计引擎，输出真实可用的原型页面、数据看板、演示文稿、图片和视频。
核心特点：
- 本地桌面应用：macOS / Windows 原生 App，无遥测，数据不外发
- Model-Agnostic：不绑定特定模型，支持 21 个代码 Agent CLI（Claude Code、Codex、Cursor、OpenCode、Gemini CLI、Kimi CLI 等），也支持 BYOK 接入任意 OpenAI 兼容 API
- 品牌级输出：内置 150 个 DESIGN.md 设计系统（覆盖 Linear、Stripe、Vercel、Airbnb、Apple、Tesla、Notion 等），生成结果自动应用品牌规范
- 多格式导出：HTML（单文件）、PDF、PPTX、MP4（HyperFrames 视频）
- 本地 MCP 服务器：一行命令将 Open Design 接入任意支持 MCP 的 Agent
截至 2026-07-04：Stars 74,759，周增 +819，是当前开源 AI 设计工具中 Stars 最高、增长最快的项目。当前版本 0.10.0，Apache-2.0 许可证。
解决什么问题
Claude Design 虽然爆火，但它是： - 云端-only（数据必须经过 Anthropic 服务器） - 付费订阅制 - 锁定 Anthropic 模型和技能 - 无 Checkout、无自托管
Open Design 的目标是：同样的 Artifact-first 理念，完全开放： - 本地运行，无云依赖 - 开源免费，可自托管 - 模型和 Agent 随便换 - 技能和设计系统完全可定制
快速安装
方式一：Docker 部署（最简单，跨平台）
前置：Docker Desktop + Docker Compose v2
# 克隆仓库
git clone https://github.com/nexu-io/open-design.git
cd open-design
# 进入部署目录，复制环境模板
cd deploy
cp .env.example .env
# 生成安全 Token
openssl rand -hex 32
# 将生成的 Token 填入 .env 文件的 OD_API_TOKEN= 后面
# 启动
docker compose up -d
# 浏览器打开
# http://localhost:7456
方式二：本地开发模式（需要 Node.js）
前置：Node.js 24.x（通过 fnm/nvm 安装），pnpm 10.33.x（Corepack 自动选择）
# 克隆
git clone https://github.com/nexu-io/open-design.git
cd open-design
# 启用 Corepack 自动选择 pnpm 版本
corepack enable
pnpm --version # 确认为 10.33.2
# 安装依赖
pnpm install
# 启动（daemon + web + desktop 后台运行）
pnpm tools-dev
# 或前台运行 web（方便看日志）
pnpm tools-dev run web
方式三：直接下载桌面 App
从 GitHub Releases 下载 macOS (.dmg) 或 Windows (.exe) 安装包。
核心用法
1. 一键将 Open Design 接入你的代码 Agent
安装完 Open Design 后，用一行命令将 MCP 服务器接入任意 Agent：
# 接入 Claude Code
od mcp install claude
# 接入 Codex CLI
od mcp install codex
# 接入 Cursor
od mcp install cursor
# 接入 OpenClaw（Tom 的运行平台！）
od mcp install openclaw
# 接入 Kimi CLI
od mcp install kimi
# 接入 Gemini CLI
od mcp install gemini
# 查看所有支持的 Agent
od mcp install --help
# 预览安装（不实际执行）
od mcp install claude --print
# 卸载
od mcp install claude --uninstall
接入后，在你的 Agent 里就可以调用 Open Design 的设计工具生成 Artifact。
2. 使用 Design System（品牌规范）
Open Design 内置了 150 个品牌设计系统，以 DESIGN.md 格式存储，涵盖 Linear、Stripe、Vercel、Airbnb、Apple、Tesla、Notion、Anthropic、Cursor、Supabase、Figma 等。
工作原理：
1. 从下拉菜单选择一个 Design System
2. 输入设计需求 Prompt
3. Agent 读取 DESIGN.md 文件，将品牌规范（配色、字体、间距、动效、语音）融入输出
4. 生成的原型自动带有该品牌的视觉风格
# Design System 存放位置（本地开发模式）
open-design/design-systems/
3. 使用技能（Skill）生成不同类型内容
内置 100+ 技能，覆盖多种设计场景：
| 技能 | 用途 |
|---|---|
web-prototype（默认） |
通用网页原型 |
saas-landing |
SaaS 着陆页 |
dashboard |
数据看板 |
pricing-page |
价格页 |
mobile-app |
移动端 App 原型 |
simple-deck |
单页幻灯片 |
magazine-web-ppt |
杂志风演示文稿 |
blog-post |
博客文章 |
4. 生成 Artifact 并预览
启动后（本地 http://localhost:5173 或 Docker http://localhost:7456）：
- 选择 Skill（如
web-prototype） - 选择 Design System（如
Linear） - 输入 Prompt（如"帮我做一个 Stripe 风格的支付成功页面"）
- Agent 在左栏流式输出，右栏实时渲染 Artifact（沙箱 iframe 预览）
- 可导出为 HTML / PDF / PPTX
5. 使用 HyperFrames 生成视频
HyperFrames 是 HeyGen 开源的 Agent 原生视频框架，已集成为 Open Design 一等公民：
- Agent 编写 HTML + CSS + GSAP 动画
- 渲染为确定性 MP4（headless Chrome + FFmpeg）
- 配合 Seedance 2.0 / Sora 2 / Kling 2 等视频生成模型
- 内置 11 个 HyperFrames 模板 + 39 个 Seedance 提示词
6. BYOK API 模式（无需本地 Agent CLI）
如果不想安装任何 Agent CLI，在 Settings → Execution mode 中配置 BYOK：
POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream
支持：OpenAI、Anthropic、Azure OpenAI、Google Gemini、Ollama、LM Studio、vLLM 或任意 OpenAI 兼容端点。每个目标都有 SSRF 保护，阻止访问内网 IP。
典型适用场景
| 场景 | 价值 |
|---|---|
| AI 原型设计 | 产品经理/创始人用自然语言快速生成设计原型，无需设计师 |
| 品牌一致性验证 | 用不同品牌 Design System 测试同一设计概念的视觉表现 |
| Agentic 工作流 | 在 Claude Code/Cursor 等 Agent 中直接调用设计工具做 UI |
| PPT / 提案生成 | 快速生成演示文稿并导出 PPTX |
| 视频内容创作 | 用 HyperFrames 生成 Motion Graphics 视频 |
| 设计系统建设 | 基于 150 个现有 Design System 快速构建团队品牌规范 |
坑与注意
-
需要 Node.js 24.x（硬性要求）：仓库通过
package.json#engines强制锁定 Node 24，使用 Node 20/22 会在安装或运行时遇到问题。使用 fnm/nvm 先切换版本。 -
PATH 问题（macOS App 常见）：如果用 GUI 启动，PATH 可能不包含全局 npm/Homebrew 目录，导致 Agent CLI 检测不到。解决：确保可执行文件目录在 PATH 中，或在 Settings → Execution mode 中使用 Rescan。
-
Docker 首次启动慢：需要拉取镜像，取决于网络。第一次启动后本地已有镜像会快很多。
-
Artifact 存储路径受 AGENTS.md 约束：Daemon 数据目录有明确约定，不要随意更改存储路径（详见仓库 AGENTS.md）。
-
HyperFrames 依赖 FFmpeg：MP4 导出需要系统已安装 FFmpeg，否则 HyperFrames 渲染会失败。
-
Windows 原生支持但有坑：PowerShell 环境下常见路径分隔符和进程问题，建议参考
docs/windows-troubleshooting.md。 -
WSL2 路径特殊：如果 Agent 运行在 WSL2 内，Open Design 需要额外配置，见
docs/wsl-setup.md。 -
BYOK API 模式无本地 Agent 依赖：适合只想用 Open Design 作为设计工具、不想装一堆 CLI 的用户，但模型调用费用仍由你承担。
-
版本 0.10.0 仍较新：虽然是活跃项目（周增 +819），但相比 Figma 等成熟工具，稳定性可能有波动，生产使用前建议测试。
与同类对比
| 工具 | 许可证 | 本地运行 | 模型绑定 | 设计系统 | 导出格式 |
|---|---|---|---|---|---|
| Open Design（本仓库） | Apache 2.0 | ✅ | 无 | 150 内置 | HTML/PDF/PPTX/MP4 |
| Claude Design | 专有付费 | ❌ 云端 | Anthropic | 官方提供 | 有限导出 |
| Figma | 专有 SaaS | ❌ | 无 | Figma 组件 | 限格式导出 |
| Galileo AI | 专有 | ❌ 云端 | 绑定 | 无 | 图片为主 |
| Locofy | 专有 SaaS | ❌ | 无 | 有限 | 代码导出 |
| OpenUI | Apache 2.0 | ✅ | 无 | 无 | HTML/代码 |
Open Design 是唯一具备本地运行 + 开源 + 模型无关 + 品牌级设计系统 + 视频生成的 Agentic 设计工具组合。
一句话推荐结论
如果你在用 Claude Code / OpenClaw / Codex 等 Agent 写代码，又想要"顺手"生成带品牌规范的 UI 原型、PPT 或视频——Open Design 是目前最完整的开源方案，150 个设计系统开箱即用，装好 MCP 之后从任何 Agent 里都能直接调用。