Open Design：The open-source Claude Design alternative

🔥 Open Design 0.10.0 正式发布：All-in-one 的 Agentic 设计工作台。 设计的全流程从此只需一个窗口——从一个模糊的想法出发，到发现参考、收集素材、交互式编辑、评论排队、打磨动效，再交付给编辑器或 Code Agent，全程无需离开应用。配合多会话并行，它不再只是一个助手，而是一支为你工作的本地设计团队。下载 0.10.0 · 参与讨论

⚡ Open Design AMR（Agentic Model Router）——官方模型服务。 一次充值，即可在 Open Design 里直接使用 GPT、Claude、Gemini 与 DeepSeek：20+ 旗舰模型、零配置、按真实 token 用量计费。立即体验

🏅 Open Design Fellow 计划正式开放。 如果你也相信设计应该是开放的，欢迎成为 Open Design Fellow，和核心团队一起打磨产品，让更多人参与并定义设计的未来。详情 → MAINTAINERS.md 与 Discord。

官网 · 下载 · Model Router · Discord · 关注 @OpenDesignHQ

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

什么是 Open Design

🎨 本地优先、开源的 Claude Design 替代品。 🖥️ macOS 与 Windows 原生桌面应用。 ⚡ 100+ 技能 · ✨ 150 个品牌级 DESIGN.md 系统 · 📦 261 个开箱即用的插件。 🖼️ 可生成 Web · 桌面 · 移动端原型、实时仪表盘 / 工件、演示文稿、图片、视频，以及 HyperFrames 动态图形。🔒 沙箱 iframe 预览 · HTML / PDF / PPTX / MP4 导出。 🤖 运行于 Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity 等 21 个本地 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——一个项目里的多种产物

进入某个项目的 Studio，同一套设计系统可流式产出多种类型的工件：

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

平台兼容性

Open Design 以 技能、CLI 和 MCP 服务器的形式交付，主流编码 Agent 可原生消费。装好 OD 后，一行 od mcp install <agent> 把 MCP 服务器 wire 进对应 Agent 的配置，任何 Agent 内调用相同工具。

