SuperAPI AI 工具集

brex-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 智能体的设计约束技能,用于构建 Brex 风格的浅色模式界面与设计系统,核心特征为 Inter 字体与 4px 网格。

主要能力:提供颜色、语义令牌、排版、间距、边框、布局、组件与交互等规范。颜色要求主表面用浅色背景,页面背景用 #D9D1CF,主操作与焦点态用 #00070D,文字对比度至少 4.5:1。语义令牌包括 surface-base、surface-raised、surface-overlay、text-primary、text-secondary、text-tertiary、border-default、destructive、accent、warning 等,均给出 HEX 与 RGB。排版要求主字体为 Inter,主标题 68px/700,正文 24px/400,字重限 medium、bold、regular,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums,不擅自改字距。间距用 4px 网格,默认元素间距 5px。边框圆角取自 6px、7px、15px,默认 7px,边框统一 1px。布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素尊重 safe-area-inset。交互上焦点用 2px 强调色描边与 2px 偏移,禁用态 opacity 0.5 与 not-allowed,破坏性操作使用 AlertDialog,图标按钮加 aria-label,错误就近显示。动画仅在明确要求时添加,只动 transform 与 opacity,交互反馈不超过 200ms,尊重 prefers-reduced-motion。

使用方式与限制:资料未提供安装命令或具体调用步骤,暂未提供。该技能为约束性指南,需结合具体实现使用;资料未说明收费、价格、平台与效果。