‹ 首页

ss-flow

@bitjaru · 收录于 1 周前 · 上游提交 今天

Design user flows and navigation structure following proven UX patterns

场景产品原型交互设计

适合你，如果你需要为产品设计清晰易用的用户流程和导航路径。

/ 下载安装
ss-flow.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill↓ .zip
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
Claude Code~/.claude/skills/(项目级 .claude/skills/)
Codex CLI~/.codex/skills/
Cursor自动读取上面两处目录
其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同
/ 通过 npx 安装 校验哈希
npx oh-my-skill add bitjaru/styleseed/ss-flow
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- bitjaru/styleseed/ss-flow
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify bitjaru/styleseed/ss-flow
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
–GitHub stars
~524上下文体积 · 单文件
镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · 3c5e387

UX Flow Designer

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

Instructions
  1. Read the design system reference:
  2. CLAUDE.md for component inventory
  3. DESIGN-LANGUAGE.md for layout patterns (sections 13-14, 19-20)
  4. components/patterns/ for available building blocks
  1. Apply these UX principles:
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.
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
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)
Page Composition (from 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:
  2. Flow diagram in ASCII showing screen connections
  3. Screen inventory listing each screen's purpose and key components
  4. Edge cases (empty states, errors, loading) for each screen
  5. Scaffolded pages using PageShell, TopBar, BottomNav patterns
  1. Generate the actual page files using /ss-page conventions.
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…