Open Design 0.3.0 完整部署与零基础入门教程（2026年5月最新版）

本文基于2026年5月3日发布的Open Design v0.3.0稳定版编写，是目前最准确、最适合小白的操作指南。Open Design是本地优先、完全开源的Claude Design替代品，支持19种设计技能和72套品牌级设计系统，能生成可直接导出的网页、APP原型、PPT等设计成果。

一、快速部署：桌面版（强烈推荐小白使用）

桌面版无需安装任何开发环境，一键安装即可使用，是普通用户的最佳选择。

系统要求

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

macOS桌面版安装步骤

1. 打开官方GitHub发布页：https://github.com/nexu-io/open-design/releases/latest
2. 下载open-design-0.3.0-mac-arm64.dmg文件
3. 双击下载的dmg文件，将Open Design图标拖入Applications文件夹
4. 打开启动台，找到Open Design并点击运行
5. 首次运行时，macOS可能会提示"无法打开，因为无法验证开发者"，解决方法：
   • 打开系统设置→隐私与安全性
   • 向下滚动找到"安全性"部分，点击"仍要打开"
   • 再次运行Open Design即可

Windows桌面版安装步骤

1. 打开官方GitHub发布页：https://github.com/nexu-io/open-design/releases/latest
2. 下载open-design-0.3.0-win-x64-setup.exe文件
3. 双击运行安装程序
4. Windows SmartScreen会提示"Windows已保护你的电脑"，解决方法：
   • 点击"更多信息"
   • 点击"运行 anyway"
5. 按照安装向导完成安装，默认安装路径即可
6. 安装完成后，桌面会出现Open Design快捷方式，双击运行

二、源码部署（适合开发者或想获得最新功能）

如果桌面版有功能限制，或者你想参与开发，可以选择从源码运行。

第一步：安装Node.js和pnpm

这是唯一需要安装的依赖，按照以下步骤操作：

1. 下载Node.js 24.x版本：https://nodejs.org/dist/v24.4.0/node-v24.4.0.pkg（macOS）或https://nodejs.org/dist/v24.4.0/node-v24.4.0-x64.msi（Windows）
2. 双击安装包，按照向导完成安装，全部使用默认选项
3. 验证安装是否成功：
   • 打开终端（macOS：启动台→其他→终端；Windows：Win+R→输入cmd→回车）
   • 输入node --version，应该显示v24.4.0
   • 输入corepack enable启用pnpm
   • 输入pnpm --version，应该显示10.33.x

第二步：克隆仓库并安装依赖

1. 在终端中输入以下命令，克隆Open Design仓库：

   git clone https://github.com/nexu-io/open-design.git
   

2. 进入项目目录：

   cd open-design
   

3. 安装项目依赖（这一步需要2-5分钟，取决于网络速度）：

   pnpm install
   

第三步：启动服务

1. 在终端中输入以下命令，启动Open Design：

   pnpm tools-dev run web
   

2. 首次启动会自动扫描你的电脑上已安装的AI编程助手（如Claude Code、Gemini CLI、Codex等），加载19种设计技能和72套设计系统
3. 启动成功后，浏览器会自动打开http://localhost:7457，这就是Open Design的Web界面

三、零基础入门：完成你的第一个AI设计

无论你使用桌面版还是源码部署，首次启动后的操作流程完全相同。

首次启动配置

首次打开Open Design时，会弹出欢迎对话框，要求你配置AI引擎。有两种选择：

1. 使用已安装的AI CLI（推荐，免费且速度快）：
   • 如果你已经安装了Claude Code、Gemini CLI、Codex等，Open Design会自动检测到并使用
   • 无需额外配置，直接点击"开始使用"即可
2. 使用Anthropic API密钥（备用方案）：
   • 如果你没有安装任何AI CLI，可以输入你的Anthropic API密钥
   • 密钥获取地址：https://console.anthropic.com/settings/keys
   • 输入密钥后点击"保存并开始"

界面介绍

Open Design的界面非常简洁，分为三个主要部分：

• 左侧：聊天和任务进度区，显示你的对话和AI正在执行的任务
• 中间：预览区，实时显示AI生成的设计成果
• 顶部：技能选择、设计系统选择和设置按钮

步骤1：选择设计技能

点击顶部左侧的"技能"下拉菜单，选择你想要生成的设计类型。对于新手，推荐先选择saas-landing（SaaS产品落地页），这是最常用也最容易出效果的技能。

