⚡ Open Design Cloud——官方模型服务。 一次充值，即可在 Open Design 里直接使用 GPT、Claude、Gemini 与 DeepSeek：20+ 旗舰模型、零配置、按真实 token 用量计费。立即体验
🏅 Open Design Fellow 计划正式开放。 如果你也相信设计应该是开放的，欢迎成为 Open Design Fellow，和核心团队一起打磨产品，让更多人参与并定义设计的未来。详情 →
MAINTAINERS.md与 Discord。
官网 · 下载 · Open Design Cloud · Discord · 关注 @OpenDesignHQ
English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย
🎨 本地优先、开源的 Claude Design 替代品。 🖥️ macOS 与 Windows 原生桌面应用。 ⚡ 100+ 功能技能 + 独立渲染模板目录 · ✨ 151 个品牌级设计系统包 · 📦 277 个开箱即用的插件。 🖼️ 可生成 Web · 桌面 · 移动端原型、实时仪表盘 / 工件、演示文稿、图片、视频，以及 HyperFrames 动态图形。🔒 沙箱 iframe 预览 · HTML / PDF / PPTX / MP4 导出。 🤖 运行于 DeepSeek Harness (dsh) · Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity 等 26 个不同的本地 CLI 可执行程序，或通过 BYOK 接入任何 OpenAI 兼容端点。
Open Design 是这样一种产物：Anthropic 随 Claude Design 推出的 Agent 原生循环——发现需求、锁定方向、流式输出工件、评审、交付——不再封闭，而是变成了一个由功能技能、渲染设计模板、设计系统和插件组成的文件系统，你笔记本电脑上已有的编码 Agent 就能读取、编写和混搭。你的 CLI 变成设计引擎，你的笔记本变成工作坊，团队的 DESIGN.md 变成品牌契约。
它也是 Agent 时代的 Figma 替代品——不再在画布上推像素，而是用真实 CSS、真实字体、真实组件交付单页工件，直接导出 HTML / PDF / PPTX / MP4——已经由你的设计系统塑形，已经可以在你日常使用的 Agent 中运行。
快速看懂 Open Design 长什么样、能做什么。从 Home 发起创作，用 Automation 编排重复流程，在 Design System 沉淀品牌契约，靠 Plugin 与 集成 扩展能力；进入任一项目的 Studio，同一套设计系统即可流式产出原型、实时工件、HyperFrame、演示文稿与图片。
 Home——总览入口。选择技能与设计系统，输入需求，一处发起所有创作。 |
 Automation——把重复的设计流程编排成可复用、可定时的自动化任务。 |
 Design System——把团队的 DESIGN.md 沉淀为品牌契约，所有产物据此塑形。
|
 Plugin——浏览、安装并分发工作流插件，按需扩展生成能力。 |
 集成——接入外部系统与 MCP 工具，把 Open Design 用到任意 IDE、脚本与自动化中。 |
进入某个项目的 Studio，同一套设计系统可流式产出多种类型的工件：
 原型——读取你的设计系统、在沙箱 iframe 中渲染的单页 HTML 工件，可即时预览、下载源码。 |
 HyperFrame——程序化动效与动态图形，渲染为真实 MP4（如 1920×1080 · 30fps）。 |
 演示文稿——可逐页预览、键盘翻页、导出 PPTX / PDF 的 pitch deck。 |
 图片——品牌级图片与视觉素材，支持高分辨率生成与下载。 |
