Skip to content

开源Claude Design平替:open-design三天破万星的真相

2026年4月30日

三天破万星,fork破千。Apache 2.0协议,本地优先。这个叫open-design的GitHub仓库,为什么这么猛?


先说Claude Design为啥炸了

Anthropic在4月17号发了Claude Design,基于Opus 4.7。这个东西一出来就炸了,LLM第一次不再写废话,直接交付设计成品。你输入「帮我做一份杂志风的种子轮pitch deck」,它真能吐出一个可以拿去见投资人的演示文稿。

然后呢?闭源。付费。只跑在云上。绑定Anthropic的模型。不能自托管。

open-design就是在这个背景下诞生的。它要做的事很简单——做Claude Design的开源替代品。同样的「artifact-first」设计理念,同样的工作流,但没有锁定。


它到底是个什么东西

先看架构。

open-design不是一个agent,而是一个Web应用 + 本地Daemon的组合架构。它把你笔记本上已经装好的coding agent CLI接进一个skill驱动的设计工作流。

技术栈:

  • 前端:Next.js 16 + React 18 + TypeScript
  • 后端:Node 24 + Express + better-sqlite3
  • Vercel可部署

核心思路:「我不重新造一个agent,你自己装的那个最强的agent,直接就是我的引擎」。


11个Agent CLI自动检测

Daemon启动时会自动扫描你的PATH,找到哪些agent CLI已经装好了。

Agent二进制命令传输协议
Claude Codeclaudetyped events
Codex CLIcodexjson-event-stream
Gemini CLIgeminijson-event-stream
Cursor Agentcursor-agentjson-event-stream
OpenCodeopencodejson-event-stream
Qwen Codeqwenplain stdout
Copilot CLIcopilottyped events
HermeshermesACP协议
Kimi CLIkimiACP协议

如果你一个都没装,还有一个OpenAI兼容的BYOK代理。填个baseUrl和apiKey,DeepSeek、Groq、自建vLLM都行。


31个Skill,从设计到HR全覆盖

设计 & 营销类(13个):

Skill场景产出
web-prototype网页设计单页HTML
saas-landingSaaS营销Hero/Features/Pricing/CTA
dashboard数据运营侧边栏+密集数据布局
pricing-page销售定价+对比表
docs-page工程三栏文档布局
blog-post营销编辑型长文
mobile-app移动端iPhone 15 Pro原型
email-marketing营销品牌发布邮件HTML
social-carousel社交媒体1080x1080三卡轮播

办公 & 运营类(8个):

Skill场景产出
pm-spec产品PM规格文档
team-okrs产品OKR评分表
meeting-notes运营会议决策记录
kanban-board运营看板快照
eng-runbook工程事故应急手册
finance-report财务财务摘要
invoice财务单页发票
hr-onboardingHR角色入职计划

72套品牌级Design System

每个Design System就是一个Markdown文件,9个section,包含色彩、字体、间距、布局、组件、动效、语调、品牌、反模式。

覆盖范围: Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Anthropic、Cursor、Supabase、Figma、Resend、Spotify、Webflow、Sentry、小红书等等。

你想想这个画面: 对Claude Code说「用Stripe的Design System帮我做一个SaaS landing page」,它真的按照Stripe那种蓝紫渐变、几何切图、大字标题的风格给你吐出HTML。


Anti-AI-slop机制,这才是真东西

大部分AI设计工具的问题不是「做不出来」,而是「做出来一看就是AI做的」。

open-design从huashu-design项目搬来了一整套反slop机制:

机制说明
Question Form先行第一轮对话不输出任何设计,弹出问题表单
Brand-spec提取附截图/URL时,agent走五步协议提取品牌色
五维自评哲学/层级/执行/精确/克制五个维度打分,低于3分重做
P0/P1/P2检查清单每个Skill带references/checklist.md
slop黑名单紫色渐变、emoji图标、虚构指标全部禁止
占位符优于假数据没有真实数据时写「—」或灰色块

这六条加起来,是open-design跟其他「AI帮你画个图」工具的根本区别。


怎么跑起来

三行命令:

bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm tools-dev

Daemon启动后自动检测PATH上的agent CLI。如果你装了Claude Code,直接就能用。浏览器打开http://localhost:3000,选Skill,选Design System,输入需求,开始。

它还支持导入Claude Design导出的ZIP文件。 你之前在Claude Design上做的项目,可以直接拖进open-design继续编辑。


和Claude Design对比

维度Claude Designopen-design
协议闭源Apache 2.0
部署云端Web+Daemon,Vercel可部署
Agent内置(Opus 4.7)11个CLI自动检测+BYOK
Skills专有31个SKILL.md
Design System专有72套可切换
Anti-slop机制六重机制
最低费用Pro $20/月BYOK,随便填

该泼冷水了

第一:98个Open Issues

项目才三天,issue数已经快破百了。800+文件的monorepo,维护成本不低。

第二:体验上限取决于你的agent

如果你用的是Claude Code + Opus 4.7,设计能力确实有目共睹。但如果用的是DeepSeek的便宜API,输出的设计质量能不能打,得打个问号。

第三:还是Beta 0.1.0

连基本功能都还在打磨。如果你是拿来干正经活,等正式版。

第四:安全模型

每个Skill说到底都是prompt注入到agent上下文。没有沙箱隔离,没有权限控制。装一个Skill之前,建议先读一遍它的Markdown源码。


一句话总结

open-design踩中的那个点,是「把封闭的AI设计能力变成开放的工作流」。

  • 它不做agent,做管道
  • 不做模型,做约束
  • 不做平台,做协议

项目地址: github.com/nexu-io/open-design

一个pnpm tools-dev就能跑起来。

不要孤军奋战啦!

加入微信群一起学习交流 AI

与大神一起使用 OpenClaw、Hermes、Claude Code、Seedance 2.0、GPT-Image-2 等

微信公众号

扫码关注微信公众号
私信 "加群",将自动获取微信群二维码

探索 AI 世界,掌握智能未来