Open Source · Local-first · BYOK

一句话生成
可交互 HTML 设计稿

Claude Design 的开源平替。31 个 Skill · 72 套 Design System · 16 种 Agent CLI 自动检测。本地运行，完全免费。

31
可组合 Skill
72
品牌级 Design System
16
Agent CLI 适配
5
导出格式
01

启动与关闭

启动

$ cd ~/open-design $ pnpm tools-dev run web

终端会输出两个地址，在浏览器打开 Web 地址即可。

➜ Web: http://127.0.0.1:51664/ ➜ Daemon: http://127.0.0.1:51645/

后台启动

$ pnpm tools-dev start web # 后台启动 daemon + web

关闭

02

界面概览

打开浏览器后，你会看到以下核心区域：

┌─────────────────────────────────────────────────┐
│ [Skill 选择器]  [Design System]  [Agent 选择器]   │
├──────────────────┬──────────────────────────────┤
│                  │                              │
│   聊天面板       │   预览面板                     │
│   · 消息流       │   · 沙盒 iframe 实时渲染        │
│   · Todo 进度    │   · 可编辑的 HTML 代码          │
│   · Agent 调用   │                              │
│                  │                              │
├──────────────────┴──────────────────────────────┤
│ [输入框]  输入你的设计需求，点击 Send              │
└─────────────────────────────────────────────────┘
03

创建你的第一个设计

只需 4 步，从零到一个完整的设计稿：

1

选择 Skill

顶部下拉框选择场景，例如 web-prototype（通用网页）。

2

选择 Design System

选择品牌风格，例如 apple、stripe、linear-app 等。不选则使用默认的 Neutral Modern。

3

输入 Prompt

在底部输入框输入一句话需求。

4

填写表单

Agent 会先弹出表单，确认平台、受众、调性、品牌上下文、规模，然后开始生成。

帮我做一个科技感的产品官网首页，要有 Hero 区域、功能展示、用户评价和 CTA 按钮
04

核心概念：Skill + Design System

Open Design 的设计能力由两个维度组合而成：

Skill
决定「做什么」

产物类型：网页、PPT、Dashboard、移动端...

+
Design System
决定「长什么样」

视觉风格：颜色、字体、间距、布局...

你想要的SkillDesign System
Apple 风格的产品页saas-landingapple
Stripe 风格的定价页pricing-pagestripe
Linear 风格的 Dashboarddashboardlinear-app
杂志风融资路演 PPTguizang-pptwarm-editorial
Notion 风格的文档页docs-pagenotion
Tesla 风格的移动端界面mobile-apptesla
05

全部 Skill 一览

Prototype 模式（网页/应用原型）

Skill用途适合场景
web-prototype通用单页 HTML落地页、营销页、Hero 页（默认）
saas-landingSaaS 营销落地页Hero + 功能 + 定价 + CTA
dashboard后台管理/分析面板侧边栏 + 数据密集布局
pricing-page定价对比页定价表 + 功能对比
docs-page三栏文档页API 文档、使用指南
blog-post编辑风格长文博客、文章
mobile-app手机端界面iPhone 15 Pro / Pixel 边框
mobile-onboarding移动端引导页启动页 → 价值主张 → 注册
gamified-app游戏化 App 原型任务、经验值、等级
email-marketing营销邮件 HTML产品发布通知邮件
social-carousel社媒轮播图1080×1080 三图轮播
magazine-poster杂志风海报单页海报设计
motion-frames动效 HeroCSS 循环动画
sprite-animation像素风动画8-bit 动画演示
dating-web社交/约会 Dashboard左侧导航 + KPI 看板
digital-eguide电子指南封面 + 课程内页
wireframe-sketch手绘线框图早期方案草图
critique五维自评设计质量评分
tweaks参数调整面板微调设计细节

Deck 模式（PPT / 演示文稿）

Skill用途
guizang-ppt杂志风 Web PPT（默认，支持 WebGL 背景）
simple-deck极简横向翻页演示
replit-deck产品演示 Deck（Replit 风格）
weekly-update周报 Deck（进度 + 阻碍 + 下步）

办公与运营类

Skill用途
pm-specPM 需求规格文档（含 TOC + 决策日志）
team-okrsOKR 评分表
meeting-notes会议纪要
kanban-board看板快照
eng-runbook运维 Runbook
finance-report财务摘要
invoice发票
hr-onboarding入职计划
06

全部 Design System 一览

共 72 套品牌级设计系统，按类别分组：

AI & LLM
claudecoheremistral-aiminimaxtogether-aireplicaterunwaymlelevenlabsollamax-ai
开发者工具
cursorvercellinear-appframerexpoclickhousemongodbsupabasehashicorpposthogsentrywarpwebflowsanitymintlifylovablecomposioopencode-aivoltagent
生产力
notionfigmamiroairtablesuperhumanintercomzapiercalclayraycast
金融科技
stripecoinbasebinancekrakenmastercardrevolutwise
电商 & 出行
shopifyairbnbubernikestarbuckspinterest
媒体 & 娱乐
spotifyplaystationwiredthevergemeta
汽车
teslabmwferrarilamborghinibugattirenault
其他
appleibmnvidiavodafoneresendspacex
起手模板
default (Neutral Modern)warm-editorial
07

设计工作流详解

Open Design 的设计流程被刻意设计为「像一位资深设计师的工作方式」：

