SuperAPI AI 工具集

surfaces

通用与其它

查看项目

更新于 10-15 19:52

技能介绍

用途:定义界面“视觉平面”,即高度层级、阴影配方、边框与细线(hairline)的取舍、圆角、模糊与半透明、背景分层。核心主张是每个边界只用一种分隔手段:细线、阴影或背景明度差,绝不叠加两种。默认用细线,成本最低且在任何背景上都成立;只有元素需要读作“抬起”并跨越混合或图片背景时才升级为阴影;只有内容确实从下方穿过时才用半透明。

主要能力:管理单一主题内的高度阶梯,共四级 flat / soft / regular / strong,组件只选层级、不写字面阴影值;区分“阴影负责抬起、边框负责分隔”,分隔线、表格网格线、吸顶头部规则保留真实线条,表单字段保留可见边缘以满足可访问性;嵌套圆角按 innerRadius = outerRadius − padding 推导,间距超过 24px 时例外;背景平面最多三层 base / raised / overlay;半透明仅用于内容会从其下滚过的界面元素,且不得叠加两层半透明、不得把品牌色放在半透明层;提供 prefers-reduced-transparency 与 prefers-contrast 回退。

使用方式:先阅读项目已有的深度系统(Tailwind @theme、:root 自定义属性、生成的 token 文件、styled-components 主题对象),在既有阶梯上增加一级,而不是在调用处写一次性 box-shadow。输出时先以令牌形式定义阶梯再引用,例如 :root 中定义 --elevation-flat、--elevation-regular、--elevation-regular-hover,组件使用 box-shadow: var(--elevation-regular),过渡限定为 box-shadow 150ms ease-out。提出改动时说明所选层级与理由。

适用场景:设计系统与组件库的深度令牌建设、卡片/菜单/弹层/对话框等抬起元素、分隔线与表单边缘、玻璃拟态与材质效果、暗色模式下的高度表达(暗色主题由 dark-mode 技能负责,本技能不派生第二主题)。

限制:细线的具体灰度与设备像素渲染属于 ui-polish;令牌命名约定属于 design-tokens;本技能不生成第二主题。拟物材质仅在隐喻本身携带信息时才值得使用。资料未提供具体安装命令、平台与收费信息。