Open Design 深度解析：开源、本地优先的 Claude Design 替代，让 Coding Agent 变成你的设计引擎

📌 项目地址：github.com/nexu-io/open-design ⭐ 81.1K · Apache-2.0 · 386 贡献者

标签：AI 设计、开源工具、Claude Design 替代、Local-first、Agent-native、vibe design

一、前言：当 LLM 第一次"真的会设计"

2025 年下半年开始，LLM 不再只能写文案，它第一次证明了自己能"做设计"——生成真正的原型、落地页、Slides、视频，而不只是文字片段。

遗憾的是，这份能力却是闭源、托管、锁定模型的。Claude Design 只能在云端跑，只能用 Anthropic 的模型，作品不属于你。

Open Design 选择把它打开——本地优先、BYOK、Apache-2.0 开源。它在 GitHub 拿下 81.1K Star，由 386 位贡献者共同维护，已成为 vibe design workspace 的事实标准开源替代。

本文将带你 5 分钟搞懂它能做什么、怎么用、和你现在的工作流有何不同。

仓库地址：https://github.com/nexu-io/open-design
官方网站：https://open-design.ai/zh/
协议：Apache-2.0

二、什么是 Open Design？

Open Design 是一个开源、本地优先（local-first）的 vibe design workspace——把你已经在用的 coding agent（Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen 等 25 个 CLI）直接接进完整的设计工作流，从粗略想法到可交付的原型、网页、Slides、HTML 视频，全流程在你自己的设备上完成。

核心数据：

指标 数值
GitHub Stars 81.1K
贡献者 386
插件 217+
设计系统 151+
支持的 Coding Agent 25
协议 Apache-2.0

它不是再造一个 Agent，而是接入你已经熟悉的 Agent。设计发生在桌面端，所有产出都是真实文件——HTML、PDF、PPTX、MP4、Markdown，全部归你所有。

三、为什么需要 Open Design？——它解决了什么痛点？

痛点 1：闭源设计工具锁定厂商

Claude Design 只支持云端、不支持本地模型、不能换 Agent。Open Design 用 **BYOK（Bring Your Own Key）**打破这一点——你用哪个模型、用谁的 API、出多少 token，全由你决定。

痛点 2：文件不属于你

云端工具的设计稿存在厂商的服务器，关掉订阅就没了。Open Design 把 artifact 直接写到你的项目目录，归你所有。

痛点 3：设计与工程割裂

设计师出图、工程写代码，之间隔着 Figma/导出/复制粘贴。Open Design 用 coding agent 驱动设计——agent 拥有终端执行权限，直接读你的代码仓库、看你的 Figma 导出、按你的设计 token 渲染。

痛点 4：模型切换成本高

换 Agent 不用重做工作。SKILL.md 和 DESIGN.md 是 Agent 无关的，同一份设计文件可以在 Claude Code、Codex、Cursor、Gemini CLI、Grok、Hermes、Qwen 之间无缝切换。

痛点 5：本地运行、数据不出门

daemon 直接与你的模型供应商通信，prompt 和 Skill 上下文只发到你自带密钥的那一家。Open Design 自己没有服务器，artifact 落在你仓库里，不进任何厂商云端。

痛点 6：开箱即用的素材库

100+ functional skills + 15+ deck templates + 36 themes + 31 page layouts + 151+ design systems 直接装好就能用，不必从零调 prompt。

四、Open Design vs 其他产品

维度 Open Design Claude Design Figma Lovable / Bolt / v0
形态 Local-first 桌面 + CLI 云端 SaaS 云端协作 云端 AI 生成
开源 ✅ Apache-2.0 ❌ 闭源 ❌ 闭源 ❌ 闭源
接入 Coding Agent ✅ 25 ❌ 仅 Anthropic 模型 ❌ ❌
BYOK / 自带 Key ✅ ❌ ✅（有限） ✅（有限）
文件所有权 ✅ 你的本地项目 ⚠️ 厂商服务器 ⚠️ 厂商服务器 ⚠️ 厂商服务器
数据出域 ❌ 不上传 ✅ 上传 ✅ 上传 ✅ 上传
导出格式 HTML / PDF / PPTX / MP4 / Markdown 截图为主 Figma 文件 静态页面
离线工作 ✅ ❌ ❌ ❌
价格 免费 + 自费 API 订阅 订阅 订阅

