✨ 庆祝 GitHub 100K Star，OpenDesign Go 额度翻倍。首月仅需 8 美元，指定 Design Plan 模型每月最高可享 120 美元使用额度，可用于 GPT-6 Luna、DeepSeek V4.1 Flash、GLM-5.3 Flash-X、MiMo V2.6 Flash 等 10 多款模型。 所有个人套餐均提供 API 接入，可用于 Codex、Claude Code、DSH、OpenCode 等工具。

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

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

OpenDesign 是首个协作式 AI 设计 Agent 工作台。从需求描述出发，使用你熟悉的编程 Agent 或 OpenDesign Cloud，创建符合设计系统的原型。与团队分享并收集反馈，再让 Agent 在同一个项目中继续完善。

这套工作流开放且可扩展。OpenDesign 采用 Apache 2.0 许可证；团队可以查看并按自己的流程调整技能、设计模板、设计系统和插件。

Home — 从需求描述或示例开始。	All projects — 重新打开设计系统、媒体和原型项目。
Design Systems — 查看品牌素材，并与 Agent 一起完善。	Plugins — 查找技能，通过 Try it 启动。

Prototype — 与 Agent 一起构建和迭代交互式网页，并实时预览。	Slides — 制作演示文稿、查看幻灯片和演讲者备注，完成后导出。
Image — 从对话中生成视觉素材，查看结果，再下载或打开。	HyperFrames — 与 Agent 一起制作动态图形并导出 MP4。 观看视频.

OpenDesign 通过两种方式连接主流编码 Agent：可由 Agent 调用的技能、CLI 和 MCP，以及由 OD 直接启动 Agent 的原生运行时适配器。DeepSeek Harness 通过官方 dsh CLI 作为一等原生运行时，支持结构化流式输出、模型发现、取消与会话恢复。

使用 DeepSeek Harness 时，请先安装官方 dsh CLI，再在 OpenDesign 中选择它，或运行 od agent setup deepseek-harness 安装/修复 OD 连接组件。MCP 集成可用 od mcp install <agent> --print 干跑预览 · --uninstall 卸载 · 完整清单 od mcp install --help。

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

未安装任何 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 工件。

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 原生视频框架，在 OpenDesign 中作为一等公民集成。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/。

• 🤖 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，它就能将你的真实组件重构到品牌规范。
• 🔒 隐私信条。 项目可在本地或自行部署的环境中运行。使用云端模型或 OpenDesign Cloud 时，相关请求会发送至相应服务。BYOK 代理包含 SSRF 防护。

使用 OpenDesign 最快的方式。无需 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 的情况下使用 OpenDesign——在 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 组合，写入规范项目文件，OpenDesign 直接预览这些文件。没有文件系统工具的 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 模板会运行已发布的 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。Windows 用户请参见 docs/windows-troubleshooting.md。完整的快速开始指南、环境变量和打包构建流程 → QUICKSTART.zh-CN.md。

需求 → 插件 → 方向 → 设计系统 → 工件 → 交付 → 记忆

1. PM 提交需求。 插件选择器提供落地页 · 路演 Deck · 仪表盘 · 社交媒体帖 · PM 规范 · OKR 记分卡……
2. 设计师（或 Agent）锁定方向。 没有品牌？从 5 个精选方向中选择。有品牌？放入截图 / URL → Agent 连接 GitHub、编纂可复用的 DESIGN.md。
3. Agent 创建首个交付物。 插件 + 功能技能或设计模板 + DESIGN.md 已绑定。有文件系统的 CLI 运行写入规范项目文件，预览随文件更新；没有文件工具的 BYOK/纯 API 运行返回一个完整的 <artifact> 块。
4. 交付给工程团队。 工件是真实的 HTML/CSS——放入 Cursor、Codex 或 Claude Code 中继续作为代码开发。或直接导出 PPTX / PDF / MP4 交给营销团队。
5. OpenDesign 越用越聪明。 你的截图、字体、色板和已确认的工件会累积为下次会话的默认值。更少的重复劳动，更少的偏差。

OpenDesign 提供 stdio MCP 服务器和逐 Agent 的安装脚本。任何位于其他仓库的 MCP 兼容 Agent 都可以直接读取你本地 OpenDesign 项目的文件——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。

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

151 个以 DESIGN.md 为核心的品牌级设计系统包随仓库发布。旧包可以只有这份 Markdown 契约；新包还可包含 manifest.json、编译后的 tokens.css、组件样例、资源和来源证据。目录同时包含基于上游整理的系统与项目自有补充；design-systems/README.md 记录了包结构与来源。切换系统 → 下次渲染即使用新 token。

通过 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。直接跳转到分类浏览：

另有 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-default        # 从注册中心装；也支持 ./本地文件夹 或 https://… 直链
od plugin apply od-default --input brief="给我们的种子轮做一页 pitch"
od plugin upgrade od-default         # 升级
od plugin uninstall od-default       # 卸载

所有命令都支持 --json，方便用 jq / xargs 串进自动化脚本。

OpenDesign 插件必须包含 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/。

1. 把插件文件夹放到 plugins/community/（第三方插件），或——若想随 OpenDesign 一起内置——放到对应 tier 的 plugins/_official/。
2. 跑通校验：od plugin validate、pnpm guard、pnpm --filter @open-design/plugin-runtime typecheck。
3. 按 plugins/spec/CONTRIBUTING.md 的模板填 PR（ID、版本、lane、mode、权限、触发示例，视觉类附截图 / 预览）。
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 })
             ▼
   ┌──────────────────────────────────────────────────────────────────────┐
   │  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，并将规范文件写入磁盘                   │
   └──────────────────────────────────────────────────────────────────────┘

完整架构说明 → 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 安装脚本）
• 0.9.0——OpenDesign Cloud（应用内置的官方模型服务：零配置，一键登录）
• 0.10.0——一体化设计工作区：一个窗口内完成完整创作闭环（参考 → 素材 → 交互编辑 → 动效 → 交付）
• 0.11.0——The Bazaar：在开放中构建——人人都可以挑选和贡献的插件与设计系统社区市场
• 0.12.0——品牌设计系统：把你已经拥有的品牌变成可复用、可移植的 DESIGN.md 系统
• 0.13.0——Stay in Flow：原生会话恢复、更快的模型选择、直接导出截图支撑的 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）

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

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

• 💬 Discord——日常聊天、插件分享、提问 → discord.gg/mHAjSMV6gz
• 🐦 X / Twitter——发版说明、里程碑、幕后 → @OpenDesignHQ
• 🗣️ GitHub Discussions——深度问答、RFC、"展示你的作品" → Discussions
• 🐛 GitHub Issues——Bug 报告、功能请求 → Issues

good-first-issue 和 help-wanted 标签是最简单的入门方式。

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

如果你就是正在阅读这段文字的 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）。

我们正在全球招募 OpenDesign 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 和贡献者，这个实验值得他们关注。一次点击，三秒钟，真实的信号。

详细溯源 → docs/references.md。

Apache-2.0。打包的 design-templates/guizang-ppt/ 保留其原始 LICENSE（MIT，@op7418）。打包的 design-templates/html-ppt/ 保留其原始 LICENSE（MIT，@lewislulu）。打包的 skills/web-clone/ 保留其原始 LICENSE（MIT，@Jane-xiaoer）。