wehub/nexu-io--open-design

Fork 0

Files

T

wehub-resource-sync cd4717bbb0

visual-baseline / Capture visual baselines (push) Has been cancelled

Details

docs: make Chinese README the default

2026-07-13 09:50:59 +00:00

56 KiB

Raw Permalink Blame History

Note

本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
English · 原始项目 · 上游 README
原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。

Open Design：开源的 Claude Design 替代方案

🔥 Open Design 0.13.0 — Stay in Flow 来了。 漫长的设计会话曾经一中断就得重来——一次运行丢失了进度，模型选择器让你猜来猜去，导出还需要再绕一道弯。0.13.0 让会话持续在线：跨轮次恢复 Codex / OpenCode / Pi / Open Design Cloud 运行，更快选择合适模型，无需离开应用即可交接带截图的 PPTX / PDF。下载 0.13.0 · 更新日志)

⚡ Open Design Cloud — 官方模型服务。 一次充值即可在 Open Design 中使用 GPT、Claude、Gemini 和 DeepSeek：20+ 旗舰模型，零配置，按实际 token 用量计费。试用 Open Design Cloud)

🏅 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 · ภาษาไทย

什么是 Open Design

🎨 开源的 Claude Design 替代方案。 🖥️ macOS 和 Windows 的本地优先原生桌面应用。 ⚡ 可组合技能（Skill）、品牌级 DESIGN.md 设计系统以及即用型插件。 🖼️ 生成 Web · 桌面端 · 移动端原型、实时仪表盘/工件（Artifact）、演示文稿（Deck）、图片、视频以及 HyperFrame 动态图形。🔒 沙盒 iframe 预览 · HTML / PDF / PPTX / MP4 导出。 🤖 运行在 Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity 和 22 个本地 CLI 上，或通过 BYOK 接入任何 OpenAI 兼容端点。

Open Design 是当 Anthropic 随 Claude Design 发布的原生代理（agent-native）循环——发现需求简报、锁定方向、流式生成工件、评审、交付——不再封闭，而是变成一个文件系统级的技能、设计系统和插件集合，你笔记本电脑上已有的编程代理可以直接读取、写入和重新组合。你的 CLI 成为设计引擎，你的笔记本电脑成为工作室，你团队的 DESIGN.md 成为品牌契约。

它也是代理时代的 Figma 替代方案——无需在画布上逐像素调整，它交付的是使用真实 CSS、真实字体、真实组件的单页工件，直接导出为 HTML / PDF / PPTX / MP4——已经过你的设计系统塑造，已经可以在你每天使用的代理中运行。

产品导览

快速了解 Open Design 是什么、能做什么。从**首页（Home）开始，用自动化（Automation）编排重复工作流，在设计系统（Design System）中提炼品牌契约，并通过插件（Plugin）和集成（Integrations）进行扩展；在任意项目的工作室（Studio）**中，同一套设计系统可流式生成原型、实时工件、HyperFrame、演示文稿和图片。

核心页面

_{首页（Home） — 总览入口。选择一项技能和一套设计系统，输入需求简报，一切从这里启动。}

_{自动化（Automation） — 将重复性设计工作流编排为可复用、可调度的自动化流程。}	_{设计系统（Design System） — 将团队的 DESIGN.md 提炼为塑造每一次输出的品牌契约。}
_{插件（Plugin） — 浏览、安装和分发工作流插件，按需扩展生成能力。}	_{集成（Integrations） — 连接外部系统和 MCP 工具，从任意 IDE、脚本或自动化流程中使用 Open Design。}

工作室（Studio）—— 一个项目，多种工件类型

在项目的工作室中，同一套设计系统可流式生成多种工件类型：

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

平台兼容性

Open Design 以 skills、CLI 和 MCP 服务器 的形式交付，主流编码代理（coding agent）可原生消费。安装 OD 后，一条 od mcp install <agent> 即可将 MCP 服务器接入该代理的配置，并在任意代理内调用相同的工具。