一句话总结：唯一一个能离线、用你自己的 Agent、产出工程可直接用文件的开源设计工作台。

五、安装与快速上手

方式 1：桌面端（推荐新手）

直接下载对应平台的安装包：

  • macOS（Apple Silicon + Intel）
  • Windows（x64）
  • Linux AppImage（可选通道）

下载页：https://open-design.ai/zh/

方式 2：一行命令接入 Coding Agent

如果你的机器上已经装好 Claude Code / Codex / Cursor / Gemini CLI / OpenCode / Qwen / Cline / Kimi 等任何一个 CLI，只需运行：

# 一键把 Open Design 装进 agent
od mcp install <agent>

支持的 agent（部分）：
claude · codex · reasonix · raven · cursor · copilot · openclaw · antigravity · gemini · pi · vibe · hermes · cline · kimi · trae · opencode …… 共 25 个。

方式 3：Hosted 等价命令（curl 党）

open http://localhost:7456

安装后 agent 会做什么？

  1. 本地启动 daemon
  2. 自动检测 PATH 上的 agent CLI
  3. 读取你的项目上下文
  4. 通过 OpenAI-compatible BYOK 代理调用模型
  5. 在沙盒内即时预览
  6. 把文件落到你的项目目录

六、核心功能模块——一页看懂整个工作流

Open Design 的 UI 围绕 5 个核心页面展开：

1. Home（首页入口）

选 skill + design system + 描述目标，一键进入创作。

2. Automation（自动化）

把设计任务编排成可重跑的工作流，比如"每月生成 100 张商品主图"。

3. Design System（设计系统中心）

管理你的 DESIGN.md 品牌契约。截图或 Figma 导出拖进来，agent 自动提取 token、字体、色板、间距，沉淀为可复用的 design system。

4. Plugin（插件市场）

  • 217+ 官方插件
  • Manifest 规范
  • 跨 agent 安装脚本

5. Integrations（外部集成）

接入 Figma、Slack、Notion、内部 CMS。

6. Studio（创作工坊）

整个 craft loop 在一个窗口内完成：references → material → 交互式编辑 → motion → handoff。

七、支持的 25 Coding Agent 与 BYOK 代理

Open Design 不做 Agent，只接入 Agent。它会自动扫描你机器 PATH 上的 CLI：

  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • OpenCode
  • Qwen
  • Cline
  • Kimi
  • Copilot
  • Hermes
  • Vibe
  • Pi
  • Trae
  • Reasonix
  • Raven
  • OpenClaw
  • Antigravity
  • ……（共 25）

如果你的 agent 是 OpenAI / Azure / Google 兼容端点，通过 BYOK 代理也能接入，带 SSRF 防护。

换 Agent 只需改 daemon 一项配置，不必重做项目。

八、5 类产出物——什么场景都能 cover

Open Design 把每一样都变成真实可运行的文件，由你自己的 coding agent 驱动：

1. Prototype（原型）

Web / Mobile / Desktop 单页 artifact。选中模板 + 描述 → 沙盒内即时预览 → 直接修改 → 导出。

2. Live Artifact（落地页 / Dashboard）

交互式 HTML，单文件、自包含资源，可直接上线。

3. Slides（演示文稿）

  • 15 种 deck 模板 + 36 套主题 + 31 种页面布局
  • Swiss International-style 横滑卡片
  • 导出 HTML（单文件）/ PDF（浏览器打印，deck-aware）/ PPTX（agent-driven skill）/ ZIP 归档 / Markdown

4. Images（图片）

  • gpt-image-2、ImageRouter、自定义 API
  • 城市美食地图、手绘编辑风海报、电影分镜……

5. HyperFrames（HTML → MP4 视频）

