Back to Blog

Open Design：3.4万星的开源AI设计工作室，让你的编程Agent秒变设计师

2026-05-09T14:30:00+08:00
Open Design AI设计 开源工具 Claude Design nexu-io 设计系统

Anthropic 在 2026 年 4 月推出了 Claude Design，让大模型不再只会写文字，开始产出设计作品。这东西火了，但它闭源、付费、云端运行，只认自家模型和自家技能。

开源社区很快给出了回应——Open Design（nexu-io/open-design），34,000+ Star，Apache 2.0 协议。同样的设计循环，同样的"作品优先"思维，零锁定。它不自带 Agent，而是把你笔记本上已经装好的编程 CLI（Claude Code、Codex、Gemini CLI、Cursor Agent、Qwen、Copilot、Hermes……）变成设计引擎。

我花了一个下午读完了它的源码和文档，这篇把我看到的东西整理出来。

本文提纲

  1. Open Design 是什么、为什么存在
  2. 31 个设计技能：从网页原型到杂志风 PPT
  3. 72 套品牌级设计系统：不是换个主题色那么简单
  4. 交互式问卷：先问清楚再动手
  5. 五种视觉风格：确定性调色板，不让 AI 瞎猜
  6. 媒体生成：图片、视频、动效一条龙
  7. 架构拆解：本地守护进程 + Web 前端
  8. 支持 16 种 Agent CLI，没有也能用 BYOK 模式
  9. 怎么上手？三种方式

Open Design 是什么、为什么存在

一句话：Open Design 是一个 AI 设计工作流编排器。

它不训练模型，不造 Agent，做的是一件更聪明的事——把现有的编程 Agent 接入一套严格的设计工作流，让 AI 输出从"随便画画"变成"像资深设计师一样工作"。

核心差异对比：

维度 Claude Design Open Design
开源 ❌ 闭源 ✅ Apache 2.0
Agent 只能用 Anthropic 模型 16 种 CLI + BYOK API
部署 云端 本地 / Vercel / Docker / 桌面 App
设计系统 固定 72 套可切换
技能 固定 31 个文件式技能，可自己加
数据 云端 本地 SQLite，你的数据你控制

它站在四个开源项目的肩膀上：

  • huashu-design — 设计哲学指南，5 步品牌资产协议、五维自评
  • guizang-ppt-skill — 杂志风 PPT 技能，原封不动打包进来
  • open-codesign — 第一个开源 Claude Design 替代品，借鉴了流式渲染和沙箱预览
  • multica — 守护进程架构，PATH 扫描 Agent 检测

31 个设计技能：从网页原型到杂志风 PPT

Open Design 把"能生成什么"拆成了 31 个独立的技能，每个技能就是一个文件夹（SKILL.md + assets/ + references/），丢进去重启就有了。

两大类：

Prototype 模式（27 个技能）——单页作品

技能 干什么
web-prototype 落地页、营销页、Hero 页（默认技能）
saas-landing SaaS 产品页：Hero / 功能 / 定价 / CTA
dashboard 后台管理、数据看板
mobile-app iPhone 15 Pro / Pixel 原型
mobile-onboarding App 引导流：闪屏 → 价值主张 → 登录
gamified-app 游戏化 App：任务系统 + XP + 等级
social-carousel 三张 1080×1080 社交媒体轮播图
magazine-poster 杂志风格海报
email-marketing 品牌营销邮件（表格兼容安全）
wireframe-sketch 手绘风格线框图——"先看到东西再说"
critique 五维自评表：哲学 · 层级 · 细节 · 功能 · 创新
tweaks AI 自曝可调参数面板

Deck 模式（4 个技能）——水平滑动演示

技能 干什么
guizang-ppt 杂志风 Web PPT（默认），WebGL 背景，单文件 HTML
simple-deck 极简水平滑动 Deck
replit-deck 产品演示 Deck（Replit 风格）
weekly-update 团队周报 Deck