编码代理 / 平台	状态	一行 MCP 服务器安装命令
Claude Code	✅ 已支持	`od mcp install claude`
Codex CLI	✅ 已支持	`od mcp install codex`
DeepSeek Reasonix	✅ 已支持	`od mcp install reasonix`
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`
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、Anthropic、Azure OpenAI、Google Gemini、Ollama、LM Studio、vLLM 或任意 OpenAI 兼容端点。按目标配置的 SSRF 防护会在守护进程边缘拦截内网 IP / 链路本地地址 / CGNAT。

适配器契约与流解析器位于 apps/daemon/src/agents.ts。新增 CLI 只需一条配置项 — 参见 docs/agent-adapters.md。

演示

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

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

默认输出界面。单页 HTML 产物会读取你的 DESIGN.md，并在沙箱 iframe 中渲染。

_{入口视图 — 选择 skill、选择设计系统、输入需求简报。原型、仪表盘、演示文稿、移动应用、杂志页面，统一在一个界面完成。}	_{移动原型 — 像素级精确的 iPhone 15 Pro 外框，多屏流程。代理不会重绘手机边框；共享设备外框位于 assets/frames/。}
_{Web 原型 — 带滚动条、KPI 与图表的编辑型仪表盘。直接由 design-templates/dating-web/ 渲染。}	_{移动应用原型 — 三屏游戏化流程，含 XP 绶带与任务详情。可直接交给 Cursor / Codex / Claude Code 转为 React/Next/Vue。}

2 · 实时产物与仪表盘

实时仪表盘、决策室、KPI 墙 — 单页产物通过微调面板拉取数据，并支持就地编辑。

_{实时仪表盘 — 可编辑的 KPI 墙，微调面板展示值得微调的参数。代理输出 manifest，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（代理驱动的 skill）、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 通过无头 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 · 纽约时报风格数据信息图}
_{航班路线图 · 16:9 · 苹果风格航线展示}	_{4 秒电影级 Logo 结尾 · 16:9 · 逐片拼接 + 绽放效果}	_{$0 → $10K 金额计数器 · 9:16 · 苹果风格 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。你的 claude / codex / cursor-agent / copilot / hermes / kimi 上已有的 PATH 本身就是设计引擎。一键即可切换。
🧠 品牌级输出，开箱即用。 每次渲染都会读取当前生效的 DESIGN.md——一个涵盖调色板、字体、间距、动效、语调、反模式的 9 段式 schema。仓库内置了 150 套设计系统（Linear、Stripe、Vercel、Airbnb、Apple、Tesla、Notion、Anthropic、Cursor、Supabase、Figma……）。放入一个文件夹，选择器会自动识别。
🖥️ 本地优先，每层自带密钥。 原生桌面应用支持 macOS（Apple Silicon + Intel）和 Windows（x64）。Linux AppImage 为可选发布通道。无遥测，无云端往返。在描述守护进程数据路径之前，贡献者和运维人员必须阅读 AGENTS.md → 守护进程数据目录契约。本 README 不得重复其内容。
🌍 三个层面均可组合。 插件携带可运行的工作流 · 技能承载 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 + Vercel
Agent 原生（在你的 CLI 中运行）	仅 Anthropic	❌	仅云端 Agent	✅ 22 种 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（无需图形界面）

无需打开 GUI 即可使用 Open Design——在 Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi 等工具中，以技能、插件或 MCP 服务器的形式调用。

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | cursor | copilot | openclaw
#         | antigravity | gemini | pi | vibe | hermes | cline | kimi
#         | 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 二进制文件时快速失败。

WSL2 用户： 如果你的编程 Agent CLI 运行在 WSL2 内部，请先按照 WSL2 setup guide 操作。Linux 的 /usr/bin/od 可能会遮蔽 Open Design 的 od 命令。 USD 预算：$0/$3；剩余 $3

然后，在 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
# open http://localhost:7456

macOS 用户： 如果 Web UI 显示 Authorization: Bearer <OD_API_TOKEN> required，是 Docker Desktop 桥接网络导致的问题。请参阅 macOS 上的 Docker Desktop 获取修复方法。

🚀 部署到 Sealos

Sealos 应用商店模板运行已发布的 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。WSL2 用户请参阅 docs/wsl-setup.md；原生 Windows 用户请参阅 docs/windows-troubleshooting.md。完整的快速入门、环境变量、Nix flake 和打包构建流程 → QUICKSTART.md。

完整工作流 — 从需求简报（brief）到产出物（artifact）

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

产品经理提交需求简报。 插件选择器提供落地页 · 演讲文稿 · 仪表盘 · 社交媒体帖子 · 产品经理规格说明 · 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 都可以通过结构化 API（按名称查询）直接读取本地 Open Design 项目中的文件 — CSS token、JSX 组件、入口 HTML。agent 始终看到的是实时文件，而非过时的导出。

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

# Then the agent can:
od search-files "primary button"      # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # latest rendered artifact
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 则获得其配置所需的 JSON 格式。完整的各 agent 流程 → 桌面应用中的 设置 → MCP 服务器，或参阅 docs/agent-adapters.md。

安全模型。 默认只读，守护进程绑定到 127.0.0.1，SSRF 在代理边缘被阻止。局域网暴露需要显式的 OD_BIND_HOST 加上 OD_ALLOWED_ORIGINS。连接器凭证和实时产出物预览路由无论如何都仅限回环地址访问。

内部托管的模型端点。 为防止 SSRF，守护进程默认阻止解析到私有/内部地址范围（RFC1918、链路本地、CGNAT 和云元数据 IP）的提供商基础 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 的防护，这些 URL 仍然被阻止。格式错误的条目 — 或不支持的 CIDR 表示法 — 会被丢弃并显示警告，而非静默信任，因此输入错误不会悄然扩大（或未能扩大）防护范围。将主机名加入白名单即信任其解析到的任何地址（如 OD_ALLOWED_ORIGINS）；如果你希望重新检查 DNS 解析后的地址，请改为将解析后的 IP 加入白名单。

技能（Skills）

内置 100+ 个技能 — 每个技能是 skills/ 下的一个文件夹，遵循 Claude Code 的 SKILL.md 规范，并扩展了 od: 前置元数据（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。

技能（Skill）	模式（Mode）	场景（Scenario）	产出内容
`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	产品经理规格文档（含目录 + 决策日志）
`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 生成的微调面板清单

完整技能协议 → docs/skills-protocol.md。技能注册端点：GET /api/skills。

设计系统（Design Systems）

仓库内置 150 套品牌级 DESIGN.md 系统——每套均为单个 Markdown 文件，遵循 9 段式结构（色彩、字体、间距、布局、组件、动效、语态、品牌、反模式），涵盖 VoltAgent/awesome-design-md。切换系统后，下次渲染即使用新令牌，无需 Theme JSON。

完整目录（点击展开）

AI 与大模型 — 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（Neutral Modern）· warm-editorial

通过 scripts/sync-design-systems.ts 重新导入库。添加自有品牌 → 将 DESIGN.md 放入 design-systems/<brand>/。完整指南 → design-systems/README.md。

插件（Plugins）

261 个官方插件位于 plugins/_official/。每个插件是一个可移植的代理技能文件夹——包含一个 SKILL.md（任何支持 Agent Skills 的代理均可读取），外加一个可选的 open-design.json 清单文件，提供 Open Design 市场元数据、输入、预览、流水线和能力声明。直接跳转到分类：

分类	数量	内容
`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 片段（按钮、Hero、KPI 卡片）
`examples/`	140	可混编的参考输出