目前支持的主要技能：

• web-prototype：单页HTML原型
• saas-landing：SaaS营销落地页
• dashboard：后台管理界面
• pricing-page：定价页面
• docs-page：文档页面
• blog-post：博客文章
• mobile-app：移动APP屏幕
• html-ppt：HTML演示文稿（PPT）

步骤2：选择设计系统

点击顶部中间的"设计系统"下拉菜单，选择一个你喜欢的设计风格。Open Design提供了72套品牌级设计系统，包括：

• Neutral Modern：中性现代风格（默认，最通用）
• Vercel：Vercel官网风格
• Linear：Linear官网风格
• Apple：苹果官网风格
• Notion：Notion风格

对于新手，推荐先使用默认的Neutral Modern，效果稳定且美观。

步骤3：输入设计提示词

在左侧底部的输入框中，用大白话描述你的设计需求。提示词越具体，生成的效果越好。

新手推荐提示词示例：

帮我做一个AI写作工具的SaaS落地页，产品名称叫"智写AI"。
主要功能：AI文章生成、多语言翻译、内容润色、SEO优化。
目标用户：自媒体创作者、内容营销人员、学生。
页面风格：简洁现代，主色调为蓝色。
需要包含：导航栏、英雄区、功能介绍、用户评价、定价表、注册按钮。

输入完成后，点击"发送"按钮。

步骤4：填写发现问卷

AI会自动弹出一个发现问卷，帮助它更准确地理解你的需求。问卷非常简单，只需要填写几个关键信息：

• 表面：你想要的设计表面（如网页、移动应用）
• 受众：目标受众（如B2B企业、普通消费者）
• 语气：品牌语气（如专业、友好、活泼）
• 品牌背景：简单介绍你的品牌
• 规模：设计的规模（如单页、多页）

填写完成后，点击"提交"按钮。

步骤5：查看生成过程和结果

提交问卷后，AI会开始生成设计。你可以在左侧看到实时的任务进度，包括：

1. 分析需求
2. 制定设计计划
3. 生成HTML代码
4. 自我检查和优化

整个过程大约需要1-3分钟，取决于你的AI引擎速度。生成完成后，中间的预览区会实时显示最终的设计效果，你可以直接在预览区点击链接、滚动页面，体验完整的交互效果。

步骤6：导出设计

如果你对生成的结果满意，可以点击预览区右上角的"导出"按钮，选择导出方式：

• 保存到磁盘：将设计文件保存到本地的.od/artifacts文件夹
• 下载为ZIP：将整个设计项目打包为ZIP文件下载
• 复制HTML代码：直接复制生成的HTML代码，粘贴到你的编辑器中使用

四、常见问题与解决方法

1. Windows SmartScreen阻止安装

   • 解决方法：点击"更多信息"→"运行 anyway"，这是因为安装包目前未签名，不影响使用

2. macOS提示"无法打开，因为无法验证开发者"

   • 解决方法：打开系统设置→隐私与安全性→向下滚动找到"安全性"部分→点击"仍要打开"

3. 启动后提示"未找到可用的AI代理"

   • 解决方法：要么安装一个AI CLI（推荐Claude Code：https://console.anthropic.com/claude-code），要么在设置中输入你的Anthropic API密钥

4. 生成速度很慢

   • 解决方法：这取决于你的AI引擎速度。使用本地安装的AI CLI比使用API密钥更快；确保你的网络连接良好

5. 生成的设计不符合预期

   • 解决方法：
     • 更详细地描述你的需求，包括具体的功能、颜色、布局
     • 尝试不同的设计系统
     • 在聊天中告诉AI你不满意的地方，让它进行修改

五、进阶技巧

1. 修改设计：生成完成后，你可以在聊天中直接告诉AI你想要修改的地方，比如"把主色调改成绿色"、“在英雄区添加一张图片”，AI会自动更新设计
2. 自定义设计系统：你可以在design-systems文件夹中创建自己的设计系统，定义颜色、字体、间距等
3. 添加新技能：你可以在skills文件夹中创建自己的技能，扩展Open Design的功能
4. 部署到服务器：如果你想让其他人也能访问你的Open Design实例，可以使用以下命令启动生产模式：

   pnpm build
   OD_HOST=0.0.0.0 pnpm tools-dev run --prod
   

   然后访问http://<你的服务器IP>:7457即可