Purposeful guidance shown when a view has no content yet
视图还没有内容时，给出有目的的引导
also called也叫
blank state, zero state, first-use state, no-results state空白状态、零状态、首次使用状态、无结果状态
If you called it…如果你管它叫……
“the screen shown when there is nothing here”「什么都没有时显示的那个界面」
“the panel before the user creates their first item”「用户还没创建第一项内容前的面板」
“the no results message with a button”「带个按钮的「没有结果」提示」
“the blank list explanation”「空列表里的说明文字」
“what to show instead of an empty white box”「与其摆个空白框，不如显示点什么」
No projects yet
Untitled projectjust now
1 project
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
1State 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" 的空状态插画，烘托「没有内容」的状态，但不充当标签
2Recovery 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.
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:
# Empty State · 空状态 Empty State
UI reference — https://K3tty5555.github.io/LearnUI_PM/web/empty-state/
**Purposeful guidance shown when a view has no content yet**
视图还没有内容时，给出有目的的引导
**Also called / 也叫:** blank state, zero state, first-use state, no-results state / 空白状态、零状态、首次使用状态、无结果状态
## 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 fragment: an aria-hidden="true" empty-state illustration that reinforces the missing-content state without becoming the label
2. **Recovery action · 恢复操作** (`<button>`)
“The button that gets me out of the blank screen” is the recovery action.
「带我走出空白屏的那个按钮」就是恢复操作。
Prompt fragment: the primary <button> recovery action in the empty state, resolving why the view has no content
## Prompt / 提示词
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 / 调试提示词
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 / 代码里叫什么
- **HTML** `<section>`
- **ARIA** `aria-labelledby`
- **ARIA** `role="status"` — for a dynamically produced no-results message / 用于动态产生的无结果消息
