SuperAPI AI 工具集

gusto-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:为 AI 智能体提供构建 Gusto 风格界面时参考的设计约束,适用于浅色模式界面、Gusto 风格设计系统,以及使用 Inter 字体和 4px 网格的 UI。

主要能力:给出颜色、字体、间距、边框、布局、交互与动画等方面的规则。颜色方面要求主背景与主操作、聚焦状态使用 #116D6C,语义令牌包括 surface-base #116D6C、surface-raised #FFFFFF、surface-overlay #063E82、text-primary #606060、text-secondary #717171、text-tertiary #898989、border-default #E3ECED、accent #116D6C、destructive #DA6966,文字对比度至少 4.5:1。字体要求以 Inter 为主,主标题 51px/extra_bold,正文 15px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums。间距使用 4px 网格,默认元素间距 5px。边框圆角取自 4px、6px、7px、9px、10px、15px、16px、22px、23px,默认 7px,胶囊元素用 22px 以上。布局按 1920px 基准视口设计,禁止用 h-screen,改用 h-dvh,固定元素尊重 safe-area-inset。

使用方式:资料称这些为具约束性的指南,供 AI 智能体在生成 Gusto 风格界面时遵循,但未提供安装命令或调用步骤,暂未提供。

适用场景与限制:适用于浅色模式、Inter 字体、4px 网格的 Gusto 风格界面设计。交互上要求破坏性操作使用 AlertDialog,聚焦用 2px 强调色描边和 2px 偏移,禁用态 opacity 0.5 与 cursor not-allowed,仅图标按钮需 aria-label,加载用骨架屏;非明确要求不加动画,只动 transform 与 opacity,交互反馈不超 200ms,尊重 prefers-reduced-motion。资料未提供官方安装方式、授权或价格信息。