SuperAPI AI 工具集

monzo-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:为 AI 智能体提供一套有明确取舍的约束,用于构建模仿 Monzo 审美的浅色模式界面与设计系统。

主要能力与规则: 颜色:主界面用浅色背景,页面背景必须用 #FFFFFF(surface-base);提供 surface-raised #C1C5C8、surface-overlay #DEDEDE、text-primary #606366、text-2 #494D50、text-secondary #BEC4C7、border-default #8A8D8F、destructive #ED4948;文字对比度至少 4.5:1。 排版:主字体必须用 Inter,尽量单一字体;主标题 48px/700,正文 21px/extra_bold;标题用 text-balance,正文用 text-pretty,数字用 tabular-nums;未经明确要求不得修改字距。 间距:必须用 4px 栅格,默认元素间距 5px,禁止任意间距值。 边框:圆角取 3px、4px、6px、16px、25px,默认 16px,胶囊元素用 25px+,边宽统一 1px。 布局:以 1920px 基准视口设计;全屏高度用 h-dvh 而非 h-screen;固定元素尊重 safe-area-inset;方形元素用 size-*。 交互状态:聚焦用 2px 强调色 #5E6AD2 外框并带 2px outline-offset,不得移除聚焦指示;禁用态 opacity 0.5 且 cursor: not-allowed;破坏性操作使用 AlertDialog;加载用结构骨架屏;错误就近展示;不得阻止输入框粘贴;纯图标按钮必须加 aria-label。 动画与性能:非明确要求不加动画;只动画 transform 与 opacity,不超过 200ms,入场用 ease-out,尊重 prefers-reduced-motion;不动画布局属性,不动画大面积 blur/backdrop-filter,will-change 仅用于活动动画。

使用方式:将上述约束作为 AI 生成 UI 时的规范依据,按浅色模式、Inter、4px 栅格实施。

适用场景:构建浅色模式界面、Monzo 风格设计系统、Inter+4px 栅格 UI。

限制:资料未提供安装命令、具体平台与收费信息;色板与字号来源为检测结果,部分颜色(如 #F0F1EE、#723C7E)与正文用色存在差异,需按语义令牌为准。