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

OpenDesign：首个协作式 AI 设计智能体工作区

✨ OpenDesign Go 与我们一起庆祝 GitHub 10 万 star — Go 额度翻倍：首月 $8，符合条件的 Design Plan 模型每月最高可获 $120 额度。这些额度可用于 10+ 模型，包括 GPT-6 Luna、DeepSeek V4.1 Flash、GLM-5.3 Flash-X 和 MiMo V2.6 Flash。所有个人套餐都包含 API 访问权限，可用于 Codex、Claude Code、DSH、OpenCode 等。

Website · Download · OpenDesign Cloud · Discord · Follow @OpenDesignHQ

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

OpenDesign 是什么

OpenDesign 是首个协作式 AI 设计智能体工作区。先写一份需求简述，然后用你的编码智能体或 OpenDesign Cloud 做出原型，并让它遵循你的设计系统。把原型分享给团队收集反馈，再让智能体在同一个项目里继续打磨。
这套工作流开放且可扩展。OpenDesign 采用 Apache 2.0 协议，为团队提供技能、设计模板、设计系统和插件，你可以查看它们，并按自己的流程调整。

产品导览

核心页面

Home — start with a brief or an example.

All projects — revisit design systems, media, and prototypes.

Design Systems — inspect brand assets and refine them with an agent.

Plugins — find skills and launch them with Try it.

Studio — 在同一个项目里创建与打磨

Prototype — build and refine interactive web experiences with your agent and live preview.

Slides — create decks, review slides and speaker notes, and export when ready.

Image — generate visual assets from the conversation, inspect the result, then download or open it.

HyperFrames — 用你的智能体制作动效图，导出为 MP4。观看视频。

平台兼容性

OpenDesign 连接主流编程智能体有两种方式：面向消费 OD 的智能体，提供技能、命令行和 MCP；面向 OD 直接启动的智能体，提供原生运行时适配器。DeepSeek Harness 通过官方 dsh 命令行提供一等原生运行时，支持结构化流式输出、模型发现、取消和会话恢复。

| 编程智能体 / 平台 | 状态 | 快速配置 |
| 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 命令行，然后在 OpenDesign 里选中它，或者运行 od agent setup deepseek-harness 来安装/修复 OD 的连接组件。MCP 集成方面：od mcp install <agent> --print 做试运行预览 · --uninstall 卸载 · 用 od mcp install --help 看完整列表。

¹ 目前只有 macOS 和 Windows 支持为 Claude Desktop 自动配置 MCP。

还没装命令行？ 用 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，配上你自己的 key 和兼容 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 墙 —— 单页产物，通过 tweaks 面板拉数据，就地保持可编辑。

实时仪表盘 — 一面可编辑的 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 石阶演进凿石质感信息图 Glamorous portraitEditorial studio shot

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 做音频层。

30s SaaS product promo · 16:9 · UI 3D reveals TikTok karaoke talking-head · 9:16 · TTS + word-synced captions 30s brand sizzle reel · 16:9 · audio-reactive kinetic type Bar chart race · 16:9 · NYT-style data infographic

Flight map · 16:9 · Apple-style route reveal 4s cinematic logo outro · 16:9 · piece-by-piece assembly + bloom $0 → $10K money counter · 9:16 · Apple-style hype Website-to-video · 16:9 · captures the site at 3 viewports

仓库自带 11 个 HyperFrames 模板 + 39 条 Seedance 提示词。目录缩略图 © HeyGen；框架采用 Apache-2.0 协议。OD 专属的渲染工作流（composition cache、sandbox-exec workaround、MP4-as-chip）详见 design-templates/hyperframes/。

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

为什么选 OpenDesign

- 🤖 智能体原生，模型无关。 我们不提供智能体。你 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 不得重复该内容。
- 🌍 四个平面皆可组合。 插件承载可运行的工作流 · 功能性技能承载智能体行为 · 设计模板承载渲染蓝图 · 设计系统承载品牌。四者都用可移植、可版本化的目录，任何人都能编写和发布。
- 🔁 刷新现有代码库。 把 git 仓库 + DESIGN.md 交给智能体，它就会按品牌规范重构你真实的组件。
- 🔒 隐私源于信念。 项目可以在本地运行，也可以部署在你自己的环境里。云端模型和 OpenDesign Cloud 的请求会发往对应服务。BYOK 代理内置 SSRF 防护。

