Back to Details

ss-flow

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UX Flow Designer

UX流程设计师

When NOT to use

不适用于以下场景

  • For implementing a single page → use 
    /ss-page
    after the flow is settled
  • For copy on each step → use 
    /ss-copy
    after the structure is settled
  • For information architecture of an entire product — narrow scope to one flow first
  • For high-fidelity mockups — this produces a flow map, not pixel-perfect designs
Design a user flow: $0 Description: $ARGUMENTS
  • 实现单个页面 → 待流程确定后使用 
    /ss-page
  • 为每个步骤撰写文案 → 待结构确定后使用 
    /ss-copy
  • 设计整个产品的信息架构 — 先将范围缩小到单个流程
  • 制作高保真原型 — 此工具生成的是流程图，而非像素级完美设计
设计用户流程：$0 描述：$ARGUMENTS

Instructions

操作说明

  1. Read the design system reference:
    • CLAUDE.md
      for component inventory
    • DESIGN-LANGUAGE.md
      for layout patterns (sections 13-14, 19-20)
    • components/patterns/
      for available building blocks
  2. Apply these UX principles:
  1. 阅读设计系统参考文档：
    • CLAUDE.md
      ：组件清单
    • DESIGN-LANGUAGE.md
      ：布局模式（第13-14、19-20节）
    • components/patterns/
      ：可用构建模块
  2. 应用以下UX原则：

Information Architecture

信息架构

  • Progressive Disclosure: Show only what's needed at each step. Hide complexity behind logical drill-downs.
  • Miller's Law: Chunk information into groups of 5-9 items maximum.
  • Hick's Law: Minimize choices per screen. Fewer options = faster decisions.
  • 渐进式披露：每个步骤仅展示必要信息，通过合理的层级展开隐藏复杂性。
  • 米勒定律（Miller's Law）：将信息分组，每组最多5-9个条目。
  • 希克定律（Hick's Law）：最小化每个屏幕的选项数量。选项越少，决策速度越快。

Navigation Patterns

导航模式

  • Hub & Spoke: Dashboard → detail pages → back to dashboard (default for mobile apps)
  • Linear Flow: Step 1 → Step 2 → Step 3 (for forms, onboarding, checkout)
  • Tab Navigation: 3-5 top-level sections via BottomNav
  • 中心辐射式（Hub & Spoke）：仪表盘 → 详情页 → 返回仪表盘（移动应用默认模式）
  • 线性流程：步骤1 → 步骤2 → 步骤3（适用于表单、引导流程、结账流程）
  • 标签导航：通过BottomNav设置3-5个顶级板块

Screen Flow Rules

屏幕流规则

  • Every flow must have a clear entry point and clear exit point
  • Maximum 3 taps to reach any key feature from the home screen
  • Back navigation must always be available (except root screens)
  • Error states must provide recovery paths (retry, go back, contact support)
  • Loading states must use skeleton screens (never spinners in cards)
  • 每个流程必须有清晰的入口点和清晰的出口点
  • 从主屏幕到任何核心功能最多需要3次点击
  • 返回导航必须始终可用（根屏幕除外）
  • 错误状态必须提供恢复路径（重试、返回、联系支持）
  • 加载状态必须使用骨架屏（卡片中绝不使用加载动画）

Page Composition (from DESIGN-LANGUAGE.md)

页面构成（来自DESIGN-LANGUAGE.md）

  • Follow the Information Pyramid: Hero → KPI Grid → Details → Lists
  • Each screen should answer ONE primary question
  • Above the fold: the most important metric or action
  • Use the 4 section types: Full Card (A), Grid (B), Carousel (C), Hero (D)
  1. Output format:
    • Flow diagram in ASCII showing screen connections
    • Screen inventory listing each screen's purpose and key components
    • Edge cases (empty states, errors, loading) for each screen
    • Scaffolded pages using 
      PageShell
      , 
      TopBar
      , 
      BottomNav
      patterns
  2. Generate the actual page files using 
    /ss-page
    conventions.
  • 遵循信息金字塔：Hero区域 → KPI网格 → 详情 → 列表
  • 每个屏幕应回答一个核心问题
  • 首屏内容：最重要的指标或操作
  • 使用4种板块类型：全卡片（A）、网格（B）、轮播（C）、Hero区域（D）
  1. 输出格式：
    • ASCII流程图：展示屏幕间的连接关系
    • 屏幕清单：列出每个屏幕的用途和核心组件
    • 边缘情况：每个屏幕的空状态、错误状态、加载状态
    • 框架化页面：使用
      PageShell
      、
      TopBar
      、
      BottomNav
      模式
  2. 使用
    /ss-page
    规范生成实际页面文件。