Open Design 开源版 / 本地版 Claude Design

免费/开源、本地可控、模型自由、设计系统可复用、产出是工程文件而不是聊天记录。

Open Design 不是自己养一个大模型，而是把你电脑上已经装好的编程 Agent（Claude Code、Cursor、Codex、Gemini CLI、Kimi、DeepSeek、Copilot 等）变成“设计引擎”。

你对它说：

做一个 SaaS 后台 Dashboard / 一个产品落地页 / 一份融资 PPT / 一张海报 / 一个产品宣传短视频

它借助：

• SKILL.md：设计技能/工作流
• DESIGN.md：设计系统/品牌规范
• 本地守护进程 + 沙箱预览
• BYOK（自带模型 Key）

在本地生成真实可交付文件，而不是只给一段聊天文本。

主要功用

可生成/产出：

• Web 原型、App 界面、移动端页面
• 落地页、官网、营销页
• 数据 Dashboard、管理后台
• 演示文稿 / Pitch Deck
• 图片、海报、品牌物料
• 视频、动效、HyperFrames 动态图形
• 可直接落地的 HTML / CSS / 组件代码

导出格式：

• HTML
• PDF
• PPTX
• MP4
• ZIP
• Markdown
• 项目源文件

核心特点

1. 本地优先
   • 项目文件、对话、模板存本地
   • 不强制走厂商云
   • 适合隐私/合规场景
2. Agent 无关
   • 支持 Claude Code、Cursor、Codex、Gemini、Copilot、Kimi、DeepSeek 等
   • 换模型不是换工具，改配置即可
3. 设计系统即文件
   • DESIGN.md 定义颜色、字体、间距、组件、语气、反模式
   • 内置 Linear / Stripe / Apple / Vercel / Notion 等风格
   • 可放 Git 里版本化管理
4. 技能化工作流
   • SKILL.md 定义“怎么做 Dashboard / PPT / 落地页 / 图表 / 视频”
   • 不是让模型自由发挥，而是走结构化流程
5. 先问再做
   • 生成前先确认：受众、场景、语气、品牌、规模
   • 减少“AI 乱画、反复返工”
6. 真实文件 + 沙箱预览
   • Agent 真读真写项目目录
   • iframe 里看真实 CSS / 字体 / 组件效果

---

优势

对比项	Open Design	Claude Design	Figma
是否开源	✅ Apache-2.0	❌ 闭源	❌ 闭源
运行位置	本地 / 自托管	Anthropic 云	云端为主
模型绑定	不绑定	绑 Claude	不生成代码
设计系统	150+ DESIGN.md	少量预设	人工搭建
导出	HTML/PDF/PPTX/MP4	有限	设计稿为主
数据归属	用户本地	平台内	平台内

使用方法

1. 安装

三种方式：

• 桌面端：去 open-design.ai 下载 macOS / Windows 安装包
• 源码运行： git clone https://github.com/nexu-io/open-design.git cd open-design corepack enable pnpm install pnpm tools-dev
• Docker： cd open-design/deploy cp .env.example .env docker compose up -d

源码方式通常要求 Node.js 24+、pnpm 10.33+。

2. 连接 Agent / 模

桌面端启动后会自动扫描 PATH 里的 Agent CLI。

命令行接 MCP：

od mcp install claude
od mcp install cursor
od mcp install codex
od mcp install copilot

也可以用 BYOK：

• OpenAI
• Anthropic
• Google
• Moonshot / Kimi
• DeepSeek
• OpenRouter
• 本地 Ollama / vLLM

3. 建项目

首页选择产物类型：

• Prototype 原型
• Dashboard 仪表盘
• Deck 演示文稿
• Image 图片
• Video 视频
• Landing Page 落地页

然后选一个 DESIGN.md 设计系统：

Stripe 风 / Linear 风 / Apple 风 / 自定义品牌

4. 填需求

类似 30 秒问卷：

• 给谁用？
• 什么场景？
• 商务 / 科技 / 极简 / 编辑风 / 品牌营销？
• 要不要图表、登录、定价、CTA？
• 主色 / 辅助色 / 字体偏好？

系统会锁定视觉方向：配色、字体栈、间距、布局姿态。

5. 生成 → 预览 → 改

• Agent 写文件到项目目录
• 沙箱 iframe 实时预览
• 用对话改：“把主色改成深蓝”“加一个定价表”“Hero 左文右图”
• 内置自评：层级、执行度、克制感、细节、创新度

6. 导出交付

确认后导出：

HTML / PDF / PPTX / MP4 / ZIP / Markdown

文件留在你本地项目目录，后续还能让 Cursor / Claude Code 继续改代码。

六、适合谁

• 程序员：快速出页面/后台/组件
• 产品经理：做原型、Demo、PRD 配套界面
• 创业者：做落地页、Pitch Deck、官网
• 自媒体/运营：做海报、图文、短视频
• 注重隐私的团队：本地存项目，不传云