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 是一个开源、本地优先的 AI 设计工作台，被广泛认为是 Claude Design 的最佳开源替代品。

一、安装部署

Open Design 提供多种安装方式，桌面版最适合普通用户，无需安装任何开发环境。

方式一：桌面版（推荐）

这是最简单、最快速的安装方式，整个过程不超过两分钟。

系统要求：

• macOS：仅支持 Apple Silicon（M1/M2/M3）芯片，macOS 11 Big Sur 及以上
• Windows：x64 架构，Windows 10/11

安装步骤：

1. 访问 GitHub Release 页面：https://github.com/nexu-io/open-design/releases/latest
2. 下载对应版本：
   • macOS（Apple Silicon）：下载 open-design-*-mac-arm64.dmg
   • macOS（Intel）：下载 open-design-*-mac-x64.dmg
   • Windows：下载 open-design-*-win-x64-setup.exe
3. macOS 用户：双击 dmg 文件，将 Open Design 拖入 Applications 文件夹
4. Windows 用户：双击运行 exe 安装程序。若 SmartScreen 提示，点击“更多信息” → “运行 anyway”
5. 安装完成后，双击运行 Open Design

提示：Open Design 也可以源码部署（需 Node 24 + pnpm）或通过 Docker 部署。

二、首次启动与配置

1. 切换语言（可选）

打开 Open Design 后，第一件事可以先切换语言。

2. 配置 Agent（最关键的一步）

Open Design 不自带 AI 模型，需要你电脑上已有至少一个 AI 编程助手。

支持的 Agent 列表（共 21+ 个）：

首次运行时，Open Design 会自动扫描你电脑 PATH 路径下已安装的 Agent CLI。

如果电脑上没有任何 Agent：先安装一个，推荐 Claude Code。

3. 配置 API 密钥（BYOK）

Open Design 采用 BYOK（自带密钥） 模式——你用自己的 API 密钥调用模型供应商的服务。

• 支持 OpenAI、Azure、Google、Anthropic、Mistral、xAI、Moonshot 等任意兼容 OpenAI 协议的端点
• 密钥和费用都留在你自己这一侧
• 产品本身完全免费（Apache-2.0 开源），你只需支付所用供应商的 API 费用

4. 品牌迁移（可选）

如果你已有品牌资产（如截图或 Figma 导出），可以拖入 Web UI，让 Agent 把品牌提取成一个 DESIGN.md 文件，保存到 design-systems/ 目录下。之后所有 Skill 都会按这个品牌风格渲染。

三、界面与使用

界面布局

Open Design 界面分为左右两大区域：

左侧——产品类型栏（竖排标签）：

• 原型、实时制品、幻灯片、从模板、图片、视频、音频、其它
• 点击哪个就进入哪个的创建面板

右侧——项目管理和示例：

• 顶部 tab：我的设计、示例、设计体系、图片模板、视频模板
• 下方是已有项目列表，支持搜索

使用流程（四步走）

Open Design 的官方使用流程分为四步：

1. 选择起点（Brief）：在左侧选择你要做的设计类型（原型、幻灯片、图片等）
2. 确定视觉方向：选择或描述你想要的视觉风格
3. 生成 Artifact：AI 自动生成设计产物
4. 交付或制作视频：导出最终文件

实际操作：一句话生成设计

1. 在主界面中间的对话框中输入你的设计需求，例如“做一个简洁的个人博客首页”
2. 选择输出格式（网页、PPT、视频等）
3. 点击发送，AI 会实时生成专业级的设计作品
4. 生成完成后可以实时预览，并导出为 HTML、PDF、PPTX、MP4 等多种格式

它能产出什么？

Open Design 能生成可直接运行的真实文件：

• 网页原型、落地页、仪表盘
• 演示文稿（幻灯片/PPT）
• 品牌与设计系统
• 图片、视频
• 交互式原型（HyperFrames）

四、核心概念：Skills + Design Systems

Open Design 的核心架构由两个抽象层组成：

Skills（技能）

Open Design 内置 19+ 个 Skills（最新版已扩展至 100+ 个）：

• 设计交付类：生成原型、幻灯片、仪表盘等
• 内容创作类：生成图片、视频、音频等
• 工作流类：品牌提取、设计系统管理等

Design Systems（设计系统）

内置 71 套品牌级设计系统（最新版已扩展至 150+ 套）。每套设计系统都是一个 DESIGN.md 文件，定义了完整的视觉规范（配色、字体、间距、组件等）。

19+ × 71 的组合，理论上可产生超过 1300 种“能力 × 风格”组合。

五、进阶使用技巧

1. 换 Agent 无需重做

Skill 和 DESIGN.md 系统与 Agent 无关——同一个 SKILL.md 文件可以在 Claude Code、Codex、Cursor、Gemini CLI 等不同 Agent 上渲染。换 Agent 只是 daemon 里的一项配置变更。

2. 自托管与团队协作

• 代码采用 Apache-2.0 协议，你可以 fork 仓库、编辑 Skill、加入自己的规则
• daemon 在任何能跑 Node 24 的地方运行
• 团队共享部署通常把 daemon 固定在内网一台机器上，让每个开发者的 CLI 指向它

3. 数据安全

• 只有你的 prompt 和 Skill 上下文会发给你自带密钥的那家模型供应商
• Open Design 没有自己的服务器——daemon 直接与你的供应商通信
• 生成的 artifact 以文件形式落在你的项目目录里，不会进入任何厂商云端

六、常见问题

七、资源链接

• 官方网站：https://open-design.ai
• GitHub 仓库：https://github.com/nexu-io/open-design
• 下载页面：https://open-design.ai/zh/download/
• 支持的 Agent 列表：https://open-design.ai/zh/agents/
• 路线图：GitHub 仓库的 docs/roadmap.md

总结

Open Design 的使用流程可以概括为三步：

1. 安装：下载桌面版并安装（推荐）
2. 配置：确保电脑上已安装至少一个 AI 编程助手（如 Claude Code），Open Design 会自动识别
3. 使用：在对话框中用自然语言描述你的设计需求，选择输出类型，等待 AI 生成即可

它的核心优势是 开源、免费、本地优先、不绑定任何模型，让你用自己的 AI 编程助手和 API 密钥来驱动专业级的设计生成。