Open Design
让本地编码代理按 DESIGN.md 生成可导出的设计成品。
- Star 数
- ★ 106k
- 最近更新
- 1 天前
- License
- Apache-2.0
- 主语言
- TypeScript
- FA 评分
- 45/100 · 缺口较多
30 秒速览
- 运行形态
- 可在哪里用
- 通用 · 跨平台Codex · Claude Code · OpenAI API · Claude API
- 费用
- 软件免费，模型调用费用自付
- 上手难度
- 中 · 需要几步配置
- 开始前需要
- 典型场景
- 产品设计师要为新 SaaS 产品制作落地页，并希望 Claude Code 或 Codex 按团队的 DESIGN.md 直接生成可继续开发的 HTML/CSS。
- 不适合
- 需要预构建 Linux 桌面版的用户：官方发布不含 Linux 安装包，只能从源码运行
- 需要多人实时协作像素画布的设计团队：它交付的是代码化单页产物，不是协作画布
这个 Agent 能做什么，适合哪些场景？
Open Design 是一个面向 macOS 和 Windows 的本地优先桌面设计工作区，也是 Claude Design 的开源替代方案。它由 Next.js 前端、Electron 桌面壳、Express 与 SQLite 本地守护进程、stdio MCP 服务和本地编码代理运行时组成。用户可选择技能、设计系统和插件，向已安装的编码代理提交简报；代理在项目目录中生成文件，或通过 BYOK API 返回完整的 <artifact> 块，再由沙箱 iframe 预览。它覆盖单页网页、移动端和桌面原型、实时仪表盘、演示文稿、图片，以及通过 HyperFrames 生成的 MP4 动效，并支持 HTML、PDF、PPTX、ZIP、Markdown 和 MP4 等交付形式。适合希望把品牌规范、真实 HTML/CSS 文件和既有编码代理纳入同一设计流程的团队；若只需要传统画布式协作设计，它并非同类工具。
Open Design 从 skills/、design-templates/、design-systems/ 和 plugins/ 读取可组合资源，其中 DESIGN.md 是当前品牌约束。通过 od mcp install <agent> 配置后，支持的代理可经 MCP 使用 od project list --json、od files list <project-id> --json、od files read <project-id> <relative-path>、od plugin list --json 与 od skills list --json 查询本地项目和目录。文件系统型 CLI 运行会将功能技能或渲染模板与 DESIGN.md 组合，并在受管项目工作目录写入规范文件；没有文件工具的 BYOK/plain-API 运行则经 /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream 返回完整 <artifact> 块。守护进程提供 /api/skills、/api/design-templates、/api/plugins、/api/design-systems、/api/chat 和工件保存、检查、导入等接口；预览使用沙箱 srcdoc iframe，并可导出 HTML、PDF、PPTX、ZIP、Markdown 或 HyperFrames MP4。
- 产品设计师要为新 SaaS 产品制作落地页，并希望 Claude Code 或 Codex 按团队的 DESIGN.md 直接生成可继续开发的 HTML/CSS。
- 运营团队要制作可编辑的 KPI 墙或决策简报，在 Studio 中让代理生成带 tweaks manifest 的单页实时工件。
- 市场团队需要将一份文字简报制作成可翻页的推介演示文稿，并导出 PPTX 或 PDF。
- 设计系统负责人要把品牌的 DESIGN.md、tokens.css、组件和资源打包为可复用设计系统，让后续渲染遵循同一品牌契约。
- 使用内部 LiteLLM 或 Ollama 网关的开发团队要通过 BYOK 接入兼容端点，并为明确的内部主机配置 OD_ALLOWED_INTERNAL_HOSTS。
如何安装或部署这个 Agent？
桌面版可从项目网站或 GitHub Releases 安装：README 明确列出 macOS（Apple Silicon、Intel）和 Windows x64，Linux AppImage 为可选发布渠道。源码运行：git clone https://github.com/nexu-io/open-design.git && cd open-design && corepack enable && pnpm install && pnpm tools-dev run web；运行环境为 Node.js ~24 与 pnpm 10.33.x。Docker 部署：进入仓库 deploy 目录后执行 cp .env.example .env，向 .env 添加 OD_API_TOKEN=$(openssl rand -hex 32)，再执行 docker compose up -d，并访问 http://localhost:7456。使用 BYOK 时，在应用中填写所选提供方的 baseUrl、apiKey 和 model；使用本地 CLI 时则需要对应编码代理已在 PATH 上并完成其自身认证。
如何使用这个 Agent？
安装 Open Design 后执行 od mcp install codex 或 od mcp install claude；可先用 od mcp install <agent> --print 预览配置。随后在已配置的代理中提出例如“Use open-design to generate a landing page with the Linear design system”的请求。无 UI 工作流可用 od plugin list、od plugin search "landing page"、od plugin info od-default，以及 od plugin apply od-default --input brief="a one-page pitch for our seed round"。若 macOS 将 od 解析为系统的 /usr/bin/od，README 指示桌面版用户从 Settings → MCP server 复制使用绝对路径的客户端配置，而非直接输入 bare od 命令。
这个 Agent 有哪些优点和局限？
- 同时提供桌面应用、Web/Docker 部署、CLI 和 stdio MCP 服务，既可在 Studio 使用，也可嵌入 Codex、Claude Code 等编码代理工作流。
- 将功能技能、渲染模板、插件和以 DESIGN.md 为核心的设计系统分离管理，生成结果可遵循可版本化的品牌契约。
- 文件系统型运行生成真实项目文件，可在沙箱中预览并输出 HTML、PDF、PPTX、ZIP、Markdown 或 MP4，而不局限于图片交付。
- 本地运行时覆盖 25 个不同的 CLI 可执行文件，并提供 Anthropic、OpenAI、Azure、Google、Ollama 等 BYOK 流式代理路径。
- 源码运行要求 Node.js ~24 和 pnpm 10.33.x；Docker 方案还需要配置令牌、容器环境及网络部署设置。
- 核心生成质量、可用模型和认证方式依赖已安装的外部编码代理，或用户自行提供的 BYOK 端点与 API 密钥。
- 官方桌面支持明确为 macOS 和 Windows x64；Linux AppImage 仅是可选发布渠道，WSL2 和原生 Windows 另有排障文档。
- 守护进程默认仅绑定 127.0.0.1；局域网暴露需要显式设置 OD_BIND_HOST 和 OD_ALLOWED_ORIGINS，内部模型主机还需谨慎配置 OD_ALLOWED_INTERNAL_HOSTS。
这个 Agent 与同类方案有什么区别？
仓库将 Open Design 定位为 Claude Design 的开源替代方案：它强调可替换本地编码代理、BYOK、DESIGN.md 设计系统以及自托管/桌面运行。相对 Figma，它不是像素画布工具，而是让代理产出可执行的单页 HTML/CSS 工件；相对 Lovable、v0 和 Bolt，README 主张其可接入本地 CLI、模板和设计系统，但具体生成体验仍取决于所选模型与代理。
与相关度最高的同类 agent 并排比较关键指标。
| Agent | 源码审查 | 形态 / 费用 | Star | 最近更新 | 主语言 | 完整支持的平台 |
|---|---|---|---|---|---|---|
| Open Design 当前 | 45 · 缺口较多 | 桌面应用免费 + 模型费 | ★ 106k | 1 天前 | TypeScript | Codex · Claude Code · OpenAI API · Claude API |
| UIZZE · 让编码智能体产出更好的界面 | 47 · 缺口较多 | Agent 插件 / 技能免费版 + 付费版 | ★ 85 | 6 天前 | JavaScript | Codex · Claude Code |
| DESIGN.md 设计规范 | 80 · 表现良好 | 命令行工具免费 | ★ 29k | 20 天前 | TypeScript | — |
| UI Craft | 77 · 表现良好 | 命令行工具免费 | ★ 432 | 今天 | Go | Codex · Claude Code |
FollowAgents 如何评估这个 Agent？
查看各维度的扣分理由
证据显示：README 声称本地优先、BYOK、SSRF 防护，但未提供具体实现细节；测试文件显示 ACP 会话参数默认不请求全局 MCP 配置变更，体现最小权限原则；用户确认方面，README 提到产品分析和会话重放是同意门控的，但未提供具体机制；数据流透明度方面，README 提到遥测始终开启，但未说明具体数据流；敏感数据处理方面，未发现明确说明；依赖安全方面，package.json 中有 overrides 和 onlyBuiltDependencies，显示对依赖的管控；外部影响方面，README 提到导出 HTML/PDF/PPTX/MP4，但未说明权限；回滚方面，未提及；来源归属方面，README 提到捆绑了第三方技能并保留原始许可证，但未提供具体细节。扣分原因：多数信任标准仅有断言而无实现证据，回滚完全缺失。
证据显示：测试文件展示了 ACP 协议处理的多个方面，包括超时、模型规范化、消息增量等，表明内部一致性较好；依赖可用性方面，package.json 指定了 pnpm 版本和 Node 版本，但未提供依赖锁定文件；失败消息方面，测试中检查了超时错误消息，但未提供用户可见的失败处理。扣分原因：依赖可用性缺乏锁定文件证据，失败消息仅限内部测试。
证据显示：README 列出了多种支持的编码代理和平台，表明受众广泛；能力边界方面，README 描述了多种输出类型，但未明确限制；触发精度方面，MCP 安装命令明确，但未提供详细触发条件；环境适配方面，支持 macOS、Windows、Linux，并提到 Docker 和 Vercel。扣分原因：能力边界和触发精度缺乏详细文档。
证据显示：README 结构清晰，包含产品介绍、快速开始、平台兼容性等；安装说明详细，提供桌面应用和 CLI 安装方式；命名稳定性方面，版本号存在，但未提供命名规范；示例和 FAQ 方面，README 提供了多个示例和截图，但未提供 FAQ；已知限制方面，未明确列出；许可证为 Apache-2.0，完整；版本变更日志方面，未提供 CHANGELOG；维护责任方面，README 提到 MAINTAINERS.md，但未提供具体内容。扣分原因：缺少 FAQ、已知限制、CHANGELOG 和明确的维护责任。
证据显示：输出可用性方面，README 描述了多种导出格式和预览方式；边际价值方面，作为开源替代品，提供了独特功能；成本效益方面，BYOK 模式可能降低成本，但未提供具体成本分析。扣分原因：成本效益缺乏具体数据。
证据显示：README 中的声明部分有截图和链接支持，但未提供可验证的测试结果；跨来源验证方面，未提供第三方验证；事实与推断分离方面，README 中混合了事实和营销语言。扣分原因：缺乏可验证的测试结果和第三方验证。
- 源码中未见：回滚或恢复路径运行前先备份，或在 git 分支、快照上操作，确保改动可以撤销。
- 该仓库的发布者身份未经验证，需谨慎对待。
- README 中的许多声明（如隐私、安全）缺乏实现细节，建议在部署前审查代码。
- 未提供回滚机制，可能影响生产环境的使用。
- 依赖锁定文件未提供，可能影响可重现性。
最近版本
来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。
-
open-design-v0.27.0 Open Design 0.27.0 — CoRouter for Teams
发布说明摘录
🌟 Codename: *CoRouter for Teams* Unlimited seats. Shared credits. One subscription gives your team shared access to model credits. Invite colleagues to your workspace for free, with no extra seat fees. Create in Open Design or call models through the API using the same shared credits. The workspace owner manages the subscription, upgrades and top-ups. 🔥 Highlights …在 GitHub 查看 ↗ -
open-design-v0.26.1 Open Design 0.26.1 — Intelligent Router
发布说明摘录
English Meet Skill Discovery: describe what you want to create, and Open Design finds the relevant Skills to guide the work—from your first idea to the next revision. Your idea should be the starting point. In 0.26.1, Skill Discovery helps Open Design understand the kind of work you want to make and choose the Skills that fit. You can focus on the result, with less manual setup before creating and more continuity as you refine it. Alongside this, smoother project starts, connected feedback, and steadier previews keep your work moving. 📥 Download / 下载 …在 GitHub 查看 ↗ -
open-design-v0.26.0 Open Design 0.26.0 — Share, Review, Refine
发布说明摘录
🌟 Codename: *Share, Review, Refine* 🔗 The work can leave the project—and the feedback can find its way home. Share an interactive design or motion video with the people who need to review it; let them watch, try it, and comment in context. Then choose the feedback that matters, send it to an Agent, and keep the review connected to the next round of making. 🔥 Highlights …在 GitHub 查看 ↗