开源设计工作台nexu-io/open-design

OpenDesign：开源的 Claude Design 替代方案

⚡ OpenDesign Cloud —— 官方模型服务。 一次充值即可在 OpenDesign 内同时使用智能体模型和图像模型：智能体可用 GPT、Claude 和 DeepSeek；图像可用 GPT Image 2.0、Seedream 5.0 Pro 和 Nano Banana 2.0。

🚀 DeepSeek V4 Flash 和 V4 Pro 现已上线。 将顶级智能应用于原型、演示文稿、设计系统和日常智能体任务。OpenDesign 会员可在应用内无限制使用这两款模型，为期两周。

🧩 现已支持 DeepSeek Harness。 将 DeepSeek 官方的 dsh 智能体框架作为原生运行时接入 OpenDesign，支持结构化思考、工具调用、模型发现、取消和会话恢复。生成的文件保留在 OpenDesign 工作流中，便于实时预览和交付。

网站 ·
下载 ·
OpenDesign Cloud ·
Discord ·
关注 @OpenDesignHQ

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย

什么是 OpenDesign

🎨 开源的 Claude Design 替代方案。  🖥️ 面向 macOS 和 Windows 的本地优先原生桌面应用。  ⚡ 可组合的技能、品牌级 DESIGN.md 设计系统，以及开箱即用的插件。  🖼️ 可生成 网页 · 桌面 · 移动端原型、实时仪表盘 / 制品、演示文稿、图像、视频，以及 HyperFrames 动态图形。🔒 沙盒化 iframe 预览 · HTML / PDF / PPTX / MP4 导出。  🤖 可运行于 DeepSeek Harness (dsh) · Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity 以及 26 个不同的本地 CLI 可执行程序，或通过 BYOK 使用任何兼容 OpenAI 的端点。

OpenDesign 是这样一种存在：当 Anthropic 随 Claude Design 一同发布的 agent 原生循环——发现需求简报、锁定方向、流式生成制品、评审、交付——不再封闭，而是变成一套由功能性技能、渲染设计模板、设计系统和插件组成的文件系统，你笔记本电脑上已有的编码 agent 可以读取、写入并重新混编它。你的 CLI 成为设计引擎，你的笔记本电脑成为工作室，而你团队的 DESIGN.md 成为品牌契约。

它也是 agent 时代的 Figma 替代方案——不是在画布上推像素，而是以真实 CSS、真实字体、真实组件交付单页制品，并可直接导出为 HTML / PDF / PPTX / MP4——已经由你的设计系统塑造，已经可以在你每天使用的 agent 中运行。

产品导览

快速了解 OpenDesign 的核心工作流。从 Home 开始，输入需求简报；在 Plugins 中探索可复用技能，并将品牌参考转化为 Design System。然后进入项目的 Studio，在一个地方创建并完善原型、演示文稿、移动应用、图像、文档和 HyperFrames。

核心页面

Home — 选择制品类型，输入需求简报，并在开始前设置设计系统、工作目录和模型。

插件 — 按类别浏览官方技能，搜索目录，并通过 Try it 启动工作流。

设计系统 — 提取并优化品牌的视觉语言，预览结果，并在同一工作区中使用它进行创作。

Studio — 一个项目中包含多种产物类型

在项目的 Studio 中，对话、生成的文件和实时预览在六种产物类型之间保持在一起：

原型 — 生成或重建 Web 体验，检查渲染后的页面，并与智能体就地迭代。

演示文稿 — 创建多幻灯片演示文稿，查看缩略图和演讲者备注，并在准备好后导出。

移动应用 — 在设备预览中生成并打磨移动界面，旁边配有对话、输出文件和下一步操作。

图像 — 从项目对话中生成视觉素材，以完整尺寸预览结果，然后下载或打开它。

文档 — 创建精美的多页指南和编辑类文档，检查渲染后的布局，并在准备好后导出或分享。

HyperFrame — 构建代码驱动的动态图形，在 Studio 中预览动画，并导出完成的视频。

平台兼容性

OpenDesign 以两种方式连接主流编码智能体：面向使用 OD 的智能体的 技能、CLI 和 MCP，以及面向由 OD 直接启动的智能体的原生运行时适配器。DeepSeek Harness 是通过官方 dsh CLI 提供的一流原生运行时，具备结构化流式传输、模型发现、取消和会话恢复能力。
| 编码代理 / 平台          | 状态    | 快速设置                    |
|---|:---:|---|
| Claude Code | ✅ 支持 | od mcp install claude |
| Claude Desktop | ✅ 支持¹ | od mcp install claude-desktop |
| Codex CLI | ✅ 支持 | od mcp install codex |
| DeepSeek Reasonix | ✅ 支持 | od mcp install reasonix |
| DeepSeek Harness | ✅ 原生运行时 | od agent setup deepseek-harness |
| Raven | ✅ 支持 | od mcp install raven |
| Cursor | ✅ 支持 | od mcp install cursor |
| VS Code + GitHub Copilot | ✅ 支持 | od mcp install copilot |
| GitHub Copilot CLI | ✅ 支持 | od mcp install copilot |
| OpenCode | ✅ 支持 | od mcp install opencode |
| OpenClaw | ✅ 支持 | od mcp install openclaw |
| Antigravity | ✅ 支持 | od mcp install antigravity |
| Cline | ✅ 支持 | od mcp install cline |
| Trae | ✅ 支持 | od mcp install trae |
| Kimi CLI | ✅ 支持 | od mcp install kimi |
| Kiro | ✅ 支持 | od mcp install kiro |
| Pi Agent | ✅ 支持 | od mcp install pi |
| Mistral Vibe CLI | ✅ 支持 | od mcp install vibe |
| Hermes Agent | ✅ 支持 | od mcp install hermes |

