用 AI 为 UI 组件快速补全四种关键反馈状态
解决 UI 开发中常见的“仅关注理想路径（Happy Path）”问题：通过 AI 自动识别数据依赖区域，并为每个组件补全加载、空状态、错误和成功四种核心反馈状态。
为什么需要这个技能
在快速迭代产品时，开发者往往只关注数据加载成功后的界面，而忽略了异步请求过程中的用户体验。当网络延迟、接口报错或数据为空时，如果界面没有任何反馈，用户会感到困惑甚至认为应用已崩溃。
本技能通过一套成熟的 UX 准则，引导 AI 将这些被遗忘的边缘场景（Edge Cases）转化为具体的代码实现，确保产品在任何状态下都能提供清晰的沟通和恢复路径。
适用场景
- 组件或页面需要从后端获取、修改或依赖异步数据时。
- 当前 UI 流程仅实现了成功路径，缺乏加载动画或错误提示。
- 列表、卡片或详情页需要更专业的空状态（Empty State）引导。
- 需要在产品中快速建立统一的成功确认（Toast）或错误恢复机制。
核心工作流
AI 将遵循以下四个核心状态的构建准则：
- 加载中 (Loading)：使用与最终布局匹配的骨架屏（Skeletons），避免在卡片内部滥用加载图标，且在响应速度极快时适当延迟显示以防止闪烁。
- 空状态 (Empty)：提供友好的解释及明确的下一步操作指引。即使数值为零，也应有合理的渲染方式而非直接消失。
- 错误处理 (Error)：使用通俗易懂的语言描述失败原因，并尽可能提供恢复操作。将错误范围局部化，避免因单个卡片报错导致整个页面不可用。
- 成功反馈 (Success)：针对已完成的操作使用轻量级的 Toast 提示。对于可逆的破坏性操作（如删除），必须提供“撤销”选项。
下载和安装
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