返回 FEED
AGENT2026-05-20

Open Design 开源版 Claude Design

Anthropic 在 2026 年 4 月发布的 Claude Design 展示了 LLM 从"写文字"转向"产出设计产物"的潜力,但它封闭、付费、云端锁定。Open Design(OD)是这个产品的开源替代方案——同样的 Artifact-first 心智模型,但没有供应商锁定。

核心定位:不造轮子,用好你的 Agent

OD 的哲学很简单:最强的编码 Agent 已经装在你的电脑里了。OD 不自带 Agent,而是把它们接入一个 Skill 驱动的设计工作流。

启动时,OD 会自动扫描 PATH 中的 16 款编码 Agent CLI——Claude Code、Codex、Cursor Agent、Gemini CLI、Kimi、DeepSeek 等。找到哪个,哪个就成为设计引擎。没有 CLI?也可以贴一个 OpenAI 兼容的 API key,走 BYOK 代理模式。

31 套 Skills + 72 套设计系统

OD 开箱即带 31 套 Skills,覆盖原型、演示文稿、运营文档等场景:

  • 原型模式(27 套):网页原型、SaaS 落地页、仪表盘、移动端应用、游戏化界面、社交媒体轮播、杂志海报、动效帧等
  • 演示模式(4 套):杂志风格 PPT、极简演示、产品路演、周报

每套 Skill 遵循 Claude Code 的 SKILL.md 规范,丢一个文件夹进 skills/ 目录,重启守护进程就自动生效。

设计系统方面,OD 集成了 72 套品牌级 Design.md——Linear、Stripe、Vercel、Airbnb、Apple、Notion、Cursor、Supabase 等产品的设计语言都在里面。切换系统,下一次渲染就自动使用新的 Token。

六条承重设计

OD 的架构建立在六个核心思想上:

1. 你的 Agent 已经足够好

不捆绑模型,不捆绑供应商。PATH 扫描 + 一键切换,你的 Agent 你做主。

2. Skills 是文件,不是插件

SKILL.md + assets/ + references/ 的标准结构,任何 Claude Code Skill 都能直接丢进来用。

3. 设计系统是便携 Markdown,不是主题 JSON

9 章节的 DESIGN.md 模式——颜色、字体、间距、布局、组件、动效、语调、品牌、反模式。切换系统就是切换一份 Markdown 文件。

4. 交互式问卷阻止 80% 的方向偏离

第一句提示不是写代码,而是弹出问卷:受众、调性、品牌背景、规模、约束。30 秒填完,比 30 分钟的反复修改便宜得多。

5. 守护进程让 Agent 感觉就在你的电脑上——因为它确实在

Agent 在真实的项目文件夹里工作,有真实的 Read、Write、Bash、WebFetch 工具。会话、对话、消息、标签页全部持久化到本地 SQLite,明天打开项目,待办卡片和打开的文件都在原地。

6. Prompt 栈就是产品

发送时的组合不是"系统 + 用户",而是:

  • 发现指令(问卷、品牌分支、待办计划、五维自评)
  • 身份章程(官方设计师提示、反 AI 垃圾、初级通过)
  • 活跃的 DESIGN.md(72 套系统可用)
  • 活跃的 SKILL.md(31 套技能可用)
  • 项目元数据(类型、保真度、备注、动画、灵感 ID)
  • 技能侧文件(自动注入的预检模板和参考资料)

每一层都可组合、可编辑、可替换。

反 AI 垃圾机制

OD 直接把 huashu-design 的方法论焊进了 Prompt 栈:

  • 问卷优先:第一轮必须是 <question-form>,不给模型自由发挥的空间
  • 品牌规范提取:用户贴截图或 URL 时,Agent 执行五步协议(定位、下载、提取色值、编写 brand-spec.md、声明),绝不凭记忆猜品牌色
  • 五维自评:输出前在哲学、层级、执行、特异性、克制五个维度打分,低于 3 分就回退重做
  • P0/P1/P2 检查清单:每套 Skill 都带硬门槛,P0 不过不能输出
  • 垃圾黑名单:紫色渐变、通用表情图标、圆角卡片带左边框、手绘 SVG 人类、Inter 当展示字体、虚构数据——全部明确禁止
  • 诚实占位符 > 假数据:没有真实数字就写"—"或灰色块,不写"10× 更快"

媒体生成:不止于代码

同一个聊天界面,除了输出 <artifact> HTML,还能驱动图像、视频和音频生成:

  • gpt-image-2(Azure/OpenAI):海报、头像、信息图、杂志风格社交卡片
  • Seedance 2.0(字节跳动):15 秒电影级文生视频和图生视频
  • HyperFrames(HeyGen 开源):HTML → MP4 动态图形,产品展示、动态排版、数据图表、社交叠加层

93 套现成提示模板,带预览缩略图和来源归属,一点就进编辑器。

与竞品的对比

维度Claude DesignOpen CoDesignOpen Design
许可证闭源MITApache-2.0
形态网页桌面 Electron网页 + 本地守护进程
Vercel 部署
Agent 运行时捆绑 Opus 4.7捆绑 pi-ai委托给用户现有 CLI
Skills专有12 个 TS 模块31 个文件式 SKILL.md
设计系统专有DESIGN.md(路线图)129 套已发货
提供商灵活度仅 Anthropic7+16 个 CLI 适配器 + BYOK 代理
初始问卷✅ 硬规则
方向选择器✅ 5 个确定性方向
Claude Design ZIP 导入n/a✅ 继续编辑 Anthropic 未完成的工作
五维自评✅ 输出前门槛
文件系统级工作区部分✅ 真实 cwd + SQLite 持久化

当前状态

核心闭环(检测 → 选择 Skill + 设计系统 → 聊天 → 解析 Artifact → 预览 → 保存)已经端到端跑通。Prompt 栈和 Skill 库是价值所在,相对稳定。UI 组件在每日迭代。

GitHub 仓库两周内收获 4 万星标,社区贡献活跃。技能市场(od skills install <github-repo>)和 CLI 表面正在草案阶段。