🎨 一句话介绍：把笔记本上已经在用的 Claude Code / Cursor / Codex / Qoder 这些 Coding Agent，瞬间变成"读得懂品牌、产得出原型、导得出 PPT/MP4"的设计工作室——而且代码、设计系统、插件全部本地优先（Local-First），数据不出本机，开源协议 Apache 2.0。
📦 它是什么：100+ 技能 × 150 个品牌级
DESIGN.md设计系统 × 261 个开箱即用插件 × 21 个主流 Coding Agent CLI 适配——一套打通，所有 Agent 通用。
一、为什么需要 Open Design？
设计交付的痛点，今天依然是一道沟通鸿沟：
- Figma 时代 → 设计师在画布上推像素，工程师还要"翻译"成代码
- AI 时代来了 → 但 Claude Design / V0 / Lovable 们大多 云端封闭：你的品牌、规范、数据都要传出去
- 企业的烦恼 → 想用 AI 提效，又不想把核心设计资产交给第三方
Open Design 选择了第三条路：把 Anthropic 在 Claude Design 里跑通的"发现需求 → 锁定方向 → 流式输出工件 → 评审 → 交付"这套 Agent 原生闭环，完全开源、本地运行，并让你已有的 Coding Agent 直接驱动它。
你的 CLI = 设计引擎 · 你的笔记本 = 工作室 · 你团队的
DESIGN.md= 品牌契约
二、五个核心页面，覆盖完整设计工作流
🏠 Home —— 一个入口，发起所有创作
选技能、选设计系统、写需求，一个界面就能驱动出原型 / 仪表盘 / 演示文稿 / 移动应用 / 杂志页面。
⚙️ Automation × 📐 Design System
| Automation —— 设计流程自动化 | Design System —— 品牌契约中枢 |
|---|---|
 |
 |
| 把重复的设计动作编排成可复用、可调度的自动化流 | 把团队的 DESIGN.md 沉淀成品牌契约，约束所有输出风格统一 |
🧩 Plugin × 🔌 Integrations
| Plugin —— 261 个开箱插件 | Integrations —— 一行命令接入 |
|---|---|
 |
 |
| 浏览、安装、分发工作流插件，按需扩展生成能力 | 连接外部系统和 MCP 工具，从任意 IDE / 脚本调用 Open Design |
三、Studio：同一套设计系统，四种输出形态
走进任何项目的 Studio，同一份 DESIGN.md 可以流式产出四类工件：
1️⃣ Prototype —— Web / 桌面 / 移动 原型
单页 HTML 工件，读取你的设计系统，在沙箱 iframe 中即刻预览，源码可下载，直接交给 Cursor / Codex 二次开发。
2️⃣ HyperFrame —— 真·MP4 动态图形
程序化动效，1920×1080 · 30fps 直出 MP4，发布会、片头、动态海报通吃。
3️⃣ Deck —— 可翻页 / 可导出的 PPT
键盘翻页的演示文稿，一键导出 PPTX / PDF——投资人路演、月度汇报告别"插图拼接"。
4️⃣ Image —— 品牌级图片与视觉资产
高分辨率图片生成与下载，封面图、Banner、社交配图一站搞定。
四、真实演示：技能即输出
这些都是 Open Design 内置技能跑出来的真实成品，不是 Figma 截图，是 Agent 直接产出的可运行 HTML。
| 入口视图 | 移动端 Onboarding |
|---|---|
 |
 |
| 选技能 + 选设计系统 + 写需求，三步起飞 | 像素级精确的 iPhone 15 Pro 外框，多屏流程 |
| 实时仪表盘 | 杂志风 Deck |
|---|---|
 |
 |
| 可编辑 KPI 大屏 + 调参面板，iframe 不刷新即重渲 | 编辑级排版的演示文稿，直接导出 PPTX |
| Web 仪表盘 Prototype | 游戏化 App 原型 |
|---|---|
 |
 |
