Open Design

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

Open Design 是当 Anthropic 随 Claude Design 发布的 agent 原生 循环（发现简报、锁定方向、流式输出工件、评审、交付）不再封闭，而是变为一个 由功能技能、渲染设计模板、设计系统和插件组成的文件系统，你笔记本电脑上已有的编码 agent 可以读取、编写和混编。你的 CLI 成为设计引擎，你的笔记本电脑成为工作室，而团队的 DESIGN.md 成为品牌契约。

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

产品概览

快速了解 Open Design 是什么以及它能做什么。从 首页 开始，通过 自动化 编排重复工作流程，在 设计系统 中提炼品牌契约，并通过 插件 和 集成 进行扩展；在任何项目的 工作室 中，同一设计系统会流式输出原型、实时工件、HyperFrames、演示文稿和图片。

核心页面

工作室——一个项目中的多种工件类型

在项目的工作室中，同一设计系统会流式输出多种工件类型：

演示

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

1 · 原型——Web · 桌面 · 移动端

默认输出形式。读取你的 DESIGN.md 并在沙箱 iframe 中渲染的单页 HTML 工件。

入口视图 — 选择一个技能，选择一个设计系统，输入简报。一个界面用于原型、仪表盘、演示文稿、移动应用、杂志页面。	移动端原型 — 像素级精确的 iPhone 15 Pro 边框，多屏幕流程。agent 从不重绘手机框架；共享设备框架位于 assets/frames/。
Web 原型 — 带有滚动条、KPI 和图表的编辑仪表盘。直接从 design-templates/dating-web/ 渲染。	移动应用原型 — 一个三屏游戏化流程，带有 XP 丝带和任务详情。可直接交给 Cursor / Codex / Claude Code 转化为 React/Next/Vue。

2 · 实时工件与仪表盘

实时仪表盘、决策室、KPI 墙——通过调整面板拉取数据的单页工件，可原地编辑。

实时仪表盘 — 一个可编辑的 KPI 墙，其调整面板显示了值得调整的参数。agent 发出清单，iframe 无需重新加载即可重新渲染。	决策室 — 为产品/研究/运营会议准备的多源简报工件。
GitHub 风格仪表盘 — 以实时工件形式展示仓库指标。	Flow 实时仪表盘模板 — 一个特定领域的 KPI 模板，通过当前激活的 DESIGN.md 进行品牌化。

3 · 演示文稿——杂志风格演示、每周更新、Pitch

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

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

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

4 · 图片

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

5 · 视频与 HyperFrames——agent 原生动态图形

HyperFrames 是 HeyGen 的开源、agent 原生视频框架，作为 Open Design 的一等公民集成。agent 编写 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 秒品牌 Sizzle Reel · 16:9 · 音频响应式动态文字	条形图竞赛 · 16:9 · NYT 风格数据信息图
航班地图 · 16:9 · Apple 风格路线展示	4 秒电影级 Logo 结束画面 · 16:9 · 逐片组装 + 光晕	$0 → $10K 金钱计数器 · 9:16 · Apple 风格 hype	网站转视频 · 16:9 · 在 3 个视口处捕获网站

仓库中附带 11 个 HyperFrames 模板 + 39 个 Seedance 提示词。目录缩略图 © HeyGen；框架采用 Apache-2.0 许可证。OD 特定的渲染工作流（组合缓存、沙箱执行规避、MP4 作为芯片）详见 design-templates/hyperframes/。

为什么选择 Open Design

2026 年 4 月，Anthropic 发布了 Claude Design——这是 LLM 首次不再编写散文，而是直接交付设计工件。 它迅速走红。但它仍然是闭源的、仅付费、仅云端、锁定在 Anthropic 的模型、Anthropic 的技能、Anthropic 的界面。没有结账、没有自托管、没有 Vercel 部署、无法替换你自己的 agent。

Open Design (OD) 是开源替代品。相同的循环，相同的工件优先思维模式，没有任何锁定：

• 🤖 Agent 原生，模型无关。 我们不提供 agent。你 PATH 上已有的 claude / codex / cursor-agent / copilot / hermes / kimi 就是设计引擎。一键切换。
• 🧠 默认品牌级。 每次渲染都会读取当前包的 DESIGN.md 作为核心品牌契约。仓库附带 151 个设计系统包；旧版包可能仅包含 Markdown 契约，而较新的包还可以添加 manifest.json、tokens.css、组件、资产和来源证明。放入一个文件夹，选择器就能找到它。
• 🖥️ 本地优先，每层 BYOK。 适用于 macOS（Apple Silicon + Intel）和 Windows（x64）的原生桌面应用。Linux AppImage 在可选版本通道中。产品分析和会话回放需征得同意；经过脱敏的安全和可靠性遥测始终开启。
• 🌍 四个层面可组合。 插件 包含可运行的工作流程 · 功能 技能 包含 agent 行为 · 设计模板 包含渲染蓝图 · 设计系统 包含品牌。所有四个层面都使用可移植、可版本化的目录，任何人都可以编写和发布。
• 🔁 刷新现有代码库。 将 git 仓库 + DESIGN.md 交给 agent，它会将你的真实组件重构为品牌规范。专用插件将 Figma / Pencil 工作流程迁移到 React / Next.js / Vue 代码。
• 🔒 隐私至上。 一切都在你的数据所在位置运行——你的笔记本电脑、团队的服务器、你的 Vercel 项目。当需要网络时，BYOK 代理受到 SSRF 保护。

