From cd4717bbb03b143797c16a5de580867dcc64cbd1 Mon Sep 17 00:00:00 2001 From: wehub-resource-sync Date: Mon, 13 Jul 2026 09:50:59 +0000 Subject: [PATCH] docs: make Chinese README the default --- README.md | 644 +++++++++++++++++++++++++++--------------------------- 1 file changed, 327 insertions(+), 317 deletions(-) diff --git a/README.md b/README.md index abe3c9d..8bc18d3 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,27 @@ -

Open Design: The open-source Claude Design alternative

+ +> [!NOTE] +> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。 +> [English](./README.en.md) · [原始项目](https://github.com/nexu-io/open-design) · [上游 README](https://github.com/nexu-io/open-design/blob/HEAD/README.md) +> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。 -> 🔥 **Open Design 0.13.0 — _Stay in Flow_ is here.** Long design sessions used to break on every interruption — a run lost its place, a model picker made you guess, an export needed one more detour. 0.13.0 keeps the session alive: resume Codex / OpenCode / Pi / Open Design Cloud runs across turns, pick the right model faster, and hand off screenshot-backed PPTX / PDF without leaving the app. [Download 0.13.0](https://github.com/nexu-io/open-design/releases) · [Release notes](https://github.com/nexu-io/open-design/releases/tag/open-design-v0.13.0) +

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](https://github.com/nexu-io/open-design/releases) · [更新日志](https://github.com/nexu-io/open-design/releases/tag/open-design-v0.13.0)) > -> ⚡ **Open Design Cloud — the official model service.** One recharge to use GPT, Claude, Gemini, and DeepSeek inside Open Design: 20+ flagship models, zero config, billed by real token usage. [Try Open Design Cloud](https://open-design.ai/cloud/?utm_source=github&utm_medium=referral&utm_content=readme_try_cloud) +> ⚡ **Open Design Cloud — 官方模型服务。** 一次充值即可在 Open Design 中使用 GPT、Claude、Gemini 和 DeepSeek：20+ 旗舰模型，零配置，按实际 token 用量计费。[试用 Open Design Cloud](https://open-design.ai/cloud/?utm_source=github&utm_medium=referral&utm_content=readme_try_cloud)) > -> 🏅 **The Open Design Fellow program is now open.** If you also believe design should be open — become an Open Design Fellow, shape the product alongside the core team, and help more people take part in defining the future of design. Details → [`MAINTAINERS.md`](MAINTAINERS.md) and [Discord](https://discord.gg/mHAjSMV6gz). +> 🏅 **Open Design Fellow 计划现已开放。** 如果你也相信设计应该是开放的——成为 Open Design Fellow，与核心团队一起塑造产品，帮助更多人参与定义设计的未来。详情 → [`MAINTAINERS.md`](MAINTAINERS.md) 和 [Discord](https://discord.gg/mHAjSMV6gz).)

- Open Design hero banner — the headline "The open-source Claude Design alternative" over a classical scene of columns and robed figures on a digital-code backdrop, with stat cards for design systems, plugins, coding agents, and media providers + Open Design 主横幅 — 标题"开源的 Claude Design 替代方案"叠加在柱廊与长袍人物的古典场景上，背景为数字代码，配有设计系统、插件、编程代理和媒体提供商的统计卡片

- Website · - Download · + 官网 · + 下载 · Open Design Cloud · Discord · - Follow @OpenDesignHQ + 关注 @OpenDesignHQ

@@ -29,28 +35,27 @@ --- -## What is Open Design +## 什么是 Open Design -🎨 **The open-source Claude Design alternative.**  🖥️ **Local-first native desktop app for macOS and Windows.**  ⚡ **Composable skills, brand-grade `DESIGN.md` design systems, and ready-to-use plugins.**  🖼️ Generates **web · desktop · mobile prototypes**, **live dashboards / artifacts**, **decks**, **images**, **video**, plus **HyperFrames** motion graphics. 🔒 Sandboxed iframe preview · HTML / PDF / PPTX / MP4 export.  🤖 **Runs on Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity and 22 local CLIs**, or any OpenAI-compatible endpoint via BYOK. +🎨 **开源的 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 is what you get when the **agent-native** loop Anthropic shipped with Claude Design — discover the brief, lock the direction, stream the artifact, critique, deliver — stops being closed and becomes a **filesystem of skills, design systems, and plugins** that the coding agents already on your laptop can read, write, and remix. Your CLI becomes the design engine, your laptop becomes the studio, and your team's `DESIGN.md` becomes the brand contract. - -It's also the **Figma alternative for the agent era** — instead of pushing pixels on a canvas, it delivers single-page artifacts in real CSS, real fonts, real components, exported straight to HTML / PDF / PPTX / MP4 — already shaped by your design system, already runnable inside the agent you use every day. +Open Design 是当 Anthropic 随 Claude Design 发布的**原生代理（agent-native）**循环——发现需求简报、锁定方向、流式生成工件、评审、交付——不再封闭，而是变成一个**文件系统级的技能、设计系统和插件集合**，你笔记本电脑上已有的编程代理可以直接读取、写入和重新组合。你的 CLI 成为设计引擎，你的笔记本电脑成为工作室，你团队的 `DESIGN.md` 成为品牌契约。 +它也是**代理时代的 Figma 替代方案**——无需在画布上逐像素调整，它交付的是使用真实 CSS、真实字体、真实组件的单页工件，直接导出为 HTML / PDF / PPTX / MP4——已经过你的设计系统塑造，已经可以在你每天使用的代理中运行。 --- -## Product tour +## 产品导览 -A quick look at what Open Design is and what it does. Start from **Home**, orchestrate repeat workflows with **Automation**, distill a brand contract in **Design System**, and extend with **Plugins** and **integrations**; inside any project's **Studio**, the same design system streams out prototypes, live artifacts, HyperFrames, decks, and images. +快速了解 Open Design 是什么、能做什么。从**首页（Home）**开始，用**自动化（Automation）**编排重复工作流，在**设计系统（Design System）**中提炼品牌契约，并通过**插件（Plugin）**和**集成（Integrations）**进行扩展；在任意项目的**工作室（Studio）**中，同一套设计系统可流式生成原型、实时工件、HyperFrame、演示文稿和图片。 -### Core pages +### 核心页面
-Home page
-Home — the overview entry point. Pick a skill and a design system, type the brief, and kick off everything from one place. +首页
+首页（Home） — 总览入口。选择一项技能和一套设计系统，输入需求简报，一切从这里启动。
@@ -58,248 +63,248 @@ A quick look at what Open Design is and what it does. Start from **Home**, orche
-Automation page
-Automation — orchestrate repetitive design workflows into reusable, schedulable automations. +自动化页面
+自动化（Automation） — 将重复性设计工作流编排为可复用、可调度的自动化流程。 		-Design System page
-Design System — distill your team's DESIGN.md into a brand contract that shapes every output. +设计系统页面
+设计系统（Design System） — 将团队的 DESIGN.md 提炼为塑造每一次输出的品牌契约。
-Plugin page
-Plugin — browse, install, and distribute workflow plugins to extend generation on demand. +插件页面
+插件（Plugin） — 浏览、安装和分发工作流插件，按需扩展生成能力。 		-Integrations page
-Integrations — connect external systems and MCP tools, and use Open Design from any IDE, script, or automation. +集成页面
+集成（Integrations） — 连接外部系统和 MCP 工具，从任意 IDE、脚本或自动化流程中使用 Open Design。
-### Studio — many artifact types in one project +### 工作室（Studio）—— 一个项目，多种工件类型 -Inside a project's Studio, the same design system streams out multiple artifact types: +在项目的工作室中，同一套设计系统可流式生成多种工件类型：
-Prototype
-Prototype — single-page HTML artifacts that read your design system and render in a sandboxed iframe, previewable instantly and downloadable as source. +原型
+原型（Prototype） — 单页 HTML 工件，读取你的设计系统并在沙盒 iframe 中渲染，可即时预览并以源码形式下载。 		HyperFrame
-HyperFrame — programmatic motion and animated graphics, rendered to a real MP4 (e.g. 1920×1080 · 30fps). +HyperFrame — 程序化动态与动画图形，渲染为真实 MP4（例如 1920×1080 · 30fps）。
-Deck
-Deck — pitch decks you can page through, navigate by keyboard, and export to PPTX / PDF. +演示文稿
+演示文稿（Deck） — 可翻页浏览的提案演示文稿，支持键盘导航，可导出为 PPTX / PDF。 		-Image
-Image — brand-grade images and visual assets, with high-resolution generation and download. +图片
+图片（Image） — 品牌级图片和视觉素材，支持高分辨率生成与下载。
--- -## Platform Compatibility +## 平台兼容性 -> Open Design ships as **skills, a CLI, and an MCP server** that mainstream coding agents consume natively. Once OD is installed, a single `od mcp install ` wires the MCP server into that agent's config, and you call the same tools from inside any agent. +> Open Design 以 **skills、CLI 和 MCP 服务器** 的形式交付，主流编码代理（coding agent）可原生消费。安装 OD 后，一条 `od mcp install ` 即可将 MCP 服务器接入该代理的配置，并在任意代理内调用相同的工具。 -| Coding agent / platform          | Status    | One-line MCP server install                    | +| 编码代理 / 平台          | 状态    | 一行 MCP 服务器安装命令                    | |---|:---:|---| -| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ Supported | `od mcp install claude` | -| [Codex CLI](https://github.com/openai/codex) | ✅ Supported | `od mcp install codex` | -| [DeepSeek Reasonix](https://github.com/esengine/DeepSeek-Reasonix) | ✅ Supported | `od mcp install reasonix` | -| [Cursor](https://www.cursor.com/cli) | ✅ Supported | `od mcp install cursor` | -| [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ Supported | `od mcp install copilot` | -| [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ Supported | `od mcp install copilot` | -| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | ✅ Supported | `od mcp install gemini` | -| [OpenCode](https://opencode.ai/) | ✅ Supported | `od mcp install opencode` | -| [OpenClaw](https://github.com/openclaw/openclaw) | ✅ Supported | `od mcp install openclaw` | -| [Antigravity](https://antigravity.google) | ✅ Supported | `od mcp install antigravity` | -| [Cline](https://github.com/cline/cline) | ✅ Supported | `od mcp install cline` | -| [Trae](https://www.trae.ai/) | ✅ Supported | `od mcp install trae` | -| [Kimi CLI](https://github.com/MoonshotAI/kimi-cli) | ✅ Supported | `od mcp install kimi` | -| [Kiro](https://kiro.dev) | ✅ Supported | `od mcp install kiro` | -| [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ Supported | `od mcp install pi` | -| [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ Supported | `od mcp install vibe` | -| [Hermes Agent](https://github.com/nousresearch/hermes-agent) | ✅ Supported | `od mcp install hermes` | +| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ 已支持 | `od mcp install claude` | +| [Codex CLI](https://github.com/openai/codex) | ✅ 已支持 | `od mcp install codex` | +| [DeepSeek Reasonix](https://github.com/esengine/DeepSeek-Reasonix) | ✅ 已支持 | `od mcp install reasonix` | +| [Cursor](https://www.cursor.com/cli) | ✅ 已支持 | `od mcp install cursor` | +| [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ 已支持 | `od mcp install copilot` | +| [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ 已支持 | `od mcp install copilot` | +| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | ✅ 已支持 | `od mcp install gemini` | +| [OpenCode](https://opencode.ai/) | ✅ 已支持 | `od mcp install opencode` | +| [OpenClaw](https://github.com/openclaw/openclaw) | ✅ 已支持 | `od mcp install openclaw` | +| [Antigravity](https://antigravity.google) | ✅ 已支持 | `od mcp install antigravity` | +| [Cline](https://github.com/cline/cline) | ✅ 已支持 | `od mcp install cline` | +| [Trae](https://www.trae.ai/) | ✅ 已支持 | `od mcp install trae` | +| [Kimi CLI](https://github.com/MoonshotAI/kimi-cli) | ✅ 已支持 | `od mcp install kimi` | +| [Kiro](https://kiro.dev) | ✅ 已支持 | `od mcp install kiro` | +| [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ 已支持 | `od mcp install pi` | +| [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ 已支持 | `od mcp install vibe` | +| [Hermes Agent](https://github.com/nousresearch/hermes-agent) | ✅ 已支持 | `od mcp install hermes` | -`od mcp install --print` for a dry-run preview · `--uninstall` to remove · full list with `od mcp install --help`. +`od mcp install --print` 用于试运行预览 · `--uninstall` 用于移除 · 完整列表见 `od mcp install --help`。

- The 21 coding-agent CLIs Open Design supports — Claude Code · Codex · OpenCode · Hermes · Antigravity · Gemini · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Devin · Trae + Open Design 支持的 21 款编码代理 CLI — Claude Code · Codex · OpenCode · Hermes · Antigravity · Gemini · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Devin · Trae

-**No CLI installed?** The BYOK proxy at `POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream` gives you the same loop (no process spawn) — paste `baseUrl` + `apiKey` + `model`, with support for OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM, or any OpenAI-compatible endpoint. Per-target SSRF protection blocks internal IPs / link-local / CGNAT at the daemon edge. +**未安装 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。 -The adapter contract and stream parsers live in [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts). Adding a new CLI is one entry — see [`docs/agent-adapters.md`](docs/agent-adapters.md). +适配器契约与流解析器位于 [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts)。新增 CLI 只需一条配置项 — 参见 [`docs/agent-adapters.md`](docs/agent-adapters.md)。 --- -## Demo +## 演示 -Four core product categories, all rendered by a coding agent running on your laptop. Click a thumbnail to see the real example. +四大核心产品类别，均由在你笔记本上运行的编码代理渲染。点击缩略图查看真实示例。 -### 1 · Prototypes — web · desktop · mobile +### 1 · 原型 — Web · 桌面 · 移动 -The default output surface. Single-page HTML artifacts that read your `DESIGN.md` and render in a sandboxed iframe. +默认输出界面。单页 HTML 产物会读取你的 `DESIGN.md`，并在沙箱 iframe 中渲染。
-Entry view
-Entry view — pick a skill, pick a design system, type the brief. One surface for prototypes, dashboards, decks, mobile apps, magazine pages. +入口视图
+入口视图 — 选择 skill、选择设计系统、输入需求简报。原型、仪表盘、演示文稿、移动应用、杂志页面，统一在一个界面完成。 		-Mobile onboarding
-Mobile prototype — pixel-accurate iPhone 15 Pro chrome, multi-screen flows. The agent never redraws the phone frame; shared device frames live in assets/frames/. +移动端引导
+移动原型 — 像素级精确的 iPhone 15 Pro 外框，多屏流程。代理不会重绘手机边框；共享设备外框位于 assets/frames/。
-Web prototype dating-web
-Web prototype — an editorial dashboard with scrollbars, KPIs, and charts. Rendered straight from design-templates/dating-web/. +Web 原型 dating-web
+Web 原型 — 带滚动条、KPI 与图表的编辑型仪表盘。直接由 design-templates/dating-web/ 渲染。 		-Gamified app
-Mobile app prototype — a three-screen gamified flow with XP ribbons and quest detail. Hand off straight to Cursor / Codex / Claude Code to turn into React/Next/Vue. +游戏化应用
+移动应用原型 — 三屏游戏化流程，含 XP 绶带与任务详情。可直接交给 Cursor / Codex / Claude Code 转为 React/Next/Vue。
-### 2 · Live artifacts & dashboards +### 2 · 实时产物与仪表盘 -Live dashboards, decision rooms, KPI walls — single-page artifacts that pull data through a tweaks panel and stay editable in place. +实时仪表盘、决策室、KPI 墙 — 单页产物通过微调面板拉取数据，并支持就地编辑。
-Live dashboard
-Live dashboard — an editable KPI wall whose tweaks panel surfaces the parameters worth nudging. The agent emits a manifest, and the iframe re-renders without a reload. +实时仪表盘
+实时仪表盘 — 可编辑的 KPI 墙，微调面板展示值得微调的参数。代理输出 manifest，iframe 无需刷新即可重新渲染。 		-Decision room
-Decision room — a multi-source briefing artifact for product / research / ops meetings. +决策室
+决策室 — 面向产品 / 研究 / 运营会议的多源简报产物。
-GitHub dashboard
-GitHub-style dashboard — repo metrics presented as a live artifact. +GitHub 仪表盘
+GitHub 风格仪表盘 — 以实时产物形式呈现的仓库指标。 		-Flow live dashboard
-Flow live-dashboard template — a domain-specific KPI template, branded through the active DESIGN.md. +Flow 实时仪表盘
+Flow 实时仪表盘模板 — 领域专属 KPI 模板，通过当前 DESIGN.md 完成品牌化。
-### 3 · Decks — magazine decks, weekly updates, pitches +### 3 · 演示文稿 — 杂志风演示、周报、路演
-Magazine deck (guizang-ppt)
-Deck mode (guizang-ppt) — magazine layouts, WebGL hero, P0/P1/P2 checklists. Bundled verbatim from op7418/guizang-ppt-skill with its original license preserved. +杂志风演示文稿（guizang-ppt）
+演示文稿模式（guizang-ppt） — 杂志版式、WebGL 主视觉、P0/P1/P2 检查清单。原样打包自 op7418/guizang-ppt-skill，并保留其原始许可证。 		-Swiss deck
-Swiss International-style deck — grid-anchored, monochrome accents. One of 15 deck templates and 36 themes under design-templates/html-ppt-*/. +瑞士风格演示文稿
+瑞士国际风格演示文稿 — 网格锚定、单色点缀。design-templates/html-ppt-*/ 下 15 套演示文稿模板 与 36 套主题 之一。
-Every deck exports to **HTML** (single file, inlined assets), **PDF** (browser print, deck-aware), **PPTX** (agent-driven skill), **ZIP** (archive), or **Markdown**. +每份演示文稿可导出为 **HTML**（单文件、内联资源）、**PDF**（浏览器打印、演示文稿感知）、**PPTX**（代理驱动的 skill）、**ZIP**（归档）或 **Markdown**。 -### 4 · Images — `gpt-image-2`, ImageRouter, custom API +### 4 · 图像 — `gpt-image-2`、ImageRouter、自定义 API - - - - - + + + + +
Illustrated city food map
Illustrated city food map
Hand-drawn editorial travel poster		Cinematic elevator scene
Cinematic elevator scene
Single-frame editorial still		Cyberpunk anime portrait
Cyberpunk portrait
Profile avatar — neon face text		3D stone staircase evolution
3D stone staircase
Hewn-stone infographic		Glamorous portrait
Glamorous portrait
Editorial studio shot		插画城市美食地图
插画城市美食地图
手绘编辑型旅行海报		电影感电梯场景
电影感电梯场景
单帧编辑型静帧		赛博朋克动漫肖像
赛博朋克肖像
个人头像 — 霓虹面部文字		3D 石阶演变
3D 石阶
凿石信息图		魅力肖像
魅力肖像
编辑型棚拍
-**93 ready-to-replicate prompts** live in [`prompt-templates/`](prompt-templates/) — preview thumbnails, full prompt body, target model, aspect ratio, and source attribution. One click drops a brief into the composer. +**93 个即用型提示词模板**存放在 [`prompt-templates/`](prompt-templates/) 中——预览缩略图、完整提示词正文、目标模型、宽高比及来源归属一目了然。一键即可将简报放入编辑器。 -### 5 · Video & HyperFrames — agent-native motion graphics +### 5 · 视频与 HyperFrames —— Agent 原生的动态图形 -**[HyperFrames][hyperframes]** is HeyGen's open-source, agent-native video framework, integrated as a first-class citizen in Open Design. The agent writes HTML + CSS + GSAP, and HyperFrames renders it to a deterministic MP4 via headless Chrome + FFmpeg. Pair it with **Seedance 2.0** for cinematic t2v / i2v, **Veo 3 / Sora 2 / Kling 2** for routed model variants, and **Suno v5 / Lyria 2** for the audio layer. +**[HyperFrames][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**（用于音频层）搭配使用。 - - - - + + + + - - - - + + + +
SaaS promo
30s SaaS product promo · 16:9 · UI 3D reveals		TikTok karaoke
TikTok karaoke talking-head · 9:16 · TTS + word-synced captions		Brand sizzle reel
30s brand sizzle reel · 16:9 · audio-reactive kinetic type		Bar chart race
Bar chart race · 16:9 · NYT-style data infographic		SaaS 宣传片
30 秒 SaaS 产品宣传片 · 16:9 · UI 3D 展开		TikTok 卡拉 OK
TikTok 卡拉 OK 人物出镜 · 9:16 · TTS + 字幕逐词同步		品牌宣传短片
30 秒品牌宣传短片 · 16:9 · 音频响应式动态字体		柱状图竞赛
柱状图竞赛 · 16:9 · 纽约时报风格数据信息图
Flight map
Flight map · 16:9 · Apple-style route reveal		Logo outro
4s cinematic logo outro · 16:9 · piece-by-piece assembly + bloom		Money counter
$0 → $10K money counter · 9:16 · Apple-style hype		Website to video
Website-to-video · 16:9 · captures the site at 3 viewports		航班路线图
航班路线图 · 16:9 · 苹果风格航线展示		Logo 结尾
4 秒电影级 Logo 结尾 · 16:9 · 逐片拼接 + 绽放效果		金额计数器
$0 → $10K 金额计数器 · 9:16 · 苹果风格 hype 效果		网站转视频
网站转视频 · 16:9 · 在 3 种视口下捕获网站
-11 HyperFrames templates + 39 Seedance prompts ship with the repo. Catalog thumbnails © HeyGen; the framework is Apache-2.0. The OD-specific render workflow (composition cache, sandbox-exec workaround, MP4-as-chip) is detailed in [`design-templates/hyperframes/`](design-templates/hyperframes/). +本仓库附带 11 个 HyperFrames 模板 + 39 个 Seedance 提示词。目录缩略图 © HeyGen；框架采用 Apache-2.0 许可。OD 专属渲染工作流（合成缓存、沙箱执行绕过、MP4 作为素材块）详见 [`design-templates/hyperframes/`](design-templates/hyperframes/)。 [hyperframes]: https://github.com/heygen-com/hyperframes --- -## Why Open Design +## 为什么选择 Open Design -> **In April 2026, Anthropic released Claude Design — the first time an LLM stopped writing prose and started delivering design artifacts directly.** It went viral. But it stayed closed-source, paid-only, cloud-only, locked to Anthropic's model, Anthropic's skills, Anthropic's surface. No checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent. +> **2026 年 4 月，Anthropic 发布了 Claude Design——这是 LLM 首次不再生成文字，而是直接交付设计产物。** 它迅速走红，但仍是闭源的、仅付费、仅云端、锁定在 Anthropic 的模型、Anthropic 的技能、Anthropic 的界面上。没有结账功能，无法自托管，不能部署到 Vercel，也不能替换为你自己的 Agent。 -Open Design (OD) is the open-source alternative. Same loop, same artifact-first mental model, none of the lock-in: +Open Design (OD) 是开源的替代方案。同样的循环，同样的产物优先思维模型，没有任何锁定： -- 🤖 **Agent-native, model-agnostic.** We don't ship an agent. The `claude` / `codex` / `cursor-agent` / `copilot` / `hermes` / `kimi` already on your `PATH` are the design engine. Swap with one click. -- 🧠 **Brand-grade by default.** Every render reads the active `DESIGN.md` — a 9-section schema covering palette, type, spacing, motion, voice, anti-patterns. 150 systems ship with the repo (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Drop a folder in, the picker finds it. -- 🖥️ **Local-first, BYOK at every layer.** Native desktop apps for macOS (Apple Silicon + Intel) and Windows (x64). Linux AppImage on the optional release lane. No telemetry, no cloud round-trip. Before describing daemon data paths, contributors and operators MUST read `AGENTS.md` → **Daemon data directory contract**. This README MUST NOT restate it. -- 🌍 **Composable on three planes.** **Plugins** carry runnable workflows · **skills** carry the agent's design taste · **design systems** carry the brand. All three are plain files anyone can author, version, and publish. -- 🔁 **Refresh an existing codebase.** Hand a `git` repo + `DESIGN.md` to the agent and it refactors your real components to the brand spec. Dedicated plugins migrate Figma / Pencil workflows into React / Next.js / Vue code. -- 🔒 **Privacy by conviction.** Everything runs where your data lives — your laptop, your team's server, your Vercel project. When the network is needed, the BYOK proxy is SSRF-guarded. +- 🤖 **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 保护。 -### Comparison +### 对比 | | Claude Design | Figma | Lovable / v0 / Bolt | **Open Design** | |---|---|---|---|---| -| Open source | ❌ | ❌ | ❌ | **✅ Apache-2.0** | -| Self-host / desktop | ❌ | ❌ | ❌ | **✅ macOS + Windows + Vercel** | -| Agent-native (runs in your CLI) | Anthropic only | ❌ | Cloud agent only | **✅ 22 CLIs + BYOK** | -| Brand-grade `DESIGN.md` | Proprietary | Theme JSON | Limited tokens | **✅ 150 systems shipped** | -| Skills / plugins / templates | Closed | Plugin store | Closed | **✅ 100+ skills · 261 plugins** | -| HyperFrames (HTML→MP4) | ❌ | ❌ | ❌ | **✅ First-class** | -| Refresh an existing repo to brand | ❌ | ❌ | ❌ | **✅ via agent + `DESIGN.md`** | -| Minimum billing | Pro / Max / Team | Pro / Org | Pro / Team | **BYOK · any compatible endpoint** | +| 开源 | ❌ | ❌ | ❌ | **✅ 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 · 任意兼容端点** | --- -## Quick start +## 快速开始 -### 🖥️ Download the desktop app (recommended — zero config) +### 🖥️ 下载桌面应用（推荐——零配置） -The fastest way to use Open Design. No Node, no pnpm, no clone. +使用 Open Design 最快的方式。无需 Node，无需 pnpm，无需克隆。 -- **macOS** (Apple Silicon · Intel x64) → [**open-design.ai**](https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download_macos) or [GitHub Releases](https://github.com/nexu-io/open-design/releases) -- **Windows** (x64) → [**open-design.ai**](https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download_windows) or [GitHub Releases](https://github.com/nexu-io/open-design/releases) -- **Linux** (AppImage, optional lane) → [GitHub Releases](https://github.com/nexu-io/open-design/releases) +- **macOS**（Apple Silicon · Intel x64）→ [**open-design.ai**](https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download_macos)) 或 [GitHub Releases](https://github.com/nexu-io/open-design/releases)) +- **Windows**（x64）→ [**open-design.ai**](https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download_windows)) 或 [GitHub Releases](https://github.com/nexu-io/open-design/releases)) +- **Linux**（AppImage，可选通道）→ [GitHub Releases](https://github.com/nexu-io/open-design/releases)) -After install: the app auto-detects every coding-agent CLI on your `PATH`, loads 100+ skills and 150 design systems, and lets you type a brief in the entry view. +安装后：应用会自动检测你的 `PATH` 上的每个编程 Agent CLI，加载 100+ 技能和 150 套设计系统，让你在入口视图中输入简报即可开始。 -### 🤖 Install into your coding agent (no UI) +### 🤖 安装到你的编程 Agent（无需图形界面） -You can use Open Design without ever opening the GUI — call it as a skill, plugin, or MCP server inside Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi, and more. +无需打开 GUI 即可使用 Open Design——在 Claude Code、Codex、Cursor、Copilot、OpenClaw、Antigravity、Hermes、Kimi 等工具中，以技能、插件或 MCP 服务器的形式调用。 ```bash # One-line install into the agent you're using: @@ -312,23 +317,22 @@ od mcp install curl -fsSL https://open-design.ai/install.sh | sh -s ``` -`install.sh` is a thin shell wrapper around `od mcp install`; it exists so the -hosted URL returns shell instead of the landing-page HTML fallback and fails -fast if your shell resolves a non-Open-Design `od` binary. +`install.sh` 是围绕 `od mcp install` 的轻量 shell 封装；它的存在是为了让托管 URL 返回 shell 而非落地页的 HTML 回退，并在你的 shell 解析到非 Open Design 的 `od` 二进制文件时快速失败。 -> **WSL2 users:** If your coding-agent CLIs run inside WSL2, follow the -> [`WSL2 setup guide`](docs/wsl-setup.md) first. Linux's `/usr/bin/od` can -> shadow Open Design's `od` command. +> **WSL2 用户：** 如果你的编程 Agent CLI 运行在 WSL2 内部，请先按照 +> [`WSL2 setup guide`](docs/wsl-setup.md) 操作。Linux 的 `/usr/bin/od` 可能 +> 会遮蔽 Open Design 的 `od` 命令。 +USD 预算：$0/$3；剩余 $3 -Then, inside the agent: +然后，在 agent 内部： ``` > Use open-design to generate a landing page with the Linear design system ``` -The agent reads `skills/`, picks the right `SKILL.md`, binds the `DESIGN.md` you named, and emits an `` previewable at `http://localhost:7456`. +agent 读取 `skills/`，选择合适的 `SKILL.md`，绑定你命名的 `DESIGN.md`，并生成一个可在 `http://localhost:7456` 预览的 ``。 -### 🐳 Run with Docker +### 🐳 使用 Docker 运行 ```bash git clone https://github.com/nexu-io/open-design.git @@ -339,15 +343,15 @@ docker compose up -d # open http://localhost:7456 ``` -> **macOS users:** If the web UI shows `Authorization: Bearer required`, Docker Desktop bridge networking is the cause. See [Docker Desktop on macOS](deploy/README.md#docker-desktop-on-macos) for the fix. +> **macOS 用户：** 如果 Web UI 显示 `Authorization: Bearer required`，是 Docker Desktop 桥接网络导致的问题。请参阅 [macOS 上的 Docker Desktop](deploy/README.md#docker-desktop-on-macos) 获取修复方法。 -### 🚀 Deploy on Sealos +### 🚀 部署到 Sealos [![Deploy on Sealos](https://sealos.io/Deploy-on-Sealos.svg)](https://sealos.io/products/app-store/open-design/) -The Sealos App Store template runs the published Open Design Docker image with persistent workspace storage and Basic Auth on the public proxy. For custom public or shared Docker deployments, follow the reverse-proxy and `OPEN_DESIGN_ALLOWED_ORIGINS` guidance in [`deploy/README.md`](deploy/README.md#local-compose). +Sealos 应用商店模板运行已发布的 Open Design Docker 镜像，并配置持久化工作区存储和公共代理上的 Basic Auth 认证。对于自定义的公共或共享 Docker 部署，请遵循 [`deploy/README.md`](deploy/README.md#local-compose) 中的反向代理和 `OPEN_DESIGN_ALLOWED_ORIGINS` 指南。 -### 🧑‍💻 Run from source +### 🧑‍💻 从源码运行 ```bash git clone https://github.com/nexu-io/open-design.git @@ -356,23 +360,23 @@ corepack enable && pnpm install pnpm tools-dev run web ``` -Node `~24`, pnpm `10.33.x`. WSL2 users, see [`docs/wsl-setup.md`](docs/wsl-setup.md); native Windows users, see [`docs/windows-troubleshooting.md`](docs/windows-troubleshooting.md). Full quickstart, env vars, Nix flake, and packaged build flow → [`QUICKSTART.md`](QUICKSTART.md). +需要 Node `~24`，pnpm `10.33.x`。WSL2 用户请参阅 [`docs/wsl-setup.md`](docs/wsl-setup.md)；原生 Windows 用户请参阅 [`docs/windows-troubleshooting.md`](docs/windows-troubleshooting.md)。完整的快速入门、环境变量、Nix flake 和打包构建流程 → [`QUICKSTART.md`](QUICKSTART.md)。 -### A full workflow — from brief to artifact +### 完整工作流 — 从需求简报（brief）到产出物（artifact） `brief → plugin → direction → design system → artifact → handoff → memory` -1. **A PM submits a brief.** The plugin picker offers landing page · pitch deck · dashboard · social post · PM spec · OKR scorecard… -2. **A designer (or the agent) locks the direction.** No brand? Pick from 5 curated directions. Have a brand? Drop a screenshot / URL → the agent connects GitHub, imports Figma, and codifies a reusable `DESIGN.md`. -3. **The agent emits the first ``.** Plugin + skill + `DESIGN.md` are bound. It streams into a sandboxed iframe, editable in place — not "regenerate from scratch." -4. **Hand off to engineering.** The artifact is real HTML/CSS — drop it into Cursor, Codex, or Claude Code to keep building as code. Or export PPTX / PDF / MP4 straight to marketing. -5. **Open Design gets smarter as you use it.** Your screenshots, fonts, palettes, and confirmed artifacts accumulate as defaults for the next session. Less rework, less drift. +1. **产品经理提交需求简报。** 插件选择器提供落地页 · 演讲文稿 · 仪表盘 · 社交媒体帖子 · 产品经理规格说明 · OKR 计分卡等选项… +2. **设计师（或 agent）确定方向。** 没有品牌？从 5 个精选方向中选择。已有品牌？拖入截图 / URL → agent 连接 GitHub、导入 Figma，并将可复用的 `DESIGN.md` 固化为代码。 +3. **agent 生成第一个 ``。** 插件 + 技能 + `DESIGN.md` 已绑定。它流式渲染到沙箱化 iframe 中，可原地编辑 — 无需"从头重新生成"。 +4. **移交给工程团队。** 产出物是真实的 HTML/CSS — 将其放入 Cursor、Codex 或 Claude Code 中继续以代码方式构建。或直接导出 PPTX / PDF / MP4 给市场团队。 +5. **Open Design 越用越智能。** 你的截图、字体、调色板和已确认的产出物会累积为下次会话的默认值。减少返工，减少偏差。 --- -## Use Open Design from your coding agent +## 在编码 agent 中使用 Open Design -Open Design ships a **stdio MCP server** and per-agent **install scripts**. Any MCP-compatible agent in another repo can read files from your local Open Design projects directly — tokens CSS, JSX components, entry HTML — as a structured API queryable by name. The agent always sees the live file, not a stale export. +Open Design 提供 **stdio MCP 服务器**和针对每个 agent 的**安装脚本**。任何其他仓库中兼容 MCP 的 agent 都可以通过结构化 API（按名称查询）直接读取本地 Open Design 项目中的文件 — CSS token、JSX 组件、入口 HTML。agent 始终看到的是实时文件，而非过时的导出。 ```bash # One-line install (16+ CLIs supported): @@ -386,111 +390,111 @@ od plugin run web-prototype --brief "..." od skill list --scenario marketing ``` -**Why MCP?** Exporting and re-attaching a zip every iteration breaks flow. MCP exposes the design source directly — the agent always sees the live file. +**为什么选择 MCP？** 每次迭代都要导出并重新附加 zip 文件会打断工作流。MCP 直接暴露设计源文件 — agent 始终看到的是实时文件。 -**For an agent starting from scratch,** the installer places `~/.config//open-design.json` (or the platform equivalent) plus a copy-paste MCP snippet. Cursor gets a one-click deeplink; Claude Code gets a `claude mcp add-json` one-liner; every other agent gets JSON in the schema its config expects. Full per-agent flow → **Settings → MCP server** in the desktop app, or [`docs/agent-adapters.md`](docs/agent-adapters.md). +**对于从零开始的 agent，** 安装器会放置 `~/.config//open-design.json`（或对应的平台版本）以及一个可复制粘贴的 MCP 配置片段。Cursor 获得一键深层链接；Claude Code 获得 `claude mcp add-json` 一行命令；其他所有 agent 则获得其配置所需的 JSON 格式。完整的各 agent 流程 → 桌面应用中的 **设置 → MCP 服务器**，或参阅 [`docs/agent-adapters.md`](docs/agent-adapters.md)。 -**Security model.** Read-only by default, the daemon binds to `127.0.0.1`, and SSRF is blocked at the proxy edge. LAN exposure requires an explicit `OD_BIND_HOST` plus `OD_ALLOWED_ORIGINS`. Connector credentials and live-artifact preview routes stay loopback-only regardless. +**安全模型。** 默认只读，守护进程绑定到 `127.0.0.1`，SSRF 在代理边缘被阻止。局域网暴露需要显式的 `OD_BIND_HOST` 加上 `OD_ALLOWED_ORIGINS`。连接器凭证和实时产出物预览路由无论如何都仅限回环地址访问。 -**Internally-hosted model endpoints.** To prevent SSRF, the daemon blocks provider base URLs that resolve to private/internal address ranges (RFC1918, link-local, CGNAT, and cloud-metadata IPs) by default, surfacing `Internal IPs blocked`. If you run an internally-hosted gateway (e.g. LiteLLM or Ollama on a VPN-only `10.x`/`192.168.x` address), opt that host out with `OD_ALLOWED_INTERNAL_HOSTS=,,...` — a comma- or whitespace-separated list of bare hostnames or IPs (`10.0.0.5`, `litellm.internal.corp`; a `host:port` or full URL is accepted and reduced to its hostname; IPv6 must be bracketed, e.g. `[fd00::1]`). The allowlist is strict opt-in (empty by default), exact-host (no subdomain/substring matching), and applies **only** to provider endpoints you configure (connection test, model discovery, BYOK chat). It deliberately does **not** relax the guard on download URLs returned inside upstream responses, which stay blocked. A malformed entry — or CIDR notation, which is not supported — is dropped with a warning rather than silently trusted, so a typo never quietly widens (or fails to widen) the guard. Allowlisting a hostname trusts whatever it resolves to (like `OD_ALLOWED_ORIGINS`); allowlist the resolved IP instead if you want the DNS-resolved address re-checked. +**内部托管的模型端点。** 为防止 SSRF，守护进程默认阻止解析到私有/内部地址范围（RFC1918、链路本地、CGNAT 和云元数据 IP）的提供商基础 URL，并显示 `Internal IPs blocked`。如果你运行内部托管的网关（例如 LiteLLM 或 Ollama，位于仅 VPN 可访问的 `10.x`/`192.168.x` 地址上），可以使用 `OD_ALLOWED_INTERNAL_HOSTS=,,...` 将该主机加入白名单 — 这是一个以逗号或空白分隔的裸主机名或 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 +## 技能（Skills） -**100+ skills ship in the box** — each is a folder under [`skills/`](skills/) following the Claude Code [`SKILL.md`][skill] convention, extended with an `od:` frontmatter (`mode`, `platform`, `scenario`, `preview.type`, `design_system.requires`, `default_for`, `fidelity`, `example_prompt`). Drop a folder in, restart the daemon, it appears in the picker. +**内置 100+ 个技能** — 每个技能是 [`skills/`](skills/) 下的一个文件夹，遵循 Claude Code 的 [`SKILL.md`][skill] 规范，并扩展了 `od:` 前置元数据（`mode`、`platform`、`scenario`、`preview.type`、`design_system.requires`、`default_for`、`fidelity`、`example_prompt`）。放入一个文件夹，重启守护进程，它就会出现在选择器中。 -Two **modes** anchor the catalog: `prototype` (web/mobile/desktop single-page artifacts) and `deck` (horizontal-swipe presentations). Also `image`, `video`, `audio`, `template`, `design-system`, and `utility` modes. The **`scenario`** field groups them by audience: `design` · `marketing` · `operation` · `engineering` · `product` · `finance` · `hr` · `sale` · `personal`. +两种**模式**作为目录的核心：`prototype`（Web/移动端/桌面端单页产出物）和 `deck`（横向滑动演示文稿）。还有 `image`、`video`、`audio`、`template`、`design-system` 和 `utility` 模式。**`scenario`** 字段按受众进行分组：`design` · `marketing` · `operation` · `engineering` · `product` · `finance` · `hr` · `sale` · `personal`。 -| Skill | Mode | Scenario | What it produces | +| 技能（Skill） | 模式（Mode） | 场景（Scenario） | 产出内容 | |---|---|---|---| -| [`web-prototype`](design-templates/web-prototype/) | prototype | design | Default landing page / hero | -| [`saas-landing`](design-templates/saas-landing/) | prototype | marketing | Hero / features / pricing / CTA | -| [`dashboard`](design-templates/dashboard/) | prototype | operation | Admin / analytics (with sidebar) | -| [`mobile-app`](design-templates/mobile-app/) | prototype | design | iPhone 15 Pro / Pixel framed app | -| [`mobile-onboarding`](design-templates/mobile-onboarding/) | prototype | design | Splash · value-prop · sign-in flow | -| [`social-carousel`](design-templates/social-carousel/) | prototype | marketing | 3-card 1080×1080 carousel | -| [`email-marketing`](design-templates/email-marketing/) | prototype | marketing | Table-fallback-safe brand email | -| [`magazine-poster`](design-templates/magazine-poster/) | prototype | marketing | Single-page magazine layout | -| [`motion-frames`](design-templates/motion-frames/) | prototype | marketing | Looping CSS motion hero | -| [`sprite-animation`](design-templates/sprite-animation/) | prototype | marketing | 8-bit pixel animated explainer | -| [`pm-spec`](design-templates/pm-spec/) | prototype | product | PM spec doc (with TOC + decision log) | -| [`team-okrs`](design-templates/team-okrs/) | prototype | product | OKR scorecard | -| [`eng-runbook`](design-templates/eng-runbook/) | prototype | engineering | Incident runbook | -| [`finance-report`](design-templates/finance-report/) | prototype | finance | Exec finance summary | -| [`hr-onboarding`](design-templates/hr-onboarding/) | prototype | hr | Role onboarding plan | -| [`guizang-ppt`](design-templates/guizang-ppt/) | deck | marketing | Magazine-style web PPT (deck default) | -| [`html-ppt-*`](design-templates/) | deck | marketing | 15 deck templates × 36 themes (master template in [`design-templates/html-ppt/`](design-templates/html-ppt/)) | -| [`hyperframes`](design-templates/hyperframes/) | video | marketing | HTML → MP4 motion graphics (HeyGen OSS framework) | -| [`critique`](design-templates/critique/) | utility | design | Five-dimensional self-critique scoresheet | -| [`tweaks`](design-templates/tweaks/) | utility | design | AI-emitted tweaks-panel manifest | +| [`web-prototype`](design-templates/web-prototype/) | prototype | design | 默认落地页 / 主视觉 | +| [`saas-landing`](design-templates/saas-landing/) | prototype | marketing | 主视觉 / 特性 / 定价 / CTA | +| [`dashboard`](design-templates/dashboard/) | prototype | operation | 管理后台 / 分析面板（带侧边栏） | +| [`mobile-app`](design-templates/mobile-app/) | prototype | design | iPhone 15 Pro / Pixel 设备框展示应用 | +| [`mobile-onboarding`](design-templates/mobile-onboarding/) | prototype | design | 启动页 · 价值主张 · 注册流程 | +| [`social-carousel`](design-templates/social-carousel/) | prototype | marketing | 3 卡片 1080×1080 轮播 | +| [`email-marketing`](design-templates/email-marketing/) | prototype | marketing | 表格回退安全的品牌邮件 | +| [`magazine-poster`](design-templates/magazine-poster/) | prototype | marketing | 单页杂志排版 | +| [`motion-frames`](design-templates/motion-frames/) | prototype | marketing | 循环 CSS 动态主视觉 | +| [`sprite-animation`](design-templates/sprite-animation/) | prototype | marketing | 8-bit 像素动画解说 | +| [`pm-spec`](design-templates/pm-spec/) | prototype | product | 产品经理规格文档（含目录 + 决策日志） | +| [`team-okrs`](design-templates/team-okrs/) | prototype | product | OKR 计分卡 | +| [`eng-runbook`](design-templates/eng-runbook/) | prototype | engineering | 事故处理手册 | +| [`finance-report`](design-templates/finance-report/) | prototype | finance | 高管财务摘要 | +| [`hr-onboarding`](design-templates/hr-onboarding/) | prototype | hr | 岗位入职计划 | +| [`guizang-ppt`](design-templates/guizang-ppt/) | deck | marketing | 杂志风格 Web PPT（deck 模式默认） | +| [`html-ppt-*`](design-templates/) | deck | marketing | 15 个 deck 模板 × 36 个主题（主模板在 [`design-templates/html-ppt/`](design-templates/html-ppt/)） | +| [`hyperframes`](design-templates/hyperframes/) | video | marketing | HTML → MP4 动态图形（HeyGen OSS 框架） | +| [`critique`](design-templates/critique/) | utility | design | 五维自评评分表 | +| [`tweaks`](design-templates/tweaks/) | utility | design | AI 生成的微调面板清单 | -Full skill protocol → [`docs/skills-protocol.md`](docs/skills-protocol.md). Skill registry endpoint: `GET /api/skills`. +完整技能协议 → [`docs/skills-protocol.md`](docs/skills-protocol.md)。技能注册端点：`GET /api/skills`。 --- -## Design Systems +## 设计系统（Design Systems） -**150 brand-grade `DESIGN.md` systems** ship with the repo — each a single Markdown file with a 9-section schema (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns), from [`VoltAgent/awesome-design-md`][acd2]. Switch a system → the next render uses the new tokens. No theme JSON. +**仓库内置 150 套品牌级 `DESIGN.md` 系统**——每套均为单个 Markdown 文件，遵循 9 段式结构（色彩、字体、间距、布局、组件、动效、语态、品牌、反模式），涵盖 [`VoltAgent/awesome-design-md`][acd2]。切换系统后，下次渲染即使用新令牌，无需 Theme JSON。
-Full catalog (click to expand) +完整目录（点击展开） -**AI & LLM** — `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai` +**AI 与大模型** — `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai` -**Developer Tools** — `cursor` · `vercel` · `linear-app` · `framer` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `webflow` · `sanity` · `mintlify` · `lovable` · `composio` · `opencode-ai` · `voltagent` +**开发者工具** — `cursor` · `vercel` · `linear-app` · `framer` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `webflow` · `sanity` · `mintlify` · `lovable` · `composio` · `opencode-ai` · `voltagent` -**Productivity** — `notion` · `figma` · `miro` · `airtable` · `superhuman` · `intercom` · `zapier` · `cal` · `clay` · `raycast` +**生产力工具** — `notion` · `figma` · `miro` · `airtable` · `superhuman` · `intercom` · `zapier` · `cal` · `clay` · `raycast` -**Fintech** — `stripe` · `coinbase` · `binance` · `kraken` · `mastercard` · `revolut` · `wise` +**金融科技** — `stripe` · `coinbase` · `binance` · `kraken` · `mastercard` · `revolut` · `wise` -**E-commerce** — `shopify` · `airbnb` · `uber` · `nike` · `starbucks` · `pinterest` +**电商** — `shopify` · `airbnb` · `uber` · `nike` · `starbucks` · `pinterest` -**Media** — `spotify` · `playstation` · `wired` · `theverge` · `meta` +**媒体** — `spotify` · `playstation` · `wired` · `theverge` · `meta` -**Automotive** — `tesla` · `bmw` · `ferrari` · `lamborghini` · `bugatti` · `renault` +**汽车** — `tesla` · `bmw` · `ferrari` · `lamborghini` · `bugatti` · `renault` -**Other** — `apple` · `ibm` · `nvidia` · `vodafone` · `resend` · `spacex` +**其他** — `apple` · `ibm` · `nvidia` · `vodafone` · `resend` · `spacex` -**Starters** — `default` (Neutral Modern) · `warm-editorial` +**入门模板** — `default`（Neutral Modern）· `warm-editorial`
-Re-import the library via [`scripts/sync-design-systems.ts`](scripts/sync-design-systems.ts). Add your own brand → drop a `DESIGN.md` into `design-systems//`. Full guide → [`design-systems/README.md`](design-systems/README.md). +通过 [`scripts/sync-design-systems.ts`](scripts/sync-design-systems.ts) 重新导入库。添加自有品牌 → 将 `DESIGN.md` 放入 `design-systems//`。完整指南 → [`design-systems/README.md`](design-systems/README.md)。 [acd2]: https://github.com/VoltAgent/awesome-design-md --- -## Plugins +## 插件（Plugins） -**261 official plugins** live in [`plugins/_official/`](plugins/_official/). Each plugin is a **portable agent-skill folder** — a `SKILL.md` (readable by any agent that supports Agent Skills), plus an optional `open-design.json` manifest that gives Open Design marketplace metadata, inputs, previews, pipelines, and capability declarations. Jump straight to a category: +**261 个官方插件**位于 [`plugins/_official/`](plugins/_official/)。每个插件是一个**可移植的代理技能文件夹**——包含一个 `SKILL.md`（任何支持 Agent Skills 的代理均可读取），外加一个可选的 `open-design.json` 清单文件，提供 Open Design 市场元数据、输入、预览、流水线和能力声明。直接跳转到分类： -| Category | Count | Contents | +| 分类 | 数量 | 内容 | |---|---|---| -| [`scenarios/`](plugins/_official/scenarios/) | 11 | Complete design scenarios — [`od-default`](plugins/_official/scenarios/od-default/), [`od-design-refine`](plugins/_official/scenarios/od-design-refine/), [`od-figma-migration`](plugins/_official/scenarios/od-figma-migration/), [`od-code-migration`](plugins/_official/scenarios/od-code-migration/), [`od-react-export`](plugins/_official/scenarios/od-react-export/), [`od-nextjs-export`](plugins/_official/scenarios/od-nextjs-export/), [`od-vue-export`](plugins/_official/scenarios/od-vue-export/), [`od-media-generation`](plugins/_official/scenarios/od-media-generation/), [`od-new-generation`](plugins/_official/scenarios/od-new-generation/), [`od-tune-collab`](plugins/_official/scenarios/od-tune-collab/), [`od-plugin-authoring`](plugins/_official/scenarios/od-plugin-authoring/) | -| [`image-templates/`](plugins/_official/image-templates/) | 45 | One-shot image prompts — editorial, cinematic, product, portrait | -| [`video-templates/`](plugins/_official/video-templates/) | 50 | HyperFrames / Seedance / Veo motion templates | -| [`design-systems/`](plugins/_official/design-systems/) | 142 | Brand `DESIGN.md` wrapped as plugins | -| [`atoms/`](plugins/_official/atoms/) | 13 | Reusable UI fragments (buttons, heroes, KPI cards) | -| [`examples/`](plugins/_official/examples/) | 140 | Remixable reference outputs | +| [`scenarios/`](plugins/_official/scenarios/) | 11 | 完整设计场景 — [`od-default`](plugins/_official/scenarios/od-default/)、[`od-design-refine`](plugins/_official/scenarios/od-design-refine/)、[`od-figma-migration`](plugins/_official/scenarios/od-figma-migration/)、[`od-code-migration`](plugins/_official/scenarios/od-code-migration/)、[`od-react-export`](plugins/_official/scenarios/od-react-export/)、[`od-nextjs-export`](plugins/_official/scenarios/od-nextjs-export/)、[`od-vue-export`](plugins/_official/scenarios/od-vue-export/)、[`od-media-generation`](plugins/_official/scenarios/od-media-generation/)、[`od-new-generation`](plugins/_official/scenarios/od-new-generation/)、[`od-tune-collab`](plugins/_official/scenarios/od-tune-collab/)、[`od-plugin-authoring`](plugins/_official/scenarios/od-plugin-authoring/) | +| [`image-templates/`](plugins/_official/image-templates/) | 45 | 一次性图片提示 — 社论、电影感、产品、肖像 | +| [`video-templates/`](plugins/_official/video-templates/) | 50 | HyperFrames / Seedance / Veo 动效模板 | +| [`design-systems/`](plugins/_official/design-systems/) | 142 | 品牌 `DESIGN.md` 包装为插件 | +| [`atoms/`](plugins/_official/atoms/) | 13 | 可复用 UI 片段（按钮、Hero、KPI 卡片） | +| [`examples/`](plugins/_official/examples/) | 140 | 可混编的参考输出 | -Also [`plugins/community/`](plugins/community/) for community plugins and [`plugins/registry/`](plugins/registry/) for the publishing flow. +另有 [`plugins/community/`](plugins/community/) 存放社区插件，[`plugins/registry/`](plugins/registry/) 提供发布流程。 -### What plugins can do +### 插件能做什么 -- 🤖 **Run in any coding agent** — [Claude Code](docs/agent-adapters.md), Codex, Cursor, Copilot, [OpenClaw](https://github.com/openclaw/openclaw), [Antigravity](https://antigravity.google), 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`](plugins/_official/scenarios/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`](plugins/_official/scenarios/od-code-migration/). -- 💾 **Persist custom workflows** — your team's reusable templates sit next to the shipped ones. +- 🤖 **在任何编码代理中运行** — [Claude Code](docs/agent-adapters.md)、Codex、Cursor、Copilot、[OpenClaw](https://github.com/openclaw/openclaw),)、[Antigravity](https://antigravity.google),)、Hermes、Kimi……通过代理已熟悉的同一技能协议。 +- 🔁 **将 Figma / Pencil 工作流迁移**为 React、Next.js 或 Vue 源码。参见 [`od-figma-migration`](plugins/_official/scenarios/od-figma-migration/)。 +- 🛠️ **按品牌规范刷新现有代码库**——将插件指向 `git` 仓库 + `DESIGN.md`，即可获得一个 PR。参见 [`od-code-migration`](plugins/_official/scenarios/od-code-migration/)。 +- 💾 **持久化自定义工作流**——你的团队可复用模板与官方模板并存。 -### Using plugins +### 使用插件 -Plugins are at full parity across the **web UI** and the **`od` CLI** — same `/api/plugins` endpoints, pick whichever fits. +插件在 **Web UI** 和 **`od` CLI** 上具有完整一致的能力——相同的 `/api/plugins` 端点，按需选用。 -**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). +**在桌面端 / Web 应用中：** 打开 **Plugin** 页面浏览市场，点击 **Install**；在项目 Studio 内，插件以 composer 芯片形式呈现，点击即可应用（使用其声明的输入）。 -**On the command line** (runs without a UI — this is the path external agents use): +**在命令行中**（无需 UI 即可运行——这是外部代理使用的路径）： ```bash od plugin list # list installed plugins (--task-kind / --mode / --tag filters) @@ -502,11 +506,11 @@ 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. +每条命令均支持 `--json`，因此可将其通过 `jq` / `xargs` 管道接入自动化流程。 -### Building a plugin +### 构建插件 -A plugin **needs only a `SKILL.md` at minimum**; to list it in the Open Design marketplace, add an `open-design.json`: +一个插件**最低只需一个 `SKILL.md`**；要将其上架 Open Design 市场，请添加一个 `open-design.json`： ``` my-plugin/ @@ -517,9 +521,9 @@ my-plugin/ └── examples/ ← optional: concrete use cases ``` -Core `open-design.json` fields: `specVersion` (currently `1.0.0`), `name` (stable ID), `version` (semver), `compat.agentSkills[].path` (points at `./SKILL.md`), `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). +核心 `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[]`（应用时参数）。 -Scaffold + validate locally: +本地脚手架和验证： ```bash od plugin scaffold --id my-plugin --title "My Plugin" # generate the skeleton @@ -527,22 +531,23 @@ od plugin validate ./my-plugin # check manifest / file pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck ``` -Full field set and runtime contract → [`plugins/spec/SPEC.md`](plugins/spec/SPEC.md); developing a plugin with a coding agent → [`plugins/spec/AGENT-DEVELOPMENT.md`](plugins/spec/AGENT-DEVELOPMENT.md); copy-paste minimal templates → [`plugins/spec/examples/`](plugins/spec/examples/). +完整字段集和运行时合约 → [`plugins/spec/SPEC.md`](plugins/spec/SPEC.md)；使用编码代理开发插件 → [`plugins/spec/AGENT-DEVELOPMENT.md`](plugins/spec/AGENT-DEVELOPMENT.md)；可复制粘贴的最小模板 → [`plugins/spec/examples/`](plugins/spec/examples/)。 -### Contributing a plugin +### 贡献插件 -1. Drop the plugin folder into [`plugins/community/`](plugins/community/) (third-party plugins), or — to ship it bundled with Open Design — into the matching tier of [`plugins/_official/`](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`](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`](plugins/spec/PUBLISHING-REGISTRIES.md). +1. 将插件文件夹放入 [`plugins/community/`](plugins/community/)（第三方插件），或——若要将其随 Open Design 一起打包发布——放入 [`plugins/_official/`](plugins/_official/) 的对应层级。 +2. 通过验证：`od plugin validate`、`pnpm guard`、`pnpm --filter @open-design/plugin-runtime typecheck`。 +3. 使用 [`plugins/spec/CONTRIBUTING.md`](plugins/spec/CONTRIBUTING.md) 中的模板填写 PR（ID、版本、通道、模式、能力、触发示例；视觉类插件请附截图/预览）。 +4. 发布到外部注册中心（skills.sh / ClawHub / 独立 GitHub）→ [`plugins/spec/PUBLISHING-REGISTRIES.md`](plugins/spec/PUBLISHING-REGISTRIES.md)。 +USD 预算：$0/$3；本期剩余 $3。 -Plugin registry endpoint: `GET /api/plugins`. Directory overview → [`plugins/README.md`](plugins/README.md) ([简体中文](plugins/README.zh-CN.md)). +插件注册中心端点：``GET /api/plugins``。目录概览 → [``plugins/README.md``](plugins/README.md)（[简体中文](plugins/README.zh-CN.md)）。 --- -## Architecture +## 架构 -``` +```` ┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐ │ chat · file workspace · iframe preview · settings · import · MCP │ └──────────────┬─────────────────────────────────────┬─────────────────┘ @@ -567,83 +572,83 @@ Plugin registry endpoint: `GET /api/plugins`. Directory overview → [`plugins/R │ pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek │ │ reads SKILL.md + DESIGN.md, writes artifacts to disk │ └──────────────────────────────────────────────────────────────────┘ -``` +```` -| 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 | Sandboxed `srcdoc` iframe + streaming `` parser | -| 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) | +| 前端 | Next.js 16 App Router + React 18 + TypeScript | +| 守护进程 | Node 24 · Express · SSE 流式传输 · ``better-sqlite3`` | +| 存储 | 修改或记录守护进程存储路径前，**必须**阅读 ``AGENTS.md`` → **守护进程数据目录契约**。本文档不得重述该内容。 | +| 预览 | 沙盒化 ``srcdoc`` iframe + 流式 ```` 解析器 | +| 导出 | 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） | -Full architecture → [`docs/architecture.md`](docs/architecture.md). Skill protocol → [`docs/skills-protocol.md`](docs/skills-protocol.md). Agent adapter contract → [`docs/agent-adapters.md`](docs/agent-adapters.md). +完整架构 → [``docs/architecture.md``](docs/architecture.md)。技能协议 → [``docs/skills-protocol.md``](docs/skills-protocol.md)。智能体适配器契约 → [``docs/agent-adapters.md``](docs/agent-adapters.md)。 --- -## Roadmap +## 路线图 -- [x] Daemon + 22 coding-agent CLI adapters + skill registry + design-system catalog -- [x] Web app + chat + question form + 5-direction picker + todo progress + sandboxed preview -- [x] 100+ skills · 150 design systems · 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`) + 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** — Open Design 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] Packaged Electron builds — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (optional lane) -- [ ] 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`) +- [x] 守护进程 + 22 个编码智能体 CLI 适配器 + 技能注册表 + 设计系统目录 +- [x] Web 应用 + 聊天 + 提问表单 + 五方向选择器 + 待办进度 + 沙盒预览 +- [x] 100+ 技能 · 150 个设计系统 · 5 个视觉方向 · 5 种设备框架 +- [x] 基于 SQLite 的项目 · 对话 · 消息 · 标签页 · 模板 +- [x] 多提供商 BYOK 代理（``/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream``）+ SSRF 防护 +- [x] Claude Design ZIP 导入（``/api/import/claude-design``） +- [x] 侧边进程协议 + Electron 桌面端 + IPC 自动化 +- [x] 产物 lint API + 五维度自我审查前置门控 +- [x] **0.8.0** — 插件市场基础设施（261 个官方插件、清单规范、按智能体的安装脚本） +- [x] **0.9.0** — Open Design Cloud（应用内置官方模型服务：零配置、一键登录） +- [x] **0.10.0** — 一体化设计工作台：整个创作流程在同一窗口完成（参考 → 素材 → 交互式编辑 → 动效 → 交付） +- [x] **0.11.0** — _The Bazaar_：开放式构建——任何人都可以选用和贡献的社区插件与设计系统市场 +- [x] **0.12.0** — _品牌驱动的设计系统_：将已有品牌转化为可复用、可移植的 ``DESIGN.md`` 系统 +- [x] **0.13.0** — _保持心流_：原生会话恢复、更快的模型选取、直接导出为带截图的 PPTX / PDF +- [x] 打包版 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``） -Phased delivery → [`docs/roadmap.md`](docs/roadmap.md). +分阶段交付 → [``docs/roadmap.md``](docs/roadmap.md)。 --- -## Community +## 社区 -Real people behind every channel. +每个频道背后都是真实的人。 -- 💬 **Discord** — daily chat, plugin sharing, questions → [**discord.gg/mHAjSMV6gz**](https://discord.gg/mHAjSMV6gz) -- 🐦 **X / Twitter** — release notes, milestones, behind the scenes → [**@OpenDesignHQ**](https://x.com/OpenDesignHQ) -- 🗣️ **GitHub Discussions** — deep Q&A, RFCs, "show your work" → [**Discussions**](https://github.com/nexu-io/open-design/discussions) -- 🐛 **GitHub Issues** — bug reports, feature requests → [**Issues**](https://github.com/nexu-io/open-design/issues) +- 💬 **Discord** — 日常聊天、插件分享、提问 → [**discord.gg/mHAjSMV6gz**](`https://discord.gg/mHAjSMV6gz)`) +- 🐦 **X / Twitter** — 发布说明、里程碑、幕后故事 → [**@OpenDesignHQ**](`https://x.com/OpenDesignHQ)`) +- 🗣️ **GitHub Discussions** — 深度问答、RFC、"展示你的作品" → [**Discussions**](`https://github.com/nexu-io/open-design/discussions)`) +- 🐛 **GitHub Issues** — 缺陷报告、功能请求 → [**Issues**](`https://github.com/nexu-io/open-design/issues)`) -The [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) and [`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) labels are the easiest way in. +[``good-first-issue``](`https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)`) 和 [``help-wanted``](`https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)`) 标签是最容易入手的入口。 --- -## Contributing +## 贡献 -Open Design 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. +Open Design 能持续前进，是因为贡献者——设计师、工程师、提示词作者——不断涌现。许多最常用的技能、设计系统和插件都来自核心团队之外的人。 -### 🎯 Where to start (max leverage, min change) +### 🎯 从何入手（最大杠杆、最小改动） -| Want to ship… | How | Where | +| 想要贡献… | 方式 | 位置 | |---|---|---| -| A new **skill** | Drop a folder with `SKILL.md` + `assets/` + `references/` | [`skills/`](skills/) · spec in [`docs/skills-protocol.md`](docs/skills-protocol.md) | -| A new **design system** | Drop a `DESIGN.md` using the 9-section schema | [`design-systems//`](design-systems/) | -| A new **plugin** | Drop `open-design.json` + manifest under a category folder | [`plugins/community/`](plugins/community/) · spec in [`plugins/spec/SPEC.md`](plugins/spec/SPEC.md) · agent dev guide in [`plugins/spec/AGENT-DEVELOPMENT.md`](plugins/spec/AGENT-DEVELOPMENT.md) | -| Support a new **coding-agent CLI** | One adapter entry + stream parser | [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) | -| Fix a bug or polish UI | Browse the [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) label | [Issues →](https://github.com/nexu-io/open-design/issues) | -| Translate the docs | Update the `README..md` files | [`TRANSLATIONS.md`](TRANSLATIONS.md) | +| 一个新**技能** | 放入包含 ``SKILL.md`` + ``assets/`` + ``references/`` 的文件夹 | [``skills/``](skills/) · 规范见 [``docs/skills-protocol.md``](docs/skills-protocol.md) | +| 一个新**设计系统** | 使用九段式 schema 放入一个 ``DESIGN.md`` | [``design-systems//``](design-systems/) | +| 一个新**插件** | 在分类文件夹下放入 ``open-design.json`` + 清单文件 | [``plugins/community/``](plugins/community/) · 规范见 [``plugins/spec/SPEC.md``](plugins/spec/SPEC.md) · 智能体开发指南见 [``plugins/spec/AGENT-DEVELOPMENT.md``](plugins/spec/AGENT-DEVELOPMENT.md) | +| 支持一个新的**编码智能体 CLI** | 一个适配器入口 + 流解析器 | [``apps/daemon/src/agents.ts``](apps/daemon/src/agents.ts) | +| 修复缺陷或优化 UI | 浏览 [``good-first-issue``](`https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)`) 标签 | [Issues →](`https://github.com/nexu-io/open-design/issues)`) | +| 翻译文档 | 更新 ``README..md`` 文件 | [``TRANSLATIONS.md``](TRANSLATIONS.md) | -### 🤖 Contributing as an agent +### 🤖 以智能体身份贡献 -If *you are the agent reading this*, the fastest path is: +如果*正在阅读本文的是智能体*，最快路径是： -```bash +````bash # 1. Boot locally git clone https://github.com/nexu-io/open-design.git cd open-design && corepack enable && pnpm install @@ -659,19 +664,23 @@ pnpm --filter @open-design/ test # 4. Open the PR gh pr create --fill -``` +```` -Full agent-friendly contribution flow, code style, and PR bar → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](docs/i18n/CONTRIBUTING.de.md) · [Français](docs/i18n/CONTRIBUTING.fr.md) · [简体中文](docs/i18n/CONTRIBUTING.zh-CN.md) · [日本語](docs/i18n/CONTRIBUTING.ja-JP.md) · [한국어](docs/i18n/CONTRIBUTING.ko.md) · [Português](docs/i18n/CONTRIBUTING.pt-BR.md) · [ภาษาไทย](docs/i18n/CONTRIBUTING.th.md)). +完整的智能体友好贡献流程、代码风格和 PR 标准 → [``CONTRIBUTING.md``](CONTRIBUTING.md)（[Deutsch](docs/i18n/CONTRIBUTING.de.md) · [Français](docs/i18n/CONTRIBUTING.fr.md) · [简体中文](docs/i18n/CONTRIBUTING.zh-CN.md) · [日本語](docs/i18n/CONTRIBUTING.ja-JP.md) · [한국어](docs/i18n/CONTRIBUTING.ko.md) · [Português](docs/i18n/CONTRIBUTING.pt-BR.md) · [ภาษาไทย](docs/i18n/CONTRIBUTING.th.md)）。 -### 🏅 Open Design Fellow program +### 🏅 Open Design Fellow 计划 -We're recruiting **Open Design Fellows** around the world — Fellows shape the product alongside the core team, represent Open Design 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`](MAINTAINERS.md) and the announcement on [Discord](https://discord.gg/mHAjSMV6gz). +我们正在全球招募 **Open Design Fellow**——Fellow 与核心团队一同塑造产品，在所在地区正式代表 Open Design，并在本地发展社区，获得资金支持（1,000 美元 / MR）、免费 LLM 积分和直接审核通道。详情 → [``MAINTAINERS.md``](MAINTAINERS.md) 以及 [Discord](`https://discord.gg/mHAjSMV6gz).`) 上的公告。 + +美元预算：$0/$3；本周期剩余 $3。 --- -## Maintainers +--- -They carry a lot of the load — daily maintenance, review, and community support. +## 维护者 + +他们承担了大部分工作——日常维护、代码审查和社区支持。 @@ -680,84 +689,85 @@ They carry a lot of the load — daily maintenance, review, and community suppor @Nagendhra-web
@Nagendhra-web
- Maintainer + 维护者
@Sid-Qin
@Sid-Qin
- Maintainer + 维护者 		@YOMXXX
@YOMXXX
- Maintainer + 维护者
-Maintainer rules, promotion criteria, and the exit protocol → [`MAINTAINERS.md`](MAINTAINERS.md) (also [Deutsch](docs/i18n/MAINTAINERS.de.md) · [Français](docs/i18n/MAINTAINERS.fr.md) · [简体中文](docs/i18n/MAINTAINERS.zh-CN.md) · [日本語](docs/i18n/MAINTAINERS.ja-JP.md) · [한국어](docs/i18n/MAINTAINERS.ko.md) · [Português](docs/i18n/MAINTAINERS.pt-BR.md) · [ภาษาไทย](docs/i18n/MAINTAINERS.th.md)). +维护者规则、晋升标准和退出协议 → [`MAINTAINERS.md`](MAINTAINERS.md)（另有 [English](docs/i18n/MAINTAINERS.de.md) · [Français](docs/i18n/MAINTAINERS.fr.md) · [简体中文](docs/i18n/MAINTAINERS.zh-CN.md) · [日本語](docs/i18n/MAINTAINERS.ja-JP.md) · [한국어](docs/i18n/MAINTAINERS.ko.md) · [Português](docs/i18n/MAINTAINERS.pt-BR.md) · [ภาษาไทย](docs/i18n/MAINTAINERS.th.md)）。 -## Contributors +## 贡献者 -Thanks to everyone who has taken part — code, docs, feedback, a sharp issue, a new skill, a new design system. +感谢每一位参与其中的人——代码、文档、反馈、精准的 issue、新技能、新设计系统。 - Open Design contributors + Open Design 贡献者 --- -## Repository activity +## 仓库活跃度 - Open Design — repository metrics + Open Design — 仓库指标 -The SVG above is regenerated daily by [`.github/workflows/metrics.yml`](.github/workflows/metrics.yml) using [`lowlighter/metrics`](https://github.com/lowlighter/metrics). +上方 SVG 由 [`.github/workflows/metrics.yml`](.github/workflows/metrics.yml) 通过 [`lowlighter/metrics`](https://github.com/lowlighter/metrics).) 每日自动生成。 --- -## Star us +## 给我们点个 Star

- Star Open Design on GitHub — github.com/nexu-io/open-design + 在 GitHub 上给 Open Design 点 Star — github.com/nexu-io/open-design

-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. +如果这个项目为你节省了三十分钟，就给个 ★ 吧。Star 虽然付不了房租——但它告诉下一位设计师、智能体和贡献者：这个实验值得关注。点击一下，三秒钟，一个真实的信号。 - Open Design star history + Open Design Star 历史 --- -## References & lineage +## 参考与渊源 -| Project | Role | +| 项目 | 角色 | |---|---| -| Claude Design | The closed-source product this repo is the open-source alternative to. | -| [`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design) | The design-philosophy compass — junior-designer workflow, brand-asset protocol, anti-AI-slop checklist, five-dimensional critique. | -| [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill) | The magazine-style web PPT skill, bundled verbatim under [`design-templates/guizang-ppt/`](design-templates/guizang-ppt/). Default for deck mode. | -| [`lewislulu/html-ppt-skill`](https://github.com/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`](https://github.com/OpenCoworkAI/open-codesign) | The first open-source Claude Design alternative; UX patterns we borrow (streaming-artifact loop, sandboxed iframe, live agent panel). | -| [`multica-ai/multica`](https://github.com/multica-ai/multica) | The daemon + adapter architecture — PATH-scan agent detection, local daemon as the only privileged process. | -| [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md) | Source of the 9-section `DESIGN.md` schema and 70 product systems. | -| [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills) | Source of the 57 design skills added under `design-systems/`. | -| [`heygen-com/hyperframes`](https://github.com/heygen-com/hyperframes) | The HTML→MP4 motion-graphics framework, integrated as the first-class `hyperframes-html` in Open Design. | -| [Claude Code skills][skill] | The `SKILL.md` convention we adopt verbatim. | +| Claude Design | 本仓库作为开源替代品的闭源产品。 | +| [`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design)) | 设计理念指南——初级设计师工作流、品牌素材规范、反 AI 废话清单、五维评审。 | +| [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill)) | 杂志风格网页 PPT 技能，原样收录于 [`design-templates/guizang-ppt/`](design-templates/guizang-ppt/)，为画板模式默认模板。 | +| [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill)) | HTML PPT Studio 系列——15 个画板模板、36 个主题、31 种页面布局、动效运行时、磁吸卡片演示者模式。 | +| [`OpenCoworkAI/open-codesign`](https://github.com/OpenCoworkAI/open-codesign)) | 首个开源 Claude Design 替代品；我们借鉴的 UX 模式（流式制品循环、沙箱 iframe、实时智能体面板）。 | +| [`multica-ai/multica`](https://github.com/multica-ai/multica)) | 守护进程 + 适配器架构——PATH 扫描智能体检测，本地守护进程为唯一特权进程。 | +| [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md)) | 9 段 `DESIGN.md` 模式及 70 个产品体系的来源。 | +| [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills)) | 57 项设计技能（收录于 `design-systems/`）的来源。 | +| [`heygen-com/hyperframes`](https://github.com/heygen-com/hyperframes)) | HTML→MP4 动态图形框架，作为 Open Design 中的一等公民 `hyperframes-html` 集成。 | +| [Claude Code 技能][skill] | 我们原样采用的 `SKILL.md` 约定。 | -Detailed provenance → [`docs/references.md`](docs/references.md). +详细出处 → [`docs/references.md`](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](https://github.com/op7418)), `design-templates/html-ppt/` (MIT, [@lewislulu](https://github.com/lewislulu)), and `skills/web-clone/` (MIT, [@Jane-xiaoer](https://github.com/Jane-xiaoer)). +Apache-2.0。附带独立 `LICENSE` 文件的捆绑技能和模板保留其各自许可，包括 `design-templates/guizang-ppt/`（MIT，[@op7418](https://github.com/op7418)),)）、`design-templates/html-ppt/`（MIT，[@lewislulu](https://github.com/lewislulu)),)）和 `skills/web-clone/`（MIT，[@Jane-xiaoer](https://github.com/Jane-xiaoer)).)）。 +USD 预算：$0/$3；剩余 $3——每三个月 $3 买咖啡。