需求表单
→
视觉方向
→
实时生成
→
预览调整

第 1 轮：需求表单

Agent 不会直接画，而是弹出结构化表单，锁定以下信息：

30 秒点选 > 30 分钟返工

第 2 轮：视觉方向选择

5 个精心策划的视觉方向：

Editorial Monocle

印刷杂志、墨色 + 奶油色 + 暖锈色

Modern Minimal

冷调、结构化、极简强调色

Tech Utility

信息密度、等宽字体、终端感

Brutalist

粗犷、超大字体、无阴影

Soft Warm

宽松、低对比、蜜桃色中性调

第 3 轮：实时生成

第 4 轮：预览与调整

通过聊天面板继续发送修改指令。Agent 会在输出前进行五维自评（哲学 · 层次 · 细节 · 功能 · 创新），低于 3/5 的维度会自动修正。

08

导出与下载

格式说明
HTML完整单文件 HTML（内联所有资源），可直接部署
PDF浏览器打印导出，Deck 模式自动处理分页
PPTXAgent 驱动的 PPT 导出
ZIP打包为 ZIP 压缩包
Markdown导出为 Markdown 文档
操作方式
点击预览面板右上角的 下载/导出 按钮，或点击 Save to disk 保存到 .od/artifacts/ 目录。
09

媒体生成

🖼
gpt-image-2

海报、头像、信息图、杂志风社交卡片

🎬
Seedance 2.0

15 秒电影级文字/图片转视频

✨
HyperFrames

HTML → MP4 动效视频，11 个现成模板

使用方式

  1. 在 Settings → Media 中配置对应的 API 密钥
  2. 在 Entry View 的 Image templates 或 Video templates 选择模板
  3. 一键填入 prompt，修改参数后发送
10

常见场景示例

快速出产品官网

saas-landing vercel
帮我做一个 AI 代码助手的产品官网，突出速度和智能化，面向开发者

融资路演 PPT

guizang-ppt warm-editorial
种子轮融资路演 PPT，AI 设计工具，含团队、市场、产品、商业模式、融资计划

后台 Dashboard

dashboard linear-app
项目管理后台 Dashboard，侧边导航、项目列表、任务统计图表、团队活动流

移动端 App 界面

mobile-app apple
健康追踪 App 首页，今日步数、心率、睡眠数据，底部 Tab 导航

营销邮件

email-marketing stripe
新产品发布营销邮件，智能日程管理工具，吸引眼球的标题和 CTA

定价页

pricing-page notion
三档定价页：免费版、专业版、企业版，突出专业版性价比

周报 Deck

weekly-update default
本周工作汇报 Deck，已完成事项、进行中任务、下周计划

社媒轮播图

social-carousel nike
运动品牌三张社媒轮播图：产品展示、使用场景、品牌理念
11

常用命令速查

# 启动 pnpm tools-dev run web # 前台启动（推荐） pnpm tools-dev start web # 后台启动 pnpm tools-dev # 后台启动（含桌面应用） # 管理 pnpm tools-dev status # 查看运行状态 pnpm tools-dev logs # 查看日志 pnpm tools-dev check # 状态 + 日志 + 诊断 pnpm tools-dev stop # 停止 pnpm tools-dev restart # 重启 # 指定端口 pnpm tools-dev restart --daemon-port 7457 --web-port 5175 # 构建单个包 pnpm --filter @open-design/daemon build pnpm --filter @open-design/web build # 更新到最新版 cd ~/open-design git pull pnpm install pnpm tools-dev restart
12

常见问题排障

?启动时提示 "no agents found on PATH"

原因：系统未检测到支持的 Coding Agent CLI。

解决：确认已安装 claude、Codex、Gemini CLI 等其中一个，或进入 Settings 切换到 API 模式，填入 API 密钥（支持 Anthropic / OpenAI / Azure / Google）。

?设计稿不渲染

原因：模型输出了文本但没有用 <artifact> 标签包裹。

解决：查看左侧聊天面板确认 Skill 使用情况，尝试更换更强大的模型，或检查 daemon 日志：pnpm tools-dev logs

?媒体生成报错 "OD_BIN 缺失"
pnpm --filter @open-design/daemon build pnpm tools-dev restart

然后在应用中重新打开项目（不要复用之前的会话）。

?端口冲突
pnpm tools-dev restart --daemon-port 7457 --web-port 5175
?想重置所有数据
pnpm tools-dev stop rm -rf ~/open-design/.od pnpm tools-dev run web # 重新启动，自动重建
?Agent 生成的内容太 "AI 味"

Open Design 内置了 反 AI Slop 机制：五维自评审、品牌色从实际品牌提取、禁止典型 AI 视觉套路、无数据时使用占位符。

如果结果仍不满意：在 prompt 中更具体地描述风格，尝试不同的 Design System，或使用 critique Skill 进行评分改进。

13

数据存储位置

所有运行时数据存放在 ~/open-design/.od/ 目录下（自动创建，gitignored）：

.od/ ├── app.sqlite # 项目、对话、消息、标签页 ├── artifacts/ # "Save to disk" 保存的渲染结果 └── projects/<id>/ # 每个项目的工作目录（Agent 的 cwd）
常用操作

查看数据：ls -la ~/open-design/.od

迁移数据目录：OD_DATA_DIR=<新路径> pnpm tools-dev run web

项目可恢复：关闭后重新打开，Todo 卡片和文件位置保持不变