对于 DeepSeek Harness，请先安装官方 dsh CLI，然后在 OpenDesign 中选择它，或运行 od agent setup deepseek-harness 来安装/修复 OD 的连接组件。对于 MCP 集成：od mcp install  --print 用于试运行预览 · --uninstall 用于移除 · 使用 od mcp install --help 查看完整列表。

¹ 目前仅在 macOS 和 Windows 上支持 Claude Desktop 的自动 MCP 配置。

未安装 CLI？ POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream 上的 BYOK 代理为你提供相同的循环（无需启动进程）——粘贴 baseUrl + apiKey + model，并内置 OpenAI、Atlas Cloud、Anthropic、Azure OpenAI、Google Gemini、Ollama、LM Studio、vLLM 或任何 OpenAI 兼容端点的预设。Atlas Cloud 使用 https://api.atlascloud.ai/v1，搭配你自己的密钥以及 OpenAI 兼容的模型 ID，例如 qwen/qwen3.5-flash。针对每个目标的 SSRF 防护会在守护进程边缘拦截内部 IP / 链路本地 / CGNAT 地址。

运行时定义位于 apps/daemon/src/runtimes/defs/，注册与共享流处理位于 apps/daemon/src/runtimes/。适配器契约参见 docs/agent-adapters.md。

演示

四个核心产品类别，全部由运行在你笔记本电脑上的编码代理渲染。点击缩略图查看真实示例。

1 · 原型 — 网页 · 桌面 · 移动端

默认输出界面。单页 HTML 产物，读取你的 DESIGN.md 并在沙盒化 iframe 中渲染。

网页原型 — 一个带有滚动条、KPI 和图表的编辑式仪表盘。直接由 design-templates/dating-web/ 渲染。

移动应用原型 — 一个三屏游戏化流程，带有 XP 缎带和任务详情。可直接交给 Cursor / Codex / Claude Code 转换为 React/Next/Vue。

2 · 实时产物与仪表盘

实时仪表盘、决策室、KPI 墙——通过调整面板拉取数据并保持就地可编辑的单页产物。

实时仪表盘 — 一面可编辑的 KPI 墙，其调整面板会呈现值得微调的参数。代理生成清单，iframe 无需重新加载即可重新渲染。

决策室 — 用于产品 / 研究 / 运营会议的多源简报产物。

GitHub 风格仪表盘 — 以实时产物形式呈现的仓库指标。

Flow 实时仪表盘模板 — 一个领域特定的 KPI 模板，通过当前生效的 DESIGN.md 进行品牌化。

3 · 演示文稿 — 杂志式演示文稿、每周更新、提案

演示文稿模式 (guizang-ppt) — 杂志式布局、WebGL 主视觉、P0/P1/P2 检查清单。从 op7418/guizang-ppt-skill 原样打包，保留其原始许可证。

瑞士国际主义风格演示文稿 — 网格锚定、单色点缀。design-templates/html-ppt-/ 下 15 个演示文稿模板和 36 个主题之一。

每个演示文稿均可导出为 HTML（单文件，内联资源）、PDF（浏览器打印，感知演示文稿）、PPTX（智能体驱动的技能）、ZIP（归档）或 Markdown。

4 · 图像 — gpt-image-2、ImageRouter、自定义 API

插画风格城市美食地图手绘编辑风格旅行海报
电影感电梯场景单帧编辑风格剧照
赛博朋克肖像个人头像 — 霓虹面部文字
3D 石阶凿石信息图
华丽肖像编辑风格影棚拍摄

93 个可直接复制的提示词位于 prompt-templates/ — 包含预览缩略图、完整提示词正文、目标模型、宽高比和来源归属。一键即可将简报放入编辑器。

5 · 视频与 HyperFrames — 智能体原生动态图形

[HyperFrames][hyperframes] 是 HeyGen 的开源、智能体原生视频框架，作为一等公民集成在 OpenDesign 中。智能体编写 HTML + CSS + GSAP，HyperFrames 通过无头 Chrome + FFmpeg 将其渲染为确定性的 MP4。将其与 Seedance 2.0 搭配用于电影级 t2v / i2v，与 Veo 3 / Sora 2 / Kling 2 搭配用于路由模型变体，与 Suno v5 / Lyria 2 搭配用于音频层。

30 秒 SaaS 产品宣传片 · 16:9 · UI 3D 揭示
TikTok 卡拉 OK 口播 · 9:16 · TTS + 逐词同步字幕
30 秒品牌宣传短片 · 16:9 · 音频响应式动态字体
条形图竞赛 · 16:9 · NYT 风格数据信息图

