SuperAPI AI 工具集

deel-ui-skills

设计与创作

查看项目

更新于 10-16 06:17

技能介绍

用途:Deel UI Skills 是一套带有明确约束的界面设计规范,供 AI 代理在构建 Deel 风格外观的界面时参考,适用场景包括浅色模式界面、Deel 风格设计系统,以及使用 Inter 字体和 4px 网格的 UI 实现。

主要能力与规范: 颜色方面,主表面应使用浅色背景,页面背景必须使用 #FDFDFD(surface-base),主操作与焦点状态必须使用 #A2CDFB(accent),建议精简色板(目前检测到 32 种颜色),文字对比度至少保持 4.5:1。语义令牌包括 surface-raised #141414、surface-overlay #000000、text-primary #909090、text-secondary #C4C4C4、text-tertiary #344C65、border-default #86ADD7、warning #907848。 字体必须使用 Inter,主标题 53px/700,正文 15px/400,标题使用 text-balance、正文使用 text-pretty,数字建议使用 tabular-nums,非明确要求不得修改字距。 间距必须基于 4px 网格,默认元素间距建议 2px,不得使用设计比例之外的任意值。 边框圆角须取自给定比例(如 0px 至 23px),默认 3px,胶囊元素建议 22px 以上,边框宽度限制为 1px 或 2px。 布局以 1920px 为基准视口,全屏高度不得使用 h-screen 而应使用 h-dvh,固定元素须考虑 safe-area-inset,方形元素建议使用 size-*。 组件与交互:幽灵按钮背景透明、文字 #344C65;焦点必须使用 2px accent 轮廓并带 2px offset,不得移除焦点指示;禁用态使用 opacity: 0.5 与 cursor: not-allowed;破坏性操作须使用 AlertDialog;加载使用结构骨架屏;错误须就近展示;不得阻止输入框粘贴;纯图标按钮须有 aria-label。动画非明确要求不得添加,只可动画 transform 与 opacity,不得动画布局属性,入场建议 ease-out,交互反馈不超过 200ms,并尊重 prefers-reduced-motion。性能上不得动画大面积 blur 或 backdrop-filter,不得在动画外使用 will-change。

限制:资料未说明具体安装方式、依赖、授权与维护信息,暂未提供。