用途:为 React Web UI 设计或改进空状态,让零数据、无内容界面变成能教学、引导并推动用户下一步操作的产品时刻。它专门针对零数据和无内容界面;更广泛的激活策略、首次运行教育、引导和采用规划应使用 onboard 技能。
主要能力:识别空状态类型,包括首次使用/从未创建内容、搜索或筛选无结果、内容已被清空、权限/访问受限、已有界面内加载错误,以及 401、403、404、429、500、503 等路由级或整页失败。围绕“这个区域是做什么的、为什么有用、主要 CTA、可选模板/示例、哪些非活动界面元素应暂时消失”来组织设计。
使用方式:必须先阅读 frontend-design 并遵循其 Context Gathering Protocol,复用已有上下文,只询问关键缺口,并额外收集用户应从该界面获得的价值。随后评估空状态、规划结构、按类型构建,并验证质量。
适用场景:首次使用、无结果、内容已清空、权限受限和错误状态。不同状态需采用不同语气和恢复路径:瞬时失败重试、会话过期重新登录、403 请求访问、404 返回首页或搜索、更广泛服务失败查看状态或联系支持。
限制与要求:不要留下“无项目”且没有下一步的界面;不要仅因完整 UI 通常有这些控件就保留非活动控件;不要让插图压过信息和 CTA;不要对首次使用、权限和错误使用相同语气;有更具体恢复路径时不要用通用错误页。插图或图标可选,但 CTA 应强于装饰。验证维度包括清晰度、价值说明、下一步、界面清理和语气匹配。资料未提供具体代码示例、安装命令、收费或平台信息。