SuperAPI AI 工具集

ui-polish

通用与其它

查看项目

更新于 10-15 19:52

技能介绍

用途:当界面功能可用却仍显得未完成、且没有单一维度明显出错时,用该技能做收尾打磨。核心判断是:缺失的通常是一个状态,而不是一个数值。

主要能力:先做状态扫描,再处理光学微调、发丝线与光标等细节。每个可交互元素应具备 rest、:hover、:focus-visible、:active、:disabled 五个状态,异步操作还需 loading 处理;正文内链接不需要独立的 :active。光学居中优于数学居中,例如带尾部图标的按钮图标侧内边距少 2px(pl-4 pr-3.5),播放三角向尖端偏移 2px,但对称字形在对称盒中应先测量。发丝线采用三级阶梯(#f2f2f2、#ededed、#d9d9d9),在 192dpi 以上以 0.5px 渲染,通过 --border-hairline 变量回退到 1px。光标应匹配行为:可点击元素用 pointer,输入框整个包裹层用 text,拖拽时在 body 上设置光标。遮罩使用多段缓动渐变而非两段,优先用 mask-image。列表悬停应在组上处理,将其他行调暗至 opacity: .3。选区与光标全局设置一次,控件外壳用 user-select: none。页面入场动画只播放一次,参考实现为 8px translateY 加 500ms 淡入,每元素错开 50ms,总错开不超过 400ms。

使用方式:先找到项目存放交互状态的位置,如组件层、data-state 约定(Radix、Base UI)、cva/tv 变体映射或全局样式表,把缺失状态放到同类状态所在处。完整扫描参考 references/checklist.md,特定形状或标签对的光学微调参考 references/optical-corrections.md。

适用场景:已完成组件或页面的收尾检查、状态矩阵补全、光学与发丝线修正。

限制:阴影、圆角、高度、模糊、间距、密度、断点属于其他技能;焦点环构造属于 a11y,文本选区颜色属于 color。输出以状态矩阵呈现,每行一个可交互元素,破折号表示缺陷,n/a 表示可辩护的决定。具体安装命令与收费信息暂未提供。