Open Design 通过两种方式连接主流编码 Agent：可由 Agent 调用的技能、CLI 和 MCP，以及由 OD 直接启动 Agent 的原生运行时适配器。DeepSeek Harness 通过官方
dshCLI 作为一等原生运行时，支持结构化流式输出、模型发现、取消与会话恢复。
| 编码 Agent / 平台 | 状态 | 快速接入 |
|---|---|---|
| Claude Code | ✅ 支持 | od mcp install claude |
| 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，再在 Open Design 中选择它，或运行 od agent setup deepseek-harness 安装/修复 OD 连接组件。MCP 集成可用 od mcp install <agent> --print 干跑预览 · --uninstall 卸载 · 完整清单 od mcp install --help。
未安装任何 CLI？ POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream 的 BYOK 代理提供同样的循环（无需 spawn 进程）——粘贴 baseUrl + apiKey + model，支持 OpenAI、Anthropic、Azure OpenAI、Google Gemini、Ollama、LM Studio、vLLM 或任何 OpenAI 兼容端点。每个目标的 SSRF 防护在守护进程边缘拦截内网 IP / link-local / CGNAT。
运行时定义位于 apps/daemon/src/runtimes/defs/，并在 runtimes/registry.ts 注册；只有新的 wire format 才需要增加 parser——参见 docs/agent-adapters.md。
四大核心产品类别，全部由笔记本电脑上运行的编码 Agent 渲染。点击缩略图查看实际示例。
默认输出面。读取你的 DESIGN.md 并在沙箱 iframe 中渲染的单页 HTML 工件。
 入口视图——选择技能、选择设计系统、输入需求。一个界面承载原型、仪表盘、演示文稿、移动应用、杂志页面。 |
 移动端原型——像素级精确的 iPhone 15 Pro 外框、多屏流程。Agent 不会重绘手机外框；共享设备边框位于 assets/frames/。
|
 Web 原型——带滚动条、KPI、图表的编辑类仪表盘。直接从 design-templates/dating-web/ 渲染。
|
 移动端应用原型——三屏游戏化流程，含 XP 绶带和任务详情。可直接交付给 Cursor / Codex / Claude Code 转为 React/Next/Vue。 |
实时仪表盘、决策室、KPI 大屏——单页工件通过调参面板拉取数据，原地可编辑。
 实时仪表盘——可编辑的 KPI 大屏，调参面板暴露值得调整的参数。Agent 输出一份 manifest，iframe 无需刷新即可重新渲染。 |
 决策室——面向产品 / 研究 / 运营会议的多源简报工件。 |
 GitHub 风格仪表盘——以实时工件形式展示仓库指标。 |
 Flow 实时仪表盘模板——领域专属 KPI 模板，通过当前激活的 DESIGN.md 品牌化。
|
 Deck 模式 (guizang-ppt)——杂志版式、WebGL 主视觉、P0/P1/P2 清单。从 op7418/guizang-ppt-skill 完整打包，保留原始许可证。
|
 瑞士国际风格 Deck——网格锚定、单色强调。15 套 Deck 模板和 36 个主题之一，位于 design-templates/html-ppt-*/。
|
每套 Deck 均可导出为 HTML（单文件，内联资源）、PDF（浏览器打印，Deck 感知）、PPTX（Agent 驱动的技能）、ZIP（归档）或 Markdown。
 城市美食地图插画 手绘编辑风格旅行海报 |
 电影级电梯场景 单帧编辑级静态画面 |
 赛博朋克肖像 个人头像——霓虹面部文字 |
 3D 石质阶梯 石刻信息图 |
 魅力人像 编辑级棚拍 |
