2026年6月11日 周四晚上19:30,报名腾讯会议了解“业务抓夹如何成为前线部署工程师(FDE)”(限30人)
免费POC, 零成本试错
FDE知识库

FDE知识库

学习大模型的前沿技术与行业落地应用


我要投稿

Open Design:开源界的 Claude Design 替代品,61.7K Star,21+ Agent 都能跑,本地第一

发布日期:2026-06-09 07:50:07 浏览次数: 1569
作者:极客工具 XTool

微信搜一搜,关注“极客工具 XTool”

推荐语

Claude Design的闭源付费模式让人望而却步?Open Design让你在本地免费跑通同样的AI设计流程,数据完全自主。

核心内容:
1. Open Design如何作为开源替代品,打破Claude Design的封闭生态
2. 平台的核心架构:技能、设计系统与插件如何驱动21+个编码Agent
3. 本地优先的优势与一站式产品页面带来的高效设计体验

杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家

2026 年 4 月,Anthropic 放出了 Claude Design——LLM 第一次不写文字,直接交付设计产物。刷屏了。但闭源、付费、锁死在 Anthropic 云端。

一个月后,Open Design 出现了。同样的 Agent 循环,同样的「产物优先」理念,但这次没锁。

数据速览

       
                                           
指标数量
GitHub Star61.7K(两个月破 6 万)
当前版本v0.9.0
技能259+ 套(SKILL.md 文件夹)
品牌设计系统150+(Linear / Stripe / Vercel / Apple / Tesla…)
官方插件261
编码 Agent 适配21+ CLI(Claude Code · Codex · Cursor · OpenClaw · Qwen · Copilot…)
协议Apache-2.0
       
     

一个 11 行 frontmatter 写完的事:你电脑上已有的 Agent,就是它的设计引擎。


它到底是什么

Open Design 是一个 本地优先、开源、Agent 原生 的 AI 设计平台。

它做了一件事:把 Claude Design 的核心能力——「发现 brief → 锁定方向 → 流式产出 → 自评 → 交付」——拆成一组文件系统

  • 技能(Skills) = SKILL.md 文件夹,决定产物长什么样
  • 设计系统(Design Systems) = 9 段式 DESIGN.md,决定配色、字体、间距、动效、语调、反模式
  • 插件(Plugins) = 可移植的 Agent 技能包,封装完整工作流

然后让你本机的 Claude Code / Codex / Cursor / OpenClaw 等 21+ 个编码 Agent 直接读取这些文件,生成设计产物。

不需要 Anthropic 账号,不需要订阅,数据留在你硬盘上。


核心产品页面一览

🏠 Home · 一站入口

主入口。顶部一行「What do you want to design?」 + 6 类快速启动(Prototype / Live artifact / Slide deck / Image / Video / HyperFrames / Audio),下面是最近的生成记录。

一句话总结:所有产物类型都在同一个聊天面里发出——不再为了做张图、切到另一个 app。

🤖 Automation · 可复用的工作流

把重复性的设计任务编排成可定时、可调度的自动化。比如:每周自动生成一张「本周数据看板」海报、每月自动出「经营月报」PPT。

🎨 Design System · 品牌契约

把你的品牌浓缩成一份 DESIGN.md,9 段:色彩、字体、间距、布局、组件、动效、语调、品牌、反模式。Agent 每次渲染都读这个文件——下次切换品牌,只改一行路径。

🧩 Plugin · 插件市场

261 个官方插件 + 第三方插件市场。可以装「Figma 迁移到 React」、「代码库品牌刷新」、「可复用工作流」这种复合技能。

🔌 Integrations · 第三方连接

支持 MCP 工具、外部 IDE、自动化脚本——Open Design 不只是 GUI,也是一组 API + MCP server。


Studio:一个项目,多种产物

进入任意一个项目的 Studio,同一个设计系统能输出完全不同的产物

🧱 Prototype · 网页/桌面/移动原型

单页 HTML 产物,沙盒 iframe 实时预览,桌面/移动/响应式都支持。

下面看几个真实产物的样子:

       
                                           
