SuperAPI AI 工具集

ui-craft

设计与创作

查看项目

更新于 10-15 23:43

技能介绍

UI Craft 是一份界面实现指南,用于在缺少设计系统时提供合理的默认规范,并给出与设计系统无关的实现建议。若项目根目录存在 DESIGN.md,其令牌与规格覆盖本技能的全部默认值。

用途与理念:强调品味可通过研究优秀界面训练,细节累积形成品质,主张先确定明确的审美方向再精确执行,避免通用化、模板化的界面。

优先级顺序:可访问性为关键级,要求对比度 4.5:1、键盘导航、ARIA 语义与可见焦点环;性能为高,涉及 WebP/AVIF、懒加载、CLS 小于 0.1、仅用合成器线程的 transform 动画;排版、布局与空间同为高;颜色主题、动效交互为中;细节打磨为低。不得为低优先级牺牲关键或高优先级项。

主要能力:排版方面给出根节点字体平滑、text-wrap balance/pretty、tabular-nums、65ch 行宽与字号比例;颜色方面采用 HSL 自定义属性与语义令牌,深色模式需单独测试对比度;空间方面要求 4/8px 网格、同心圆角(外半径等于内半径加内边距)、多层阴影、44x44px 点击区域与 z-index 层级;动效方面按使用频率决定动画预算,提供自定义缓动曲线、时长参考、进出场不对称、交错入场、按压缩放与 prefers-reduced-motion 处理;组件方面建议使用 Radix UI 与 CVA,并给出按钮、卡片、对话框、表单的要点;无障碍方面优先语义化 HTML,再考虑 ARIA。

使用方式:作为技能或参考文档在实现 UI 时查阅,references/ 目录提供动画、组件模式等深入内容。

限制:具体安装命令、收费与平台信息暂未提供;文中代码示例仅为规范示意,实际项目需结合自身设计系统。