SuperAPI AI 工具集

emil-design-engineering

设计与创作

查看项目

更新于 10-16 06:14

技能介绍

用途:这是一套面向 Web 界面的设计工程检查与实践指南,用于在构建或评审界面时统一检查结构、交互、可访问性、视觉细节与性能,尤其适合组件级和小范围的“打磨”场景。也可用于表单与控件、触摸设备、键盘导航、排版、Markdown 类营销页等主题。

主要能力:先选范围——做整体设计工程检查时,阅读与当前界面相关的参考文件;组件或局部“感觉不对”时读取 focused-polish.md,并尽量把修改限制在局部,除非问题源自共享 token、基础组件或布局规则。涉及动效时以其引用的 canonical-policy.md 为准,并可按需转向动画、CSS 动画、动画性能、动画可访问性等主题。快速参考覆盖聚焦打磨、动画、UI 打磨、表单与控件、触摸与可访问性、组件设计、营销页与性能。

核心原则:动态元素不应造成布局偏移,使用固定尺寸与 tabular-nums,避免悬停或选中时改变字重;触摸优先、悬停增强,触摸设备禁用悬停效果,目标尺寸满足 WCAG 并可向 44px 靠拢,核心功能不依赖悬停;键盘 Tab 导航稳定、只遍历可见元素并用 scrollIntoView() 滚入视野;默认可访问性,动效支持 prefers-reduced-motion,图标按钮有 aria 标签,交互元素有焦点状态;速度优先于炫技,高频交互跳过动画,营销页可更丰富。

决策与检查:高频动效不做动画;用户触发的交互用 ease-out(150-250ms);页面过渡 300-400ms 内。进入/退出用 ease-out,屏幕内移动用 ease-in-out,悬停或颜色变化用 ease,默认 ease-out。评审时检查无布局偏移、动效支持 reduced motion、指针目标满足 WCAG 2.2 AA 且触控目标接近 44px、触摸设备禁用悬停、键盘导航正常、图标按钮有 aria 标签、表单支持 Enter/Cmd+Enter 提交、输入字号 16px+ 避免 iOS 缩放、不用 transition: all、z-index 使用固定层级。

使用方式:按主题读取对应参考文件(animations、focused-polish、ui-polish、forms-controls、touch-accessibility、component-design、marketing、performance),并遵循动效政策的优先级。

限制:资料未提供安装命令、具体实现代码、平台绑定、收费或效果保证等信息,暂未提供。