交互状态检查

让每个操作在静止、交互中和完成后都提供清晰反馈。状态集合取决于控件行为：没有异步动作的链接不需要 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。