另有 plugins/community/ 存放社区插件，plugins/registry/ 提供发布流程。

插件能做什么

🤖 在任何编码代理中运行 — Claude Code、Codex、Cursor、Copilot、OpenClaw,)、Antigravity,)、Hermes、Kimi……通过代理已熟悉的同一技能协议。
🔁 将 Figma / Pencil 工作流迁移为 React、Next.js 或 Vue 源码。参见 od-figma-migration。
🛠️ 按品牌规范刷新现有代码库——将插件指向 git 仓库 + DESIGN.md，即可获得一个 PR。参见 od-code-migration。
💾 持久化自定义工作流——你的团队可复用模板与官方模板并存。

使用插件

插件在 Web UI 和 od CLI 上具有完整一致的能力——相同的 /api/plugins 端点，按需选用。

在桌面端 / Web 应用中： 打开 Plugin 页面浏览市场，点击 Install；在项目 Studio 内，插件以 composer 芯片形式呈现，点击即可应用（使用其声明的输入）。

在命令行中（无需 UI 即可运行——这是外部代理使用的路径）：

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-figma-migration # 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

每条命令均支持 --json，因此可将其通过 jq / xargs 管道接入自动化流程。

构建插件

一个插件最低只需一个 SKILL.md；要将其上架 Open Design 市场，请添加一个 open-design.json：

