开源 AI 设计工具 Open Design 使用指南
一、工具简介
1、什么是 Open Design
Open Design（简称 OD）是开源免费、本地部署的 AI 设计工具，核心是依托各类 AI Agent / 大模型，将自然语言转化为可运行的网页代码、演示文稿、视觉素材等。
- 核心优势：本地运行，数据不上云，隐私安全；支持
BYOK（自带密钥），复用你已有的大模型服 务；完全开源无商用限制。 - 主要能力：交互式网页原型、生产级代码生成、Web PPT、海报 / 短视频制作、多风格设计系统一键套用。
- 定位：前端、设计师、产品同学的提效工具，也是
Claude Design优质开源平替。
2、前置环境要求
-
系统：Windows 10+/macOS 12+/ 主流 Linux 发行版
-
基础依赖：推荐版本 24.x（必备，运行核心服务）
-
可选的本地 agent CLI： Claude Code、Codex、Devin for Terminal、Gemini CLI、OpenCode、Cursor Agent、Qwen、Qoder CLI、GitHub Copilot CLI 等。即使未安装任何 CLI，也可在 Settings 中切换至
BYOK API模式。
二、方式一：源码编译安装（全平台通用，推荐）
该方式适配 Windows、Mac、Linux，可获取最新版本，也是官方主流使用方案。
步骤 1：安装 Git & Node.js
安装 Git
用于拉取开源仓库代码，官网下载：git-scm.com/安装完成后，打开终端（CMD/PowerShell/ 终端），输入以下命令校验：
git --version
输出版本号即代表安装成功。
安装 Node.js
前往 Node.js 官网，选择 24.x 长期支持版：nodejs.org/安装默认勾选 Add to PATH，安装完毕终端执行校验：
node -v
npm -v
正常输出版本号即安装成功。
安装 pnpm
npm install -g pnpm
正常输出版本号即安装成功。
步骤 2：拉取 Open Design 源码 和 安装项目依赖
1、新建一个空文件夹（例如 OpenDesign），在文件夹内右键打开终端。
2、执行克隆命令，拉取官方代码仓库：
git clone https://github.com/nexu-io/open-design.git
3、进入项目目录，安装项目依赖：
cd open-design
pnpm install
步骤 3：启动服务
在项目目录open-design打开终端中输入以下命令，启动Open Design，复制自己启动服务地址如：http://127.0.0.1:11012/ 在浏览器中打开，在首页选择运行方式点击先跳过按钮：
pnpm tools-dev run web
步骤 4：配置 Open Design 运行方式（执行模式）
1、点击页面右上角的设置按钮，打开设置面板，进行执行模式配置
2、在设置面板点击左侧的执行模式 可以看到有本机CLI 和 BYOK 两种模式
2.1、执行模式基于本机CLI配置，如果本地已安装了Claude Code、Codex CLI直接选择切换到相应的：agent CLI，没有安装的可以直接点击一个agent CLI进行安装（点击安装后会跳转到相应的**agent CLI**）官网，按着官方文档安装就行，如点击 Cluade Code 为例
2.1.1、这里以阿里百炼平台对接Claude Code的方式安装Claude Code
2.1.2、打开阿里百炼平台网址大模型服务平台百炼 - 大模型应用构建 - 阿里云，没有注册的需要先注册后登入，以Windows系统为例（macOS切换到macOS即可）找到 文档 -> 接入客户端/开发工具 -> Claude Code -> Windows
2.1.3、在 Windows 上安装 Claude Code，在终端执行如下命令：
npm install -g @anthropic-ai/claude-code
2.1.4、安装完毕终端执行claude命令进行校验安装是否成功
出现如图内容说明安装成功
2.1.5、配置跳过 Claude Code 登录验证
编辑或新建 ~/.claude.json（Windows 路径：C:\Users<用户名>.claude.json），将 hasCompletedOnboarding 设为 true，跳过 Anthropic 官方登录验证。
{
"hasCompletedOnboarding": true
}
2.1.6、配置接入凭证（YOUR_API_KEY、YOUR_BASE_URL、YOUR_MODEL）
新建 ~/.claude/settings.json（Windows 路径：C:\Users<用户名>.claude\settings.json），写入对应阿里云百炼套餐的配置，将 YOUR_API_KEY 替换为阿里云百炼API Key，将YOUR_MODEL替换成自己选择用的阿里云百炼模型名称
{
"env": {
"ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY",
"ANTHROPIC_BASE_URL": "https://dashscope.aliyuncs.com/apps/anthropic",
"ANTHROPIC_MODEL": "YOUR_MODEL",
"ANTHROPIC_DEFAULT_HAIKU_MODEL": "YOUR_MODEL",
"ANTHROPIC_DEFAULT_SONNET_MODEL": "YOUR_MODEL",
"ANTHROPIC_DEFAULT_OPUS_MODEL": "YOUR_MODEL",
"CLAUDE_CODE_SUBAGENT_MODEL": "YOUR_MODEL"
},
"theme": "dark"
}
2.1.7、终端运行claude命令，验证是否链接成功阿里云百炼模型
如上图就表明 Claude Code 链接阿里云百炼模型成功
2.2、执行模式基于BYOK配置，当你本地没有安装类似Claude Code 等 Agent CLI 时，可以直接通过BYOK模式链接模型，这里以链接阿里云百炼平台模型为例
2.2.1、执行模式选择BYOK，因阿里云百炼平台模型ali大多兼容 OpenAI 所以我们头部的按钮选择模型商为OpenAI
2.2.2、在OepnAI配置页面进行以下内容填写：
-
快速填充提供方选择自定义提供方 -
API key输入你的阿里云百炼API Key -
模型选择
阿里云百炼平台模型中兼容OepnAI的模型 -
Base URL 填写为
https://dashscope.aliyuncs.com/compatible-mode/v1
2.2.3、验证 BYOK 配置是否成功
- 点击
测试按钮 出现已连接。2962 毫秒响应 — 'ok'
3、回到启动Open Design，复制自己启动服务地址如：http://127.0.0.1:11012/ 的浏览器页面，点击重新扫描按钮就能看到本地搭建的 Claude Code 选中它点击测试按钮出现 Claude Code 在 3770 毫秒内响应 — 'ok'字样就说明 Open Design 配置本机CLI（Claude Code）成功
步骤 5：基础实战：从零制作页面（核心实操），设计高保真原型（即UI）
1、点击 open design 首页左侧的工具栏中的+图标 新建项目 ,在 新建项目 页面选择原型填写新建原型名称，精度选择高保真等，点击创建按钮创建项目
2、开始 open design 项目页面与AI对话，基于这个案例它会询问你设计方向，目标平台、视觉调性偏向、背景等信息，你也可以选择它推荐的也可以自定义，给出提示词如：
搭建高端酒类线上商城全套原型，同时输出 PC 官网端 + 手机移动端两套界面，遵循电商交互逻辑，界面精致、视觉高级，适配主流屏幕尺寸
3、效果如下：
4、对生成的原型效果有某些局部的样式不满意，需要修改的:
方式一：源码编译安装
- 通过点击预览页面中
标记和编辑图标进行修改优化
方式二：桌面客户端直装
- 通过点击预览页面中
Inspect和编辑图标进行修改优化
- 点击
Inspect选择原型中的某个区域或者组件进行修改时报错提示没有data-od-id属性时，你是选不中具体的某个区域或者组件进行修改的，你需要在与左边的open design AI对话框中输入让其给添加上这个属性，其实也可以在让其创作的时候要求必须包含这个data-od-id属性就行了，进而避免生成原型的时候可能没添加data-od-id属性导致无法通过Inspect和编辑进行原型操作修改细节样式等。
三、方式二：桌面客户端直装（懒人首选）
如果不想搭建源码环境，可直接使用官方编译好的桌面客户端：
1、前往open design官方 Release 发布页 Releases · nexu-io/open-design，下载对应系统安装包（.dmg / .exe）
2、Windows：双击 .exe 一路下一步完成安装；Mac：拖拽 .app 至应用程序文件夹
3、安装完成后，双击图标直接启动，无需额外配置环境。
4、配置 Open Design 运行方式（执行模式）和 方式一中一样
四、open design MCP服务器配置，通过 Trae 链接 open design的 MCP服务
操作步骤如下：
