SuperAPI AI 工具集

vercel-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 智能体的、带有明确倾向性的界面约束规范,用于构建 Vercel 风格的浅色模式界面与设计系统。适用时机包括构建浅色界面、创建 Vercel 风格设计系统,以及使用 Inter 字体和 4px 网格实现 UI。

主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件与交互等层面的具体规则。颜色方面要求主表面使用浅色背景,页面背景用 #F9F9F9,主操作与焦点状态用 #000001,文字对比度至少 4.5:1。语义令牌给出 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、accent 等十六进制与用途。排版要求以 Inter 为主字体,主标题 44px/extra_bold,正文 29px/700,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,且不得擅自修改字距。间距必须使用 4px 网格,默认元素间距 5px,禁止任意值。边框圆角取自 5px、6px、7px、22px、23px 尺度,默认 23px,胶囊元素用 22px 以上。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需尊重 safe-area-inset。交互上要求焦点使用 2px 强调色描边与 2px 偏移,禁用态用 opacity 0.5 与 not-allowed,破坏性操作使用 AlertDialog,图标按钮加 aria-label,禁止阻止粘贴。动画仅在明确要求时添加,只动 transform 与 opacity,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。

使用方式与限制:资料未提供安装命令或具体调用步骤,暂未提供。该技能为约束性指南,不包含可执行代码;部分规则为 SHOULD 建议而非强制,实际落地需结合项目情况判断。