Empty State 空状态 Empty State web
Purposeful guidance shown when a view has no content yet
视图还没有内容时，给出有目的的引导
No projects yet
1 project
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 State illustration状态插画
aria-hidden="true"“The quiet picture showing what this empty area is for” is the state illustration.
「那张安静的插画，告诉你这块空地是干嘛的」就是状态插画。
Prompt fragmentPrompt 片段an aria-hidden="true" empty-state illustration that reinforces the missing-content state without becoming the label
一张 aria-hidden="true" 的空状态插画，烘托「没有内容」的状态，但不充当标签
-
2 Recovery action恢复操作
<button>“The button that gets me out of the blank screen” is the recovery action.
「带我走出空白屏的那个按钮」就是恢复操作。
Prompt fragmentPrompt 片段the primary <button> recovery action in the empty state, resolving why the view has no content
空状态里的主要 <button> 恢复操作，解决视图为空的问题
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Create an empty state as a labelled <section> with a simple icon, a one-line explanation of why the view is empty, and one primary action that resolves it. For a dynamically produced no-results state, announce the message with role="status" without moving focus.
把空状态做成一个带标签的 <section>：一个简洁图标、一句解释为什么是空的话、一个能解决问题的主动作。动态产生的无结果状态，用 role="status" 播报消息，但不移动焦点。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my empty state. Rule out: the empty state flashing before data arrives because loading and truly-empty are one boolean; errors rendering the empty state instead of an error state; the call-to-action unreachable by keyboard; layout jumping when real content replaces it because heights were never reserved. The symptom:
调试我的空状态。排查：数据到达前空状态一闪而过——加载中和真空共用一个布尔值；出错时渲染成空状态而不是错误状态；行动号召按钮键盘到不了；真实内容替换空状态时布局跳动，因为没预留高度。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | <section> | |
| ARIA | aria-labelledby | |
| ARIA | role="status" | for a dynamically produced no-results message用于动态产生的无结果消息 |