Appearance
三天破万星,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 Code | claude | typed events |
| Codex CLI | codex | json-event-stream |
| Gemini CLI | gemini | json-event-stream |
| Cursor Agent | cursor-agent | json-event-stream |
| OpenCode | opencode | json-event-stream |
| Qwen Code | qwen | plain stdout |
| Copilot CLI | copilot | typed events |
| Hermes | hermes | ACP协议 |
| Kimi CLI | kimi | ACP协议 |
如果你一个都没装,还有一个OpenAI兼容的BYOK代理。填个baseUrl和apiKey,DeepSeek、Groq、自建vLLM都行。
31个Skill,从设计到HR全覆盖
设计 & 营销类(13个):
| Skill | 场景 | 产出 |
|---|---|---|
| web-prototype | 网页设计 | 单页HTML |
| saas-landing | SaaS营销 | 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-onboarding | HR | 角色入职计划 |
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-devDaemon启动后自动检测PATH上的agent CLI。如果你装了Claude Code,直接就能用。浏览器打开http://localhost:3000,选Skill,选Design System,输入需求,开始。
它还支持导入Claude Design导出的ZIP文件。 你之前在Claude Design上做的项目,可以直接拖进open-design继续编辑。
和Claude Design对比
| 维度 | Claude Design | open-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就能跑起来。
