根据 OpenDesign 的官方仓库，这是一个开源的、本地优先的设计工具，可被视为 Claude Design 的开源替代品。它能让你的 AI 编程助手（如 Claude Code、Codex、Cursor 等）成为设计引擎，生成原型、落地页、演示文稿、图像和视频。以下是基于其文档整理的部署与使用教程。

🧭 核心概念与定位

OpenDesign 不是一个传统设计软件，而是一个让 AI 代理执行设计任务的工作流平台。其核心理念是：

  • 代理驱动：你安装的编码 CLI（如 Claude Code）是实际的设计执行者。
  • 本地优先：数据、技能和设计系统默认存储在本地，支持离线使用。
  • 品牌中心：通过 DESIGN.md 文件定义品牌规范，所有生成物自动遵循。
  • 可组合性：通过 技能（Skills）、设计模板 和 插件 扩展功能。

工作流程：你提出一个设计需求（如“生成一个产品落地页”）→ OpenDesign 调用配置好的 AI 代理 → 代理结合选定的设计系统（如 Linear） 和技能/模板 生成真实的 HTML/CSS 文件 → 在 OpenDesign 中预览 → 导出为 HTML/PDF/PPTX/MP4。

📦 部署与安装

OpenDesign 提供多种部署方式，以适应不同场景。

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

这是最快上手的方式，提供完整的图形界面。

  1. 访问 open-design.ai 或 GitHub Releases 页面。
  2. 下载对应系统的安装包：
    • macOS：Apple Silicon 或 Intel 版本的 .dmg 文件。
    • Windows (x64)：.exe 安装包。
    • Linux：可选发布通道的 AppImage。
  3. 安装并启动。应用会自动检测你 PATH 中的 AI 编程助手 CLI。

方式二：集成到现有 AI 编程助手（无 UI）

如果你主要在命令行中使用 AI 代理，无需打开图形界面即可调用 OpenDesign 功能。

1
2
3
4
5
6
# 安装 MCP 服务器到你的代理中（例如 Claude Code）
od mcp install claude

# 或在终端中使用 OpenDesign 命令
od project list --json
od plugin list

注意：在 macOS 上，od 可能与系统自带的八进制转储命令冲突。桌面应用用户应通过 Settings → MCP server 复制专用安装命令。

方式三：Docker 部署

适合服务器或团队共享部署。

1
2
3
4
5
6
git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# 访问 http://127.0.0.1:7456

访问时需使用 open-design 作为用户名，.env 中的 OD_API_TOKEN 作为密码。

方式四：从源码运行（开发者）

需要 Node.js (~24) 和 pnpm。

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

🚀 快速开始

  1. 启动应用：打开桌面应用或访问 Web 界面。
  2. 选择或创建设计系统：从内置的 151 个品牌设计系统（如 Linear、Stripe、Notion）中选择一个，或上传自己的 DESIGN.md 文件。
  3. 选择一个插件或技能：例如，选择 od-default 插件生成一个基础页面。
  4. 输入你的需求：在聊天框中输入设计需求，如“为我们的 SaaS 产品生成一个英雄区页面”。
  5. AI 代理执行：OpenDesign 会调用你配置的 AI 编程助手，结合所选设计系统和技能生成真实的 HTML/CSS 文件。
  6. 预览与迭代：在应用内预览生成的设计，并通过对话提出修改意见。
  7. 导出：满意后，导出为 HTML、PDF、PPTX 或 MP4 文件。

⚙️ 核心功能与配置

  • 设计系统：DESIGN.md 是品牌规范的唯一来源。你可以从零创建，或让 AI 从现有品牌资产（网站、Figma）中提取。
  • 插件系统：插件是可复用的设计工作流。内置 277 个官方插件，涵盖迁移（Figma→代码）、场景生成、图像/视频模板等。可通过 od plugin install <plugin> 安装。
  • 技能与模板：
    • 技能 (Skills)：位于 skills/ 目录，提供可复用的代理行为（如代码审查）。
    • 设计模板：位于 design-templates/，提供可渲染的页面模板（如落地页、仪表盘、演示文稿）。
  • AI 模型配置：支持自带密钥（BYOK），可连接 OpenAI、Anthropic、Azure、Google Gemini、Ollama 等任何 OpenAI 兼容端点。
  • MCP 集成：为 AI 代理提供标准的 MCP 工具，使其能直接读取 OpenDesign 项目文件。

❓ 常见问题

  • OpenDesign 与 Claude Design 的关系？
    OpenDesign 是 Claude Design 的开源、本地替代品。它使用相同的“代理生成设计物”范式，但不依赖 Anthropic 的闭源服务，支持更多模型和本地运行。
  • 我需要一个特定的 AI 模型才能使用吗？
    不需要。OpenDesign 自带 BYOK 代理，你可以使用 OpenAI、Anthropic、Google 等任何兼容 API 的模型。它也支持 DeepSeek Harness 等本地 CLI 工具。
  • 生成的设计文件存在哪里？
    所有生成的文件（HTML、CSS、图片等）都存储在本地项目目录中。你可以在应用的“项目”区域找到它们。
  • 如何为我的公司定制品牌规范？
    创建或上传一个 DESIGN.md 文件到 design-systems/ 目录。该文件定义了颜色、字体、间距等品牌令牌。所有后续设计都会自动遵循此规范。

总结

OpenDesign 将设计流程与 AI 编程代理的工作流深度融合，让代码和设计使用同一套工具和语言。对于开发者或团队，推荐从下载桌面应用开始，快速体验内置的设计系统和插件。如果你是 AI 代理的重度用户，可以探索通过 od mcp install 将其无缝集成到你的 Claude Code 或 Codex 工作流中。其强大的插件系统和品牌管理能力，为设计和工程团队协作提供了新的可能性。