SuperAPI AI 工具集

convex-ui-skills

设计与创作

查看项目

更新于 10-16 06:17

技能介绍

用途:这是一套面向 AI 智能体的“约束型”设计规范,用于构建 Convex 风格界面。适用于深色模式界面、Convex 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI 实现。

主要能力与规范: 颜色:主表面须为深色(明度低于 20,检测值 6),页面背景 surface-base 为 #0F0F0F,强调色 accent 为 #214AE8,文本对比度至少 4.5:1,建议精简调色板(检测到 31 种颜色)。语义令牌包括 surface-raised #262523、surface-overlay #F2EAD3、text-primary #676151、text-secondary #403D37、text-tertiary #515151、border-default #3A3934、destructive #4F3727、warning #F2EAD3。 排版:须以 Inter 为主字体并保持单一字体家族;主标题 40px/semi_bold,正文 21px/400;标题用 text-balance,正文用 text-pretty,数字建议 tabular-nums;未经明确要求不得改动字距。 间距与边框:须使用 4px 网格,建议从 1–8px 尺度取值,默认元素间距 5px,不得使用任意值;圆角取自 1、3、4、6、7、10、13、15、18、21、50、54px(默认 3px,21px+ 用于胶囊形),边框宽度限 1px、2px。 布局:以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素须考虑 safe-area-inset,正方形元素用 size-*。 交互与动画:焦点须用 2px 强调色描边并带 2px offset,不得移除焦点指示;破坏性操作须用 AlertDialog;加载用结构骨架屏;错误就近显示;不得阻止粘贴;纯图标按钮须有 aria-label。未明确要求不得加动画,仅可动画 transform 与 opacity,入场用 ease-out,反馈不超过 200ms,尊重 prefers-reduced-motion,避免大面积 blur/backdrop-filter 动画与闲置 will-change,不用 useEffect 表达可用渲染逻辑处理的内容。

使用方式:作为 AI 智能体的参考约束,在生成或审查界面时按上述规则执行。

限制:资料未提供安装命令、授权方式、版本说明或收费信息,均暂未提供。