SuperAPI AI 工具集

mobbin-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 代理的、带有明确约束的 Mobbin 风格 UI 设计规范。当需要构建浅色模式界面、创建受 Mobbin 启发的设计系统,或使用 Inter 字体与 4px 网格实现 UI 时,可参考本规范。

主要能力: 颜色:主表面应使用浅色背景,页面背景必须用 #FFFFFF(surface-base);建议精简色板;正文对比度至少 4.5:1。提供语义令牌,如 surface-base #FFFFFF、surface-raised #0F0F0F、surface-overlay #EEEEEF,以及 text-primary #B1B1B1、text-secondary #939393、text-tertiary #4A4A4A、border-default #DEDEDE。 排版:主字体必须为 Inter,建议仅用单一字体族;主标题必须 75px/700,正文必须 18px/400;字重限定为 bold、regular、medium;标题用 text-balance,正文用 text-pretty;数字建议用 tabular-nums;除明确要求外不得修改字距。 间距与圆角:间距必须遵循 4px 网格,建议使用 2px、3px、4px、5px、18px,元素间默认间距 5px,不得使用任意值。圆角必须来自 8px、21px、22px、28px,药丸形元素建议 21px 以上,默认 21px;边框宽度统一 1px。 布局:以 1920px 为基准视口设计;固定元素需尊重 safe-area-inset;全屏高度用 h-dvh 而非 h-screen;正方形元素建议用 size-*。 组件与状态:Ghost 按钮透明背景、文字 #4A4A4A;焦点必须用 2px 轮廓与 2px 偏移,强调色 #5E6AD2;禁用态 opacity 0.5 且 cursor: not-allowed。破坏性操作必须用 AlertDialog,加载用结构骨架,错误就近显示,不得阻止粘贴,图标按钮须加 aria-label。 动画与性能:除明确要求外不加动画;仅动画 transform 与 opacity,时长不超过 200ms 并尊重 prefers-reduced-motion;不得动画大范围 blur/backdrop-filter;不得滥用 will-change 与 useEffect。

限制:资料未提供安装命令、收费与平台信息,暂未提供。