SuperAPI AI 工具集

figma-ui-skills

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:这是一套面向 AI 智能体的、有明确取舍的约束,用于构建 Figma 美学风格的界面。适用场景包括浅色模式界面、Figma 风格设计系统,以及使用 Inter 字体和 4px 网格的 UI。

主要能力与规范: 颜色:主表面使用浅色背景,页面背景必须为 #FFFFFF(surface-base),主操作与聚焦状态必须使用 #BEBAF6(accent);文字对比度至少 4.5:1。语义令牌包含 surface-base #FFFFFF、surface-raised #3A28FA、surface-overlay #E7E7E7、text-primary #545454、text-2 #262626、text-tertiary #656565、border-default #4D3ECF、accent #BEBAF6。 字体:主字体必须为 Inter,标题用 57px/extra_bold,正文用 36px/700;标题用 text-balance,正文用 text-pretty,数字用 tabular-nums;不得擅自修改字间距。 间距与边框:必须使用 4px 网格,默认元素间距 5px,不得使用任意值;圆角取 3px、4px,默认 3px;边框统一 1px。 布局:以 1920px 为基准视口;全屏高度不用 h-screen 而用 h-dvh;固定元素遵循 safe-area-inset;方形元素用 size-*。 交互与组件:聚焦必须使用 2px accent 描边加 2px offset,不得移除聚焦指示;破坏性操作使用 AlertDialog;加载用骨架屏;图标按钮加 aria-label;禁用态 opacity 0.5 且 cursor:not-allowed。 动画:未明确要求不得添加;只动 transform/opacity,反馈不超过 200ms,进场用 ease-out,尊重 prefers-reduced-motion。性能上不要在动画中使用大面积 blur/backdrop-filter,不要滥用 will-change。

使用方式:作为参考约束在构建相关界面时遵循即可。

限制:资料仅给出设计规范,未提供安装命令、代码示例或平台支持信息,暂未提供。