| 带 KPI、图表、滚动条的编辑类仪表盘 | 含 XP 绶带的三屏游戏化流程，可转 React/Next/Vue |
五、21 个 Coding Agent 全适配，你装哪个用哪个
Open Design 以 Skills + CLI + MCP Server 形式交付。装好后，只要一行命令就能把 MCP Server 接入任意 Agent：
od mcp install claude # Claude Code
od mcp install cursor # Cursor
od mcp install codex # Codex CLI
od mcp install copilot # GitHub Copilot
od mcp install gemini # Gemini CLI
od mcp install opencode # OpenCode
od mcp install openclaw # OpenClaw
od mcp install antigravity # Antigravity
od mcp install cline # Cline
od mcp install trae # Trae
od mcp install kimi # Kimi CLI
od mcp install hermes # Hermes Agent
# ...完整 21 个，od mcp install --help 查全部
没装任何 CLI？ 内置 BYOK 代理 POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream 同样能跑——粘贴 baseUrl + apiKey + model 即用，支持 OpenAI / Anthropic / Azure OpenAI / Google Gemini / Ollama / LM Studio / vLLM。守护进程边缘内置 SSRF 防护，拦截内网 IP / link-local / CGNAT。
六、五类典型场景
| 场景 | 谁在用 | Open Design 怎么帮 |
|---|---|---|
| 品牌设计沉淀 | 设计团队 / 品牌负责人 | 把 DESIGN.md 写一次，所有输出自动应用品牌风格 |
| 快速原型 + 工程交付 | 产品经理 / 全栈工程师 | Agent 直出可运行 HTML，Cursor 接力转 React/Vue |
| 数据汇报 / 决策大屏 | 数据分析 / 运营 | Live Dashboard 调参面板，原地编辑不重启 |
| 路演 / 月报 PPT | 创始人 / BD / HR | 杂志级排版 Deck，一键导 PPTX/PDF |
| 品牌动效 / 短视频 | 市场 / 内容运营 | HyperFrame 程序化动效直出 MP4 |
七、为什么选择在 阿里云计算巢 部署 Open Design
| 价值 | 自建 Open Design | 计算巢托管部署 |
|---|---|---|
| 拉镜像 / 配 Node 24 / pnpm 10.33 | 半天起步，国内拉包还要折腾镜像源 | ✅ 计算巢镜像部署，3–5 分钟开箱 |
| 本地优先 + 数据不出域 | 单机版受限于个人设备 | ✅ 部署到自己阿里云 VPC，团队共用 + 数据自留 |
| 多 Agent CLI 协同环境准备 | 21 个 CLI 一个个装一个个调 | ✅ 镜像预置依赖，开机即用 |
| 企业账单 + IAM 隔离 | 个人卡支付，权限混乱 | ✅ 走企业主账号，子账号 RAM 权限可控 |
| MCP Server 外网可达 | 需自己配 frp / 公网 IP | ✅ 一键挂 EIP / SLB，跨城团队远程接入 |
简单说：自己折腾环境 vs 直接拿到一个能用的设计引擎——计算巢帮你省下那个晚上。
八、快速开始
方式 A：在阿里云计算巢一键部署（推荐）
⚡ 3–5 分钟拥有团队级 Open Design
1.点击「立即部署」
- 选择地域（推荐 香港 / 新加坡，海外依赖拉取更快）
- 配置 ECS 规格（建议 ≥ 4C8G，构建期内存敏感）
- 等待服务实例
Deployed→ 浏览器访问内置 Web 控制台 - 设置中选择执行模式：装本地 CLI 或直接填 BYOK API Key
方式 B：本地源码部署（适合开发者）
环境要求：Node.js ~24、pnpm 10.33.2、Docker Compose v2
# 拉代码
git clone https://github.com/nexu-io/open-design.git
cd open-design
# 准备 Node 24（用 nvm/fnm 二选一）
nvm install 24 && nvm use 24
corepack enable
corepack pnpm --version # 应输出 10.33.2
# Docker Compose 起服务
cd deploy
cp .env.example .env
docker compose up -d
详细文档：QUICKSTART.md · QUICKSTART.zh-CN.md
九、FAQ
Q1：和 Figma / V0 / Lovable 有什么本质不同？
A：Open Design 本地优先 + 开源，输出物是真 CSS + 真字体 + 真组件的可运行 HTML，不是位图也不是闭源云端工件。你的设计资产、Agent 调用记录、生成结果完全留在自己机器或自己云上。
Q2：必须装 Claude Code 之类的 CLI 吗？
A：不必。0.9.0 开始内置 Model Router（AMR），打开应用、登录账号即用。也支持 BYOK 模式，粘贴任意 OpenAI 兼容端点即可。
Q3：可以多人协作吗？
A：可以。部署到计算巢/团队服务器后，Web 端多人访问；设计系统、技能、插件按 Git 仓库管理，团队共享一份「品牌契约」。
Q4：会不会被锁死在 Open Design 里？
A：不会。所有产物都是标准 HTML / PDF / PPTX / MP4 / MP3，可被任何工具继续编辑；插件和技能也是开放的文件系统格式。
Q5：21 个 Coding Agent 切换成本高吗？
A：低。一行 od mcp install <agent> 完成接入；切 Agent 不用改任何技能、设计系统或插件——契约不变，引擎可换。
Q6：建议部署在哪个阿里云地域？
A：香港 / 新加坡 优先，海外依赖（npm registry、HuggingFace 资源、部分模型端点）拉取更快稳定。国内地域可用，但需配置 npm/Docker 镜像加速器。
十一、立即开始
- 🌐 官网下载：https://open-design.ai/
- 📦 GitHub 源码：https://github.com/nexu-io/open-design
- 💬 Discord 社区：https://discord.gg/qhbcCH8Am4
- 🏅 Fellow 计划：
MAINTAINERS.md - ☁️ 阿里云计算巢一键部署：点击「立即部署」
Open Design × 阿里云计算巢：让设计的下一个十年，从你的 Coding Agent 开始。
