---

name: ux-feedback description: "为 StyleSeed 组件和页面添加加载、空状态、错误和成功反馈状态，配合实用的移动优先规则。" category: design risk: safe source: community source_repo: bitjaru/styleseed source_type: community date_added: "2026-04-08" author: bitjaru tags: [ux, states, loading, error-handling, styleseed] tools: [claude, cursor, codex, gemini]

UX 反馈

概述

作为 StyleSeed 的一部分，此技能确保依赖数据的 UI 不会止步于正常路径。它添加了每个严肃产品都需要的四种核心反馈状态：加载、空状态、错误和成功。

使用场景

• 当组件或页面获取、修改或依赖异步数据时使用
• 当流程当前仅渲染成功路径时使用
• 当卡片、列表或页面需要更好的状态通信时使用
• 当产品需要清晰的恢复和确认行为时使用

四种必需状态

加载

使用与最终布局匹配的骨架屏。避免在卡片内使用加载动画，除非模式确实需要。稍微延迟骨架屏显示以避免快速响应时的闪烁。

空状态

提供友好的说明和下一步操作。零值应仍然有意义地渲染，而不是消失。

错误

使用通俗易懂的失败消息，并尽可能提供恢复选项。如果页面其余部分仍可工作，将失败局限于受影响的卡片或区域。

成功

对已完成的操作使用 Toast 或等效的轻量级确认。为可逆的破坏性更改添加撤销功能。

输出

返回：

1. 识别出的数据依赖区域
2. 为每个区域添加的加载、空状态、错误和成功状态
3. 创建的任何可复用的空状态或 Toast 模式
4. 分析、重试或无障碍方面需要的后续工作

最佳实践

• 使加载占位符与真实布局匹配
• 尽可能隔离部分失败
• 使恢复操作明显可见，而非隐藏在日志或开发者工具中
• 谨慎但清晰地使用成功反馈

附加资源

• StyleSeed 仓库
• 源技能

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为特定环境验证、测试或专家审查的替代品。
• 如果缺少所需的输入、权限、安全边界或成功标准，请停下来要求澄清。