ux-flow

UX 流程设计器

适用场景

当你需要遵循成熟的 UX 模式来设计用户流程和导航结构时，使用此技能。

不适用场景

• 实现单个页面 → 流程确定后使用 /ss-page
• 编写各步骤的文案 → 结构确定后使用 /ss-copy
• 设计整个产品的信息架构 — 先将范围缩小到一个流程
• 制作高保真模型 — 此技能生成的是流程图，而非像素级设计

设计用户流程：$0 描述：$ARGUMENTS

说明

1. 阅读设计系统参考资料：

   • CLAUDE.md，了解组件清单
   • DESIGN-LANGUAGE.md，了解布局模式（第 13-14、19-20 节）
   • components/patterns/，查看可用的构建模块

2. 应用以下 UX 原则：

信息架构

• 渐进式披露：每个步骤只显示必要内容。通过合理的逐层深入来隐藏复杂信息。
• 米勒定律：将信息分组，每组最多包含 5-9 项。
• 希克定律：尽量减少每个屏幕上的选项。选项越少，决策越快。

导航模式

• 中心辐射式：仪表板 → 详情页 → 返回仪表板（移动应用的默认模式）
• 线性流程：第 1 步 → 第 2 步 → 第 3 步（适用于表单、引导流程、结账）
• 标签导航：通过 BottomNav 访问 3-5 个顶层版块

屏幕流程规则

• 每个流程都必须有明确的入口和明确的出口
• 从主屏幕到达任何关键功能最多点击 3 次
• 始终提供返回导航（根屏幕除外）
• 错误状态必须提供恢复路径（重试、返回、联系支持）
• 加载状态必须使用骨架屏（卡片中不得使用旋转加载图标）

页面布局（参见 DESIGN-LANGUAGE.md）

• 遵循信息金字塔：主视觉 → KPI 网格 → 详情 → 列表
• 每个屏幕都应回答一个主要问题
• 首屏可见区域：展示最重要的指标或操作
• 使用 4 种版块类型：整卡（A）、网格（B）、轮播（C）、主视觉（D）

3. 输出格式：

   • 使用 ASCII 绘制流程图，展示屏幕之间的连接
   • 列出屏幕清单，说明每个屏幕的用途和关键组件
   • 列出每个屏幕的边缘情况（空状态、错误、加载）
   • 使用 PageShell、TopBar、BottomNav 模式搭建页面框架

4. 按照 /ss-page 规范生成实际页面文件。

示例

用户请求：

遵循成熟的 UX 模式来设计用户流程和导航结构。

限制

• 仅当任务明确符合其上游来源和本地项目上下文时，才使用此技能。
• 应用更改前，请验证命令、生成的代码、依赖项、凭据和外部服务行为。
• 不要将示例视为环境特定测试、安全审查或破坏性或高成本操作的用户批准的替代品。

执行边界

本指南面向现有的 StyleSeed 项目。此单文件入口中并未包含所列项目路径、组件、令牌和 /ss-* 命令。编辑前，请查找实际项目根目录并验证这些前置条件；若缺少资源，应如实说明，不要凭空编造。使用宿主环境支持的调用方式，并遵循现有项目规范。布局数值属于设计系统的选择，并非普适的可用性保证。请在实际界面中测试键盘访问、响应式溢出和减少动态效果的设置。