集成 heygen-com/hyperframes 框架，一键把 HTML 变成营销视频，导出 MP4。

九、应用场景——谁在用？

场景 典型任务
设计 原型探索、design system 沉淀、品牌迁移
营销 落地页、Slides、商品主图、营销视频
运营 周报 dashboard、活动页、数据可视化
工程 把 Figma / Pencil 迁移到 React / Next / Vue

十、FAQ 精选——你可能想问的 6 个问题

Q1：Open Design 是开源的 Claude Design 替代吗？

是的。 Apache-2.0，跑在你自己的机器上，BYOK，产出的每个文件都归你所有。

Q2：Open Design 要多少钱？

产品本身免费、开源、无订阅。 你只需支付所用供应商（Anthropic / OpenAI / Google / Mistral / xAI / Moonshot 等）的 API 费用，直接计入你自己的账户。

Q3：我的数据会发送给 Anthropic / OpenAI / Google 吗？

只有 prompt 和 Skill 上下文会发给你自带密钥的那一家。Open Design 没有自己的服务器，daemon 直接与你的供应商通信，artifact 落在本地。

Q4：可以本地运行吗？

可以。 桌面端、daemon、Skill 运行时都在你的机器上运行，artifact 落在你的项目目录里。

Q5：换 Agent 需要重做工作吗？

不需要。 Skill 和 DESIGN.md 与 Agent 无关，换 Agent 只是 daemon 里的一项配置变更。

Q6：可以自托管到 Vercel / Cloudflare 吗？

可以。 daemon 跑 Node 24，落地页是静态 Astro 构建，可直接部署到 Cloudflare Pages / Vercel / Netlify。

十一、架构与开源理念

┌──────────────────────┐         ┌────────────────────────┐
│  Agent CLIs (PATH)   │         │  Web UI / Studio       │
│  Claude Code · Codex │         │  Astro + sandbox iframe│
│  Cursor · Gemini …   │         │                        │
└──────────┬───────────┘         └──────────┬─────────────┘
           │                                │
           ▼                                ▼
   ┌──────────────────────────────────────────────┐
   │   Local Daemon (Express + SQLite)             │
   │   • Skill registry                            │
   │   • Design system registry                    │
   │   • BYOK proxy /api/proxy/{provider}/stream   │
   │   • Artifact lint + 5-dim self-critique       │
   └──────────────────┬───────────────────────────┘
                      ▼
      OpenAI / Azure / Google / Ollama / SenseAudio
      (SSRF-guarded at the edge)

关键设计原则：

  • 本地 daemon 是唯一特权进程（PATH-scan agent 检测）
  • Artifact 在沙盒 iframe 中渲染，可安全嵌入第三方 HTML
  • 5-dim self-critique pre-emit gate：lint API 在生成前自动评估，可阻断低质量输出
  • npx od init：一行命令 scaffold 一个带 DESIGN.md 的项目

十二、路线图（已发布 + 进行中）

版本 里程碑
0.8.0 Plugin marketplace 基础设施（261 个官方插件、manifest 规范、per-agent 安装脚本）
0.9.0 Open Design Cloud（内置官方模型服务，零配置一键登录）
0.10.0 All-in-one design workspace（整个 craft loop 一个窗口）
0.11.0 The Bazaar：社区插件与设计系统市场
0.12.0 Brand-backed Design System：把你已有的品牌转成可移植的 DESIGN.md
0.13.0 Stay in Flow：原生 session resume、更快的模型选择、导出带截图的 PPTX / PDF

下季度方向：更多 agent 适配器、更丰富的模板族（3D / 视频 / 音频）、面向设计团队的可选共享 daemon 模式。

进行中的功能：

  • 注释模式外科手术式修改（部分已发布）
  • AI-emitted tweaks 面板 UX
  • Plugin SDK + od plugin {add,list,remove,test,publish} CLI
  • Figma / Pencil → React / Next / Vue 迁移插件（alpha）
  • 已有代码库刷新插件（指向 git repo + DESIGN.md）

完整路线图：https://github.com/nexu-io/open-design/blob/main/docs/roadmap.md