航班地图 · 16:9 · Apple 风格路线揭示
4 秒电影感 Logo 片尾 · 16:9 · 逐块组装 + 泛光
$0 → $10K 金额计数器 · 9:16 · Apple 风格造势
网站转视频 · 16:9 · 以 3 种视口捕获网站

仓库随附 11 个 HyperFrames 模板 + 39 个 Seedance 提示词。目录缩略图 © HeyGen；该框架采用 Apache-2.0 许可。OD 专属的渲染工作流（合成缓存、sandbox-exec 变通方案、MP4-as-chip）详见 design-templates/hyperframes/。

[hyperframes]: https://github.com/heygen-com/hyperframes

为什么选择 OpenDesign
2026 年 4 月，Anthropic 发布了 Claude Design——这是 LLM 第一次不再撰写散文，而是直接交付设计产物。 它迅速走红。但它始终闭源、仅限付费、仅限云端，被锁定在 Anthropic 的模型、Anthropic 的技能、Anthropic 的界面之中。没有结账流程，没有自托管，没有 Vercel 部署，无法换入你自己的 agent。

OpenDesign（OD）是它的开源替代方案。相同的循环，相同的产物优先思维模型，却没有任何锁定：

- 🤖 Agent 原生，模型无关。 我们不附带 agent。你 PATH 中已有的 claude / codex / cursor-agent / copilot / hermes / kimi 就是设计引擎。一键即可切换。
- 🧠 默认即品牌级。 每次渲染都会读取当前激活包的 DESIGN.md 作为核心品牌契约。仓库自带 151 个设计系统包；旧版包可能仅有 DESIGN.md，而较新的包可以额外包含 manifest.json、tokens.css、组件、资产和来源信息。放入一个文件夹，选择器就能找到它。
- 🖥️ 本地优先，每一层都支持 BYOK。 为 macOS（Apple Silicon + Intel）和 Windows（x64）提供原生桌面应用。Linux 桌面用户目前可以从源码运行 OpenDesign；最新的官方发布版本不包含预构建的 Linux 产物。产品分析和会话回放需经同意才启用；经过清洗的安全与可靠性遥测则始终开启。在描述守护进程数据路径之前，贡献者和运维人员必须阅读 AGENTS.md → Daemon data directory contract。本 README 不得重述该内容。
- 🌍 四个层面均可组合。 插件承载可运行的工作流 · 功能性技能承载 agent 行为 · 设计模板承载渲染蓝图 · 设计系统承载品牌。四者都使用可移植、可版本化的目录，任何人都可以编写和发布。
- 🔁 刷新现有代码库。 将 git 仓库 + DESIGN.md 交给 agent，它就会按照品牌规范重构你真实的组件。专用插件可将 Figma / Pencil 工作流迁移到 React / Next.js / Vue 代码中。
- 🔒 以信念守护隐私。 一切都在你的数据所在之处运行——你的笔记本电脑、你团队的服务器、你的 Vercel 项目。当需要网络时，BYOK 代理受到 SSRF 防护。

对比

| | Claude Design | Figma | Lovable / v0 / Bolt | OpenDesign |
|---|---|---|---|---|
| 开源 | ❌ | ❌ | ❌ | ✅ Apache-2.0 |
| 自托管 / 桌面端 | ❌ | ❌ | ❌ | ✅ macOS + Windows + Docker + Vercel web |
| Agent 原生（在你的 CLI 中运行） | 仅 Anthropic | ❌ | 仅云端 agent | ✅ 25 个 CLI + BYOK |
| 品牌级 DESIGN.md | 专有 | 主题 JSON | 有限的 token | ✅ 自带 151 个系统 |
| 技能 / 插件 / 模板 | 闭源 | 插件商店 | 闭源 | ✅ 100+ 功能性技能 · 渲染模板 · 277 个插件 |
| HyperFrames（HTML→MP4） | ❌ | ❌ | ❌ | ✅ 一等支持 |
| 将现有仓库刷新至品牌规范 | ❌ | ❌ | ❌ | ✅ 通过 agent + DESIGN.md |
| 最低计费 | Pro / Max / Team | Pro / Org | Pro / Team | BYOK · 任意兼容端点 |

快速开始

🖥️ 下载桌面应用（推荐——零配置）

使用 OpenDesign 最快的方式。无需 Node，无需 pnpm，无需克隆。

- macOS（Apple Silicon · Intel x64）→ open-design.ai 或 GitHub Releases
- Windows（x64）→ open-design.ai 或 GitHub Releases
- Linux → 官方发布中目前未发布预构建的 Linux 产物。目前请从源码运行 OpenDesign；Linux 发布工作跟踪于 #4368。

安装后：应用会自动检测你 PATH 上的每个编码代理 CLI，加载 100+ 个功能技能、独立的渲染模板目录和 151 个设计系统，并允许你在入口视图中输入简要说明。

🤖 安装到你的编码代理中（无 UI）

你无需打开 GUI 即可使用 OpenDesign——在 Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi 等中以技能、插件或 MCP 服务器的形式调用它。

