Open Design

Open Design是什么

Open Design 是一款主打“开源”与“本地优先”理念的 AI 设计工作空间，旨在为用户提供 Claude Design 的优质替代方案。该工具不强制捆绑特定的 AI 模型，而是直接调用用户本地环境中已安装的编程 Agent（涵盖 Claude Code、Cursor、Kimi、Codex 等 21 余种主流工具）。其核心工作流由 SKILL.md 技能库和 DESIGN.md 设计系统驱动，能够在桌面端实现从需求定义、视觉风格锁定到产物生成与评审的全流程闭环。最终输出内容涵盖网页原型、数据仪表盘、演示文稿、静态图片及视频，并支持导出为 HTML、PDF、PPTX 或 MP4 等多种通用格式。

Open Design的主要功能

• 开源且本地优先：遵循 Apache-2.0 开源许可证，作为 Claude Design 的开源替代品，所有数据均存储于本地，摆脱对单一厂商云服务的依赖。
• 原生 Agent 驱动：兼容 21 种以上的编程 Agent（包括 Claude Code、Cursor、Kimi、Codex、Gemini、Copilot、DeepSeek 等），可通过 MCP 协议实现一键接入。
• 模块化技能系统：内置超过 259 个基于 SKILL.md 的可复用设计技能，只需将其拖入文件夹即可加载，Agent 能够直接读取并执行。
• 标准化设计系统：提供 142 多个品牌级 DESIGN.md 设计系统模板（涵盖 Linear、Stripe、Apple、Vercel 等知名品牌），支持上传截图或 Figma 文件以自动提取品牌规范。
• 多样化产物输出：能够生成网页原型、实时数据仪表盘、演示文稿（Decks）、静态图片、视频以及 HyperFrames 动态图形。
• 多格式灵活导出：生成的产物支持导出为 HTML、PDF、PPTX、MP4 等工程化标准格式，便于后续直接使用。
• BYOK（自带密钥）支持：允许用户使用自己的 API Key，兼容 OpenAI、Anthropic、Google、Moonshot、OpenRouter 以及自托管 vLLM 等任意服务端点。
• 四步设计闭环流程：Detect（自动检测可用 Agent）→ Discover（30 秒快速需求问卷）→ Direct（锁定视觉设计方向）→ Deliver（流式生成与实时预览）。

如何使用Open Design

• 下载与安装：访问 Open Design 官网 https://open-design.ai/ 下载桌面客户端（支持 macOS / Windows），或从源码仓库 github.com/nexu-io/open-design 克隆代码，使用 Node 24 + pnpm 进行安装，亦可通过 docker compose up 实现一键部署。
• 接入编程 Agent：安装完成后，运行命令 od mcp install <agent>，即可将本地 Agent（如 Claude Code、Cursor、Kimi、Codex 等 21+ 种工具）一键接入 Open Design 的 MCP 服务器。
• 启动守护进程：打开应用程序后，守护进程会自动扫描 $PATH 路径下的 Agent，并加载 259+ 个技能模块和 142+ 个设计系统。
• 创建新项目：在首页选择所需的产物类型（如原型、仪表盘、演示文稿、图片、视频等），并绑定一个 DESIGN.md 设计系统（可选择 Stripe、Apple 等预设风格或自定义品牌）。
• 明确需求细节：通过回答一份仅需 30 秒的问卷（涵盖用途、目标受众、整体调性、项目规模及品牌背景），快速对齐设计方向。
• 选定视觉方案：从系统提供的 5 个确定性视觉方案中进行选择，系统将自动锁定 OKLch 色板、字体栈以及布局姿态。
• 生成与实时预览：Agent 会将生成的产物写入本地磁盘，并在沙盒 iframe 中实时展示真实的 CSS 渲染效果。
• 评审与迭代优化：利用内置的五维自评体系（哲学、层级、执行、特异性、克制）对生成产物进行批判性分析与优化。
• 导出与交付：确认最终效果后，可将产物导出为 HTML、PDF、PPTX、MP4 或 ZIP 格式，所有文件直接保留在项目目录中。

Open Design的核心优势

• 完全开源且免费：采用 Apache-2.0 许可证，无订阅费用限制，用户可自由 Fork 代码并进行自托管。
• 本地优先，数据自主：所有产物及项目数据均存储在本地文件系统中，不经过任何厂商云端服务器，确保隐私安全可控。
• Agent 无关，灵活切换：支持 21 种以上的编程 Agent（包括 Claude、Cursor、Kimi、Codex 等），技能库与设计系统不绑定特定模型，更换 Agent 仅需修改一行配置。
• BYOK 成本可控：支持自带 API Key，直接向所选服务提供商付费，无中间商抽成，同时支持 OpenRouter 和自托管模型以降低成本。
• 文件即设计系统：基于 SKILL.md 和 DESIGN.md 的声明式文件系统，使得技能和设计系统具备可复用性、可版本管理性，并易于在团队间共享。
• 真实代码渲染：输出的是真实的 CSS 样式、字体和组件，而非画布像素图，产物可直接进入工程开发流程。
• 多形态一键产出：同一套设计系统可流式生成网页原型、仪表盘、PPT、图片、视频及 HyperFrames 等多种形态的内容。
• 品牌迁移零成本：上传截图或 Figma 导出文件，Agent 即可自动提取并生成 DESIGN.md，后续所有技能将自动套用该品牌规范。

Open Design的同类竞品对比

Open Design的应用场景

• 快速构建产品原型：利用 259+ 技能模块和 142+ 设计系统，通过自然语言描述快速生成 Web、桌面或移动端的高保真交互原型，其真实 CSS 渲染效果可直接用于开发交接。
• 品牌视觉系统构建与迁移：上传品牌截图或 Figma 导出文件，Agent 自动提取并生成 DESIGN.md，建立可复用的品牌规范，确保所有产出物（原型、PPT、图片）保持视觉一致性。
• 制作演示文稿与提案：使用 Magazine Decks 技能生成具备编辑级质量的幻灯片，支持 WebGL 动效和杂志风格排版，可导出为 PPTX 或 PDF 用于客户汇报及融资路演。
• 生成营销素材与多媒体内容：通过 Synthetic Matter 技能生成图片、视频及 HyperFrames 动态图形，在统一的聊天界面中完成从文案构思到视觉产出的全过程。
• 搭建实时数据仪表盘：生成可交互的 Live Artifact，连接真实数据源以构建内部监控面板、运营看板或 SaaS 后台界面原型。
• 设计系统标准化与团队协作：将团队的 DESIGN.md 和 SKILL.md 存入共享仓库，所有成员基于同一套文件驱动产出，实现设计规范的版本化管理与高效协作。