对比

技能与设计模板

100+ 功能技能位于 skills/ 中。 每个技能遵循 Agent Skills SKILL.md 规范，并提供可复用的 agent 行为、参考或实用工具。可渲染的起始模板单独位于 design-templates/ 中；它们也可能使用 SKILL.md，但会填充设计模板目录而非功能技能注册表。

两个 模式 锚定了设计模板目录：prototype（Web/移动端/桌面单页工件）和 deck（水平滑动演示）。其他模板涵盖 image、video、audio 和实用工具表面。 scenario 字段按受众对模板进行分组：design · marketing · operation · engineering · product · finance · hr · sale · personal。

设计系统

151 个以 DESIGN.md 为中心的品牌级设计系统包 随仓库附带。旧版包可能仅包含该 Markdown 契约；较新的包还可以携带 manifest.json、编译后的 tokens.css、组件夹具、资产和来源证明。目录混合了上游衍生的系统和项目自有添加的内容；切换一个系统 → 下一次渲染使用新的 token。

插件

277 个官方插件以及 183 个可重混的参考示例 位于 plugins/_official/ 中。每个条目是一个可移植的插件目录，以 open-design.json 锚定，并附带其类型所需的负载：例如 SKILL.md 用于 agent 工作流程，template.json 用于媒体模板，或 DESIGN.md 用于设计系统条目。直接跳转到某个类别：

插件能做什么

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

完整工作流程——从简报到工件

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

1. PM 提交一个简报。 插件选择器提供着陆页 · pitch deck · 仪表盘 · 社交媒体帖子 · PM 规范 · OKR 计分卡……
2. 设计师（或 agent）锁定方向。 没有品牌？从 5 个精选方向中选择。有品牌？截图/URL → agent 连接 GitHub、导入 Figma，并将可复用的 DESIGN.md 编码化。
3. agent 创建第一个交付物。 插件 + 功能技能或设计模板 + DESIGN.md 被绑定。基于文件系统的 CLI 运行会写入规范的项目文件，预览随之更新；BYOK/纯 API 运行（无文件工具）会返回一个完整的 <artifact> 块。
4. 交给工程团队。 工件是真正的 HTML/CSS——将其放入 Cursor、Codex 或 Claude Code 中继续作为代码构建。或者直接导出 PPTX / PDF / MP4 给营销团队。
5. Open Design 会随着你的使用而变得更智能。 你的截图、字体、调色板和已确认的工件会累积为下一次会话的默认值。减少返工，减少漂移。

平台兼容性

Open Design 以 技能、CLI 和 MCP 服务器 的形式提供，主流编码 agent 原生使用。安装 OD 后，一条 od mcp install <agent> 命令就能将 MCP 服务器接入该 agent 的配置，然后你可以在任何 agent 中调用相同的工具。

od mcp install <agent> --print 用于预览（干运行）· --uninstall 用于卸载 · 完整列表可通过 od mcp install --help 查看。

没有安装 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。

安全模型

默认只读，守护进程绑定到 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=<host1>,<host2>,... 选择退出该主机——这是一个逗号或空格分隔的裸主机名或 IP 列表（10.0.0.5、litellm.internal.corp；接受 host:port 或完整 URL 并简化为其主机名；IPv6 必须加括号，例如 [fd00::1]）。允许列表是严格选择加入的（默认空），精确主机（无子域/子字符串匹配），并且 仅 适用于你配置的提供者端点（连接测试、模型发现、BYOK 聊天）。它故意 不 放宽对上游响应内返回的下载 URL 的防护，这些 URL 仍被阻止。格式错误的条目——或不受支持的 CIDR 表示法——会被丢弃并发出警告，而不是静默信任，因此拼写错误不会悄悄扩大（或未能扩大）防护。允许列表中的主机名会信任它所解析到的任何内容（如同 OD_ALLOWED_ORIGINS）；如果你希望重新检查 DNS 解析的地址，请改为允许列表中的解析 IP。

路线图

• [x] 守护进程 + 涵盖 25 个不同编码 agent CLI 可执行文件的 26 个运行时定义 + 技能/设计模板注册表 + 设计系统目录
• [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 个官方插件，清单规范，每个 agent 的安装脚本）
• [x] 0.9.0 — Open Design Cloud（内置于应用中的官方模型服务：零配置，一键登录）
• [x] 0.10.0 — 一体化设计工作区：整个创作循环在一个窗口中（参考 → 素材 → 交互式编辑 → 动态 → 交接）
• [x] 0.11.0 — The Bazaar：开放构建——任何人都可以选用和贡献的社区插件和设计系统市场
• [x] 0.12.0 — 品牌驱动的设计系统：将你已有的品牌转变为可复用、可移植的 DESIGN.md 系统
• [x] 0.13.0 — 保持流畅：原生会话恢复、更快的模型选择、直接导出为截图支持的 PPTX / PDF
• [x] 打包的 Electron 构建——macOS（Apple Silicon + Intel）+ Windows（x64）+ Linux AppImage（可选通道）
• [ ] 评论模式精细编辑——部分已发布；可靠的定向修补正在进行中
• [ ] 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）

参考与来源

许可证

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