用途:empty-state 专注于零数据与无内容界面的设计或改进,让空白区域承担教学、引导和推动用户进入下一步的作用。它不负责更广泛的激活策略、首次运行教育、引导流程或采用规划,那些属于 onboard 技能的范围。
主要能力:区分多种空状态类型,包括首次使用/从未创建内容、搜索或筛选无结果、内容已被清空、权限/访问受限、已有界面内加载内容出错,以及 401、403、404、429、500、503 等路由级或整页失败。围绕“这个区域是做什么的、为什么有用、下一步做什么”组织内容,并审计无效界面元素,例如尚不起作用的标签页、筛选器、侧边栏、排序控件或空工具栏。
使用方式:用户以 /empty-state 启动工作流。技能激活后需加载 $frontend-design,其中包含设计原则、反模式与上下文收集协议;若尚无设计上下文,必须先加载 $setup。同时需收集用户应从该界面获得的价值。若无法从代码库推断信息,应直接向用户询问。
设计结构:说明区域用途、说明价值、主行动按钮、可选模板或示例,以及当前应隐藏的非活动界面元素。针对首次使用、无结果、内容已清空、权限受限和错误分别给出不同处理:首次使用解释将出现什么并提供最清晰的起始动作;无结果说明查询或筛选未产生内容并提供清除筛选或扩大搜索等恢复动作;内容清空使用更轻的语气并提供返回创建的路径,必要时加入撤销;权限状态说明限制、谁能授权或需要什么角色,并提供申请访问路径;错误状态用简单语言说明失败原因,并按失败类型匹配恢复路径,如瞬时失败重试、会话过期重新登录、403 申请访问、404 返回首页或搜索、更广泛服务故障查看状态或联系支持。
限制与注意:插图或图标可选,仅在有助于理解或吸引注意时使用,且行动按钮应强于装饰。不要只显示“无项目”而没有下一步,不要保留无作用的控件,不要让插图压过信息与行动按钮,不要对首次使用、权限和错误使用相同语气,也不要在有更具体恢复路径时使用通用错误页。验证时检查清晰度、价值说明、下一步是否明显、无效界面是否清理以及语气是否匹配场景。