Web 落地页移动 onboarding游戏化 App
杂志风仪表盘iPhone 15 Pro 多屏三屏 XP / 任务流
       
     

📊 Live Artifact · 实时仪表盘

KPI 墙、决策室、GitHub 风格仪表盘——带可调参数面板(tweaks panel),改参数就重渲染,不用重新生成。

       
                                           
Live DashboardGitHub 仪表盘Research 决策室
       
     

📑 Deck · 杂志风/瑞士国际风 PPT

键盘翻页,导出 HTML / PDF / PPTX / ZIP / Markdown。15 套 deck 模板 × 36 套主题,可拆可改。

       
                                           
杂志风瑞士国际风
       
     

🎞️ HyperFrame · HTML → MP4 动效

这是 Open Design 的杀手锏之一。Agent 写 HTML + CSS + GSAP,HyperFrames 用 headless Chrome + FFmpeg 渲染成 确定性 MP4——帧级精确、可重现。

配套支持 Seedance 2.0(15s 电影感 t2v/i2v)、Veo 3 / Sora 2 / Kling 2(路由模型变体)、Suno v5 / Lyria 2(音频层)。11 套 HyperFrames 模板 + 39 套 Seedance 提示词开箱即用。

🖼️ Image · 品牌级图像

gpt-image-2 / ImageRouter / 自定义 API。93 套现成 prompt 模板(编辑级、电影级、产品、肖像……),一键丢进 composer。


21+ Agent 适配:你的 CLI 就是引擎

不内置 Agent。你电脑上已经装的 claude / codex / cursor-agent / copilot / hermes / kimi / openclaw……全是设计引擎。

一行命令接入指定 Agent:

# 桌面 App 启动后自动检测 $PATH 上的所有编码 Agent
# 也可手动装进指定 Agent:

od
 mcp install claude        # 装进 Claude Code
od
 mcp install codex         # 装进 Codex CLI
od
 mcp install cursor        # 装进 Cursor
od
 mcp install copilot       # 装进 GitHub Copilot CLI
od
 mcp install openclaw      # 装进 OpenClaw
od
 mcp install antigravity   # 装进 Antigravity
od
 mcp install gemini        # 装进 Gemini CLI
od
 mcp install opencode      # 装进 OpenCode
# ... 还有 14+ 个:qwen / qoder / pi / kiro / kilo / vibe /

#     hermes / cline / trae / kimi / deepseek / devin

想脱离 GUI?一行 curl 直接接入:

curl -fsSL https://open-design.ai/install.sh | sh -s claude

然后在 Agent 里直接说:

> Use open-design to generate a landing page with the Linear design system

切换 Agent?改一行配置,不需要重新设计。

没有 CLI?BYOK 代理 POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream 直接接管——粘贴 baseUrl + apiKey + model,DeepSeek / Groq / OpenRouter / vLLM / Ollama 全都行。SSRF 在代理边缘拦截内部 IP。


v0.9.0 重磅:Open Design AMR

v0.9.0 把官方 Model Router 集成进 App——零配置、一键登录就能用 GPT / Claude / Gemini / DeepSeek 等前沿模型:

"Open Design 0.9.0 is here: create without the setup. The official Model Router is built right into the app — no extra configuration, no CLI to install, no API key to prepare. Just open the app, sign in, and start designing and creating right away."

AMR 自动按步骤路由到合适的模型——按 token 用量计费,余额和请求日志一个 console 看完。


三种使用方式

🖥️ 桌面 App(零配置,推荐)

下载即用,自动检测你本机所有编码 Agent。macOS(Apple Silicon + Intel)/ Windows(x64)原生,Linux AppImage(可选构建)。

→ github.com/nexu-io/open-design/releases[1] 下载

💻 命令行集成(无 GUI)

直接在你已有的 Agent 里调用,作为 skill / plugin / MCP server 接入。

git clone https://github.com/nexu-io/open-design.git
cd
 open-design && corepack enable && pnpm install
pnpm tools-dev run web
# 浏览器打开 http://localhost:7456

🐳 Docker 自托管

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://localhost:7456

