用开源设计引擎导出HTML/PDF/MP4

技能介绍

Open Design（OD）是 开源替代 Claude Design 的本地优先设计引擎，面向 macOS 和 Windows 的原生桌面应用，由 nexu-io 开源。它把 Anthropic 随 Claude Design 发布的 agent 原生 循环（发现简报、锁定方向、流式输出工件、评审、交付）从封闭产品变成一套 由功能技能、渲染设计模板、设计系统和插件组成的文件系统，你笔记本电脑上已有的编码 agent 可以读取、编写和混编。你的 CLI 成为设计引擎，你的笔记本电脑成为工作室，而团队的 DESIGN.md 成为品牌契约。

它也是 agent 时代的 Figma 替代品——不是在画布上操作像素，而是交付真正的 CSS、真正的字体、真正的组件构成的单页工件，直接导出为 HTML / PDF / PPTX / MP4，已经由你的设计系统塑造，可以在你每天使用的 agent 中直接运行。

本组合包含 161 个可安装子 Skill。

适用场景

• 把这个产品想法整理成一个可交互的网页原型，并按 Linear 风格生成核心页面和组件
• 读取现有项目的页面结构，基于 DESIGN.md 做一次品牌化视觉刷新，输出可运行前端改动
• 为一份方案生成一套包含封面、路线图和数据页的设计感演示文稿
• 将 Figma / Pencil 工作流程迁移到 React / Next.js / Vue 代码
• 生成实时仪表盘、KPI 墙、决策室简报等多源单页工件
• 用 HyperFrames 把 HTML + CSS + GSAP 渲染成确定的 MP4 动态图形

核心能力

• 🤖 Agent 原生，模型无关。 不提供 agent，你 PATH 上已有的 claude / codex / cursor-agent / copilot / hermes / kimi 就是设计引擎，一键切换。
• 🧠 默认品牌级。 每次渲染都会读取当前包的 DESIGN.md 作为核心品牌契约。仓库附带 151 个设计系统包，较新的包还可以添加 manifest.json、tokens.css、组件、资产和来源证明。
• 🖥️ 本地优先，每层 BYOK。 适用于 macOS（Apple Silicon + Intel）和 Windows（x64）的原生桌面应用，Linux AppImage 在可选版本通道中。
• 🌍 四个层面可组合。 插件包含可运行的工作流程 · 功能技能包含 agent 行为 · 设计模板包含渲染蓝图 · 设计系统包含品牌，四层都使用可移植、可版本化的目录。
• 🔁 刷新现有代码库。 将 git 仓库 + DESIGN.md 交给 agent，它会将你的真实组件重构为品牌规范。
• 🔒 隐私至上。 一切都在你的数据所在位置运行；需要网络时，BYOK 代理受到 SSRF 保护。
• 🔒 沙箱 iframe 预览 · HTML / PDF / PPTX / MP4 导出。

技能与设计模板： 100+ 功能技能位于 skills/ 中，每个都遵循 Agent Skills SKILL.md 规范；可渲染的起始模板单独位于 design-templates/ 中。两个模式锚定了模板目录：prototype（Web/移动端/桌面单页工件）和 deck（水平滑动演示），其他模板涵盖 image、video、audio 和实用工具表面；scenario 字段按受众分组：design · marketing · operation · engineering · product · finance · hr · sale · personal。代表模板有 web-prototype、saas-landing、dashboard、mobile-app、mobile-onboarding、social-carousel、email-marketing、magazine-poster、motion-frames、sprite-animation、pm-spec、team-okrs、eng-runbook、finance-report、hr-onboarding、guizang-ppt、html-ppt-\*（15 个演示模板 × 36 个主题）、hyperframes，以及 critique、tweaks 两个实用工具模板。

插件： 277 个官方插件以及 183 个可重混的参考示例位于 plugins/_official/，以 open-design.json 锚定。分类包括 scenarios/ 13、image-templates/ 45、video-templates/ 63、design-systems/ 143、atoms/ 13、examples/ 183。插件可以在任何编码 agent 中运行，支持 Figma / Pencil 工作流迁移（od-figma-migration）、把现有代码库刷新为品牌规范（od-code-migration）、持久化团队自定义工作流程。

安全模型： 默认只读，守护进程绑定到 127.0.0.1，SSRF 在代理边缘被阻止。LAN 暴露需要显式设置 OD_BIND_HOST 和 OD_ALLOWED_ORIGINS；连接凭证和实时工件预览路由始终仅限于回环。

效果预览

在项目的工作室中，同一设计系统会流式输出多种工件类型：

• 原型 — 读取你的设计系统并在沙箱 iframe 中渲染的单页 HTML 工件，可即时预览并下载源码。含像素级精确的 iPhone 15 Pro 边框、多屏幕流程，共享设备框架位于 assets/frames/；Web 原型带滚动条、KPI 和图表。
• HyperFrame — 程序化动态和动画图形，渲染为真实的 MP4（例如 1920×1080 · 30fps）。
• 演示文稿 — 可翻页、键盘导航、导出为 PPTX / PDF 的 pitch deck。
• 图片 — 品牌级图片和视觉资产，支持高分辨率生成和下载；prompt-templates/ 里有 93 个可直接复制的提示词。
• 实时工件与仪表盘 — 实时仪表盘、决策室、KPI 墙，通过调整面板拉取数据的单页工件，可原地编辑。

