Open Design：Claude Design 的开源替代方案，31 个 Skill + 72 套 Design System

Open Design 是 Anthropic 推出的 Claude Design 的开源替代方案，由 nexu-io 团队开发并采用 Apache-2.0 协议开源。它延续了 Claude Design 的 artifact-first 设计心智模型，但解除了模型锁定、云端依赖和付费门槛，让开发者可以在本地或自托管环境中运行完整的设计工作流。

核心定位：解除锁定的设计工作流

Claude Design 在 2026 年 4 月发布后迅速出圈，展示了一个 LLM 不再写废话、直接交付设计成品的可能性。但它保持闭源、付费、仅支持 Anthropic 云端模型，没有 checkout、没有自托管、也没有 Vercel 部署选项。

Open Design 的目标是在同一套设计 loop 心智模型下，提供完全开源、自带 Key（BYOK）、可本地运行的替代方案。它不自带 agent，而是委托用户已经在本地安装的 coding agent CLI 作为设计引擎。

技术架构概览

Open Design 采用三层架构：

浏览器层（Next.js 16）

前端基于 Next.js 16 App Router + React 18 + TypeScript 构建，可直接部署到 Vercel。提供聊天界面、文件工作区、iframe 沙盒预览、设置和导入功能。

Daemon 层（Express + SQLite）

本地 daemon 是唯一的服务端进程，负责：

• 检测 PATH 上已安装的 coding agent CLI
• 管理 31 个 skill 和 72 套 design system
• 通过 SSE 流式传输与前端通信
• 提供 OpenAI 兼容的 BYOK 代理端点
• 持久化项目、对话、消息和 tab 到 SQLite

Agent 运行时层

daemon 在 .od/projects/<id>/ 目录下 spawn CLI，agent 拥有真实的文件系统访问能力，可以 Read、Write、Bash、WebFetch，直接操作磁盘上的设计产物。

支持的 Coding Agent

Open Design 在启动时自动扫描 PATH，支持 10 套主流 CLI：

一个 CLI 都没装？Open Design 提供 OpenAI 兼容的 BYOK 代理 /api/proxy/stream，支持 Anthropic-via-OpenAI、DeepSeek、Groq、MiMo、OpenRouter、自托管 vLLM 等任意 vendor。

31 个内置 Skill

所有 skill 都遵循 Claude Code 的 SKILL.md 规范，分为两类模式：

Prototype 模式（27 个）

覆盖从 web 原型到移动端、营销物料、办公文档等多种场景：

• 设计类：web-prototype、saas-landing、dashboard、mobile-app、dating-web
• 营销类：email-marketing、social-carousel、magazine-poster、motion-frames
• 办公类：pm-spec、team-okrs、meeting-notes、kanban-board、finance-report
• 工程类：docs-page、eng-runbook
• 其他：critique（五维自评审）、tweaks（AI 自调面板）、wireframe-sketch

Deck 模式（4 个）

• guizang-ppt：杂志风网页 PPT，来自歸藏的 skill，原 LICENSE 保留
• simple-deck：极简横滑 deck
• replit-deck：产品演示 deck
• weekly-update：团队周报 deck

72 套 Design System

从 VoltAgent/awesome-design-md 导入的 72 套产品级设计系统，涵盖：

• AI & LLM：Claude、Cohere、Mistral、ElevenLabs、Ollama、xAI
• 开发者工具：Cursor、Vercel、Linear、Supabase、PostHog、Sentry
• 生产力：Notion、Figma、Miro、Airtable、Cal、Raycast
• 金融科技：Stripe、Coinbase、Revolut、Wise
• 媒体：Spotify、PlayStation、Wired、The Verge
• 汽车：Tesla、BMW、Ferrari、Lamborghini

每套系统都遵循 9 段式 DESIGN.md 规范：color、typography、spacing、layout、components、motion、voice、brand、anti-patterns。

关键设计特性

初始化问题表单

每个新设计任务都从 <question-form> 开始，锁定 surface、受众、调性、品牌上下文、规模等关键信息。这是从 huashu-design（花叔的画术）蒸馏出的 Junior-Designer 工作流，用 30 秒勾选项替代 30 分钟来回返工。

5 套视觉方向

当用户没有品牌资产时，agent 自动跳转方向选择器，5 套精选流派一键锁定完整视觉系统：

1. Editorial Monocle —— 印刷杂志风，墨水 + 米色纸 + 暖红强调
2. Modern Minimal —— Linear / Vercel 冷调结构化
3. Tech Utility —— Bloomberg 信息密度、等宽终端感
4. Brutalist —— 粗粝巨字、无阴影、刺眼强调
5. Soft Warm —— Notion 大方低对比、桃色中性

反 AI Slop 机制

• 品牌资产协议：贴截图或 URL 时，agent 走 5 步流程（定位、下载、grep hex、写 brand-spec.md、复述），绝不从记忆里猜品牌色
• 五维自评审：emit 前在哲学、层级、执行、具体度、克制五个维度自评 1-5 分，任一项 < 3/5 视为退步，修完再评
• P0/P1/P2 checklist：每个 skill 自带 references/checklist.md，P0 全过才能 emit
• Slop 黑名单：暴力紫渐变、通用 emoji 图标、左 border 圆角卡片等明令禁止

Claude Design ZIP 导入

支持直接导入 Claude Design 导出的 ZIP 文件，解压成真实项目目录，agent 可以接着 Anthropic 停下的地方继续编辑，无需重述上下文。

快速开始

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

环境要求：Node ~24，pnpm 10.33.x。首次加载会自动检测 PATH 上的 agent CLI、加载 skill 和 design system，并弹出欢迎对话框。

项目状态与路线图

Open Design 的闭环（检测 → 选 skill + design system → 对话 → 解析 artifact → 预览 → 保存）已经端到端跑通。提示词栈和 skill 库已稳定，组件级 UI 仍在每天迭代。

已完成的特性包括 daemon + 10 套 CLI adapter、31 个 skill、72 套 design system、SQLite 持久化、BYOK 代理、ZIP 导入、sidecar IPC + Electron 桌面端、artifact lint API。

路线图上的待实现功能包括评论模式手术刀编辑、AI 自吐 tweaks 面板 UX、Vercel 部署食谱、skill 市场 CLI、以及可分发 Electron 安装包。

与同类项目对比

项目链接

• GitHub 仓库：https://github.com/nexu-io/open-design
• 快速开始：QUICKSTART.md
• 技能协议文档：docs/skills-protocol.md
• 架构文档：docs/architecture.md