Open Design 使用说明

一、什么是 Open Design？

Open Design 是一款开源、本地优先的 AI 设计工具，定位为 Claude Design 和 Figma 的开源替代品。它本身不直接生成设计，而是一个“设计调度器”——它能检测你电脑上已有的 AI 编程助手（如 Claude Code、Codex、Cursor、Gemini CLI 等），帮你把设计任务拆解好，再分发给这些助手去执行。

核心特点：

• 开源免费：Apache-2.0 协议，代码完全可见
• 本地运行：项目文件存放在你自己机器上，不上传云端
• Agent 可插拔：支持 20 多种编程 Agent，你可自由选择用哪个 CLI 驱动生成
• 内置丰富资源：内置 70+ 套设计系统和 30+ 个可组合技能
• 多格式输出：可生成网页、桌面/移动端原型、幻灯片、图片、视频等，支持 HTML/PDF/PPTX/MP4 导出

---

二、安装方式

Open Design 提供三种安装方式，推荐大多数人使用桌面应用。

方式一：桌面应用（推荐，零配置）

1. 前往 open-design.ai/download
2. 根据你的操作系统选择对应版本下载：
   • macOS：Apple Silicon 选 arm64 版本，Intel 选 x64 版本
   • Windows：选 x64 版本
   • Linux：选 AppImage 版本
3. 像安装普通应用一样运行安装程序
4. （Windows 用户）若看到“Windows 已保护你的电脑”提示，点击“更多信息”→“仍要运行”即可

整个过程不需要装 Node、不需要配环境变量、不需要折腾终端。

方式二：从源码运行（适合开发者）

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

需要 Node ~24 和 pnpm 10.33.x。

方式三：装进编程 Agent（终端用户）

curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

之后在 Agent 内直接说“Use open-design to generate a landing page with the Linear design system”即可。

---

三、首次运行与配置

1. 切换语言

首次打开 Open Design 后，第一件事建议先切换语言。

2. 连接模型

Open Design 会自动扫描并检测你电脑上已安装的 AI 工具（Claude Code、Codex、Gemini 等），并列出它们。

两种情况：

• 已有 Agent：直接点击你安装的 Agent，然后点“Get started”
• 没有 Agent：选择“API provider”，粘贴来自 Anthropic、OpenAI、Azure 或 Google Gemini 的 API 密钥

之后你可以随时从设置中切换模型、添加媒体提供商、更改语言、选择浅色/深色模式。

如果你电脑上完全没有 Agent，推荐先去安装 Claude Code。

---

四、界面概览

打开后界面主要分为左右两大块：

右侧区域（项目管理）

顶部有多个标签页：

• 我的设计：已有项目列表，支持搜索
• 示例：预览用 Open Design 做出的真实设计，喜欢可直接复用提示词
• 设计体系：内置的设计系统模板
• 图片模板 / 视频模板：图片和视频模板库

左侧区域（产品类型栏）

最左边一竖排标签，对应你要做的设计类型：

• 原型（Prototype）
• 实时制品
• 幻灯片
• 从模板
• 图片 / 视频 / 音频
• 其它

点击哪个就进入对应的创建面板。

---

五、创建第一个项目

以构建一个原型页面为例：

第 1 步：选择类型

点击左侧的 Prototype（原型）。

第 2 步：填写基本信息

• 给项目起一个名字
• 挑选一个设计系统（或保持“free”自由模式）
• 选择保真度（建议选高保真）

第 3 步：点击创建

点击 Create 按钮。

第 4 步：输入提示词

粘贴你的需求描述，然后发送。

第 5 步：回答探索性问题

Open Design 会问几个探索性问题来锁定方向，例如：

• 桌面端还是移动端？
• 语气风格如何？
• 是否需要写实图片？

回答这些问题后发送。

第 6 步：选择视觉方向

选择一个视觉方向，Open Design 就会构建出你的页面——一个配有 AI 生成图片、真实文案和动画的完整界面。

---

六、高级功能

1. MCP 服务器集成（适合 Agent 用户）

装好 Open Design 后，运行一行命令即可把 MCP 服务器接入对应 Agent 的配置：

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

之后在任何 Agent 内都可以调用相同的工具。

2. 编辑与检查

生成产物后，可以使用画布上的 Edit（编辑）、Inspect（检查）和 Comment（评论）工具进行精细打磨。

3. 一键部署

Open Design 支持从提示词到在线 URL 的一键部署。

4. 导出

支持导出多种格式：HTML、PDF、PPTX、MP4 等。

5. Open Design Cloud（官方模型服务）

如果不想自己准备 API Key，可以使用 Open Design Cloud——一次充值即可使用 GPT、Claude、Gemini、DeepSeek 等 20+ 旗舰模型，零配置、按真实 token 用量计费。

---

七、常见问题

Q：Open Design 收费吗？
A：完全开源免费（Apache-2.0）。如果使用 Open Design Cloud 模型服务则需要充值，但 BYOK（自带密钥）方式完全免费。

Q：我电脑上没有任何 AI 编程助手怎么办？
A：可以在首次启动时选择“API provider”，粘贴 Anthropic、OpenAI 或 Google 的 API 密钥。或者先去安装 Claude Code、Codex 等免费 CLI 工具。

Q：支持哪些操作系统？
A：支持 macOS（Apple Silicon 和 Intel）、Windows（x64）和 Linux（AppImage）。

Q：项目文件存在哪里？
A：所有项目文件都存放在你自己电脑的本地文件夹中。

Q：如何获取最新版本？
A：前往 open-design.ai/download 下载最新版本。项目更新频繁，新版本会修复更多 bug。

---

八、资源链接

• 官网：open-design.ai
• 下载页面：open-design.ai/download
• GitHub 仓库：github.com/nexu-io/open-design
• 官方教程：open-design.ai/zh/tutorials
• Discord 社区：discord.gg/mHAjSMV6gz