用途：在决定界面“如何运作”而非“长什么样”时使用，覆盖用户流程、导航与信息架构、表单与校验、状态设计、界面文案、反馈与延迟、破坏性操作、触控与小视口等。
核心原则：设计状态，而非屏幕。一个“屏幕”只是组件的某一种状态；只交付这一种状态，正是生成式 UI 看似完成、一接触真实数据就崩溃的原因。铁律：组件只有在空、加载、错误、部分状态都存在时才算完成。
主要能力与步骤：
- 先以文字画出流程：入口→步骤→成功，以及每个分支；分支清单为空说明尚未思考。先减少步骤再谈样式。
- 建立状态矩阵：区分首次使用空、无结果空、已清空空、首次加载、刷新加载、部分、可恢复错误、永久错误、权限错误、离线、数据过多、过期、成功等状态。四种空状态彼此不同，合并成一句“无数据”是最常见的偷懒。
- 表单：单列布局，标签始终可见，不用占位符当标签；在输入前展示要求；失焦时校验，出错后实时重校验，提交时聚焦首个无效字段；错误就近显示。正确设置 type、inputmode、autocomplete；验证码、PIN、卡号用 inputmode="numeric" 而非 type="number"；禁止阻止粘贴；出错不清空表单；仅在提交中禁用按钮。
- 文案：按钮命名具体动作而非抽象词；错误包含发生了什么、为什么、怎么办，不暴露状态码或堆栈；第二人称、主动语态、现在时。
- 反馈与延迟：100ms 内需有确认；100ms–1s 本地反馈；1–10s 骨架或确定性进度；10s+ 真实进度、预估与取消。乐观更新仅用于几乎总成功的操作。
- 破坏性操作：优先撤销而非确认；仅在无法撤销时确认，并写明具体后果、按钮标注动作、默认聚焦安全项；不要用 window.confirm()。
- 导航与信息架构：始终让用户知道所在位置；层级超过两层用面包屑；返回必须可用；模态、筛选、标签页、步骤应可 URL 寻址；深链需在登录后回到原资源；扁平优于深层。
- 触控与小视口：触控目标至少 44×44 CSS px，间距至少 8px，主操作位于拇指可及处，禁止仅悬停可达；底部固定栏需考虑键盘与安全区，使用 100dvh 而非 100vh。
适用场景：设计或评审任何涉及数据展示、表单输入、导航与状态处理的界面。
限制：资料未提供具体平台、收费、价格或效果数据；文中命令与代码片段应保持原样使用。