用 OpenDesign 把编码 Agent 变成设计引擎

你要一张落地页、一份路演幻灯片，或一支产品演示视频。设计工具递给你一块空白画布，编码 agent 递给你平庸的输出。OpenDesign，一个 97k 星的项目，把已经在跑的 agent 变成设计引擎。

为什么这个 Skill 重要

OpenDesign 是开源的 Claude Design 替代品，Apache-2.0 协议，原生面向 agent。它自己不带 agent——生成工作由你 PATH 上已有的编码 CLI 完成。底层是 27 个运行时定义，由 26 个不同的本地 CLI 可执行文件支撑，所以 Claude Code、Codex、Cursor、Copilot 等众多工具都能充当渲染大脑。它是本地优先的：原生桌面应用覆盖 macOS（Apple Silicon + Intel）和 Windows（x64）；Linux 目前从源码运行。

内容目录就是它的卖点。100+ 个功能 skill 承载 agent 行为，151 套品牌级设计系统围绕 DESIGN.md 品牌契约组织，277 个官方插件旁边还有 183 个可改造的参考示例。deck 模式带 15 套模板 × 36 个主题，图像侧有 93 条拿来即用的提示词，动效由 11 个 HyperFrames 模板加 39 条 Seedance 提示词承担。在项目的 Studio 里，对话、生成文件、实时预览跨六种产物类型保持在一起：原型、演示文稿、移动应用、图像、文档、HyperFrames。

安装

零配置路径是桌面应用：从 open-design.ai 或 GitHub Releases 下载 macOS 或 Windows 版本，它会自动探测 PATH 上的所有编码 agent CLI。想跳过图形界面、把 OpenDesign 直接接进 agent：

od mcp install claude

同一条命令支持 16 个 agent 目标，从 Codex、Cursor 到 Cline、Trae；托管的等价写法是 curl -fsSL https://open-design.ai/install.sh | sh -s claude。macOS 上有个坑：/usr/bin/od 是苹果自带的八进制转储工具，可能遮蔽 OpenDesign 的 od 命令——优先用桌面应用里 Settings → MCP server 下的复制粘贴片段，它用绝对路径。

实战：生成一张带品牌的落地页

在 agent 里描述产物并指定设计系统：

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

完整流程是 brief → plugin → direction → design system → artifact → handoff → memory。在文件系统驱动的 CLI 运行里，agent 写出规范的项目文件，预览跟随这些文件；切换设计系统，下次渲染就换用新的 token。每次渲染都会读取当前的 DESIGN.md 作为品牌契约，所以产出自带你的配色、字体和组件。

实战：把存量代码库刷新成品牌规范

把一个 git 仓库加一份 DESIGN.md 交给 agent，od-code-migration 场景会按品牌规范重构真实组件并提交 PR。专门的插件还能把 Figma、Pencil 工作流迁移成 React、Next.js 或 Vue 源码，交付物落在代码里而不是截图里。

技巧

• od 插件 CLI 不需要任何界面：od plugin list、od plugin search "landing page"、od plugin info od-default、od plugin install、od plugin apply——每条命令都支持 --json 方便脚本化。
• 导出目标是真实文件：HTML（单文件、内联资源）、浏览器打印的 PDF、由 agent 驱动 skill 生成的 PPTX、ZIP、Markdown，以及经 HyperFrames 输出的 MP4。
• 默认 deck 模板 guizang-ppt 原样打包自 op7418/guizang-ppt-skill——深入用法见专门的 guizang-ppt 教程。
• 没装编码 agent？BYOK 代理的预设覆盖 OpenAI、Anthropic、Azure、Google Gemini、Ollama、LM Studio、vLLM 端点。
• 守护进程绑定 127.0.0.1，默认只读，代理边缘带 SSRF 防护。

何时不用这个 Skill

OpenDesign 通过 agent 生成产物——它不是像素画布，如果工作流就是在 Figma 式编辑器里手工摆放每个图层，那仍是更合适的工具。目前还没有预构建的 Linux 桌面版本，Linux 用户需从源码运行。而且生成动作要求 PATH 上有 agent CLI、一个 BYOK 端点，或应用内置的 OpenDesign Cloud 模型服务——三者皆无，就渲染不出任何东西。

查看 排行榜 了解更多 skill。