如果你通过 DMG 或 Homebrew cask 安装了 macOS 桌面应用，你的 shell
可能仍会将 od 解析为 Apple 内置的 /usr/bin/od 八进制转储工具。在这种
情况下，请打开桌面应用中的 Settings → MCP server 并复制
客户端特定的代码片段；它使用绝对路径，不依赖裸
od 命令。

一行命令安装到你正在使用的代理中：
od mcp install
= claude | codex | reasonix | raven | cursor | copilot | openclaw
| antigravity | pi | vibe | hermes | cline | kimi | kiro
| trae | opencode

基于 curl 设置的托管等效方式：
curl -fsSL https://open-design.ai/install.sh | sh -s

install.sh 是 od mcp install 的轻量 shell 包装器；它的存在是为了让
托管 URL 返回 shell 而不是落地页 HTML 回退，并在你的 shell 解析到非
Open-Design 的 od 二进制文件时快速失败。

macOS / WSL2 用户： /usr/bin/od 是系统八进制转储命令，可能会
遮蔽 OpenDesign 的 od 命令。桌面应用用户应优先使用
Settings → MCP server 代码片段；WSL2 用户应首先遵循
WSL2 设置指南。

然后，在代理内部：

Use open-design to generate a landing page with the Linear design system

在基于文件系统的本地 CLI 运行中，代理会将所选的功能技能或设计模板与你的 DESIGN.md 组合，写入规范项目文件，然后 OpenDesign 预览这些文件。没有文件系统工具的 BYOK/纯 API 运行则返回一个完整的  块。

🐳 使用 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
open http://127.0.0.1:7456

如果浏览器要求提供凭据，请使用 open-design 作为用户名，并使用 deploy/.env 中的
OD_API_TOKEN 值作为密码。这样可以在无需主机网络的情况下，对 Docker 桥接流量进行身份验证。API 客户端可以继续使用 Authorization: Bearer 。

🚀 在 Sealos 上部署

Deploy on Sealos

Sealos App Store 模板会运行已发布的 OpenDesign Docker 镜像，并在公共代理上启用持久化工作区存储和 Basic Auth。对于自定义的公共或共享 Docker 部署，请遵循 deploy/README.md 中的反向代理和 OPEN_DESIGN_ALLOWED_ORIGINS 指南。

🧑‍💻 从源码运行

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

打开 tools-dev 打印的 URL；除非你传入显式端口标志，否则开发端口会动态分配。

Node ~24，pnpm 10.33.x。WSL2 用户请参阅 docs/wsl-setup.md；原生 Windows 用户请参阅 docs/windows-troubleshooting.md。完整快速开始、环境变量和打包构建流程 → QUICKSTART.md。

完整工作流——从需求简报 to 交付物

brief → plugin → direction → design system → artifact → handoff → memory

1. 产品经理提交需求简报。 插件选择器提供落地页 · 路演演示文稿 · 仪表盘 · 社交帖子 · 产品经理规格说明 · OKR 记分卡……
2. 设计师（或智能体）锁定方向。 没有品牌？从 5 个精选方向中选择。已有品牌？拖入截图 / URL → 智能体连接 GitHub、导入 Figma，并整理出可复用的 DESIGN.md。
3. 智能体创建首个交付物。 插件 + 功能技能或设计模板 + DESIGN.md 被绑定在一起。基于文件系统的 CLI 运行会写入规范项目文件，预览会跟随这些文件；不带文件工具的 BYOK/纯 API 运行会返回一个完整的  块。
4. 移交给工程团队。 交付物是真实的 HTML/CSS——将其放入 Cursor、Codex 或 Claude Code，即可继续以代码方式构建。或者直接导出 PPTX / PDF / MP4 给市场团队。
5. OpenDesign 会随着你的使用变得更智能。 你的截图、字体、调色板和已确认的交付物会累积为下一次会话的默认值。更少返工，更少偏移。

从你的编码智能体中使用 OpenDesign

OpenDesign 提供 stdio MCP 服务器 和针对各智能体的 安装脚本。另一个仓库中的任何兼容 MCP 的智能体都可以直接从你本地的 OpenDesign 项目读取文件——tokens CSS、JSX 组件、入口 HTML——作为可按名称查询的结构化 API。智能体始终看到实时文件，而不是过期的导出。

一行安装（支持 16+ CLI）：
bash
od mcp install

然后 agent 就可以：
bash
od project list --json
od files list  --json
od files read
od plugin list --json
od skills list --json

为什么用 MCP？ 每次迭代都导出并重新附加一个 zip 会打断流程。MCP 直接暴露设计源——agent 始终看到实时文件。

对于从零开始的 agent， 安装程序会放置 ~/.config//open-design.json（或平台等效文件）以及一段可复制粘贴的 MCP 片段。Cursor 获得一键 deeplink；Claude Code 获得一行 claude mcp add-json 命令；其他每个 agent 获得符合其配置所需 schema 的 JSON。在 macOS 桌面安装中，优先使用该 Settings 片段，而不是在终端中输入裸的 od mcp install ，因为 /usr/bin/od 可能会在 PATH 中胜出。完整的按 agent 流程 → 桌面应用中的 Settings → MCP server，或 docs/agent-adapters.md。