93 个可复刻提示词位于 prompt-templates/——预览缩略图、完整提示词、目标模型、宽高比和来源归属。一键将需求放入编辑器。
HyperFrames 是 HeyGen 的开源 Agent 原生视频框架，在 Open Design 中作为一等公民集成。Agent 编写 HTML + CSS + GSAP，HyperFrames 通过 headless 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 · 三视口截取网站 |
11 个 HyperFrames 模板 + 39 个 Seedance 提示词随仓库一起发布。目录缩略图 © HeyGen，框架 Apache-2.0。OD 专属渲染流程（合成缓存、sandbox-exec 变通方案、MP4-as-chip）详见 design-templates/hyperframes/。
2026 年 4 月，Anthropic 发布了 Claude Design——LLM 第一次不再写文章，而是直接交付设计工件。 它迅速传播。然而它始终闭源、仅付费、仅云端，锁定 Anthropic 的模型、Anthropic 的技能、Anthropic 的表面。没有 Checkout，没有自托管，没有 Vercel 部署，不能换成你自己的 Agent。
Open Design (OD) 是开源替代品。同样的循环，同样的工件优先心智模型，没有任何锁定：
- 🤖 Agent 原生，不绑定模型。 我们不发布 Agent。你
PATH上已有的claude/codex/cursor-agent/copilot/hermes/kimi就是设计引擎。一键切换。 - 🧠 默认品牌级。 每次渲染都把当前包的
DESIGN.md作为核心品牌契约读取。仓库随附 151 个设计系统包；旧包可以仅含DESIGN.md，新包还可加入manifest.json、tokens.css、组件、资产和来源信息。放入文件夹，选择器自动识别。 - 🖥️ 本地优先，每一层都可 BYOK。 原生桌面应用保持本地优先，不发生云端往返。在描述 daemon 数据路径之前，必须阅读仓库根目录
AGENTS.md中的 Daemon data directory contract。 - 🌍 四个平面上可组合。 插件承载可运行的工作流 · 功能技能承载 Agent 行为 · 设计模板承载渲染蓝图 · 设计系统承载品牌。四者都采用可移植、可版本控制的目录，任何人都可以编写和发布。
- 🔁 刷新现有代码库。 将
git仓库 +DESIGN.md交给 Agent，它就能将你的真实组件重构到品牌规范。专门的插件用于将 Figma / Pencil 工作流迁移到 React / Next.js / Vue 代码。 - 🔒 隐私信条。 一切都运行在持有你数据的环境中——你的笔记本、你团队的服务器、你的 Vercel 项目。需要网络时有 SSRF 防护的 BYOK 代理。
| Claude Design | Figma | Lovable / v0 / Bolt | Open Design | |
|---|---|---|---|---|
| 开源 | ❌ | ❌ | ❌ | ✅ Apache-2.0 |
| 自托管 / 桌面 | ❌ | ❌ | ❌ | ✅ macOS + Windows + Docker |
| 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 · 任意兼容端点 |
使用 Open Design 最快的方式。无需 Node、pnpm 或克隆仓库。
- macOS（Apple Silicon · Intel x64）→ open-design.ai 或 GitHub Releases
- Windows（x64）→ open-design.ai 或 GitHub Releases
- Linux（AppImage，可选通道）→ GitHub Releases
安装后：应用自动检测 PATH 上的所有编码 Agent CLI，加载 100+ 功能技能、独立渲染模板目录和 151 个设计系统包，打开后即可在入口视图中输入需求。
你可以在完全不打开 GUI 的情况下使用 Open Design——在 Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi 等中作为技能、插件或 MCP 服务器调用。
# 一行命令安装到你正在使用的 Agent：
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity
# | pi | vibe | hermes | cline | kimi | kiro | trae | opencode然后在 Agent 内：
> Use open-design to generate a landing page with the Linear design system
在有文件系统的本地 CLI 运行中，Agent 会将选中的功能技能或设计模板与 DESIGN.md 组合，写入规范项目文件，Open Design 直接预览这些文件。没有文件系统工具的 BYOK/纯 API 运行则返回一个完整的 <artifact> 块。
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
# 打开 http://localhost:7456
Sealos App Store 模板会运行已发布的 Open Design 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。Windows 用户请参见 docs/windows-troubleshooting.md。完整的快速开始指南、环境变量、Nix flake 和打包构建流程 → QUICKSTART.zh-CN.md。
需求 → 插件 → 方向 → 设计系统 → 工件 → 交付 → 记忆
- PM 提交需求。 插件选择器提供落地页 · 路演 Deck · 仪表盘 · 社交媒体帖 · PM 规范 · OKR 记分卡……
- 设计师（或 Agent）锁定方向。 没有品牌？从 5 个精选方向中选择。有品牌？放入截图 / URL → Agent 连接 GitHub、导入 Figma、编纂可复用的
DESIGN.md。 - Agent 创建首个交付物。 插件 + 功能技能或设计模板 +
DESIGN.md已绑定。有文件系统的 CLI 运行写入规范项目文件，预览随文件更新；没有文件工具的 BYOK/纯 API 运行返回一个完整的<artifact>块。 - 交付给工程团队。 工件是真实的 HTML/CSS——放入 Cursor、Codex 或 Claude Code 中继续作为代码开发。或直接导出 PPTX / PDF / MP4 交给营销团队。
- Open Design 越用越聪明。 你的截图、字体、色板和已确认的工件会累积为下次会话的默认值。更少的重复劳动，更少的偏差。
Open Design 提供 stdio MCP 服务器和逐 Agent 的安装脚本。任何位于其他仓库的 MCP 兼容 Agent 都可以直接读取你本地 Open Design 项目的文件——token CSS、JSX 组件、入口 HTML——作为按名称查询的结构化 API。Agent 始终看到实时文件，而非过期的导出。
# 一行命令安装（支持 16+ CLI）：
od mcp install <agent>
# 然后，Agent 可以：
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json为什么选择 MCP？ 每次迭代都导出并重新附加 zip 会打断流程。MCP 直接暴露设计源文件——Agent 始终看到实时文件。
对于从零开始的 Agent，安装器会放置 ~/.config/<agent>/open-design.json（或平台等效路径）以及可复制粘贴的 MCP 代码片段。Cursor 获得一键深层链接；Claude Code 获得 claude mcp add-json 一行命令；其他所有 Agent 获得其配置所需 schema 格式的 JSON。完整的逐 Agent 流程 → 桌面应用中的设置 → MCP 服务器，或 docs/agent-adapters.md。
安全模型。 默认只读，守护进程绑定到 127.0.0.1，SSRF 在代理边缘拦截。局域网暴露需要 OD_BIND_HOST 显式启用加 OD_ALLOWED_ORIGINS。连接器凭证和实时工件预览路由无论如何都保持仅本地回环。
100+ 个功能技能位于 skills/。它们遵循 Agent Skills SKILL.md 约定，提供可复用的 Agent 行为、参考资料或工具。可渲染的启动模板单独位于 design-templates/；它们也可以使用 SKILL.md，但进入设计模板目录，而不是功能技能注册中心。
两种模式构成设计模板目录主线：prototype（Web/移动端/桌面单页工件）和 deck（横向滑动演示文稿）。其他模板覆盖 image、video、audio 与 utility 表面。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-bit 像素动画讲解 |
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 OSS 框架） |
critique |
utility | design | 五维自评记分表 |
tweaks |
utility | design | AI 输出的调参面板 manifest |
完整协议与目录分工 → docs/skills-protocol.md。注册端点：功能技能使用 GET /api/skills，渲染模板使用 GET /api/design-templates。
151 个以 DESIGN.md 为核心的品牌级设计系统包随仓库发布。旧包可以只有这份 Markdown 契约；新包还可包含 manifest.json、编译后的 tokens.css、组件样例、资源和来源证据。目录同时包含基于上游整理的系统与项目自有补充；design-systems/README.md 记录了包结构与来源。切换系统 → 下次渲染即使用新 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
通过 scripts/sync-design-systems.ts 重新导入库。添加自有品牌 → 将 DESIGN.md 放入 design-systems/<brand>/。完整指南 → design-systems/README.md。
277 个官方插件和 183 个可混搭参考示例位于 plugins/_official/。每个条目都是以 open-design.json 为核心的可移植插件目录，并带有类型所需的载荷，例如 Agent 工作流的 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/ 注册发布流程。
- 🤖 在任何编码 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。 - 💾 持久化自定义工作流——你团队的可复用模板与发布的模板并列。
插件在 Web UI 和 od CLI 两条路上完全对等——同一套 /api/plugins 端点，挑顺手的用。
在桌面 / Web 应用里：打开 Plugin 页浏览 marketplace，点 Install；进入项目 Studio 后，插件以 composer chip 的形式出现，点击即应用（带上它声明的输入参数）。
在命令行里（不打开 UI 也能跑，外部 Agent 走的就是这条）：
od plugin list # 列出已安装插件（--task-kind / --mode / --tag 过滤）
od plugin search "landing page" # 按关键词搜
od plugin info od-default # 看某个插件的元数据、输入、权限
od plugin install od-figma-migration # 从注册中心装；也支持 ./本地文件夹 或 https://… 直链
od plugin apply od-default --input brief="给我们的种子轮做一页 pitch"
od plugin upgrade od-default # 升级
od plugin uninstall od-default # 卸载所有命令都支持 --json，方便用 jq / xargs 串进自动化脚本。
Open Design 插件必须包含 open-design.json 以及其类型所需的载荷。工作流技能或场景还包含 SKILL.md；仅 manifest 的模板与设计系统条目则使用各自的载荷：
my-plugin/
├── open-design.json ← 必需：marketplace 元数据 + 输入 + 流水线 + 权限
├── SKILL.md ← Agent Skill/场景条目必需；其他插件类型可省略
├── 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[]（应用时的参数）。
脚手架 + 本地验证：
od plugin scaffold --id my-plugin --title "My Plugin" # 生成骨架
od plugin validate ./my-plugin # 校验 manifest / 文件布局
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck字段全集与运行时契约 → plugins/spec/SPEC.md；用编码 Agent 自动开发插件 → plugins/spec/AGENT-DEVELOPMENT.md；可复制的最小模板 → plugins/spec/examples/。
- 把插件文件夹放到
plugins/community/（第三方插件），或——若想随 Open Design 一起内置——放到对应 tier 的plugins/_official/。 - 跑通校验：
od plugin validate、pnpm guard、pnpm --filter @open-design/plugin-runtime typecheck。 - 按
plugins/spec/CONTRIBUTING.md的模板填 PR（ID、版本、lane、mode、权限、触发示例，视觉类附截图 / 预览）。 - 想发布到外部注册中心（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 })
▼
┌──────────────────────────────────────────────────────────────────────┐
│ Local runtime definitions come from runtimes/registry.ts; │
│ the base registry has 27 definitions (including byok-opencode), │
│ backed by 26 distinct local CLI executables because byok-opencode shares │
│ the OpenCode executable. See docs/agent-adapters.md. │
│ 组合功能技能或设计模板 + DESIGN.md，并将规范文件写入磁盘 │
└──────────────────────────────────────────────────────────────────────┘
| 层 | 技术栈 |
|---|---|
| 前端 | Next.js 16 App Router + React 18 + TypeScript |
| 守护进程 | Node 24 · Express · SSE 流式传输 · better-sqlite3 |
| 存储 | 在修改或记录 daemon 存储路径之前，必须阅读仓库根目录 AGENTS.md 中的 Daemon data directory contract。本 README 不得复述该契约。 |
| 预览 | 文件系统运行渲染规范项目文件；BYOK/纯 API 运行将一个完整 <artifact> 块解析到沙箱 srcdoc iframe |
| 导出 | HTML（内联）· PDF（浏览器打印）· PPTX（Agent 驱动）· 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。Agent 适配器契约 → docs/agent-adapters.md。
- 守护进程 + 26 个不同 CLI 可执行程序上的 27 个 runtime 定义 + 技能/设计模板注册中心 + 设计系统目录
- Web 应用 + 聊天 + 问题表单 + 5 方向选择器 + 待办进度 + 沙箱预览
- 100+ 功能技能 · 独立渲染模板目录 · 151 个设计系统包 · 5 视觉方向 · 5 设备外框
- SQLite 支撑的项目 · 会话 · 消息 · 标签页 · 模板
- 多供应商 BYOK 代理（
/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream）+ SSRF 防护 - Claude Design ZIP 导入（
/api/import/claude-design） - Sidecar 协议 + Electron 桌面 + IPC 自动化
- 工件 Lint API + 五维自评预输出门控
- 0.8.0——插件市场基础设施（261 个官方插件、manifest 规范、逐 Agent 安装脚本）
- 打包 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）
分阶段交付 → docs/roadmap.md。
每个渠道背后都是真实的人。
- 💬 Discord——日常聊天、插件分享、提问 → discord.gg/mHAjSMV6gz
- 🐦 X / Twitter——发版说明、里程碑、幕后 → @OpenDesignHQ
- 🗣️ GitHub Discussions——深度问答、RFC、"展示你的作品" → Discussions
- 🐛 GitHub Issues——Bug 报告、功能请求 → Issues
good-first-issue 和 help-wanted 标签是最简单的入门方式。
Open Design 之所以持续前进，是因为贡献者——设计师、工程师、提示词作者——不断出现。许多最常用的技能、设计系统和插件都由核心团队以外的人编写。
| 想要交付…… | 怎么做 | 在哪里 |
|---|---|---|
| 一个新的技能 | 放入包含 SKILL.md + assets/ + references/ 的文件夹 |
skills/ · 规范在 docs/skills-protocol.md |
| 一个新的设计系统 | 放入以 DESIGN.md 为核心的包；按需添加 manifest.json、tokens.css、组件、资产或来源信息 |
design-systems/<brand>/ |
| 一个新的插件 | 在分类文件夹下放入 open-design.json + 对应类型的载荷 |
plugins/community/ · 规范在 plugins/spec/SPEC.md · Agent 开发指南在 plugins/spec/AGENT-DEVELOPMENT.md |
| 支持新的编码 Agent CLI | 一个运行时定义 + 注册项；仅新 wire format 需要 parser | apps/daemon/src/runtimes/defs/ |
| 修复 Bug 或打磨 UI | 浏览 good-first-issue 标签 |
Issues → |
| 翻译文档 | 更新 README.<lang>.md 文件 |
TRANSLATIONS.md |
如果你就是正在阅读这段文字的 Agent，最快的路径是：
# 1. 本地启动
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web
# 2. 找到一个 good-first-issue 并分配给自己
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number> # 创建分支和 worktree
# 3. 做出改动，运行检查
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test
# 4. 提交 PR
gh pr create --fill完整的 Agent 友好贡献流程、代码风格和 PR 标准 → English（Deutsch · Français · 简体中文 · 日本語 · Português）。
我们正在全球招募 Open Design Fellow——付费维护者，$1,000 / MR 免费 LLM 额度，官方授权在你所在地区推动增长，以及核心团队审查通道。详情 → MAINTAINERS.md 和 Discord 上的公告。
他们在日常维护、review 和社区支持里撑起了很多关键工作。
 @Nagendhra-web Maintainer |
 @Sid-Qin Maintainer |