my-plugin/
├── SKILL.md            ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json    ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

核心 open-design.json 字段：specVersion（当前为 1.0.0）、name（稳定 ID）、version（语义化版本）、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"   # generate the skeleton
od plugin validate ./my-plugin                          # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

完整字段集和运行时合约 → plugins/spec/SPEC.md；使用编码代理开发插件 → plugins/spec/AGENT-DEVELOPMENT.md；可复制粘贴的最小模板 → plugins/spec/examples/。

贡献插件

将插件文件夹放入 plugins/community/（第三方插件），或——若要将其随 Open Design 一起打包发布——放入 plugins/_official/ 的对应层级。
通过验证：od plugin validate、pnpm guard、pnpm --filter @open-design/plugin-runtime typecheck。
使用 plugins/spec/CONTRIBUTING.md 中的模板填写 PR（ID、版本、通道、模式、能力、触发示例；视觉类插件请附截图/预览）。
发布到外部注册中心（skills.sh / ClawHub / 独立 GitHub）→ plugins/spec/PUBLISHING-REGISTRIES.md。 USD 预算：$0/$3；本期剩余 $3。

插件注册中心端点：GET /api/plugins。目录概览 → plugins/README.md（简体中文）。

架构

┌────────────────── 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/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 })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·    │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek     │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk             │
   └──────────────────────────────────────────────────────────────────┘

层	技术栈
前端	Next.js 16 App Router + React 18 + TypeScript
守护进程	Node 24 · Express · SSE 流式传输 · `better-sqlite3`
存储	修改或记录守护进程存储路径前，必须阅读 `AGENTS.md` → 守护进程数据目录契约。本文档不得重述该内容。
预览	沙盒化 `srcdoc` iframe + 流式 `<artifact>` 解析器
导出	HTML（内联样式）· PDF（浏览器打印）· PPTX（智能体驱动）· ZIP · Markdown · MP4（HyperFrames）
桌面端	Electron 壳层 + 沙盒渲染器 + 侧边进程 IPC（`STATUS` · `EVAL` · `SCREENSHOT` · `CONSOLE` · `CLICK` · `SHUTDOWN`）
生命周期	单一入口点：`pnpm tools-dev`（start / stop / run / status / logs / inspect / check）

完整架构 → docs/architecture.md。技能协议 → docs/skills-protocol.md。智能体适配器契约 → docs/agent-adapters.md。

路线图

守护进程 + 22 个编码智能体 CLI 适配器 + 技能注册表 + 设计系统目录
Web 应用 + 聊天 + 提问表单 + 五方向选择器 + 待办进度 + 沙盒预览
100+ 技能 · 150 个设计系统 · 5 个视觉方向 · 5 种设备框架
基于 SQLite 的项目 · 对话 · 消息 · 标签页 · 模板
多提供商 BYOK 代理（/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream）+ SSRF 防护
Claude Design ZIP 导入（/api/import/claude-design）
侧边进程协议 + Electron 桌面端 + IPC 自动化
产物 lint API + 五维度自我审查前置门控
0.8.0 — 插件市场基础设施（261 个官方插件、清单规范、按智能体的安装脚本）
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）

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

社区

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

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

