SuperAPI AI 工具集

woostack-flow-layout

设计与创作

查看项目

更新于 10-22 17:59

技能介绍

用途 woostack-flow-layout 用于把多步骤用户流程、界面序列和 UI 旅程整理成标准化、可读性强的空间布局。它只负责布局规则,实际执行由调用方提供的工具环境承担。

主要能力

  1. 流程分组与标题层级:一个流程一个父分组,流程标题置于步骤序列上方,描述紧接标题下方;分叉行和说明都包含在父分组内。
  2. 主序列:主步骤从左到右按顺序横向排列,相邻步骤之间保持统一的相对横向间距。保持现有画面尺寸、宽高比和视觉样式,不缩放、不改样式、不改内部内容。为每个实际屏幕画面提供能明确外边缘的帧级背景;若已有背景已能界定屏幕边缘则保持不变,且不为此类背景加到流程分组、行、标题、描述、标签或画布区域上。
  3. 分支与分叉:备选路径、错误分支和分叉放在源序列正下方的独立横向行中;分叉行按源步骤在流程中的先后自上而下排序,同一源步骤的分叉保持原有相对顺序,嵌套分叉位于其自身源序列下方。相同阶段或结果按含义而非行内位置对齐到同一列。分叉首帧若有等价步骤则用该步骤所在列,否则正对分支源步骤下方。后续帧按主序列节奏从左到右延续,跳过步骤留空列,分支专属步骤跨相关行保留列位;等价步骤对齐优先于统一间距。源序列与各分叉行之间保持明确的相对纵向间距。每个分叉首屏左侧紧邻放置简短的分支条件或触发说明,说明在屏幕帧之外并预留空间,不使屏幕偏离对齐列。
  4. 多流程排列:同一画布上的多个流程纵向堆叠,并为每个分叉行留出间隔,流程之间不重叠。

使用方式 命令:/woostack-flow-layout [target] 将上述布局标准应用到目标流程。

适用场景 适用于需要梳理多步骤界面流程、界面序列、分支路径和 UI 旅程的设计或整理工作,尤其适合需要统一布局规范、便于横向阅读与对比的流程图整理。

限制 仅采用相对布局,不依赖固定数值尺寸或像素坐标;除必要的屏幕帧背景外,不改变颜色、字体、画面尺寸或现有视觉外观;不创建箭头、连接线或链接矢量;不包含工具专属 API、MCP 绑定、平台插件、脚本、模板或外部资源。