快速开始

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

使用 OpenDesign 最快的方式。不用 Node，不用 pnpm，不用 clone。
- macOS（Apple Silicon · Intel x64）→ open-design.ai 或 GitHub Releases
- Windows（x64）→ open-design.ai 或 GitHub Releases
- Linux → 官方 release 目前没有发布预编译的 Linux 产物。眼下请从源码运行 OpenDesign；Linux 版本的工作在 #4368 跟进。

安装完成后：应用会自动检测 PATH 上所有 coding-agent 命令行，加载 100+ 个可用技能、独立的渲染模板目录，以及 151 套设计系统，你可以在入口视图里直接输入需求简述。

🤖 安装到你的 coding agent（无 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 命令。

One-line install into the agent you're using:
od mcp install <agent>
<agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw
| antigravity | pi | vibe | hermes | cline | kimi | kiro
| trae | opencode

Hosted equivalent for curl-based setup:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>

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 setup guide。

然后，在 agent 里输入：

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

在基于文件系统的本地命令行运行中，agent 会把选中的可用技能或设计模板与你的 DESIGN.md 组合起来，写出规范的项目文件，OpenDesign 再预览这些文件。如果是不带文件系统工具的 BYOK／纯 API 运行，则改为返回一个完整的 <artifact> 块。

🐳 用 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 网桥流量就能通过认证，不必改用 host 网络。API 客户端仍可继续使用 Authorization: Bearer <OD_API_TOKEN>。

🚀 在 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。

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

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

1. 产品经理提交需求简报。 插件选择器提供落地页 · 路演 PPT · 仪表盘 · 社交帖子 · 产品需求文档 · OKR 记分卡……
2. 设计师（或智能体）锁定方向。 没有品牌？从 5 个精选方向里挑一个。已有品牌？丢一张截图 / 一个 URL 进去 → 智能体连接 GitHub，沉淀出可复用的 DESIGN.md。
3. 智能体产出第一版交付物。 插件 + 功能技能或设计模板 + DESIGN.md 完成绑定。基于文件系统的命令行运行会写出规范的项目文件，预览随之更新；不带文件工具的 BYOK / 纯 API 运行则返回一个完整的 <artifact> 块。
4. 交给工程团队。 交付物是真正的 HTML/CSS —— 直接丢进 Cursor、Codex 或 Claude Code，继续以代码方式开发。也可以直接导出 PPTX / PDF / MP4 给市场团队。
5. OpenDesign 越用越聪明。 你的截图、字体、配色和已确认的交付物会沉淀下来，成为下一次会话的默认值。返工更少，跑偏更少。

在你的编码智能体里使用 OpenDesign

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

One-line install (16+ CLIs supported):
od mcp install <agent>

Then the agent can:
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 直接暴露设计源文件——智能体看到的始终是实时文件。

智能体从零开始时， 安装器会写入 ~/.config/<agent>/open-design.json（或对应平台的等价路径），并附上一段可直接粘贴的 MCP 片段。Cursor 拿到一键 deeplink；Claude Code 拿到 claude mcp add-json 一行命令；其他智能体拿到符合自身配置 schema 的 JSON。在 macOS 桌面版安装时，优先用设置里的片段，别在 Terminal 里手敲 od mcp install <agent>，因为 PATH 上可能命中 /usr/bin/od。各智能体的完整流程 → 桌面应用里的 Settings → MCP server，或 docs/agent-adapters.md。

安全模型。 默认只读，守护进程绑定 127.0.0.1，SSRF 在代理边缘就被拦下。要暴露到局域网，必须显式设置 OD_BIND_HOST 加 OD_ALLOWED_ORIGINS。连接器凭据和实时产物预览路由无论如何都只走回环。