还有办公类：PM 需求文档、OKR 表、会议纪要、看板、运维手册、财务报告、发票、HR 入职计划。

你输入"给我做一个融资路演 PPT"，流程是这样的：

  1. 弹出交互表单，锁定受众、调性、品牌
  2. 展示 5 种视觉风格让你选
  3. 生成实时 TODO 进度条
  4. 在沙箱 iframe 里渲染作品
  5. 可以一键导出 HTML / PDF / PPTX / ZIP

72 套品牌级设计系统：不是换个主题色那么简单

每套设计系统是一个 DESIGN.md 文件，包含 9 个维度：

  • 色彩（Color）— 主色、辅色、强调色、背景色
  • 字体（Typography）— 标题字体、正文字体、字号阶梯
  • 间距（Spacing）— 网格系统、边距规范
  • 布局（Layout）— 栅格、容器、响应式断点
  • 组件（Components）— 按钮、卡片、导航栏
  • 动效（Motion）— 过渡时长、缓动函数
  • 语气（Voice）— 文案调性
  • 品牌（Brand）— 标志使用规范
  • 反模式（Anti-patterns）— 不该这么用

内置的设计系统涵盖了你能想到的大多数产品：

Linear · Stripe · Vercel · Airbnb · Tesla · Notion · Apple · Anthropic · Cursor · Supabase · Figma · Resend · Raycast · Cohere · Mistral · ElevenLabs · X.AI · Spotify · Webflow · Sanity · PostHog · Sentry · MongoDB · ClickHouse · Cal · Replicate · Clay · Composio · 小红书 ……

切换设计系统，下一次渲染自动使用新令牌。这不是"换个主题色"，而是整套视觉语言的切换。

交互式问卷：先问清楚再动手

这是 Open Design 最聪明的设计之一。

Prompt 栈里硬编码了一条 RULE 1：每次新设计任务，AI 的第一反应不是写代码，而是弹出一个 <question-form>——

  • 这个作品的目标平台？（Web / Mobile / Desktop）
  • 目标受众是谁？
  • 调性是什么？（严肃 / 活泼 / 极简 / 奢华）
  • 有没有品牌上下文？
  • 规模多大？（单页 / 多页 / 整套）

这种"初级设计师模式"来自 huashu-design 的理念：先把问题问完，再展示看得见的东西。30 秒的表单填写，省掉 30 分钟的来回修改。

五种视觉风格：确定性调色板，不让 AI 瞎猜

如果用户没有自带品牌，Open Design 提供五种视觉方向，每种附带确定性的 OKLch 调色板和字体栈：

风格 调性
Editorial Monocle 编辑杂志风，衬线字体，克制用色
Modern Minimal 极简现代，大留白，无衬线
Warm Soft 温暖柔和，圆角，暖色系
Tech Utility 科技实用，等宽字体，冷色调
Brutalist Experimental 粗野主义实验，大胆撞色，不规则布局

关键在于确定性——选定风格后，调色板和字体栈是固定的，不是让模型即兴发挥。这避免了每次生成结果视觉不一致的问题。

媒体生成：图片、视频、动效一条龙

不只是静态 HTML。Open Design 集成了三层媒体能力：

  • gpt-image-2（Azure / OpenAI）→ 海报、头像、信息图、手绘地图
  • Seedance 2.0（字节跳动）→ 15 秒影视级文生视频、图生视频
  • HyperFrames（heygen-com）→ HTML 转 MP4 动画，产品展示、数据图表、Logo 动效

内置 93 个现成 Prompt 模板——43 个图片 + 39 个视频 + 11 个动效，带预览缩略图和来源标注。这些模板在 prompt-templates/ 目录下，直接复用就行。

架构拆解：本地守护进程 + Web 前端

