系列目录
– （一）部署篇 —— 从零安装到跑起来
– （二）核心概念篇 ← 你在这里
– （三）实战案例篇 —— 从 0 到 1 设计一个攀岩者网站
写在前面
上一篇我们把 Open Design 跑起来了。但打开界面后，顶部有三个下拉框：Agent、Skill、Design System —— 它们分别是什么？怎么组合？
这篇读完你会明白：
- 四种模式分别产出什么
- 31 个 Skill 怎么选
- 72 套 Design System 怎么用
- Agent 的工作原理
- 三者如何组合出不同的设计产物
第一章：四种模式（Mode）
Open Design 有四种产出模式，每种对应不同的设计产物：
1.1 Prototype 模式（原型）
产出：单页 HTML 设计稿，可在浏览器中交互
适合：网站、落地页、仪表盘、App 界面、海报、文档
用时：60-120 秒
特点：
- 输出一个
index.html文件 - 右侧 iframe 实时预览
- 支持继续对话修改
- 可导出 HTML / PDF / ZIP
1.2 Deck 模式（演示文稿）
产出：多页 HTML 横滑演示文稿
适合：Pitch Deck、产品介绍、团队周报、培训课件
用时：90-180 秒
特点：
- 类似 PPT 的横滑翻页
- 杂志风排版
- 可导出 PDF
1.3 Template 模式（模板）
产出：填充预设模板的成品
适合：快速出图、套模板
用时：20-40 秒
特点：
- 最快出结果
- 基于现有模板修改
- 适合标准化产出
1.4 Design System 模式（设计系统）
产出：一套品牌设计规范文档（DESIGN.md）
适合：建立品牌规范、统一视觉语言
用时：60-180 秒
特点：
- 输出色板、字体、间距、组件规范
- 其他模式可引用这套规范
- 确保设计一致性
第二章：Skill（技能）
2.1 Skill 是什么？
Skill 决定做什么类型的产物。每个 Skill 是一个文件夹，包含：
SKILL.md—— 技能描述和生成规则assets/—— 模板、图片等资源references/—— 参考资料
Skill 遵循 Claude Code 的 SKILL.md 规范，Open Design 直接复用。
2.2 内置 Skill 完整列表
设计与营销类（Prototype 模式）
| Skill | 用途 | 场景 |
|---|
|—|—|—|
web-prototype |
通用网页原型（默认） | 首页、落地页、任意网页 |
|---|---|---|
saas-landing |
SaaS 营销页 | Hero + Features + Pricing + CTA |
dashboard |
数据仪表盘 | 侧栏 + 图表 + KPI 卡片 |
pricing-page |
定价页 | 方案对比表 |
docs-page |
文档页 | 三栏技术文档 |
blog-post |
博客文章 | 长文 editorial 排版 |
mobile-app |
手机 App | 带 iPhone/Pixel 手机壳 |
mobile-onboarding |
移动端引导 | 多屏引导流程 |
gamified-app |
游戏化 App | XP 系统、等级、任务 |
email-marketing |
营销邮件 | 品牌发布邮件 |
social-carousel |
社媒轮播 | 1080×1080 三连图 |
magazine-poster |
杂志海报 | 单页杂志风海报 |
motion-frames |
动效 Hero | CSS 循环动画 |
sprite-animation |
像素动画 | 8-bit 风格动画 |
dating-web |
社交网站 | 约会/婚恋仪表盘 |
digital-eguide |
电子指南 | 封面 + 内文跨页 |
wireframe-sketch |
线框稿 | 手绘风格灰块布局 |
文档与办公类（Prototype 模式）
| Skill | 用途 | 场景 |
|---|
|—|—|—|
pm-spec |
产品需求文档 | PRD + 目录 + 决策日志 |
|---|---|---|
team-okrs |
OKR 记分表 | 团队目标追踪 |
meeting-notes |
会议纪要 | 决议 + 待办 |
kanban-board |
看板视图 | 任务看板快照 |
eng-runbook |
运维手册 | 故障排查流程 |
finance-report |
财务报告 | 高管财务摘要 |
invoice |
发票 | 单页发票模板 |
hr-onboarding |
入职计划 | 新员工入职流程 |
Deck 模式
| Skill | 用途 | 特点 |
|---|
|—|—|—|
guizang-ppt |
杂志风 PPT（默认） | 归藏风格、WebGL 背景 |
|---|---|---|
simple-deck |
极简横滑 | 最简单的 Deck |
replit-deck |
产品演示 | Replit 风格 |
weekly-update |
团队周报 | 进度 + 阻塞 + 下一步 |
2.3 怎么选 Skill？
决策树：
`
你想做什么？
├── 网页/App/海报/文档 → Prototype 模式
│ ├── 通用网页 → web-prototype
│ ├── 营销落地页 → saas-landing
│ ├── 数据后台 → dashboard
│ ├── 手机 App → mobile-app
│ ├── 博客文章 → blog-post
│ └── 其他 → 看上面的完整列表
│
├── PPT/演示文稿 → Deck 模式
│ ├── 杂志风 → guizang-ppt
│ ├── 极简风 → simple-deck
│ └── 周报 → weekly-update
│
└── 品牌规范 → Design System 模式
`
第三章：Design System（设计系统）
3.1 Design System 是什么？
Design System 决定长什么样。它是一套设计规范，定义了：
- 色板：主色、辅色、背景色、文字色
- 字体：标题字体、正文字体、代码字体
- 间距：padding、margin、gap 的规范值
- 布局：网格系统、断点
- 组件：按钮、卡片、表单的样式
- 动效：过渡、动画规范
- 语气：文案风格
3.2 内置 72 套 Design System
科技公司风格
| 名称 | 特点 | 适合 |
|---|
|—|—|—|
| Linear | 深蓝紫、几何线条、极简 | SaaS、开发工具 |
|---|---|---|
| Stripe | 渐变光效、精致动效 | 支付、金融、API |
| Vercel | 纯黑白、无衬线 | 部署平台、开发者 |
| Supabase | 绿色主调、现代感 | 数据库、BaaS |
| Figma | 多彩渐变、协作感 | 设计工具 |
| Cursor | 暗色、代码风 | IDE、编程工具 |
消费品牌风格
| 名称 | 特点 | 适合 |
|---|
|—|—|—|
| Airbnb | 温暖圆角、大量留白 | 旅行、生活服务 |
|---|---|---|
| Tesla | 暗色、科技豪华 | 高端产品 |
| Spotify | 绿色、圆润、年轻 | 音乐、娱乐 |
| 小红书 | 粉红色、卡片密集 | 社交、电商 |
工具类风格
| 名称 | 特点 | 适合 |
|---|
|—|—|—|
| Notion | 浅色、留白、文档感 | 笔记、协作 |
|---|---|---|
| Raycast | 暗色、效率感 | 效率工具 |
| PostHog | 数据可视化感 | 分析、监控 |
AI 类风格
| 名称 | 特点 | 适合 |
|---|
|—|—|—|
| Anthropic | 温暖橙、专业感 | AI 产品 |
|---|---|---|
| Cohere | 蓝紫渐变 | 企业 AI |
| Mistral | 橙色、活力 | 开源 AI |
3.3 怎么选 Design System？
按产品类型选：
- SaaS/工具 → Linear / Stripe / Vercel
- 消费/App → Airbnb / Spotify / 小红书
- AI 产品 → Anthropic / Cohere / Mistral
- 内容/博客 → Notion / Warm Editorial
按风格选：
- 暗色科技 → Linear / Tesla / Cursor
- 温暖友好 → Airbnb / Spotify / Anthropic
- 极简黑白 → Vercel / Notion
- 多彩活力 → Figma / Stripe
第四章：Agent（设计引擎）
4.1 Agent 是什么？
Agent 是实际执行设计生成的 AI。Open Design 不自带模型，而是：
- 扫描你电脑上已安装的 Agent CLI
- 通过标准协议（ACP/stdin/stdout）与 Agent 通信
- 把 Skill + Design System + 你的需求组装成 prompt
- 发送给 Agent，流式接收输出
- 解析
标签，渲染 HTML 预览
4.2 工作流程
`
你的需求
+ SKILL.md（做什么类型的产物）
+ DESIGN.md（什么视觉风格）
+ 初始化问题表单的答案
─────────────────────────
= 完整的 System Prompt
│
▼
发送给 Agent CLI
│
▼
Agent 生成 HTML（流式输出）
│
▼
解析 标签
│
▼
iframe 沙盒渲染预览
`
4.3 Agent 选择建议
| Agent | 优势 | 劣势 |
|---|
|—|—|—|
| Hermes | 免费、中文好、已配置 | 依赖小米 API |
|---|---|---|
| Claude Code | 设计能力强 | 需付费 API |
| Codex | 代码能力强 | 设计感一般 |
| Gemini | 免费额度 | 中文支持一般 |
第五章：三者组合
5.1 组合公式
`
设计产物 = Mode × Skill × Design System × Agent × 你的需求
`
5.2 组合示例
| 场景 | Mode | Skill | Design System | 效果 |
|---|
|—|—|—|—|—|
| 公司官网 | Prototype | web-prototype | Linear | 科技感首页 |
|---|---|---|---|---|
| 产品落地页 | Prototype | saas-landing | Stripe | 精致营销页 |
| 数据后台 | Prototype | dashboard | Supabase | 现代仪表盘 |
| 手机 App | Prototype | mobile-app | Airbnb | 温暖风 App |
| 投资 Deck | Deck | guizang-ppt | Anthropic | AI 风杂志 PPT |
| 团队周报 | Deck | weekly-update | Notion | 简洁周报 |
| 品牌规范 | Design System | — | — | 生成 DESIGN.md |
5.3 组合技巧
先定 Design System，再选 Skill：
Design System 决定整体视觉，Skill 决定布局结构。先选好视觉风格，再选具体做什么，效果最好。
同一个需求，换 Design System 效果完全不同：
`
需求：”设计一个 AI 产品的首页”
Linear → 深蓝紫背景、几何线条、极简科技感
Airbnb → 温暖白色、圆角卡片、亲和力
Stripe → 渐变光效、精致动效、专业感
小红书 → 粉红色系、密集卡片、社交风
`
第六章：初始化问题表单
6.1 为什么会有问题表单？
Open Design 的提示词栈规定：每个新设计任务都从问题表单开始，而不是直接生成。
这是从「花叔的画术」（huashu-design）蒸馏出来的 Junior-Designer 模式：开工前一次性批量问完，尽早 show 出可见的东西，让用户用最低成本介入纠偏。
6.2 问题表单包含什么？
- 做什么：单页原型 / 营销页 / 编辑页
- 给谁看：目标受众
- 视觉风格：现代极简 / 杂志风 / 科技感 / 实验派 / 亲和力 / 奢华感（最多选 2 个）
- 品牌方向：自动选 / 自有品牌 / 参考网站
- 规模：几个板块
- 其他要求：配色、约束等
6.3 跳过问题表单
在 Prompt 里加一句：
`
直接生成，不要提问
`
或者把需求写得足够详细，Agent 会判断信息已足够，直接开始生成。
第七章：导出与继续编辑
7.1 导出格式
| 格式 | 说明 |
|---|
|—|—|
| HTML | 单文件，包含所有 CSS/JS |
|---|---|
| 打印友好的静态版本 | |
| ZIP | 完整项目目录，含 assets |
7.2 继续编辑
生成完成后，可以在聊天中继续修改：
`
“把标题改大一号”
“换成蓝色主题”
“在底部加一个 Footer”
“把卡片改成 3 列布局”
`
Agent 会基于之前的上下文继续修改 HTML。
7.3 项目持久化
Open Design 使用 SQLite 持久化：
- 项目 →
.od/projects// - 对话 →
.od/app.sqlite - 产物 →
.od/artifacts//
关掉浏览器再打开，项目和对话历史都还在。
下一篇
概念搞清楚了，下一篇我们实战：从 0 到 1 设计一个攀岩者网站的完整首页，包括需求分析、选择配置、生成、调优、导出的全流程。
发表回复