资源 / 设计系统

设计系统,
已为你的 AI Agent 做好准备.

探索配色方案、字体排印、组件、布局和完整的设计指南。比较视觉方向,了解其规则,并将合适的参考应用到下一个项目中。

152 现有指南126 新指南DESIGN.md + 令牌参考

探索设计系统与视觉风格

278 个目录条目

从参考到界面

使用设计系统构建界面

01

比较完整的设计系统

不要只看强调色。还要根据你正在构建的界面类型,比较字体、间距、组件和布局。

02

阅读并分享指南

为 AI Agent 提供设计规则和明确的任务说明。将源文件与项目现有约束放在一起。

03

扩展前先检查

在整个项目中采用这一设计方向前,请检查真实内容、组件状态、键盘操作和窄屏表现。

形成自己的设计语言

用 OpenDesign 提取设计系统

从喜欢的网站,或已经完成的设计出发。把其中的视觉选择整理成可查看、可调整、可反复使用的设计系统。

网站与设计画布汇入一份整理好的配色、字体、间距和组件规范。

从网页中提取

在设计系统中添加网站链接。OpenDesign 会读取可获取的页面样式与素材,整理配色、字体和可复用的设计规范。查看提取结果,再和 Agent 一起完善。

从已有设计中提取

在项目的「更多」菜单中选择「创建设计系统」。OpenDesign 会基于现有文件新建设计系统项目,再由 Agent 归纳其中的视觉规则、组件与设计模式。

让一次设计成为下一次的起点

查看设计规范、样式 Token 与 UI 预览。完善生成的资源包,再把它作为下一次设计的起点。

  • DESIGN.md
  • CSS / Tokens
  • UI Kit

衔接你的工作流

让设计系统融入你的工作流

使用 OpenDesign 构建

让你的设计系统焕发生机.

选择一份指南,为 AI Agent 提供清晰的任务说明,然后使用 OpenDesign 构建下一个界面。