mcpField
S
ss-flow

ss-flow

github.com/bitjaru设计与 UI993827 次安装1 天前更新
代码仓库

关于 ss-flow

ss-flow 是用于规划单条用户流程的 StyleSeed UX 设计技能，可生成页面脚手架。它依据项目设计规则梳理屏幕结构、导航和边界状态。

主要功能

  1. 01优先解析注册表制品
  2. 02生成 ASCII 流程图
  3. 03列出屏幕用途与组件
  4. 04规划空、错误和加载状态
  5. 05生成页面脚手架

适用场景

  1. 01规划引导或结账流程
  2. 02在实现页面前确定屏幕关系
  3. 03为错误和空状态设计恢复路径

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bitjaru/styleseed --skill ss-flow

安装后在 Claude Code 中输入/ss-flow确认已加载。

详细介绍

执行此工作流前，请先完成每次会话仅需执行一次的 更新预检。

UX 流程设计师

以注册表为先的产物边界

当 .styleseed/project.json 和 .styleseed/artifacts/index.json 存在时，请先解析请求的产物 ID，然后只读取 .styleseed/bundles/<artifact-id>.md 和 .styleseed/manifests/<artifact-id>.json。对于使用注册表的项目，绝不回退到全局旧版 bundle。只有在不存在注册表时，旧版项目才可以使用 .styleseed/effective-rules.md。

不适用场景

  • 实现单个页面 → 流程确定后使用 /ss-page
  • 编写每个步骤的文案 → 结构确定后使用 /ss-copy
  • 设计整个产品的信息架构——请先将范围缩小到单个流程
  • 制作高保真样机——本工具生成流程图，而非像素级设计

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

说明

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

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

  2. 应用以下 UX 原则：

信息架构
  • 渐进式披露：每个步骤只显示所需信息。将复杂内容隐藏在符合逻辑的深入浏览中。
  • 认知负荷：围绕用户的决策对信息分组；分组应由已确定的语法和内容密度决定，而非采用一刀切的项目数量。
  • 希克定律：尽量减少每个屏幕上的选项，同时保留产品真实的任务词汇。
导航模式
  • 中心辐射式：仪表板 → 详情页面 → 返回仪表板（移动应用的默认模式）
  • 线性流程：第 1 步 → 第 2 步 → 第 3 步（适用于表单、引导流程、结账）
  • 导航：使用已确定的界面适配器；BottomNav 只是可选的移动端模式之一。
屏幕流程规则
  • 每个流程都必须有明确的入口和明确的出口
  • 关键功能应根据产品和平台，通过适当的步骤数即可到达；不要强行规定统一的点击次数。
  • 始终提供返回导航（根屏幕除外）
  • 错误状态必须提供恢复路径（重试、返回、联系支持）
  • 加载状态必须使用骨架屏（卡片中绝不使用加载转圈图标）
页面构成（摘自 DESIGN-LANGUAGE.md）
  • 遵循所选输出语法的信息层级；不要将「主视觉区 → KPI 网格 → 详情 → 列表」模板套用于无关产品。
  • 任务需要时，每个屏幕都应回答一个主要问题。
  • 首屏可见区域：最重要的指标或操作
  • 使用 4 种区块类型：整卡（A）、网格（B）、轮播（C）、主视觉区（D）

  1. 输出格式：

    • 使用 ASCII 绘制流程图，展示屏幕之间的连接关系
    • 列出屏幕清单，说明每个屏幕的用途和关键组件
    • 列出每个屏幕的边界情况（空状态、错误、加载）
    • 使用由产物适配器和语法选定的原语搭建页面框架

  2. 按照 /ss-page 约定生成实际页面文件。

评论

支持 Markdown