SuperAPI AI 工具集

awwwards-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:为 AI 智能体提供一套带有强制程度的约束规则,用于构建 Awwwards 风格的浅色模式界面与设计系统。

主要能力:定义颜色语义令牌(如 surface-base #E4E4E4、surface-raised #2F2E30、text-primary #565656 等),要求文字对比度至少 4.5:1;规定以 Inter 为主字体,主标题 127px/700、正文 16px/500,并使用 text-balance、text-pretty、tabular-nums;要求 4px 网格间距、默认 5px 元素间距;边框圆角取自 2px、3px、4px、6px、7px、8px、9px,默认 7px,边框宽度统一 1px;布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。

交互与动画:焦点使用 2px 强调色 #5E6AD2 轮廓与 2px offset;禁用态 opacity 0.5 且 cursor: not-allowed;破坏性操作使用 AlertDialog;仅动画 transform 与 opacity,交互反馈不超过 200ms,尊重 prefers-reduced-motion;图标按钮需 aria-label。

使用方式:作为技能规则文件与对应的 DESIGN.md 配合使用,漂移扫描器会读取两者动态提取令牌,不硬编码数值。

限制:资料未提供安装命令、收费方式与具体平台支持信息;部分规则(如输入框高度 0px)为特定约束,需按实际场景判断。