用户任务流程与异常状态设计

它解决什么问题

很多产品在写第一屏代码之前，并没有把「用户怎么走」想清楚。结果是页面之间靠想当然连接，缺少空状态、错误分支和返回路径，联调时才发现漏掉的入口或无法恢复的死胡同。这个技能把这件事前置：在动手写页面之前，先定义任务流程、导航结构和异常状态。

它如何工作

• 先读设计系统：加载 CLAUDE.md 的组件清单、DESIGN-LANGUAGE.md 的布局规范（第 13-14、19-20 节），以及 components/patterns/ 下的可复用模块。
• 套用信息架构原则：渐进披露（每一步只暴露必要信息）、Miller 定律（单屏分组不超过 5-9 项）、Hick 定律（选项越少，决策越快）。
• 选择导航模式：以仪表盘为中心的 Hub & Spoke（移动应用默认）、表单与结账场景的线性流程、经 BottomNav 承载的 3-5 项 Tab 导航。
• 校验屏幕规则：入口与出口必须明确、从首页到关键功能不超过 3 次点击、返回路径始终可用、错误状态必须给出重试/返回/求助的恢复路径、加载状态用骨架屏而非卡片里的 spinner。
• 按信息金字塔构图：Hero → KPI Grid → Details → Lists，每屏只回答一个问题，首屏放置最重要的指标或操作，并落到 A（整卡）、B（网格）、C（轮播）、D（Hero）四类区块。
• 产出可执行交付物：ASCII 流程图、屏幕清单（用途与关键组件）、每屏的边缘场景，以及基于 PageShell、TopBar、BottomNav 的页面脚手架，再按 /ss-page 约定生成实际文件。

适用边界与注意点

它产出的是流程地图，不是高保真设计稿；单个页面与文案应分别交给 /ss-page 和 /ss-copy；当需求涉及整个产品的信息架构时，先把范围收窄到一条流程。生成结果需要结合本地上下文核验命令、代码与依赖，并通过环境相关的测试与安全评审后再落地。