Open Design Docs
设计体系
了解设计体系的作用，以及如何在 Open Design 中使用它保持风格一致。
左侧导航里的「设计体系」用于管理 Open Design 生成内容时参考的品牌和界面规则。它也常被叫做「设计系统」。对用户来说，它最大的价值是：不用每次都重新解释颜色、字体、按钮样式和页面气质。
设计体系
设计体系是一套可复用的视觉和界面规则，可以理解为「品牌和界面风格的说明书」。它通常包含品牌颜色、字体、按钮样式、页面间距、组件样式、Logo 使用方式和页面气质。
当你希望多次生成的页面、PPT、图片或培训材料看起来像同一套视觉风格，就需要设计体系。它会帮助 Open Design 少走弯路，减少「每次风格都不一样」的情况。
使用前，可以准备产品截图、品牌文档、官网链接、已有前端项目，或者用一句话描述品牌风格。不确定时，先使用默认设计体系，后续再根据真实结果补充。
什么时候需要设计体系
以下场景建议使用设计体系：
- 生成官网、落地页、产品页面，希望看起来符合品牌
- 生成多张图片、多页 PPT 或多个页面，希望风格一致
- 根据已有产品界面继续扩展新页面
- 多个项目都需要保持统一风格
如果只是临时尝试，也可以先跳过设计体系，后续再补。
设计体系能影响什么
设计体系会影响生成结果的整体视觉风格，包括：
- 颜色：例如主色、辅助色、背景色
- 字体：例如标题和正文的风格
- 间距：例如页面留白、卡片间距、按钮大小
- 组件：例如按钮、输入框、卡片、导航栏等常见元素
- 品牌感：例如整体是科技感、商务感、年轻化，还是更克制稳重
它不会替你决定具体业务内容。你仍然需要告诉 Open Design 要生成什么、给谁看、重点是什么。
新建设计体系的完整流程
在左侧导航的「设计体系」页面中，可以新建设计体系。当前欢迎页主要负责「连接」和「关于你」，设计体系可以在进入主页后再补充。新建的目的不是马上做一个完美规范，而是先让 Open Design 根据你提供的品牌、产品、截图或文件，生成一套可以继续调整的设计体系草稿。
开始前先准备这些材料
如果只是想快速试用，准备一句品牌描述就可以开始。
如果希望结果更接近真实产品，建议再准备 2 到 5 张产品截图、官网截图、品牌手册、Logo、常用页面或活动物料。资料越接近真实业务，生成出来的设计体系越稳定。
1. 打开新建入口
- 点击左侧导航里的「设计体系」
- 找到「Create new design system」或「新建设计体系」入口
- 点击右侧的「Create」或「创建」按钮
- 进入新建页面后，会看到「Describe your brand or product」输入区，以及添加资料的区域
有些版本在设置面板里也能看到「添加设计系统」。如果从设置进入，点击后同样会进入新建设计体系流程。
2. 填写品牌或产品描述
「Describe your brand or product」是必填内容。这里不是写一句口号，而是告诉 Open Design：这是一个什么产品、给谁用、整体感觉应该是什么样。
可以按这个格式写：
这是一个面向企业客户的协作工具，主要帮助管理项目、沉淀文档和跟进任务。
整体风格希望简洁、专业、可信，不要太活泼。
页面通常需要清晰的信息层级、明显的主按钮、适合后台系统的表格和卡片。
如果是后台工具，可以这样写：
这是日常使用的运营管理系统，用户主要是运营、销售和管理人员。
界面需要稳定、清楚、适合长时间使用。
颜色不要太花，按钮和表单要容易识别，页面信息密度可以适中偏高。
3. 选择要补充的资料
新建页面里会有「Add source material」区域。这里的资料是可选的，但非常建议补充。
| 入口 | 适合放什么 | 非技术用户怎么选 |
|---|---|---|
| GitHub repo | 前端代码仓库 | 不熟悉代码时不用自己填，让熟悉代码的人提供仓库地址 |
| Link local code | 本机项目文件夹或代码文件 | 需要从已有产品代码提取风格时使用，通常找技术人员协助 |
| Upload .fig | Figma 文件 | 如果设计师给了 .fig 文件，可以上传 |
| Add assets | Logo、截图、图片、品牌文档、CSS、素材 | 非技术用户最常用，优先上传截图和品牌资料 |
source material
Source material 可以理解为「参考资料」。它不是最终设计体系本身，而是 Open Design 用来学习风格的材料。
这些材料会帮助 Open Design 判断品牌颜色、字体感觉、按钮样式、卡片样式、页面留白和整体气质。没有参考资料也能生成，但结果会更像通用风格。
使用前，可以准备产品截图、官网页面截图、Logo、品牌手册、PPT 模板、活动页截图或设计文件。不确定上传什么时，先上传最能代表产品风格的截图。
4. 常见新建方式怎么选
| 你的情况 | 推荐方式 | 原因 |
|---|---|---|
| 只是第一次试用 | 填一段品牌描述，不上传资料 | 最快开始，先熟悉流程 |
| 有真实产品截图 | 填品牌描述，再用 Add assets 上传截图 | 对非技术用户最友好，也最容易得到接近产品的风格 |
| 有品牌手册或 Logo | 上传品牌文档、Logo 和几张页面截图 | 有助于识别颜色、字体和品牌调性 |
| 有 Figma 文件 | 使用 Upload .fig | 适合已经有设计稿的情况 |
| 有前端仓库 | 使用 GitHub repo 或 Link local code | 适合从真实产品代码中提取组件和样式 |
5. 开始生成
- 填完品牌或产品描述后，确认资料已经添加到页面里
- 点击「Continue to generation」或「继续生成」
- 页面会提示大约需要几分钟
- 点击「Generate」或「生成」
- 保持页面打开，等待 Open Design 创建设计体系草稿
生成过程中可以先做其他事情，但不要关闭 Open Design。设计体系通常不是立刻完成的，它需要读取你提供的资料并整理成规则。
6. 检查草稿
生成完成后，会进入「Review draft design system」页面。这里可以查看 Open Design 提取出来的设计规则。
重点检查这些内容：
| 检查项 | 看什么 |
|---|---|
| 颜色 | 主色、背景色、强调色是否接近真实品牌 |
| 字体和排版 | 标题、正文、按钮文字是否符合产品气质 |
| 组件 | 按钮、卡片、输入框、导航是否像真实产品 |
| 页面气质 | 是偏正式、活泼、科技感、商务感，还是后台系统感 |
| 不该出现的风格 | 是否出现了不符合品牌的颜色、装饰或过度营销感 |
如果发现不合适，不要急着重新建。可以在设计体系项目里继续说明修改要求，例如：
这套设计体系太像营销官网了，请改得更像后台系统。
减少大面积渐变，增加清晰表格、筛选区、状态标签和克制的按钮样式。
7. 发布并设为默认
草稿确认可用后，可以做两件事：
| 操作 | 作用 | 什么时候点 |
|---|---|---|
| Published | 发布这套设计体系 | 确认后续项目可以使用时打开 |
| Make default | 设为默认设计体系 | 希望后续新项目优先使用它时点击 |
发布后，创建新项目时就可以选择这套设计体系。设为默认后，后续生成更容易自动参考它。
不要把敏感信息放进设计体系
设计体系只需要品牌和界面风格，不需要真实客户数据、账号、密钥、合同、敏感价格或其他敏感业务信息。
上传截图前，如果里面有客户姓名、手机号、金额、密钥或真实订单信息，请先打码或换成示例数据。
在生成内容时使用设计体系
创建项目时，如果界面提供「风格」或「设计体系 / 设计系统」选项，可以选择对应设计体系。选择后，Open Design 会在生成内容时参考它。
例如可以这样写需求：
按照设计体系，做一个面向企业客户的产品介绍页。整体要简洁、可信，突出效率提升和协作。
多个设计体系怎么选
如果有多个品牌、产品线或活动风格，可以创建多个设计体系。
选择时可以按下面方式判断：
- 做官网或品牌内容：选择主设计体系
- 做某条产品线：选择对应产品线的设计体系
- 做临时活动：选择活动专用设计体系
- 不确定时：选择默认设计体系，或让 Open Design 自动匹配
什么时候需要更新设计体系
以下情况建议更新设计体系：
- 品牌色、字体或 Logo 更新了
- 产品界面改版了
- 生成结果经常和真实产品风格不一致
- 新增了重要组件或页面样式
设计体系越接近真实产品，后续生成结果越稳定。
常见问题
| 问题 | 处理方式 |
|---|---|
| 不知道选哪套设计体系 | 先选默认或自动。生成后如果风格不对，再在当前项目里说明「请参考某某设计体系重新调整」 |
| 上传截图后风格仍不像 | 在需求里明确写「参考截图的颜色、卡片样式和模块间距」，不要只写「参考截图」 |
| 页面内容对了但风格不统一 | 继续发送修改要求：「保持当前内容，统一按钮、卡片、标题字号和留白」 |
| 以后会反复做同类页面 | 建议把这类页面风格沉淀进设计体系，后续生成会更稳定 |
还没有公开评论。你可以提交第一个问题。