资源推荐
open-design
open-design

Claude Design 的开源替代品，支持 11 种 AI Agent，还内置了 72 套品牌设计系统

Anthropic 前段时间推出了 Claude Design，用来做 AI 辅助设计生成。Open Design 是它的开源复刻版，核心区别是不绑定 Claude——你电脑上装了什么 AI 工具（Claude Code、Cursor、Gemini CLI），就用哪个来生成，或者自带 API Key 接入任意兼容端点。数据存在本地，不上传到任何服务器。

项目目前有 12.2k Star、1.4k Fork，Apache 2.0 授权。

生成之前先锁定设计条件

用 AI 生成设计最常见的问题是：输出风格飘忽，改来改去。Open Design 的应对方式是在生成之前就把设计条件固定住。

第一步填问答表单：AI 开始写任何代码之前，系统先弹出一张发现表单，询问目标平台（网页/移动/桌面）、受众是谁、品牌调性、颜色偏好等参数。这些答案作为固定上下文贯穿整个生成过程，不是每轮对话重新描述。

第二步选视觉方向：系统内置了五套预设风格，每套都有对标的品牌参考：

  • Editorial：Monocle、FT Weekend 那种印刷杂志感，暖色调+衬线字体
  • Modern Minimal：Linear、Vercel、Notion 那种冷色极简风，大量留白
  • Tech Utility：Bloomberg 终端风格，信息密度高，等宽字体
  • Brutalist：Bloomberg Businessweek 那种粗犷风，超大字号，无阴影
  • Soft Warm：Apple Health、Notion 营销页那种柔和暖色，低对比度

每种方向都预设了色板和字体组合，不是让 AI 自由发挥颜色，而是选一个方向，生成结果在视觉上更稳定。

生成后自我评估：产出完成后，系统要求 AI 从五个维度做一次自我审查才能提交结果，配合每个技能内置的质量检查清单，目的是过滤掉明显低质量的输出。

31 个技能覆盖的具体场景

技能（Skill）是 Open Design 里预设好的生成任务模板，告诉 AI 要生成什么类型的东西、输出规格是什么。目前内置 31 个，覆盖范围：

界面原型类：

  • mobile-onboarding：三帧移动端引导流，装在 iPhone 15 Pro 框里，包含欢迎页、价值主张页、登录页

  • gamified-app：三帧游戏化 App，暗色背景，今日任务列表带 XP 进度条和关卡徽章

  • dating-web：社交匹配仪表盘，左侧导航、KPI 指标卡、30 天趋势图、杂志感排版
  • dashboard：管理后台 / 数据分析布局，侧边栏 + 高密度数据展示
  • saas-landing：SaaS 产品落地页，包含 Hero、功能列表、定价、CTA 区块

内容与营销类：

  • email-marketing：品牌发布邮件，单列 table 结构，保证在各邮件客户端正常显示
  • social-carousel：三张 1080×1080 社交媒体卡片，跨卡连贯的大字标题

  • digital-eguide：两页电子指南，封面 + 内容页，带引言块和步骤列表

文档类：

  • pm-spec：PM 需求文档，带目录和决策日志
  • invoice：单页发票模板
  • team-okrs：OKR 评分表

每个技能都能配合设计系统和视觉方向使用，同样是落地页，选 Tesla 风格设计系统和选 Notion 风格设计系统，结果的视觉语言完全不同。

72 套品牌设计系统

设计系统以 Markdown 文件形式存储，描述品牌的颜色、字体、间距和组件规范，作为生成上下文传给 AI。内置覆盖范围：

  • 科技产品：Apple、Tesla、Notion、Linear、Vercel、Figma、Cursor
  • 金融支付：Coinbase、Binance、Mastercard、Revolut
  • 消费品牌：Nike、Airbnb、Spotify、Starbucks
  • 汽车：Tesla、BMW、Ferrari、Lamborghini、SpaceX
  • AI 工具：Anthropic、Mistral、Replicate、ElevenLabs

选不同的设计系统，生成结果的配色、字体和排版风格会跟着变——选 Tesla 就是冷白极简，选 Spotify 就是深绿暗色，选 Notion 就是米白细无衬线。

安装与使用

前提条件：Node.js 24、pnpm 10.33.x，以及至少一个已安装的 AI 编程 CLI 工具（Claude Code、Gemini CLI、Cursor Agent 等任意一个）。

步骤命令说明
1git clone https://github.com/nexu-io/open-design.git克隆仓库
2cd open-design进入目录
3corepack enable && pnpm install安装依赖
4pnpm tools-dev run web启动 daemon 和 Web 界面

启动后系统自动扫描 PATH 里已安装的 AI CLI，列出可用 Agent。没有安装任何 CLI 的话，也可以在设置里填 OpenAI 兼容的 API 端点和 Key。

基本流程：新建项目 → 选 Agent 和技能 → 填问答表单 → 选视觉方向 → 提交生成。产物存在本地 .od/projects/ 目录，支持沙盒预览 HTML，可导出为 PDF/PPTX。

写在最后

Open Design 面向的是已经在用 Claude Code、Cursor 等工具做开发的人——想用同一套工具顺手生成设计原型，而不需要再开一个 Figma 或者专门找设计师出图。 codex 它的输出是 HTML/CSS 代码，不是 Figma 设计稿，没有可视化拖拽编辑。这不是设计师的协作工具，更像是"让 AI 帮你把设计需求转成可运行的前端原型"。

项目还在快速迭代，Electron 桌面版处于开发中，文档相对精简。上手时建议先用内置示例技能跑通流程，再替换成自己需要的设计系统和配置。

GitHub 项目地址：https://github.com/nexu-io/open-design (opens in a new tab)

nullgraph-webgpu-data-oriented-rendereropengeometry