内网托管的模型端点。 为防止 SSRF，守护进程默认拦截解析到私有/内网地址段（RFC1918、link-local、CGNAT 和云元数据 IP）的服务商 base URL，并提示 Internal IPs blocked。如果你跑的是内网托管的网关（比如 LiteLLM 或 Ollama，地址是仅 VPN 可达的 10.x/192.168.x），用 OD_ALLOWED_INTERNAL_HOSTS=<host1>,<host2>,... 把这个主机加白——逗号或空白分隔的裸主机名或 IP 列表（10.0.0.5、litellm.internal.corp；写成 host:port 或完整 URL 也可以，会被归约成主机名；IPv6 必须加方括号，例如 [fd00::1]）。这个允许列表是严格 opt-in（默认为空）、精确匹配主机（不做子域或子串匹配），并且只作用于你自己配置的服务商端点（连接测试、模型发现、BYOK 对话）。它刻意不放松对上游响应里返回的下载 URL 的防护，那些仍然拦截。格式错误的条目——以及不支持的 CIDR 写法——会被丢弃并给出警告，而不是悄悄信任，所以打错字绝不会默默放宽（或没能放宽）防护。把主机名加白等于信任它解析出的任何地址（和 OD_ALLOWED_ORIGINS 一样）；如果你想重新校验 DNS 解析出的地址，请改为把解析后的 IP 加白。

技能与设计模板

skills/ 里内置 100+ 个功能技能。每个都遵循 Agent Skills 的 [SKILL.md][skill] 约定，提供可复用的智能体行为、参考资料或实用工具。可渲染的起步模板单独放在 design-templates/；它们也可以用 SKILL.md，但归入设计模板目录，而不是功能技能注册表。
设计模板目录围绕两种模式展开：prototype（web/移动端/桌面端单页产物）和 deck（横向滑动演示文稿）。其余模板覆盖 image、video、audio 以及实用工具类界面。scenario 字段按受众给模板分组：design · marketing · operation · engineering · product · finance · hr · sale · personal。

| 设计模板 | 模式 | 场景 | 产出内容 |
| web-prototype | prototype | design | 默认落地页 / hero |
| saas-landing | prototype | marketing | Hero / 功能 / 定价 / 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 | Looping CSS motion hero |
| sprite-animation | prototype | marketing | 8-bit pixel animated explainer |
| pm-spec | prototype | product | PM spec doc (with TOC + decision log) |
| team-okrs | prototype | product | OKR scorecard |
| eng-runbook | prototype | engineering | Incident runbook |
| finance-report | prototype | finance | Exec finance summary |
| hr-onboarding | prototype | hr | Role onboarding plan |
| guizang-ppt | deck | marketing | Magazine-style web PPT (deck default) |
| html-ppt- | deck | marketing | 15 deck templates × 36 themes (master template in design-templates/html-ppt/) |
| hyperframes | video | marketing | HTML → MP4 motion graphics (HeyGen OSS framework) |
| critique | utility | design | Five-dimensional self-critique scoresheet |
| tweaks | utility | design | AI-emitted tweaks-panel manifest |

Full protocol and directory split → docs/skills-protocol.md. Registry endpoints: GET /api/skills for functional skills and GET /api/design-templates for rendering templates.

Design Systems

151 brand-grade design-system packages centered on DESIGN.md ship with the repo. Legacy packages may contain only that Markdown contract; newer packages can also carry manifest.json, compiled tokens.css, component fixtures, assets, and provenance evidence. The catalog mixes upstream-derived systems with project-owned additions; design-systems/README.md records the package shape and provenance. Switch a system → the next render uses the new tokens.

Full catalog (click to expand)

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

Developer Tools — cursor · vercel · linear-app · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · sanity · mintlify · composio · opencode-ai · voltagent

Productivity — notion · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

Fintech — stripe · coinbase · binance · kraken · mastercard · revolut · wise

E-commerce — shopify · airbnb · uber · nike · starbucks · pinterest

Media — spotify · playstation · wired · theverge · meta

Automotive — tesla · bmw · ferrari · lamborghini · bugatti · renault

Other — apple · ibm · nvidia · vodafone · resend · spacex

