SuperAPI AI 工具集

resend-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

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

主要能力与约束: 颜色方面,主表面必须使用深色背景(亮度小于 20),页面背景必须为 #060606(surface-base),建议调色板不超过 5 种颜色,文字对比度至少 4.5:1。语义令牌包括 surface-base #060606、surface-raised #1D1D1D、text-primary #6E6E6E、text-2 #BBBBBB、border-default #191919。 排版方面,主字体必须为 Inter,建议单一字体族;主标题必须为 88px/700,正文必须为 18px/400;字重仅限 bold、regular、medium;标题用 text-balance,正文用 text-pretty;数字数据建议用 tabular-nums;除非明确要求,不得修改字距。 间距必须使用 4px 网格,建议使用 4px、5px、13px、19px、22px、60px 的刻度,默认元素间距 5px,禁止任意间距值。圆角必须使用 15px 刻度,边框宽度建议限 2px、3px,元素分隔建议用 1px 细边框。布局以 1920px 为基准视口,全屏高度禁止用 h-screen 而用 h-dvh,固定元素须尊重 safe-area-inset,方形元素建议用 size-*。 交互方面,焦点必须使用 2px 强调色 #5E6AD2 轮廓与 2px outline-offset,禁止移除焦点指示;禁用态用 opacity 0.5 与 cursor: not-allowed;破坏性操作必须用 AlertDialog;加载态建议用结构骨架屏;错误须显示在操作发生处;禁止阻止输入框粘贴;纯图标按钮必须加 aria-label。 动画方面,除非明确要求否则不加动画;只动画 transform 与 opacity 等合成属性,禁止动画布局属性;入场建议 ease-out,交互反馈不超过 200ms,须尊重 prefers-reduced-motion。性能上禁止动画大面积 blur() 或 backdrop-filter,禁止在非活动动画上使用 will-change,禁止用 useEffect 表达可用渲染逻辑实现的内容。

使用方式与限制:资料未提供安装命令、调用方式或具体代码示例,暂未提供。以上为设计约束参考,实际落地需结合具体项目。