Open Design：面向开发者的开源 AI 驱动设计引擎

介绍

如果你曾经尝试过 Anthropic 的 Claude Design，你一定知道看到大型语言模型把一个简单的需求转化为精致的 UI 原型时的激动。问题是？Claude Design 是闭源的、仅限云端，并且绑定在 Anthropic 自己的模型和技能上。Open Design（GitHub 项目位于 github.com/nexu-io/open-design）通过提供一个 本地优先、开源、BYOK（自带密钥）设计引擎 来解决这一困境，该引擎可以在你的笔记本电脑上运行，能够部署到 Vercel，并且可以与已有的 16 种编码代理 CLI 集成。

本文将逐步讲解核心概念、架构以及实用步骤，帮助你使用 Open Design 构建品牌级原型、演示文稿和媒体素材。

Open Design 与其他方案有什么不同？

简而言之，Open Design 在不产生供应商锁定的前提下，提供了 相同的产出优先思维模型。

核心架构概览

Browser (Next.js 16) ⇄ /api/* (Express daemon) ⇄ Local CLI agents

1. 前端 – 基于 React/Next.js 的单页应用，承载聊天编辑器、技能选择器、设计系统选择器以及沙箱 iframe 预览。
2. 守护进程 – 一个 Node‑24 Express 服务器（od），负责：
3. 扫描 $PATH 中的支持的编码代理 CLI 并注册它们；
4. 将项目、对话和模板存入本地 SQLite 数据库（.od/app.sqlite）；
5. 通过 BYOK 代理（/api/proxy/{anthropic,openai,…}）统一不同 LLM 提供商的流式响应；
6. 提供提示模板库、设计系统目录以及产出检查功能。
7. 代理运行时 – 守护进程在项目文件夹（.od/projects/<id>）内部启动选定的 CLI。代理拥有真实的读写、Bash 与网络请求能力，仿佛是与你共事的团队成员。

职责分离意味着你可以在任意机器上运行 Web UI，而繁重的 LLM 调用则在本地或通过你的 API 密钥完成。

入门 – 三种快速方式

1️⃣ 预构建桌面应用（零配置）

1. 访问 open‑design.ai 并下载最新的 macOS 或 Windows 安装包。
2. 运行应用——它已捆绑守护进程、Web UI 以及可选的 Electron 壳。
3. 第一次启动会创建隐藏的 .od 文件夹，检测已安装的代理，并加载默认技能（web‑prototype）。

2️⃣ Docker Compose（无需 Node）

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d   # 启动守护进程 + Web，端口 7456

3️⃣ 从源码运行（完全开发者控制）

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web   # 启动守护进程 + Web，输出访问 URL

设计工作流 – 从需求到产出

1. 选择技能 – 选取原型（如 mobile‑app）或演示文稿（guizang‑ppt）等。每个技能都附带一个 SKILL.md，定义模式、平台以及所需资产。
2. 挑选设计系统 – 从 72 条目录中选取。系统提供一个包含 9 部分的 DESIGN.md（颜色、排版、间距等）。
3. 输入需求 – 首轮交互为 问卷表单，锁定界面、受众、语调、品牌背景和规模，消除 80% 的重复改动。
4. 选择视觉方向 – 若没有品牌，第二个表单会提供五种精选方向（Editorial Monocle、Modern Minimal、Tech Utility、Brutalist、Soft Warm），一键注入确定的配色与字体。
5. 实时 Todo 进度 – 代理会流式输出 Todo 卡片（in_progress → completed），你可以随时介入。
6. 沙箱预览 – 生成的 <artifact> 在干净的 srcdoc iframe 中渲染。你可以直接在工作区编辑文件并重新运行技能。
7. 导出 – 点击 Save 将产出保存为 HTML、PDF、PPTX、ZIP 或 Markdown。喜欢的模板还能保存到 SQLite 的 templates 表中以供复用。

提示栈 – 秘密酱料

Open Design 的提示栈并非简单的 system + user 消息，而是层层叠加：

• 发现指令 – 问卷表单、品牌规范提取、5 维度批评。
• 身份章程 – 防止 AI 生成废话的规则、初级设计师语气、品牌特定约束。
• 激活的 DESIGN.md – 所选系统的 token 值。
• 激活的 SKILL.md – 模式专属指令与检查清单引用。
• 项目元数据 – 细节度、演讲者备注、动画标记。
• 侧文件预检 – 读取资产、校验清单并注入默认值。

因为每一层都是 文件，你可以直接编辑 apps/daemon/src/prompts/*.ts 来自定义语调、加入新设计哲学，或集成专有 LLM。

媒体生成 – 图像、视频、音频

Open Design 附带一个 prompt‑templates 库： * 93 条图像提示（gpt‑image‑2）——海报、头像、信息图等。 * 39 条 Seedance 2.0 视频提示——15 秒电影级文字转视频。 * 11 条 HyperFrames 模板——HTML → MP4 动态图形。

选择模板后，守护进程将请求转发至对应模型，生成的 .png 或 .mp4 会落在项目文件夹中，供后续技能引用。

平台扩展

添加新技能

1. 在 skills/ 下创建文件夹，遵循现有的 SKILL.md 规范。
2. 放入任何资产（template.html、references/…）。
3. 重启守护进程——新技能会出现在选择器中。

添加设计系统

将 DESIGN.md 放入 design-systems/<brand>/。9 部分模式（颜色、排版、间距、组件、动效、语音、品牌、反模式）会由 apps/daemon/src/skills.ts 校验。

添加新 CLI 代理

编辑 apps/daemon/src/agents.ts，添加二进制名称、流式格式以及参数映射。守护进程将在下次启动时自动检测。

实际使用案例

与竞争对手的对比

• OpenCoDesign – 首个开源 Claude‑Design 克隆版，但仅提供桌面 Electron 包且技能较少。
• OpenCoCodesign – 共享流式产出循环，但自带捆绑代理。Open Design 采用你已经信任的代理，保持运行时轻量。
• Claude Design – 功能强大但闭源、仅云端且费用高。Open Design 在保持 免费、自托管、可扩展 的同时匹配其功能集。

社区与贡献

Open Design 依赖社区贡献： * Good‑first‑issues 为新人标记。 * 添加技能或设计系统只需一个文件夹 PR。 * CONTRIBUTING.md 提供风格指南、代码审查政策以及翻译说明（仓库已提供 12 种语言文档）。 * 已有超过 170 位贡献者参与，星标数（35k+）显示出强烈兴趣。

结语

Open Design 证明了 本地优先、开源的 AI 设计引擎 完全可以与商业产品媲美。通过复用已有的编码代理 CLI、丰富的设计系统目录以及严谨的提示栈，它能够快速、可复现且品牌一致地交付产出，且永不将你的专有资产上传至云端。

无论你是独立创始人需要制作路演 PPT，产品团队在原型 UI，还是开发者想探索 LLM 驱动的工作流，Open Design 都能让你在完全受控的环境下 设计、迭代、导出。

准备好尝试了吗？ 下载桌面应用、启动 Docker 容器，或克隆仓库立即开始构建吧。