SuperAPI AI 工具集

dribbble-ui-skills

设计与创作

查看项目

更新于 10-16 06:17

技能介绍

用途:为使用 AI 代理构建 Dribbble 风格界面提供倾向性约束规范,适用于浅色模式界面、Dribbble 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI。

主要能力: 颜色:页面背景(surface-base)用 #000000,主要操作与聚焦态(accent)用 #F2B5D7;另提供 surface-raised #FEFEFD、surface-overlay #1B1B1C、text-primary #5C5B60、text-secondary #797886、text-tertiary #9E9EA7、border-default #0C110F、destructive #ECC6B6、warning #FEFEFD 等语义令牌;文本对比度须达 4.5:1。 排版:主字体必须为 Inter,主标题 42px/700,正文 14px/300,标题用 text-balance、正文用 text-pretty,数值数据用 tabular-nums,未经明确要求不得修改字距。 间距与边框:间距使用 4px 网格,默认间距 4px,取值限 1–8px;圆角取自 1、2、3、4、5、6、7、9、14、15、16、19、22、23px 标度,默认 14px,胶囊元素 22px+,边框宽度限 1px、5px。 布局:以 1920px 为基准视口,固定元素需尊重 safe-area-inset,全屏高度用 h-dvh 而非 h-screen,正方形元素用 size-*。 交互:聚焦态用 accent 色 2px 轮廓并偏移 2px,不得移除聚焦指示;禁用态透明度 0.5 并使用 cursor: not-allowed;破坏性操作须用 AlertDialog;加载态用骨架屏;图标按钮须加 aria-label;不得阻止输入框粘贴。 动画:除非明确要求否则不加动画;仅动画 transform 与 opacity,交互反馈不超过 200ms,入场用 ease-out,尊重 prefers-reduced-motion。 性能:不对大范围 blur() 或 backdrop-filter 做动画,不在非活动动画上使用 will-change,不用 useEffect 表达可渲染逻辑。

使用方式与限制:作为 AI 代理的设计约束参考套用;资料未提供具体安装命令、集成步骤或平台信息。

适用场景:浅色模式界面、Dribbble 风格设计系统、Inter 字体与 4px 网格实现。

限制:文档标注当前检测到约 40 种颜色与 6 种字重,建议精简;具体命令、收费与运行环境暂未提供。