维护者规则、晋升标准和退出协议 → MAINTAINERS.md（另有 Deutsch · Français · 简体中文 · 日本語 · Português）。
感谢每一位参与者——代码、文档、反馈、一个精准的 Issue、一个新技能、一个新设计系统。
上方 SVG 由 .github/workflows/metrics.yml 使用 lowlighter/metrics 每日重新生成。
如果这为你节省了三十分钟，请给一个 ★。Star 不能当饭吃——但它告诉下一位设计师、Agent 和贡献者，这个实验值得他们关注。一次点击，三秒钟，真实的信号。
| 项目 | 角色 |
|---|---|
| Claude Design | 本仓库作为开源替代品所对标的闭源产品。 |
alchaincyf/huashu-design |
设计哲学指南针——初级设计师工作流、品牌资产协议、反 AI 泛滥清单、五维评审。 |
op7418/guizang-ppt-skill |
杂志风格 Web PPT 技能，完整打包在 design-templates/guizang-ppt/ 下。Deck 模式默认技能。 |
lewislulu/html-ppt-skill |
HTML PPT Studio 系列——15 套 Deck 模板，36 个主题，31 种页面布局，动画运行时，磁力卡片演示模式。 |
OpenCoworkAI/open-codesign |
首个开源 Claude Design 替代品；我们借鉴的 UX 模式（流式工件循环、沙箱 iframe、实时 Agent 面板）。 |
multica-ai/multica |
守护进程 + 适配器架构——PATH 扫描 Agent 检测、本地守护进程作为唯一特权进程。 |
VoltAgent/awesome-design-md |
最初 9 节 DESIGN.md schema 和 70 个上游衍生系统的历史来源；当前包可在此基础上扩展。 |
bergside/awesome-design-skills |
design-systems/ 下新增的 57 个设计技能的来源。 |
heygen-com/hyperframes |
HTML→MP4 动态图形框架，在 Open Design 中作为 hyperframes-html 一等公民集成。 |
| Claude Code skills | 我们原样采用的 SKILL.md 约定。 |
详细溯源 → docs/references.md。
Apache-2.0。打包的 design-templates/guizang-ppt/ 保留其原始 LICENSE（MIT，@op7418）。打包的 design-templates/html-ppt/ 保留其原始 LICENSE（MIT，@lewislulu）。