编码 Agent / 平台	状态	一行命令安装 MCP 服务器
Claude Code	✅ 支持	`od mcp install claude`
Codex CLI	✅ 支持	`od mcp install codex`
Cursor	✅ 支持	`od mcp install cursor`
VS Code + GitHub Copilot	✅ 支持	`od mcp install copilot`
GitHub Copilot CLI	✅ 支持	`od mcp install copilot`
Gemini CLI	✅ 支持	`od mcp install gemini`
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`
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 代理提供同样的循环（无需 spawn 进程）——粘贴 baseUrl + apiKey + model，支持 OpenAI、Anthropic、Azure OpenAI、Google Gemini、Ollama、LM Studio、vLLM 或任何 OpenAI 兼容端点。每个目标的 SSRF 防护在守护进程边缘拦截内网 IP / link-local / CGNAT。

适配器契约和流解析器位于 apps/daemon/src/agents.ts。添加新 CLI 只需一条记录——参见 docs/agent-adapters.md。

演示

四大核心产品类别，全部由笔记本电脑上运行的编码 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 输出一份 manifest，iframe 无需刷新即可重新渲染。}	_{决策室——面向产品 / 研究 / 运营会议的多源简报工件。}
_{GitHub 风格仪表盘——以实时工件形式展示仓库指标。}	_{Flow 实时仪表盘模板——领域专属 KPI 模板，通过当前激活的 DESIGN.md 品牌化。}

3 · 演示文稿——杂志 Deck、周报、路演

_{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。

4 · 图片——`gpt-image-2`、ImageRouter、自定义 API

_{城市美食地图插画
手绘编辑风格旅行海报}

_{电影级电梯场景
单帧编辑级静态画面}

_{赛博朋克肖像
个人头像——霓虹面部文字}

_{3D 石质阶梯
石刻信息图}

_{魅力人像
编辑级棚拍}

93 个可复刻提示词位于 prompt-templates/——预览缩略图、完整提示词、目标模型、宽高比和来源归属。一键将需求放入编辑器。

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

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/。

为什么选择 Open Design

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——9 节 schema 涵盖色板、字体、间距、动效、语言风格、反模式。150 个系统随仓库发布（Linear、Stripe、Vercel、Airbnb、Apple、Tesla、Notion、Anthropic、Cursor、Supabase、Figma……）。放入文件夹，选择器自动识别。
🖥️ 本地优先，每一层都可 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 + Vercel
Agent 原生（在 CLI 中运行）	仅 Anthropic	❌	仅云端 Agent	✅ 21 CLI + BYOK
品牌级 `DESIGN.md`	私有	Theme JSON	有限 token	✅ 150 系统随附
技能 / 插件 / 模板	封闭	插件商店	封闭	✅ 100+ 技能 · 261 插件
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+ 技能和 150 个设计系统，打开后即可在入口视图中输入需求。

🤖 安装到你的编码 Agent（无 UI）

你可以在完全不打开 GUI 的情况下使用 Open Design——在 Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi 等中作为技能、插件或 MCP 服务器调用。

# 一行命令安装到你正在使用的 Agent：
od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
#         | pi | vibe | hermes | cline | kimi | trae | opencode

然后在 Agent 内：

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

Agent 读取 skills/，选择正确的 SKILL.md，绑定你指定的 DESIGN.md，输出一个可在 http://localhost:7456 预览的 <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
# 打开 http://localhost:7456

🚀 部署到 Sealos

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

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 输出首个 <artifact>。 插件 + 技能 + DESIGN.md 已绑定。流式传输到沙箱 iframe 中，原地可编辑，不是"从头重新生成"。
交付给工程团队。 工件是真实的 HTML/CSS——放入 Cursor、Codex 或 Claude Code 中继续作为代码开发。或直接导出 PPTX / PDF / MP4 交给营销团队。
Open Design 越用越聪明。 你的截图、字体、色板和已确认的工件会累积为下次会话的默认值。更少的重复劳动，更少的偏差。

从你的编码 Agent 使用 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 search-files "primary button"      # 跨项目文件搜索
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # 最新渲染的工件
od plugin run web-prototype --brief "..."
od skill list --scenario marketing

为什么选择 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/ 下的一个文件夹，遵循 Claude Code SKILL.md 约定，并扩展了 od: frontmatter（mode、platform、scenario、preview.type、design_system.requires、default_for、fidelity、example_prompt）。放入文件夹，重启守护进程，它就出现在选择器中。

两种模式构成目录主线：prototype（Web/移动端/桌面单页工件）和 deck（横向滑动演示文稿）。另有 image、video、audio、template、design-system 和 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。

设计系统

150 个品牌级 DESIGN.md 系统随仓库发布——每个系统是一个 Markdown 文件，包含 9 节 schema（颜色、字体、间距、布局、组件、动效、语言风格、品牌、反模式），来自 VoltAgent/awesome-design-md。切换系统 → 下次渲染即使用新 token。无需 Theme JSON。

完整目录（点击展开）

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。

插件

261 个官方插件位于 plugins/_official/。每个插件就是一个可移植的 agent skill 文件夹——一个 SKILL.md（任何支持 Agent Skills 的 Agent 都能读），外加一个可选的 open-design.json manifest（给 Open Design 提供 marketplace 元数据、输入参数、预览、流水线与权限声明）。直接跳转到分类浏览：

分类	数量	内容
`scenarios/`	11	完整设计方案——`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`
`image-templates/`	45	一次性图片提示词——编辑、电影、产品、人像
`video-templates/`	50	HyperFrames / Seedance / Veo 动态模板
`design-systems/`	142	品牌 `DESIGN.md` 包装为插件
`atoms/`	13	可复用 UI 片段（按钮、主视觉、KPI 卡片）
`examples/`	140	可混搭的参考输出

另有 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 串进自动化脚本。

构建插件

一个插件最小只需要一个 SKILL.md；要上架 Open Design marketplace，再加一个 open-design.json：

my-plugin/
├── SKILL.md            ← 必需：YAML frontmatter（name·description）+ 触发语 + 工作流（建议 < 500 行）
├── open-design.json    ← 上架所需：marketplace 元数据 + 输入 + 流水线 + 权限
├── README.md           ← 可选：用法、安装、注册中心链接
├── preview/            ← 可选：index.html / poster.png（视觉类强烈建议）
└── examples/           ← 可选：具体用例

open-design.json 的核心字段：specVersion（当前 1.0.0）、name（稳定 ID）、version（semver）、compat.agentSkills[].path（指向 ./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/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 })
             ▼
   ┌──────────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·  │
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·      │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek       │
   │  读取 SKILL.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 不得复述该契约。
预览	沙箱 `srcdoc` iframe + 流式 `<artifact>` 解析器
导出	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。

路线图

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

社区

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

💬 Discord——日常聊天、插件分享、提问 → discord.gg/9ptkbbqRu
🐦 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`
一个新的设计系统	使用 9 节 schema 放入 `DESIGN.md`	`design-systems/<brand>/`
一个新的插件	在分类文件夹下放入 `plugin.json` + manifest	`plugins/community/` · 规范在 `plugins/spec/SPEC.md` · Agent 开发指南在 `plugins/spec/AGENT-DEVELOPMENT.md`
支持新的编码 Agent CLI	一条适配器记录 + 流解析器	`apps/daemon/src/agents.ts`
修复 Bug 或打磨 UI	浏览 `good-first-issue` 标签	Issues →
翻译文档	更新 `README.<lang>.md` 文件	`TRANSLATIONS.md`

🤖 作为 Agent 贡献

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

我们正在全球招募 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

如果这为你节省了三十分钟，请给一个 ★。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）。

FilesExpand file tree

README.zh-CN.md

Latest commit

History