SuperAPI AI 工具集

mixpanel-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 代理的强制约束型设计指南,用于构建受 Mixpanel 视觉风格启发的浅色界面与设计系统。适用于浅色模式界面、Mixpanel 风格设计系统、Inter 字体与 4px 网格的实现。

主要能力:提供颜色与语义令牌规范,包含 surface-base #F4F3F4、accent #201757、destructive #FAAEA0 等定义及用途;排版上要求 Inter 为唯一主字体,主标题 62px/700,正文 15px/400,标题用 text-balance、正文用 text-pretty,数字用 tabular-nums;间距必须使用 4px 网格,默认元素间隔 3px;边框圆角限定在给定刻度内,默认 3px,胶囊元素用 21px 以上;布局以 1920px 为基准视口,全屏高度用 h-dvh 而非 h-screen,固定元素需考虑 safe-area-inset。交互上要求焦点用 2px accent 描边加 2px offset,禁用态 opacity 0.5 与 cursor: not-allowed,破坏性操作使用 AlertDialog,图标按钮加 aria-label,错误提示就近展示,不得阻止粘贴。动画仅限 transform 与 opacity,不超过 200ms,遵循 prefers-reduced-motion。

使用方式:在构建 Mixpanel 风格界面时引用这些约束即可;具体安装命令与集成步骤暂未提供。

限制与注意:要求减少色板(资料称检测到 32 色)、减少字重(检测到 5 种);文字对比度需至少 4.5:1;资料中部分数值存在异常(如输入框高度为 0px),实际使用需谨慎核对;未提供具体框架、组件库或代码示例。