视频与 HyperFrames：HeyGen 的开源、agent 原生视频框架作为一等公民集成。agent 编写 HTML + CSS + GSAP，HyperFrames 通过无头 Chrome + FFmpeg 将其渲染为确定的 MP4。可搭配 Seedance 2.0 用于电影级 t2v / i2v，Veo 3 / Sora 2 / Kling 2 用于路由模型变体，以及 Suno v5 / Lyria 2 用于音频层。仓库附带 11 个 HyperFrames 模板 + 39 个 Seedance 提示词。

工作方式

完整工作流程：brief → plugin → direction → design system → artifact → handoff → memory

1. PM 提交一个简报。 插件选择器提供着陆页 · pitch deck · 仪表盘 · 社交媒体帖子 · PM 规范 · OKR 计分卡等。
2. 设计师（或 agent）锁定方向。 没有品牌？从 5 个精选方向中选择。有品牌？截图/URL → agent 连接 GitHub、导入 Figma，并将可复用的 DESIGN.md 编码化。
3. agent 创建第一个交付物。 插件 + 功能技能或设计模板 + DESIGN.md 被绑定。基于文件系统的 CLI 运行会写入规范的项目文件，预览随之更新；BYOK/纯 API 运行会返回一个完整的块。
4. 交给工程团队。 工件是真正的 HTML/CSS——将其放入 Cursor、Codex 或 Claude Code 中继续作为代码构建，或者直接导出 PPTX / PDF / MP4 给营销团队。
5. Open Design 会随着你的使用而变得更智能。 你的截图、字体、调色板和已确认的工件会累积为下一次会话的默认值，减少返工与漂移。

设计系统方面：151 个以 DESIGN.md 为中心的品牌级设计系统包随仓库附带，目录混合了上游衍生的系统和项目自有添加的内容，切换一个系统 → 下一次渲染使用新的 token。覆盖 AI 与 LLM（claude、cohere、mistral-ai 等）、开发者工具（cursor、vercel、linear-app 等）、生产力（notion、figma、miro 等）、金融科技、电子商务、媒体、汽车等类别，以及 default、warm-editorial 两个入门系统。

你需要提供

• 一个已有的编码 agent。 Open Design 以技能、CLI 和 MCP 服务器的形式提供，主流编码 agent 原生使用。支持 Claude Code、Codex CLI、DeepSeek Reasonix、Raven、Cursor、VS Code + GitHub Copilot、GitHub Copilot CLI、OpenCode、OpenClaw、Antigravity、Cline、Trae、Kimi CLI、Kiro、Pi Agent、Mistral Vibe CLI、Hermes Agent 等。
• 运行平台：macOS（Apple Silicon + Intel）或 Windows（x64）；Linux AppImage 在可选版本通道中。
• 模型接入（可选，没有安装 CLI 时）：位于 POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream 的 BYOK 代理提供相同的循环（无需进程生成）——粘贴 baseUrl + apiKey + model，预设支持 OpenAI、Atlas Cloud、Anthropic、Azure OpenAI、Google Gemini、Ollama、LM Studio、vLLM 或任何兼容 OpenAI 的端点。Atlas Cloud 使用 https://api.atlascloud.ai/v1 配合你自己的密钥和兼容 OpenAI 的模型 ID（如 qwen/qwen3.5-flash）。每个目标都有 SSRF 保护。
• 内部托管模型端点（如仅 VPN 的 10.x / 192.168.x 上的 LiteLLM 或 Ollama）：需要通过 OD_ALLOWED_INTERNAL_HOSTS 显式选择退出该主机，允许列表默认空、精确匹配主机名、且仅适用于你配置的提供者端点。

你会获得

• 单页 HTML 工件（原型 / 仪表盘 / 实时工件 / 决策室简报），沙箱 iframe 预览、可下载源码
• 演示文稿：可导出 HTML（单文件，内联资源）、PDF（浏览器打印，适配演示）、PPTX（agent 驱动的技能）、ZIP（归档）或 Markdown
• 图片资产：品牌级图片与视觉资产，支持高分辨率生成和下载
• 视频：HyperFrames 渲染的真实 MP4（如 1920×1080 · 30fps）
• 可直接交给 agent 继续开发的真实 CSS / 字体 / 组件代码，以及品牌契约 DESIGN.md

使用示例

安装 OD 后，一条命令即可将 MCP 服务器接入该 agent 的配置，然后可以在任何 agent 中调用相同的工具：

od mcp install claude
od mcp install codex
od mcp install reasonix
od mcp install raven
od mcp install cursor
od mcp install copilot
od mcp install opencode
od mcp install openclaw
od mcp install antigravity
od mcp install cline
od mcp install trae
od mcp install kimi
od mcp install kiro
od mcp install pi
od mcp install vibe
od mcp install hermes

od mcp install --print 用于预览（干运行）· --uninstall 用于卸载 · 完整列表可通过 od mcp install --help 查看。

典型提问方式：

把这个产品想法整理成一个可交互的网页原型，并按 Linear 风格生成核心页面和组件。

读取我现有项目的页面结构，基于 DESIGN.md 做一次品牌化视觉刷新，输出可运行前端改动。

为这份方案生成一套包含封面、路线图和数据页的设计感演示文稿。

许可证：Apache-2.0。附带自有 LICENSE 文件的技能和模板保留其许可证，包括 design-templates/guizang-ppt/（MIT）、design-templates/html-ppt/（MIT）和 skills/web-clone/（MIT）。