Open Design 教程：把编程代理变成设计引擎的开源神器

发表于

一句话：Open Design 让编程代理摇身一变为设计工具——不切换平台、不改工作流，直接在 Claude Code / Codex / Cursor 里输出网站原型、演示文稿、实时仪表盘、高清图片甚至 MP4 视频，75,600+ Stars（截至 2026-07-07 已突破 75,660），Apache 2.0 协议，免费正版。

什么是 Open Design？

Open Design 是 nexu-io 团队开源的一款本地优先原生桌面应用（macOS / Windows），定位于 Claude Design 的开源替代方案。

它不替代 Figma 的画布编辑体验，而是把整个编程代理变成了设计引擎：你只需要在熟悉的 CLI 里敲下一条提示词，Open Design 就在本地沙盒中调用 DESIGN.md 设计系统、品牌样式、组件库，实时生成：

  • 原型：Web / Desktop / Mobile 单页 HTML 原型，实时 iframe 沙盒预览
  • 实时仪表盘：可编辑的 KPI 面板，实时刷新
  • 演示文稿（Deck）：杂志风、融资路演 PPT，导出 PPTX / PDF
  • HyperFrame 动效：MP4 视频广告、动效展示（1920×1080 30fps）
  • 图片：通过 gpt-image-2 生成高质量品牌图片

所有产出均为真实文件（.html / .pdf / .pptx / .mp4），而非图片截图。目前已内置 71 套设计系统（含 2 套手创 + 69 套从 awesome-design-md 导入）、57 个设计技能、15 套演示文稿模板，开箱即用。

为什么选择 Open Design？

特性 Open Design Claude Design Figma
定价 免费 + 开源（Apache 2.0） 订阅付费 免费版有限制
平台 本地桌面（macOS / Windows） Web 端 Web / 桌面
集成编程代理 22+（Claude Code、Codex、Cursor 等） 仅官方代理 不支持
设计系统 DESIGN.md 品牌合约 内置 部分支持
导出格式 HTML / PDF / PPTX / MP4 / ZIP 有限 PNG / SVG
插件生态 可安装第三方插件 无 有
协议 完全本地运行、SBOM 可审计 云端 云端

前提条件

  • Node.js：24.x（强制要求）
  • pnpm：10.33.x（推荐 Corepack）
  • 操作系统：macOS、Linux / WSL2 或 Windows 原生
  • 可选代理：Claude Code、Codex、Cursor 等；如没有，可用 BYOK API 模式

安装 Open Design

桌面应用（推荐新手）

从 Releases 页面 下载最新版本 0.13.0：

平台 文件名
macOS (Silicon) open-design-0.13.0-mac-arm64.dmg
macOS (Intel) open-design-0.13.0-mac-x64.dmg
Windows open-design-0.13.0-win-x64-setup.exe

最新 0.13.0 版本下载量（截至 2026-07-07）：Windows 版 20,228 次、macOS ARM 版 9,810 次。

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
openssl rand -hex 32
# 填入 .env OD_API_TOKEN=
docker compose up -d

打开 http://localhost:7456 即可。

开发者模式

1
2
3
4
nvm install 24 && nvm use 24
corepack enable
pnpm install
pnpm tools-dev

Homebrew / AUR

1
2
3
4
5
# macOS
brew install --cask open-design

# Linux
yay -S open-design

第一步：配置编程代理

  1. 启动应用后，进入 Settings -> Execution mode
  2. 选择 PATH 中已安装的代理 CLI（如 Claude Code）
  3. 或切换到 BYOK 模式（填入 API Key + baseUrl + model）

若代理未被识别，先验证 PATH 是否包含代理目录，然后点击 Rescan。

第二步：生成网页原型

  1. 在首页 Create 面板中选择 Skill：Web Prototype（默认）
  2. Design System 下拉选择 Neutral Modern（内置）
  3. 输入提示词，如：「生成一个 SaaS 产品落地页，带 Hero 区、定价卡片、FAQ」
  4. 点击 Send，左侧流式输出、右侧 iframe 实时预览
  5. 导出 HTML 源码或 PDF

第三步：生成演示文稿

  1. Skill 选择 HTML PPT
  2. 选择模板：Magazine / Swiss International / Guizang 等 15 个模板之一
  3. 输入主题，如：「10 页融资路演，主题是 AI 编程代理」
  4. 使用键盘左右键翻页预览
  5. 导出 PPTX（截图渲染）、PDF、Markdown 或 ZIP

第四步：生成 HyperFrame 视频

  1. Skill 选择 HyperFrame
  2. 设定分辨率与时长（默认 1920×1080 30fps）
  3. 输入提示词，如：「数据可视化入场动画，5 秒，包含图表和数字翻牌效果」
  4. 等代理逐帧渲染完成后输出 MP4

常见问题

能离线使用吗？

可以，BYOK 模式填入 Ollama、LM Studio、vLLM 等本地代理后完全离线运行。

Windows 安装注意事项？

需 Node.js 24 + Corepack，部分 PowerShell 策略需 Set-ExecutionPolicy RemoteSigned。详见 Windows 排错文档。

如何安装插件？

打开 Plugin 页面浏览社区插件，或 od plugin install <id> 安装。

Open Design Cloud 与 BYOK 区别？

  • BYOK：自备 API Key，按原厂商计费
  • Open Design Cloud：官方服务，充值即用，包含 20+ 旗舰模型，无需配置

总结

Open Design 把编程代理变成了设计引擎。原型、演示文稿、仪表盘、图像视频——所有真实文件无需切换工具，直接在 Claude Code / Codex / Cursor / Gemini 等 22+ 代理中输出。Apache 2.0 协议、3,100+ Discord 社区成员、75,600+ GitHub Stars、内置 71 套设计系统，立即在本地体验真正的”命令行设计”。

📎 有用链接