安全模型。 默认只读，守护进程绑定到 127.0.0.1，SSRF 在代理边缘被阻止。LAN 暴露需要显式的 OD_BIND_HOST 加上 OD_ALLOWED_ORIGINS。无论何种情况，连接器凭据和实时工件预览路由都仅限回环。

内部托管的模型端点。 为防止 SSRF，守护进程默认阻止解析为私有/内部地址范围（RFC1918、链路本地、CGNAT 和云元数据 IP）的提供商基础 URL，并显示 Internal IPs blocked。如果你运行内部托管的网关（例如仅 VPN 可访问的 10.x/192.168.x 地址上的 LiteLLM 或 Ollama），请用 OD_ALLOWED_INTERNAL_HOSTS=,,... 将该主机排除在外——这是一个以逗号或空白分隔的裸主机名或 IP 列表（10.0.0.5、litellm.internal.corp；接受 host:port 或完整 URL 并缩减为其主机名；IPv6 必须加方括号，例如 [fd00::1]）。该允许列表是严格的主动选择加入（默认为空）、精确主机匹配（无子域/子字符串匹配），并且仅适用于你配置的提供商端点（连接测试、模型发现、BYOK 聊天）。它有意不放宽对上游响应中返回的下载 URL 的防护，这些 URL 仍被阻止。格式错误的条目——或不支持的 CIDR 表示法——会被丢弃并发出警告，而不是被静默信任，因此拼写错误绝不会悄悄放宽（或未能放宽）防护。允许某个主机名意味着信任它解析到的任何地址（类似 OD_ALLOWED_ORIGINS）；如果你希望重新检查 DNS 解析后的地址，请改为允许解析后的 IP。

技能与设计模板

100+ 个功能技能随 skills/ 提供。每个都遵循 Agent Skills [SKILL.md][skill] 约定，并提供可复用的 agent 行为、参考或实用工具。可渲染的起始模板单独位于 design-templates/；它们也可以使用 SKILL.md，但它们填充的是设计模板目录，而不是功能技能注册表。
设计模板目录由两种模式支撑：prototype（Web/移动端/桌面端单页产物）和 deck（横向滑动演示文稿）。其他模板涵盖 image、video、audio 以及实用工具界面。scenario 字段按受众对模板进行分组：design · marketing · operation · engineering · product · finance · hr · sale · personal。

| 设计模板 | 模式 | 场景 | 产出内容 |
|---|---|---|---|
| web-prototype | prototype | design | 默认落地页 / 主视觉 |
| saas-landing | prototype | marketing | 主视觉 / 功能 / 定价 / CTA |
| dashboard | prototype | operation | 管理后台 / 分析面板（带侧边栏） |
| mobile-app | prototype | design | iPhone 15 Pro / Pixel 边框应用 |
| mobile-onboarding | prototype | design | 启动页 · 价值主张 · 登录流程 |
| social-carousel | prototype | marketing | 3 卡片 1080×1080 轮播 |
| email-marketing | prototype | marketing | 表格回退安全的品牌邮件 |
| magazine-poster | prototype | marketing | 单页杂志布局 |
| motion-frames | prototype | marketing | 循环 CSS 动效主视觉 |
| sprite-animation | prototype | marketing | 8 位像素动画讲解 |
| pm-spec | prototype | product | PM 规格文档（带目录 + 决策日志） |
| team-okrs | prototype | product | OKR 记分卡 |
| eng-runbook | prototype | engineering | 事故运行手册 |
| finance-report | prototype | finance | 高管财务摘要 |
| hr-onboarding | prototype | hr | 岗位入职计划 |
| guizang-ppt | deck | marketing | 杂志风格 Web PPT（deck 默认） |
| html-ppt- | deck | marketing | 15 个 deck 模板 × 36 个主题（主模板位于 design-templates/html-ppt/） |
| hyperframes | video | marketing | HTML → MP4 动态图形（HeyGen 开源框架） |
| critique | utility | design | 五维自我批判评分表 |
| tweaks | utility | design | AI 生成的调整面板清单 |

完整协议与目录划分 → docs/skills-protocol.md。注册表端点：功能技能使用 GET /api/skills，渲染模板使用 GET /api/design-templates。

设计系统
151 个以 DESIGN.md 为核心的品牌级设计系统包随仓库一同发布。旧版包可能只包含该 Markdown 契约；较新的包还可以携带 manifest.json、编译后的 tokens.css、组件夹具、资源以及来源证据。该目录混合了源自上游的系统与项目自有的新增内容；design-systems/README.md 记录了包的形态与来源。切换一个系统 → 下一次渲染将使用新的令牌。

完整目录（点击展开）

AI 与 LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

开发者工具 — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

生产力 — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

金融科技 — stripe · coinbase · binance · kraken · mastercard · revolut · wise

电子商务 — shopify · airbnb · uber · nike · starbucks · pinterest

媒体 — spotify · playstation · wired · theverge · meta

汽车 — tesla · bmw · ferrari · lamborghini · bugatti · renault

其他 — apple · ibm · nvidia · vodafone · resend · spacex

起始模板 — default（中性现代）· warm-editorial