┌──────────────────── browser (Next.js 16) ────────────────────┐
│  chat · file workspace · iframe preview · settings · imports │
└──────────┬──────────────────────────────────┬────────────────┘
           │ /api/*                           │ /api/proxy/stream (SSE)
           ▼                                  ▼
┌──────────────────────────────────┐   BYOK → any OpenAI-compat
│  Local daemon (Express + SQLite) │   endpoint (SSRF blocked)
│                                  │
│  /api/agents  /api/skills        │
│  /api/design-systems  /api/chat  │
│  /api/projects  /api/proxy/...   │
│  /api/import/claude-design       │
└─────────┬────────────────────────┘
          │ spawn(cli, { cwd: .od/projects/ })
          ▼
┌──────────────────────────────────────────────────────────────┐
│  claude · codex · gemini · cursor-agent · qwen · copilot ·  │
│  hermes · kimi · kiro · mistral-vibe · deepseek · ...       │
│  reads SKILL.md + DESIGN.md, writes artifacts to disk       │
└──────────────────────────────────────────────────────────────┘

几个要点：

  • 前端：Next.js 16 + React 18 + TypeScript，可部署到 Vercel
  • 守护进程：Node 24 + Express + better-sqlite3，管理项目、会话、消息
  • Agent 传输：每种 CLI 一个适配器，通过 child_process.spawn 在项目目录里运行
  • BYOK 代理：/api/proxy/{anthropic,openai,azure,google}/stream，支持本地 LLM（Ollama、LM Studio），阻止 SSRF 攻击
  • 存储：本地文件 + SQLite，数据全在你手里
  • 预览：沙箱 iframe 通过 srcdoc 渲染，安全隔离
  • 导出：HTML（内联资源） · PDF · PPTX · ZIP · Markdown

所有数据存在 .od/ 目录下：

.od/
├── app.sqlite          ← 项目、会话、消息、标签
├── artifacts/          ← 一次性保存的渲染结果
└── projects//      ← 每个项目的工作目录，也是 Agent 的 cwd

支持 16 种 Agent CLI，没有也能用 BYOK 模式

启动时自动扫描 PATH，检测到的 CLI 自动成为候选设计引擎：

Claude Code · Codex CLI · Devin · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Qoder CLI · GitHub Copilot CLI · Hermes · Kimi CLI · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek TUI

每种 CLI 有对应的传输协议适配器：

协议 覆盖的 CLI
claude-stream-json Claude Code
json-event-stream Codex / Gemini / OpenCode / Cursor
acp-json-rpc Devin / Hermes / Kimi / Kiro / Kilo / Mistral Vibe
copilot-stream-json GitHub Copilot
pi-rpc Pi（stdio JSON-RPC）
plain Qwen Code / DeepSeek TUI

没装任何 CLI？BYOK 模式填入 API Key（支持 Anthropic / OpenAI / Azure / Google 四家），守护进程把 SSE 流标准化后喂给同一个聊天界面。甚至可以用本地模型——Ollama 和 LM Studio 的 loopback 地址是允许的。

另外一个实用功能：导入 Claude Design 的导出 ZIP。POST /api/import/claude-design 解析后变成真实项目，Agent 可以接着编辑。

怎么上手？三种方式

方式一：桌面 App（最快）

去 open-design.ai 或 GitHub Releases 下载安装包。macOS（Apple Silicon）和 Windows（x64）都有。

方式二：Docker

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d
# 打开 http://localhost:7456

方式三：源码运行

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version   # 需要 10.33.2
pnpm install
pnpm tools-dev run web
# 打开终端输出的 Web URL

需要 Node 24 + pnpm 10.33.x。

首次启动后：自动检测你装的 Agent CLI → 加载 31 个技能 + 72 套设计系统 → 弹出欢迎对话框（可填 API Key）→ 自动创建 .od/ 运行时目录。

输入一句话需求，看表单弹出来，填完看进度条，看作品渲染。整个流程跑通不超过 2 分钟。

作者: itech001
来源: 公众号：AI人工智能时代
主页: https://www.theaiera.cn（每日分享最前沿的AI新闻和技术）

本文首发于 AI人工智能时代，转载请注明出处。

Enjoyed this article? Share it with others!