帮助中心创建与复用设计系统

创建与复用设计系统

把品牌参考整理成颜色、字体和组件规范,再在创作时选择它,让不同项目保持一致。

准备能说明品牌的参考资料

从首页侧边栏打开 Design systems,点击 Create。先添加参考资料,再生成:可以填写网站或 GitHub 链接、选择品牌参考、添加文件,或直接描述品牌。创建界面提示单个文件上限为 12 MB。请使用你有权提供给所选服务的资料。

先给足参考;视觉素材可以和明确的文字要求一起使用。

已有书面规范时,可以粘贴 DESIGN.md;也可以复制已有设计系统作为起点。补充不能改变的内容,例如品牌色、标题字体、标志留白或组件交互。

从代码或 Figma 提取参考

展开 Advanced,可以添加 GitHub 仓库、本地代码、.fig 文件或 Figma 文件链接。选择与组件相关的源码和资源,不要把无关项目目录一起提交。

Figma 链接是参考来源,不代表所有私有文件都能读取。访问失败时,可提供有权限使用的 .fig 本地副本或清晰截图。支持读取 Figma 参考,不等于支持直接导出原生 Figma 文件。

生成后检查并调整规范

  1. 检查来源资料,点击 Generate。等待提取或生成结束,再检查设计系统。
  2. 对照参考检查预览和 DESIGN.md,重点核对颜色、字号、间距和组件规则,补齐遗漏、消除冲突。
  3. 修改 DESIGN.md 后保存。如果继续让 AI 调整规范,发布前再次核对生成结果。

规范要能指导后续项目:每种颜色用在哪里,标题和正文分别用什么字体,按钮、表单和不同状态怎么表现。只有几张好看的参考图,还不足以说明这些规则。

发布后,在创作中选择它

  1. 检查完成后,通过 Published 控件发布。草稿用于继续检查;希望其他项目使用时,需要先发布。
  2. 回到首页或项目的设计系统选择器,选择目标系统,并确认预览内容正确。
  3. 描述要创作的内容及重点规则。生成后逐项对照设计系统,有偏差时继续提出具体修改。

保存规范、发布系统和应用到项目是三个动作。设计系统发生变化,不代表已有作品已经重新生成;需要回到对应项目检查结果。

制作界面可继续阅读原型创作;已有 HTML 的小范围调整见画布编辑。

找不到系统或无法修改时

先检查当前工作区,以及系统是否已发布。个人资源与团队资源可能不同;同事同步来的副本也可能只读。修改源规范或发布状态时,需要由所有者或有相应权限的账号操作。

提取失败时,核对链接、文件大小和访问权限;移除无法读取的来源,或换成有权限的本地资料后再试。保存失败时,离开页面前先复制保留修改后的规范。在 OpenDesign 中发布,不会自动把修改推送回 GitHub。