good-first-issue) 和 [``help-wanted``](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)`) 标签是最容易入手的入口。

贡献

Open Design 能持续前进，是因为贡献者——设计师、工程师、提示词作者——不断涌现。许多最常用的技能、设计系统和插件都来自核心团队之外的人。

🎯 从何入手（最大杠杆、最小改动）

想要贡献…	方式	位置
一个新技能	放入包含 `SKILL.md` + `assets/` + `references/` 的文件夹	`skills/` · 规范见 `docs/skills-protocol.md`
一个新设计系统	使用九段式 schema 放入一个 `DESIGN.md`	`design-systems/<brand>/`
一个新插件	在分类文件夹下放入 `open-design.json` + 清单文件	`plugins/community/` · 规范见 `plugins/spec/SPEC.md` · 智能体开发指南见 `plugins/spec/AGENT-DEVELOPMENT.md`
支持一个新的编码智能体 CLI	一个适配器入口 + 流解析器	`apps/daemon/src/agents.ts`
修复缺陷或优化 UI	浏览 `good-first-issue``) 标签	Issues →`)
翻译文档	更新 `README.<lang>.md` 文件	`TRANSLATIONS.md`

🤖 以智能体身份贡献

如果正在阅读本文的是智能体，最快路径是：

# 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

完整的智能体友好贡献流程、代码风格和 PR 标准 → CONTRIBUTING.md（Deutsch · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย）。

🏅 Open Design Fellow 计划

我们正在全球招募 Open Design Fellow——Fellow 与核心团队一同塑造产品，在所在地区正式代表 Open Design，并在本地发展社区，获得资金支持（1,000 美元 / MR）、免费 LLM 积分和直接审核通道。详情 → MAINTAINERS.md 以及 Discord.`) 上的公告。

美元预算：$0/$3；本周期剩余 $3。

维护者

他们承担了大部分工作——日常维护、代码审查和社区支持。

_{@Nagendhra-web}
_维护者

_@Sid-Qin
_维护者

_@YOMXXX
_维护者

维护者规则、晋升标准和退出协议 → MAINTAINERS.md（另有 English · Français · 简体中文 · 日本語 · 한국어 · Português · ภาษาไทย）。

贡献者

感谢每一位参与其中的人——代码、文档、反馈、精准的 issue、新技能、新设计系统。

仓库活跃度

上方 SVG 由 .github/workflows/metrics.yml 通过 lowlighter/metrics.) 每日自动生成。

给我们点个 Star

如果这个项目为你节省了三十分钟，就给个 ★ 吧。Star 虽然付不了房租——但它告诉下一位设计师、智能体和贡献者：这个实验值得关注。点击一下，三秒钟，一个真实的信号。

参考与渊源

项目	角色
Claude Design	本仓库作为开源替代品的闭源产品。
`alchaincyf/huashu-design`)	设计理念指南——初级设计师工作流、品牌素材规范、反 AI 废话清单、五维评审。
`op7418/guizang-ppt-skill`)	杂志风格网页 PPT 技能，原样收录于 `design-templates/guizang-ppt/`，为画板模式默认模板。
`lewislulu/html-ppt-skill`)	HTML PPT Studio 系列——15 个画板模板、36 个主题、31 种页面布局、动效运行时、磁吸卡片演示者模式。
`OpenCoworkAI/open-codesign`)	首个开源 Claude Design 替代品；我们借鉴的 UX 模式（流式制品循环、沙箱 iframe、实时智能体面板）。
`multica-ai/multica`)	守护进程 + 适配器架构——PATH 扫描智能体检测，本地守护进程为唯一特权进程。
`VoltAgent/awesome-design-md`)	9 段 `DESIGN.md` 模式及 70 个产品体系的来源。
`bergside/awesome-design-skills`)	57 项设计技能（收录于 `design-systems/`）的来源。
`heygen-com/hyperframes`)	HTML→MP4 动态图形框架，作为 Open Design 中的一等公民 `hyperframes-html` 集成。
Claude Code 技能	我们原样采用的 `SKILL.md` 约定。

详细出处 → docs/references.md。

许可证

Apache-2.0。附带独立 LICENSE 文件的捆绑技能和模板保留其各自许可，包括 design-templates/guizang-ppt/（MIT，@op7418),)）、design-templates/html-ppt/（MIT，@lewislulu),)）和 skills/web-clone/（MIT，@Jane-xiaoer).)）。 USD 预算：$0/$3；剩余 $3——每三个月 $3 买咖啡。

56 KiB Raw Permalink Blame History Unescape Escape