交互状态检查
让每个操作在静止、交互中和完成后都提供清晰反馈。状态集合取决于控件行为:没有异步动作的链接不需要 loading,没有禁用语义的控件不应凭空添加 disabled。
1. 建立控件清单
列出按钮、链接、表单控件、切换器、可点击卡片或行、选项卡、侧栏、面包屑、菜单、折叠面板、对话框和其他自定义控件,并记录真实行为。
2. 检查适用状态
- Default:静止时能识别为可交互元素,不依赖 hover 才显形。
- Hover:指针设备上有一致反馈;不要只降低透明度造成“已禁用”错觉。
- Active / pressed:操作触发时有即时反馈,且不会与选中状态混淆。
- Disabled:只在业务确实禁止操作时使用,同时表达原因并阻止事件;不要只改颜色。
- Focus:键盘焦点清晰可见,优先
:focus-visible;删除默认轮廓时必须提供等效或更强替代。 - Loading:异步操作期间防止重复提交、显示进度并在成功或失败后恢复。
3. 过渡与减少动效
微交互通常使用约 0.15–0.3s,进入或退出可稍长;具体值应复用设计 token。动效不得拖慢操作,且应尊重 prefers-reduced-motion。不要为了“更有质感”给所有控件添加位移或缩放。
4. 行为反馈
提交、保存、删除、筛选和切换必须产生可见结果。成功、失败和字段校验信息要与触发操作关联;当前页面、选中项、活动筛选和排序状态也要可识别。
5. 输出或修复
用户只要求检查时,按控件列出缺失状态、行为风险和修复建议。获准修改时复用已有 token,补全必要状态,并用键盘、指针、触屏和减少动效模式重新走一遍关键路径。
示例
输入:“检查 Save 按钮的交互状态并补齐。”
**输出:**保留默认样式,增加与设计系统一致的 hover 和 pressed 反馈、可见 :focus-visible、提交期间 disabled + loading、成功与失败消息,并验证重复点击不会触发二次提交。
来源与许可
本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布,详见 LICENSE.txt。