Open Design

这是什么？

nexu-io/open-design 是一个 79.2k Stars 的开源 Claude Design 替代品，本地优先的桌面应用，让 AI 编码 Agent 成为设计引擎。支持原型设计、Landing Page、仪表盘、图标、插画等。自带设计系统令牌和组件库，支持 BYOK（自带 API Key）。定位为 Figma 的开源 AI 替代方案。

适合人群：前端开发者、设计师、需要快速原型设计的产品经理、希望用 AI 辅助设计的团队。

准备工作

• 安装桌面应用（macOS / Windows / Linux）
• 任意 LLM API Key（OpenAI / Claude / Gemini 等）
• 对设计工具有基本了解
• 可选：Figma 账号（用于导入设计文件）

快速上手

安装

# 从 GitHub Releases 下载桌面应用
# https://github.com/nexu-io/open-design/releases

# 或从源码构建
git clone https://github.com/nexu-io/open-design.git
cd open-design
npm install
npm run dev

创建第一个设计

1. 启动应用后，点击「New Project」
2. 选择设计类型：Landing Page、Dashboard、Mobile App、Icon Set、Illustration
3. 用自然语言描述你的设计需求：
   • 「创建一个 SaaS 产品 Landing Page，深色主题，包含 Hero、Features、Pricing 三个板块」
   • 「设计一个数据分析仪表盘，4 个卡片指标 + 2 个图表」
4. AI Agent 自动生成设计稿，你可以在画布上直接编辑

设计系统

Open Design 内置了完整的设计系统：

• 颜色令牌（Primary/Secondary/Accent/Neutral 等）
• 排版系统（标题/正文/标注 等）
• 间距系统（4px 基准）
• 组件库（按钮/输入框/卡片/表格/导航栏 等）

导出

支持导出为：

• HTML/CSS 代码（可直接部署）
• React/Vue 组件
• Figma 文件（.fig）
• PNG/SVG 图片

常见踩坑

1. 生成的代码需调整：AI 生成的 HTML/CSS 可能有布局问题，建议在浏览器中预览后再微调
2. 复杂设计需多次迭代：一次 prompt 可能无法完美生成，建议先用简单描述生成框架，再逐步细化
3. 设计系统自定义：默认设计系统偏西方风格，中文场景建议调整字体和间距
4. API Key 用量：复杂设计生成会消耗较多 token，建议先用免费额度测试
5. Figma 导入限制：复杂 Figma 文件的导入可能丢失部分交互效果

常见问题 FAQ

Q1: 和 Figma 的区别是什么？

A: Figma 是传统设计工具，手动操作。Open Design 是 AI 驱动的设计引擎，用自然语言描述需求即可生成设计稿。两者可以互补：Open Design 生成初稿，Figma 精修。

Q2: 免费吗？

A: 桌面应用完全开源免费。但需要自带 LLM API Key（AI 调用需付费）。

Q3: 生成的设计可以商用吗？

A: 可以。Apache-2.0 开源协议，生成的设计可以自由商用。

Q4: 支持团队协作吗？

A: 当前版本以本地为主，团队协作功能正在开发中。可以导出 Figma 文件后在 Figma 中协作。

Q5: 中文支持如何？

A: 设计系统支持中文排版，但 AI 生成的设计文案默认英文，需在 prompt 中明确要求中文。

参考链接

• GitHub 仓库
• 官方文档
• Claude Design（竞品参考）