macOS 用户注意:如果 web UI 提示 Authorization: Bearer,是 Docker Desktop bridge 网络的问题,看 deploy/README.md 解决[2]


工作流:从 brief 到产物

brief → plugin → 方向 → design system → 产物 → 交付 → 记忆
  1. 1. 提交 brief:落地页 / PPT / 仪表盘 / 社交海报 / PM spec / OKR scorecard……从插件市场选
  2. 2. 锁定方向:无品牌?5 套预设方向(OKLch 调色板 + 字体栈 + 布局姿态);有品牌?丢截图 / URL / Figma 导出,Agent 自动提取 DESIGN.md
  3. 3. 首件产物:Plugin + Skill + DESIGN.md 绑定,Agent 流式输出到沙盒 iframe——就地可编辑,不是「不满意重新生成」
  4. 4. 交给工程:产物是真实的 HTML/CSS,丢进 Cursor / Codex / Claude Code 当代码继续开发;或导出 PPTX / PDF / MP4 给市场
  5. 5. 用得越多越聪明:截图、字体、调色板、确认过的产物自动沉淀为下次会话的默认

跟 Claude Design 比

       
                                           
维度Claude DesignOpen Design
开源Apache-2.0
自托管 / 桌面✅ macOS + Windows + Vercel
Agent 原生仅 Anthropic21+ CLI + BYOK
品牌设计系统专有✅ 150 个 DESIGN.md
技能 / 插件封闭✅ 259 技能 · 261 插件
HyperFrames (HTML→MP4)一等公民
刷新现有代码到品牌✅ 指向 git 仓库 + DESIGN.md
最低费用Pro / Max / TeamBYOK · 任何兼容端点
数据存储厂商云本地 SQLite + 文件
Claude Design ZIP 导入n/a✅ 接着 Anthropic 继续编辑
       
     

顺带提一下:还有另一个同名的 Pandemonium-Research/OpenDesign(MIT 协议),走 Web App 路线——Next.js 16 + Clerk + Supabase,支持从 URL / GitHub / Figma 提取设计令牌,导出可编辑 PPTX 和 React/Vue/Svelte 组件。两个项目各有侧重:nexu-io 偏本地 Agent 生态 + 插件体系Pandemonium 偏团队 Web 部署


架构速览

浏览器 (Next.js 16) / Electron 壳
  ↕ /api/*
本地守护进程 (Express + better-sqlite3)
  ↕ spawn(cli, [...], { cwd: .od/projects/
       
                                           
技术栈
前端Next.js 16 App Router · React 18 · TypeScript
守护进程Node 24 · Express · SSE 流式 · better-sqlite3
存储.od/projects/ 文件 + .od/app.sqliteOD_DATA_DIR 可重定位)
预览沙盒 srcdoc iframe + 流式 解析
导出HTML(内联)· PDF(浏览器打印)· PPTX(Agent 驱动)· ZIP · Markdown · MP4(HyperFrames)
桌面Electron 壳 + 沙盒渲染器 + 侧车 IPC
       
     

适合谁

适合

  • • 经常做落地页 / PPT / 数据看板 / 社交海报的人
  • • 想用 AI 辅助设计但不想把数据传到云端的人
  • • 已经在用 Claude Code / Codex / Cursor / OpenClaw 等编码 Agent,想扩能力的人
  • • 团队想统一一份「品牌契约」(DESIGN.md),让所有产物自动套用

不太适合

  • • 需要多人实时协作的设计团队(目前没有 Figma 那样的多人光标)
  • • 想要拖拽式可视化编辑的人(这是 Agent 驱动,不是画布驱动)

我的看法

Open Design 代表了一个清晰的趋势:AI 设计工具不再是封闭的云端订阅服务,而是你本地机器上的技能文件和设计系统

和 OpenClaw 的理念如出一辙——把能力交给用户,让用户掌控自己的工具链

如果你在做公众号、落地页、PPT、数据看板,或者只是想试试「让 AI 帮你做设计」——值得一 Star。61.7K Star 不是白来的,两个月内涨到 6 万多,说明真有人用、真有人 ship。

53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询