SuperAPI AI 工具集

amplitude-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 智能体的“有主见”的界面约束,用于构建 Amplitude 风格的 UI。当需要浅色模式界面、Amplitude 风格设计系统,或使用 Inter 字体与 4px 网格时适用。

主要能力与规范要点: 颜色方面,主表面应使用浅色背景,surface-base(页面背景)必须用 #000000;accent 必须用 #3151E1 用于主操作和聚焦状态;文本对比度至少保持 4.5:1。语义令牌包括 surface-base #000000、surface-raised #FFFFFF(卡片、弹窗)、surface-overlay #EFF0F4(遮罩、提示、下拉)、text-primary #171717、text-2 #383838、text-secondary #BBBBBB、border-default #3A3A3A、accent #3151E1。

排版:必须使用 Inter 作为主字体族;主标题用 58px/700,正文用 23px/500;标题用 text-balance,正文用 text-pretty;数字数据用 tabular-nums;未明确要求时不得改动 letter-spacing。

间距与边框:必须使用 4px 网格,默认元素间距 4px;不得使用任意间距值。圆角取自 1px、2px、3px、5px、6px、12px、18px、25px,胶囊元素建议 25px+,默认圆角 25px;边框宽度限 1px、2px、4px。

布局与交互:按 1920px 基准视口设计;全屏高度用 h-dvh 而非 h-screen;固定元素要尊重 safe-area-inset;正方形元素用 size-*。聚焦态必须用 2px accent 描边并带 2px offset,不得移除焦点指示;禁用态用 opacity:0.5 与 cursor:not-allowed;破坏性操作必须用 AlertDialog;加载态建议用结构化骨架;错误须显示在操作发生处;图标按钮必须加 aria-label。

动画与性能:未明确要求不得添加动画;只动画 transform 与 opacity;交互反馈不超过 200ms;尊重 prefers-reduced-motion;不要动画大面积 blur() 或 backdrop-filter,也不要在非活动动画外使用 will-change。

限制:资料未提供安装命令、具体平台支持与收费信息。