Starters — default (Neutral Modern) · warm-editorial

Re-import the library via scripts/sync-design-systems.ts. Add your own brand → drop a DESIGN.md into design-systems/<brand>/. Full guide → design-systems/README.md.

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

Plugins

277 official plugins plus 183 remixable reference examples live in plugins/_official/. Each entry is a portable plugin directory anchored by open-design.json plus the payload required by its type: for example SKILL.md for agent workflows, template.json for media templates, or DESIGN.md for design-system entries. Jump straight to a category:

| Category | Count | Contents |
| scenarios/ | 13 | Complete design scenarios — 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 | One-shot image prompts — editorial, cinematic, product, portrait |
| video-templates/ | 63 | HyperFrames / Seedance / Veo motion templates |
| design-systems/ | 143 | Brand DESIGN.md wrapped as plugins |
| atoms/ | 13 | Reusable UI fragments (buttons, heroes, KPI cards) |
| examples/ | 183 | Remixable reference outputs |

Also plugins/community/ for community plugins and plugins/registry/ for the publishing flow.

What plugins can do

- 🤖 Run in any coding agent — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… through the same skill protocol the agent already knows.
- 🔁 Migrate Figma / Pencil workflows → React, Next.js, or Vue source. See od-figma-migration.
- 🛠️ Refresh an existing codebase to a brand spec — point a plugin at a git repo + DESIGN.md, get a PR. See od-code-migration.
- 💾 Persist custom workflows — your team's reusable templates sit next to the shipped ones.

Using plugins

Plugins are at full parity across the web UI and the od CLI — same /api/plugins endpoints, pick whichever fits.

In the desktop / web app: open the Plugin page to browse the marketplace and click Install; inside a project's Studio, plugins appear as composer chips you click to apply (with the inputs they declare).

On the command line (runs without a UI — this is the path external agents use):

od plugin list # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page" # search by keyword
od plugin info od-default # inspect a plugin's metadata, inputs, capabilities
od plugin install od-default # install from a registry; also accepts ./local-folder or an https://… link od plugin apply od-default --input brief="a one-page pitch for our seed round" od plugin upgrade od-default # upgrade od plugin uninstall od-default # uninstall

Every command supports --json, so you can pipe it through jq / xargs into automation.

Building a plugin

An OpenDesign plugin requires open-design.json plus the payload required by its type. A workflow skill or scenario also includes SKILL.md; manifest-only template and design-system entries use their own payloads instead:

my-plugin/
├── open-design.json ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md ← required for agent-skill/scenario entries; omitted for other plugin types
├── README.md ← optional: usage, install, registry links
├── preview/ ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/ ← optional: concrete use cases

Core open-design.json fields: specVersion (currently 1.0.0), name (stable ID), version (semver), optional compat.agentSkills[].path (points at ./SKILL.md when the entry exposes an Agent Skill), od.kind (skill / scenario / atom / bundle), od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode (the output surface, e.g. prototype / deck / live-artifact / image / video / hyperframes / audio / design-system / scenario), od.capabilities[] (declare the minimum — a restricted install grants only prompt:inject by default), od.inputs[] (apply-time parameters).

Scaffold + validate locally:

od plugin scaffold --id my-plugin --title "My Plugin" # generate the skeleton
od plugin validate ./my-plugin # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

Full field set and runtime contract → plugins/spec/SPEC.md; developing a plugin with a coding agent → plugins/spec/AGENT-DEVELOPMENT.md; copy-paste minimal templates → plugins/spec/examples/.

Contributing a plugin

1. Drop the plugin folder into plugins/community/ (third-party plugins), or — to ship it bundled with OpenDesign — into the matching tier of plugins/_official/.
2. Pass validation: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
3. Fill the PR using the template in plugins/spec/CONTRIBUTING.md (ID, version, lane, mode, capabilities, trigger examples; attach a screenshot / preview for visual plugins).
4. To publish to an external registry (skills.sh / ClawHub / standalone GitHub) → plugins/spec/PUBLISHING-REGISTRIES.md.

Plugin registry endpoint: GET /api/plugins. Directory overview → plugins/README.md (简体中文).