通过 scripts/sync-design-systems.ts 重新导入该库。添加你自己的品牌 → 将 DESIGN.md 放入 design-systems//。完整指南 → design-systems/README.md。

[acd2]: https://github.com/VoltAgent/awesome-design-md

插件

277 个官方插件以及 183 个可混编的参考示例位于 plugins/_official/。每个条目都是一个可移植的插件目录，以 open-design.json 为锚点，外加其类型所需的载荷：例如用于智能体工作流的 SKILL.md、用于媒体模板的 template.json，或用于设计系统条目的 DESIGN.md。直接跳转到某个类别：

| 类别 | 数量 | 内容 |
|---|---|---|
| scenarios/ | 13 | 完整设计场景 — od-default、od-design-refine、od-figma-migration、od-code-migration、od-react-export、od-nextjs-export、od-vue-export、od-media-generation、od-new-generation、od-tune-collab、od-plugin-authoring、od-share-to-community、od-web-effect-extractor |
| image-templates/ | 45 | 一次性图像提示词 — 编辑类、电影感、产品、人像 |
| video-templates/ | 63 | HyperFrames / Seedance / Veo 动态模板 |
| design-systems/ | 143 | 以插件形式封装的品牌 DESIGN.md |
| atoms/ | 13 | 可复用 UI 片段（按钮、主视觉、KPI 卡片） |
| examples/ | 183 | 可二次创作的参考输出 |

社区插件另见 plugins/community/，发布流程另见 plugins/registry/。

插件能做什么

- 🤖 在任何编码智能体中运行 — Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi……通过智能体已熟知的同一套技能协议。
- 🔁 迁移 Figma / Pencil 工作流 → React、Next.js 或 Vue 源码。参见 od-figma-migration。
- 🛠️ 将现有代码库刷新至品牌规范 — 将插件指向一个 git 仓库 + DESIGN.md，即可获得一个 PR。参见 od-code-migration。
- 💾 持久化自定义工作流 — 团队的可复用模板与内置模板并列存放。

使用插件

插件在 Web UI 与 od CLI 中完全对等 — 使用相同的 /api/plugins 端点，任选适合你的方式。

在桌面 / Web 应用中： 打开 Plugin 页面浏览市场并点击 Install；在项目的 Studio 中，插件会以编辑器芯片的形式出现，点击即可应用（并附带其声明的输入项）。

在命令行中（无需 UI 即可运行 — 这是外部智能体使用的路径）：
bash
od plugin list                       # 列出已安装插件（--task-kind / --mode / --tag 过滤器）
od plugin search "landing page"      # 按关键词搜索
od plugin info od-default            # 查看插件的元数据、输入、能力
od plugin install od-figma-migration # 从注册表安装；也接受 ./local-folder 或 https://… 链接
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default         # 升级
od plugin uninstall od-default       # 卸载

每条命令都支持 --json，因此你可以通过 jq / xargs 将其接入自动化流程。

构建插件

一个 OpenDesign 插件需要 open-design.json，以及其类型所要求的载荷。工作流技能或场景还需要包含 SKILL.md；仅含清单的模板和设计系统条目则使用各自的载荷：

my-plugin/
├── open-design.json    ← 必需：市场元数据 + 输入 + 流水线 + 能力
├── SKILL.md            ← agent-skill/scenario 条目必需；其他插件类型省略
├── README.md           ← 可选：用法、安装、注册表链接
├── preview/            ← 可选：index.html / poster.png（视觉类插件强烈推荐）
└── examples/           ← 可选：具体用例

open-design.json 的核心字段：specVersion（当前为 1.0.0）、name（稳定 ID）、version（semver）、可选的 compat.agentSkills[].path（当条目暴露 Agent Skill 时指向 ./SKILL.md）、od.kind（skill / scenario / atom / bundle）、od.taskKind（new-generation / figma-migration / code-migration / tune-collab）、od.mode（输出界面，例如 prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario）、od.capabilities[]（声明最小权限——受限安装默认仅授予 prompt:inject）、od.inputs[]（应用时参数）。

在本地搭建脚手架并验证：
bash
od plugin scaffold --id my-plugin --title "My Plugin"   # 生成骨架
od plugin validate ./my-plugin                          # 检查清单 / 文件布局
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

完整字段集与运行时契约 → plugins/spec/SPEC.md；使用编码代理开发插件 → plugins/spec/AGENT-DEVELOPMENT.md；可直接复制的最小模板 → plugins/spec/examples/。

贡献插件

1. 将插件文件夹放入 plugins/community/（第三方插件），或者——若要随 OpenDesign 一起打包发布——放入 plugins/_official/ 中对应的层级。
2. 通过验证：od plugin validate、pnpm guard、pnpm --filter @open-design/plugin-runtime typecheck。
3. 使用 plugins/spec/CONTRIBUTING.md 中的模板填写 PR（ID、版本、通道、模式、能力、触发示例；视觉类插件请附上截图 / 预览）。
4. 发布到外部注册表（skills.sh / ClawHub / 独立 GitHub）→ plugins/spec/PUBLISHING-REGISTRIES.md。

