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、演示文稿和图片。

核心页面

首页 — 总览入口。选择一个技能和一个设计系统，输入简报，从一个地方启动所有操作。

自动化 — 将重复的设计工作流程编排为可复用、可计划的自动化任务。	设计系统 — 将团队的 DESIGN.md 提炼为塑造每个输出的品牌契约。
插件 — 浏览、安装和分发工作流程插件，按需扩展生成能力。	集成 — 连接外部系统和 MCP 工具，从任何 IDE、脚本或自动化中使用 Open Design。

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

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

原型 — 读取你的设计系统并在沙箱 iframe 中渲染的单页 HTML 工件，可即时预览并下载源码。	HyperFrame — 程序化动态和动画图形，渲染为真实的 MP4（例如 1920×1080 · 30fps）。
演示文稿 — 可翻页、键盘导航、导出为 PPTX / PDF 的 pitch deck。	图片 — 品牌级图片和视觉资产，支持高分辨率生成和下载。

演示

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

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

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

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

2 · 实时工件与仪表盘

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

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

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

杂志风格演示 (guizang-ppt) 演示文稿模式 (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 用于音频层。

SaaS 推广 30 秒 SaaS 产品推广 · 16:9 · UI 3D 展示	TikTok 卡拉OK 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 保护。

对比

	Claude Design	Figma	Lovable / v0 / Bolt	Open Design
开源	❌	❌	❌	✅ Apache-2.0
自托管 / 桌面	❌	❌	❌	✅ macOS + Windows + Docker + Vercel web
Agent 原生（在你的 CLI 中运行）	仅 Anthropic	❌	仅云端 agent	✅ 25 个 CLI + BYOK
品牌级 DESIGN.md	专有	Theme JSON	受限 token	✅ 已附带 151 个系统
技能 / 插件 / 模板	封闭	插件商店	封闭	✅ 100+ 功能技能 · 渲染模板 · 277 个插件
HyperFrames (HTML→MP4)	❌	❌	❌	✅ 一等公民
刷新现有仓库以匹配品牌	❌	❌	❌	✅ 通过 agent + DESIGN.md
最低费用	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · 任何兼容端点

技能与设计模板

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。

设计模板	模式	场景	产出内容
web-prototype	prototype	design	默认着陆页 / 英雄区
saas-landing	prototype	marketing	英雄区 / 功能 / 定价 / 行动号召
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（演示文稿默认）
html-ppt-*	deck	marketing	15 个演示模板 × 36 个主题（主模板在 design-templates/html-ppt/）
hyperframes	video	marketing	HTML → MP4 动态图形（HeyGen 开源框架）
critique	utility	design	五维自我评审评分表
tweaks	utility	design	AI 发出的调整面板清单

设计系统

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

完整目录（点击展开）

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

插件

277 个官方插件以及 183 个可重混的参考示例 位于 plugins/_official/ 中。每个条目是一个可移植的插件目录，以 open-design.json 锚定，并附带其类型所需的负载：例如 SKILL.md 用于 agent 工作流程，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	可重混的参考输出

插件能做什么

• 🤖 在任何编码 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 中调用相同的工具。

编码 agent / 平台	状态	一行 MCP 服务器安装命令
Claude Code	✅ 支持	od mcp install claude
Codex CLI	✅ 支持	od mcp install codex
DeepSeek Reasonix	✅ 支持	od mcp install reasonix
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

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。

路线图

• 守护进程 + 涵盖 25 个不同编码 agent CLI 可执行文件的 26 个运行时定义 + 技能/设计模板注册表 + 设计系统目录
• Web 应用 + 聊天 + 问题表单 + 5 方向选择器 + 待办进度 + 沙箱预览
• 100+ 功能技能 · 独立的渲染模板目录 · 151 个设计系统包 · 5 个视觉方向 · 5 个设备框架
• 基于 SQLite 的项目 · 对话 · 消息 · 标签页 · 模板
• 多提供者 BYOK 代理（/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream），包含 OpenAI 兼容预设（包括 Atlas Cloud）+ SSRF 防护
• Claude Design ZIP 导入（/api/import/claude-design）
• Sidecar 协议 + Electron 桌面 + IPC 自动化
• 工件 lint API + 5 维自我评审预发布门控
• 0.8.0 — 插件市场基础设施（261 个官方插件，清单规范，每个 agent 的安装脚本）
• 0.9.0 — Open Design Cloud（内置于应用中的官方模型服务：零配置，一键登录）
• 0.10.0 — 一体化设计工作区：整个创作循环在一个窗口中（参考 → 素材 → 交互式编辑 → 动态 → 交接）
• 0.11.0 — The Bazaar：开放构建——任何人都可以选用和贡献的社区插件和设计系统市场
• 0.12.0 — 品牌驱动的设计系统：将你已有的品牌转变为可复用、可移植的 DESIGN.md 系统
• 0.13.0 — 保持流畅：原生会话恢复、更快的模型选择、直接导出为截图支持的 PPTX / PDF
• 打包的 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）

参考与来源

项目	角色
Claude Design	本仓库作为开源替代品的闭源产品。
alchaincyf/huashu-design	设计哲学指南——初级设计师工作流程、品牌资产协议、反 AI 垃圾检查清单、五维评审。
op7418/guizang-ppt-skill	杂志风格 Web PPT 技能，原样打包在 design-templates/guizang-ppt/ 下。演示文稿模式的默认设置。
lewislulu/html-ppt-skill	HTML PPT Studio 家族——15 个演示模板、36 个主题、31 个页面布局、动画运行时、磁卡演示者模式。
OpenCoworkAI/open-codesign	首个开源 Claude Design 替代品；我们借用的 UX 模式（流式工件循环、沙箱 iframe、实时 agent 面板）。
multica-ai/multica	守护进程 + 适配器架构——PATH 扫描 agent 检测，本地守护进程作为唯一特权进程。
VoltAgent/awesome-design-md	最初 9 节 DESIGN.md 模式和 70 个上游衍生系统的历史来源；当前包可能扩展该基线。
bergside/awesome-design-skills	添加到 design-systems/ 下的 57 个设计技能来源。
heygen-com/hyperframes	HTML→MP4 动态图形框架，作为 Open Design 中的一等公民 hyperframes-html 集成。
Claude Code skills	我们直接采用的 SKILL.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）。