关于 design-flow
design-flow 是用于规划无障碍交互流程的设计技能，涵盖多种输入方式与反馈。它输出流程图、输入方式矩阵、焦点顺序、目标尺寸和反馈规范。
主要功能
- 01梳理流程中的用户交互
- 02规划键盘、指针、触控和语音输入
- 03定义焦点顺序与弹窗行为
- 04指定交互目标尺寸和间距
- 05规划视觉及屏幕阅读器反馈
适用场景
- 01设计无障碍多步骤表单
- 02检查任务是否支持无鼠标操作
- 03规定加载、错误和成功状态的反馈
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/design-flow确认已加载。
详细介绍
设计包容性互动流程
设计一套全新的互动流程，从一开始就支持多种输入方式并提供无障碍反馈，而不是事后补救。
流程
步骤 1：识别所有互动
列出流程中用户必须采取行动的每个环节：
- 点击／轻触按钮
- 输入文本
- 进行选择
- 在步骤之间导航
- 拖动、滑动或做手势
- 响应提示词
步骤 2：分配输入方式
使用 multi-modal-input，为每个互动指定至少三种输入方式：
- 键盘：哪些按键或快捷键可以触发该操作？
- 指针／触控：目标尺寸和间距是多少？
- 语音（适用时）：使用什么命令触发该操作？
标记任何只能通过一种输入方式使用的互动。
步骤 3：设计键盘层
使用 keyboard-navigation，定义：
- 所有交互元素的 Tab 顺序
- 对话框、下拉菜单和动态内容的焦点管理
- 跳过链接和地标导航
- 常用操作的键盘快捷键（注明快捷键）
步骤 4：指定目标尺寸
使用 touch-target-design，指定：
- 所有交互元素的最小尺寸
- 相邻目标之间的间距
- 移动设备上主要操作的拇指活动区域位置
步骤 5：设计反馈
使用 feedback-and-status，为每个互动指定：
- 用户看到的内容（视觉反馈）
- 屏幕阅读器播报的内容（文本替代）
- 成功、错误和加载状态下的表现
- 如何结合颜色、图标和文本提供反馈
输出
提交一份互动规范，其中包括：
- 标出互动节点的流程图
- 输入方式矩阵（任务 × 输入方式）
- 焦点顺序图
- 目标尺寸标注
- 每个互动的反馈规范
评论
支持 Markdown