Architecture

┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│ chat · file workspace · iframe preview · settings · import · MCP │ └──────────────┬─────────────────────────────────────┬─────────────────┘ │ /api/* │ ▼ ▼ ┌─────────────────────────────────┐ /api/proxy/{provider}/stream (SSE) │ local daemon (Express+SQLite) │ ─→ any OpenAI-compatible BYOK, │ │ SSRF-guarded at the edge │ /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 server │ └─────────┬───────────────────────┘ │ 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. │ │ composes a functional skill or design template + DESIGN.md; writes files │ └──────────────────────────────────────────────────────────────────┘

| Layer | Stack |
| Frontend | Next.js 16 App Router + React 18 + TypeScript |
| Daemon | Node 24 · Express · SSE streaming · better-sqlite3 |
| Storage | Before changing or documenting daemon storage paths, you MUST read AGENTS.md → Daemon data directory contract. This README MUST NOT restate it. |
| Preview | Filesystem runs render canonical project files; BYOK/plain-API runs parse one complete <artifact> block into a sandboxed srcdoc iframe |
| Export | HTML (inlined) · PDF (browser print) · PPTX (agent-driven) · ZIP · Markdown · MP4 (HyperFrames) |
| Desktop | Electron shell + sandboxed renderer + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN) |
| Lifecycle | One entry point: pnpm tools-dev (start / stop / run / status / logs / inspect / check) |

Full architecture → docs/architecture.md. Skill protocol → docs/skills-protocol.md. Agent adapter contract → docs/agent-adapters.md.

Roadmap

- [x] Daemon + 27 runtime definitions across 26 distinct coding-agent CLI executables + skill/design-template registries + design-system catalog
- [x] Web app + chat + question form + 5-direction picker + todo progress + sandboxed preview
- [x] 100+ functional skills · separate rendering-template catalog · 151 design-system packages · 5 visual directions · 5 device frames
- [x] SQLite-backed projects · conversations · messages · tabs · templates
- [x] Multi-provider BYOK proxy (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) with OpenAI-compatible presets including Atlas Cloud + SSRF guard
- [x] Claude Design ZIP import (/api/import/claude-design)
- [x] Sidecar protocol + Electron desktop + IPC automation
- [x] Artifact lint API + 5-dim self-critique pre-emit gate
- [x] 0.8.0 — plugin marketplace infrastructure (261 official plugins, manifest spec, per-agent install scripts)
- [x] 0.9.0 — OpenDesign Cloud (official model service built into the app: zero config, one-click sign-in)
- [x] 0.10.0 — the all-in-one design workspace: the whole craft loop in one window (references → material → interactive editing → motion → handoff)
- [x] 0.11.0 — _The Bazaar_: built in the open — a community marketplace of plugins and design systems anyone can pick from and contribute to
- [x] 0.12.0 — _Brand-backed Design System_: turn the brand you already own into a reusable, portable DESIGN.md system
- [x] 0.13.0 — _Stay in Flow_: native session resume, faster model picking, and export straight to screenshot-backed PPTX / PDF
- [x] Published desktop releases — macOS (Apple Silicon + Intel) + Windows (x64)
- [ ] Published Linux desktop release (optional lane) — tracked in #4368
- [ ] Comment-mode surgical edits — partially shipped; reliable targeted patching in progress
- [ ] AI-emitted tweaks panel UX — not yet implemented
- [ ] npx od init to scaffold a project with DESIGN.md
- [ ] Plugin SDK + od plugin {add,list,remove,test,publish} CLI
- [ ] Figma / Pencil → React / Next / Vue migration plugins (alpha)
- [ ] Refresh-existing-codebase plugin (point at a git repo + DESIGN.md)

Phased delivery → docs/roadmap.md.

Community

Real people behind every channel.

- 💬 Discord — daily chat, plugin sharing, questions → discord.gg/mHAjSMV6gz
- 🐦 X / Twitter — release notes, milestones, behind the scenes → @OpenDesignHQ
- 🗣️ GitHub Discussions — deep Q&A, RFCs, "show your work" → Discussions
- 🐛 GitHub Issues — bug reports, feature requests → Issues

The good-first-issue and help-wanted labels are the easiest way in.

Contributing

OpenDesign keeps moving because contributors — designers, engineers, prompt authors — keep showing up. Many of the most-used skills, design systems, and plugins were written by people outside the core team.

🎯 Where to start (max leverage, min change)

| Want to ship… | How | Where |
| A new functional skill | Drop a folder with SKILL.md + optional assets/ + references/ | skills/ · spec in docs/skills-protocol.md |
| A new rendering design template | Add a renderable SKILL.md bundle | design-templates/ |
| A new design system | Drop a package centered on DESIGN.md; add manifest.json, tokens.css, components, assets, or provenance when needed | design-systems/<brand>/ |
| A new plugin | Drop open-design.json + the type-specific payload under a category folder | plugins/community/ · spec in plugins/spec/SPEC.md · agent dev guide in plugins/spec/AGENT-DEVELOPMENT.md |
| Support a new coding-agent CLI | One runtime definition + registry entry; add a parser only for a new wire format | apps/daemon/src/runtimes/defs/ |
| Fix a bug or polish UI | Browse the good-first-issue label | Issues → |
| Translate the docs | Update the README.<lang>.md files | TRANSLATIONS.md |

🤖 Contributing as an agent

If you are the agent reading this, the fastest path is:

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 <number> # create a branch and worktree

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

4. Open the PR
gh pr create --fill

Full agent-friendly contribution flow, code style, and PR bar → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

🏅 OpenDesign Fellow program

We're recruiting OpenDesign Fellows around the world — Fellows shape the product alongside the core team, represent OpenDesign officially in their region, and grow the community locally, backed by funded support ($1,000 / MR), free LLM credits, and a direct review track. Details → MAINTAINERS.md and the announcement on Discord.

Maintainers

They carry a lot of the load — daily maintenance, review, and community support.

@Nagendhra-web

Maintainer

@Sid-Qin

Maintainer

@YOMXXX

Maintainer

Maintainer rules, promotion criteria, and the exit protocol → MAINTAINERS.md (also Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย).

Contributors

Thanks to everyone who has taken part — code, docs, feedback, a sharp issue, a new skill, a new design system.

Repository activity

The SVG above is regenerated daily by .github/workflows/metrics.yml using lowlighter/metrics.

Star us

If this saved you thirty minutes, give it a ★. Stars don't pay rent — but they tell the next designer, agent, and contributor that this experiment is worth their attention. One click, three seconds, a real signal.

References & lineage

| Project | Role |
| alchaincyf/huashu-design | The design-philosophy compass — junior-designer workflow, brand-asset protocol, anti-AI-slop checklist, five-dimensional critique. |
| op7418/guizang-ppt-skill | The magazine-style web PPT skill, bundled verbatim under design-templates/guizang-ppt/. Default for deck mode. |
| lewislulu/html-ppt-skill | The HTML PPT Studio family — 15 deck templates, 36 themes, 31 page layouts, animation runtime, magnetic-card presenter mode. |
| OpenCoworkAI/open-codesign | UX patterns we borrow (streaming-artifact loop, sandboxed iframe, live agent panel). |
| multica-ai/multica | The daemon + adapter architecture — PATH-scan agent detection, local daemon as the only privileged process. |
| VoltAgent/awesome-design-md | Historical source of the original 9-section DESIGN.md schema and 70 upstream-derived systems; current packages may extend that baseline. |
| bergside/awesome-design-skills | Source of the 57 design skills added under design-systems/. |
| heygen-com/hyperframes | The HTML→MP4 motion-graphics framework, integrated as the first-class hyperframes-html in OpenDesign. |
| [Claude Code skills][skill] | The SKILL.md convention we adopt verbatim. |

Detailed provenance → docs/references.md.

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

License

Apache-2.0. Bundled skills and templates with their own LICENSE files retain those licenses, including design-templates/guizang-ppt/ (MIT, @op7418), design-templates/html-ppt/ (MIT, @lewislulu), and skills/web-clone/ (MIT, @Jane-xiaoer).