插件注册表端点：GET /api/plugins。目录概览 → plugins/README.md（简体中文）。

架构

┌────────────────── 浏览器（Next.js 16）/ Electron 外壳 ──────────────┐
│  聊天 · 文件工作区 · iframe 预览 · 设置 · 导入 · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
│ /api/*                              │
▼                                     ▼
┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
│  本地守护进程（Express+SQLite）  │   ─→ 任意 OpenAI 兼容的 BYOK，
│                                  │       在边缘进行 SSRF 防护
│  /api/skills    /api/design-templates    /api/plugins    │
│  /api/design-systems            │
│  /api/chat (SSE)   /api/proxy/* │
│  /api/projects/:id/files/...    │
│  /api/artifacts/{save,lint}     │
│  /api/import/claude-design      │
│  MCP stdio 服务器                │
└─────────┬───────────────────────┘
│ spawn(cli, [...], { cwd: managed project cwd })
▼
┌──────────────────────────────────────────────────────────────────┐
│  本地运行时定义来自 runtimes/registry.ts；                 │
│  基础注册表包含 27 个定义（包括 byok-opencode），           │
│  由 26 个不同的本地 CLI 可执行文件支撑，因为 byok-opencode 共享 │
│  OpenCode 可执行文件。参见 docs/agent-adapters.md。                     │
│  组合出功能性技能或设计模板 + DESIGN.md；写入文件 │
└──────────────────────────────────────────────────────────────────┘

| 层级 | 技术栈 |
|---|---|
| 前端 | Next.js 16 App Router + React 18 + TypeScript |
| 守护进程 | Node 24 · Express · SSE 流式传输 · better-sqlite3 |
| 存储 | 在更改或记录守护进程存储路径之前，你必须阅读 AGENTS.md → 守护进程数据目录约定。本 README 不得重述该内容。 |
| 预览 | 文件系统运行会渲染规范项目文件；BYOK/纯 API 运行会将一个完整的  块解析为沙箱化的 srcdoc iframe |
| 导出 | HTML（内联）· PDF（浏览器打印）· PPTX（代理驱动）· ZIP · Markdown · MP4（HyperFrames） |
| 桌面端 | Electron 外壳 + 沙箱化渲染器 + sidecar IPC（STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN） |
| 生命周期 | 单一入口点：pnpm tools-dev（start / stop / run / status / logs / inspect / check） |

完整架构 → docs/architecture.md。技能协议 → docs/skills-protocol.md。代理适配器契约 → docs/agent-adapters.md。

路线图
- [x] 守护进程 + 跨 26 个不同编码代理 CLI 可执行文件的 27 个运行时定义 + 技能/设计模板注册表 + 设计系统目录
- [x] Web 应用 + 聊天 + 问题表单 + 5 方向选择器 + 待办进度 + 沙盒预览
- [x] 100+ 功能性技能 · 独立渲染模板目录 · 151 个设计系统包 · 5 种视觉方向 · 5 种设备框架
- [x] SQLite 支持的项目 · 对话 · 消息 · 标签页 · 模板
- [x] 多提供商 BYOK 代理（/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream），支持 OpenAI 兼容预设，包括 Atlas Cloud + SSRF 防护
- [x] Claude Design ZIP 导入（/api/import/claude-design）
- [x] Sidecar 协议 + Electron 桌面端 + IPC 自动化
- [x] 产物 lint API + 5 维自我批判预发射门控
- [x] 0.8.0 — 插件市场基础设施（261 个官方插件、清单规范、按代理安装脚本）
- [x] 0.9.0 — OpenDesign Cloud（内置于应用中的官方模型服务：零配置、一键登录）
- [x] 0.10.0 — 一体化设计工作区：整个创作循环尽在一个窗口（参考 → 素材 → 交互式编辑 → 动效 → 交付）
- [x] 0.11.0 — _The Bazaar_：公开构建——一个社区市场，任何人都可以从中挑选并贡献插件和设计系统
- [x] 0.12.0 — _Brand-backed Design System_：将你已有的品牌转化为可复用、可移植的 DESIGN.md 系统
- [x] 0.13.0 — _Stay in Flow_：原生会话恢复、更快的模型选择，以及直接导出为带截图的 PPTX / PDF
- [x] 已发布的桌面版本 — macOS（Apple Silicon + Intel）+ Windows（x64）
- [ ] 已发布的 Linux 桌面版本（可选通道）— 跟踪于 #4368
- [ ] 评论模式精准编辑 — 部分已发布；可靠的定向修补正在进行中
- [ ] AI 生成的调整面板 UX — 尚未实现
- [ ] npx od init 用于搭建带有 DESIGN.md 的项目
- [ ] 插件 SDK + od plugin {add,list,remove,test,publish} CLI
- [ ] Figma / Pencil → React / Next / Vue 迁移插件（alpha）
- [ ] 刷新现有代码库插件（指向一个 git 仓库 + DESIGN.md）

分阶段交付 → docs/roadmap.md。

社区

每个渠道背后都是真实的人。

- 💬 Discord — 日常聊天、插件分享、提问 → discord.gg/mHAjSMV6gz
- 🐦 X / Twitter — 发布说明、里程碑、幕后花絮 → @OpenDesignHQ
- 🗣️ GitHub Discussions — 深度问答、RFC、“展示你的作品” → Discussions
- 🐛 GitHub Issues — 错误报告、功能请求 → Issues
good-first-issue 和 help-wanted 标签是最容易上手的方式。

贡献

OpenDesign 之所以能持续前进，是因为贡献者们——设计师、工程师、提示词作者——不断加入。许多最常用的技能、设计系统和插件都是由核心团队之外的人编写的。

🎯 从哪里开始（最大杠杆，最小改动）

| 想要发布…… | 如何做 | 位置 |
|---|---|---|
| 一个新的功能性 技能 | 放入一个包含 SKILL.md 的文件夹，可选 assets/ + references/ | skills/ · 规范见 docs/skills-protocol.md |
| 一个新的渲染 设计模板 | 添加一个可渲染的 SKILL.md 包 | design-templates/ |
| 一个新的 设计系统 | 放入一个以 DESIGN.md 为核心的包；需要时添加 manifest.json、tokens.css、组件、资源或来源信息 | design-systems// |
| 一个新的 插件 | 放入 open-design.json + 按类别文件夹放置特定类型的载荷 | plugins/community/ · 规范见 plugins/spec/SPEC.md · 智能体开发指南见 plugins/spec/AGENT-DEVELOPMENT.md |
| 支持一个新的 编码智能体 CLI | 一个运行时定义 + 注册表条目；仅在遇到新的传输格式时添加解析器 | apps/daemon/src/runtimes/defs/ |
| 修复 bug 或打磨 UI | 浏览 good-first-issue 标签 | Issues → |
| 翻译文档 | 更新 README..md 文件 | TRANSLATIONS.md |

🤖 以智能体身份贡献

如果你正是正在阅读此内容的智能体，最快的路径是：
bash
1. Boot locally
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web

2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop    # create a branch and worktree

3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/ test

4. Open the PR
gh pr create --fill

完整的智能体友好贡献流程、代码风格和 PR 标准 → CONTRIBUTING.md（Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย）。

🏅 OpenDesign Fellow 计划
我们正在全球招募 OpenDesign Fellows——Fellows 与核心团队共同塑造产品，在其所在地区正式代表 OpenDesign，并在当地发展社区，同时获得资金支持（每月 1,000 美元）、免费 LLM 额度以及直接审核通道。详情 → MAINTAINERS.md 以及 Discord 上的公告。

维护者

他们承担了大量工作——日常维护、审核和社区支持。

@Nagendhra-web

维护者

@Sid-Qin

维护者

@YOMXXX

维护者

维护者规则、晋升标准以及退出流程 → MAINTAINERS.md（另有 Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย）。

贡献者

感谢每一位参与其中的人——代码、文档、反馈、一个犀利的问题、一项新技能、一套新设计系统。

仓库动态

上方的 SVG 由 .github/workflows/metrics.yml 使用 lowlighter/metrics 每日重新生成。

给我们加星

如果这为你节省了三十分钟，请给它一颗 ★。星星不能付房租——但它们会告诉下一位设计师、智能体和贡献者，这个实验值得他们关注。一次点击，三秒钟，一个真实的信号。

参考与渊源

| 项目 | 角色 |
|---|---|
| Claude Design | 本仓库作为其开源替代方案所对应的闭源产品。 |
| alchaincyf/huashu-design | 设计理念指南针——初级设计师工作流、品牌资产协议、反 AI 垃圾清单、五维评审。 |
| op7418/guizang-ppt-skill | 杂志风格的网页 PPT 技能，原样打包于 design-templates/guizang-ppt/ 下。演示文稿模式的默认选项。 |
| lewislulu/html-ppt-skill | HTML PPT Studio 系列——15 个演示文稿模板、36 个主题、31 种页面布局、动画运行时、磁吸卡片演示者模式。 |
| OpenCoworkAI/open-codesign | 首个开源的 Claude Design 替代方案；我们借鉴的 UX 模式（流式产物循环、沙箱 iframe、实时智能体面板）。 |
| multica-ai/multica | 守护进程 + 适配器架构——PATH 扫描智能体检测，本地守护进程作为唯一特权进程。 |
| VoltAgent/awesome-design-md | 原始 9 节 DESIGN.md 模式及 70 个上游衍生系统的历史来源；当前包可能在该基线之上有所扩展。 |
| bergside/awesome-design-skills | design-systems/ 下新增的 57 个设计技能的来源。 |
| heygen-com/hyperframes | HTML→MP4 动态图形框架，在 OpenDesign 中作为一等公民 hyperframes-html 集成。 |
| [Claude Code skills][skill] | 我们原样采用的 SKILL.md 约定。 |

详细来源 → docs/references.md。

[skill]: https://docs.anthropic.com/en/docs/claude-code/skills

许可证

Apache-2.0。带有各自 LICENSE 文件的打包技能和模板保留其原有许可证，包括 design-templates/guizang-ppt/（MIT，@op7418）、design-templates/html-ppt/（MIT，@lewislulu）以及 skills/web-clone/（MIT，@Jane-xiaoer）。