十三、社区与贡献

Open Design 之所以跑得快，是因为设计师、工程师、prompt 作者三类人在同时贡献。最常用的 skill、design system、插件，很多是 core team 之外的人写的。

贡献入口（按最大杠杆、最小改动排序）：

想贡献… 怎么做
新 functional skill 放一个含 SKILL.md 的文件夹到 skills/
新 rendering design template 加一个可渲染的 SKILL.md bundle 到 design-templates/
新 design system 放一个以 DESIGN.md 为中心的包到 design-systems/<brand>/
新 plugin 放 open-design.json + 类型化 payload 到 plugins/community/
支持新 coding-agent CLI 加一个 runtime 定义 + registry 项
修 bug / 打磨 UI 找 good-first-issue 标签的 issue
翻译文档 更新 README.<lang>.md 文件

社区渠道：

  • 💬 Discord：https://discord.gg/mHAjSMV6gz
  • 🐦 Twitter：@OpenDesignHQ
  • 🗣️ GitHub Discussions：RFC 与深度 Q&A
  • 🐛 GitHub Issues：bug 报告与功能请求

Open Design Fellow 项目：在世界各地招募 Fellow，与 core team 一起塑产品，资助 $1,000 / 月 + 免费 LLM credits + 直属 review 通道。详见 MAINTAINERS.md。

十四、引用与致谢

Open Design 不是凭空造的，它是站在多个开源巨人的肩膀上：

项目 贡献
Claude Design 闭源灵感来源
alchaincyf/huashu-design 设计哲学罗盘（初级设计师工作流、品牌资产协议、反 AI-slop checklist、五维 critique）
op7418/guizang-ppt-skill 杂志风 web PPT skill，deck 模式默认
lewislulu/html-ppt-skill HTML PPT Studio 家族（15 模板 / 36 主题 / 31 布局）
OpenCoworkAI/open-codesign 第一个开源 Claude Design 替代，UX 借鉴
multica-ai/multica daemon + adapter 架构（PATH-scan 检测、唯一特权进程）
VoltAgent/awesome-design-md 9 节 DESIGN.md schema + 70 个上游系统
bergside/awesome-design-skills 57 个 design skills 沉淀到 design-systems/
heygen-com/hyperframes HTML→MP4 动效框架，集成为一等公民
Claude Code skills SKILL.md 规范来源

详细 provenance 见 docs/references.md。

十五、结语：让 AI 设计能力回到每个创作者的桌上

Open Design 的口号是 “Open · Local · Agent-native”。

它想让"用 AI 做设计"这件事，不再绑死在某个云端 SaaS、某个独家模型、某个厂商服务器上。它想让你用你已经在用的 coding agent、用你自己的密钥、产出完全归你的文件。

如果你今天还没试过，强烈建议按下面三步走：

  1. 打开 GitHub 点个 Star：https://github.com/nexu-io/open-design
  2. 跑一行命令：od mcp install claude（或 codex / cursor / gemini / opencode / qwen ……）
  3. 描述你的第一个 idea，看它在沙盒里跑起来

如果它帮你省了 30 分钟，给它一个 ⭐——你花 3 秒发出的信号，会告诉下一个设计师 / agent / 贡献者：这个实验值得他们的注意力。

参考资料

  • GitHub：https://github.com/nexu-io/open-design
  • 官网：https://open-design.ai/zh/
  • FAQ：https://open-design.ai/zh/faq/
  • Discord：https://discord.gg/mHAjSMV6gz
  • 路线图：https://github.com/nexu-io/open-design/blob/main/docs/roadmap.md
  • License：Apache-2.0
# 开源 # 开源工具
Logo
https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

cover

AI审计手记 #06：沙箱逃逸漏洞与“不修复“的防御策略转移

avatar AI编程社区
cover

Codex 和 Claude Code 怎么订阅？套餐、API计费与付款避坑指南

avatar AI编程社区
cover

手绘草图秒变网页：GPT-Image + Claude 前端开发实战与选型指南

avatar AI编程社区