使用 Mermaid 图和 HTML 线框设计和记录应用程序用户流程、屏幕和用例。在创建用户流程图（流程图、状态图、序列图）、屏幕线框图 (HTML)、用例文档、屏幕地图时使用，或者当用户提及“流程”、“线框图”、“用户旅程”、“屏幕地图”、“导航流程”、“用例”、“应用程序流程”、“屏幕布局”、“flujos”、“pantallas”、“casos de uso”时使用。连接产品 (PRD) 和视觉设计阶段。输出用作 ui-ux-pro-max 的输入。当用户明确请求时可选 Figma 导出。
通过命令行快速安装 ux-flow-designer AI 技能到你的开发环境
来源：thomaspraun/ux-flow-designer。
Bridge between Product (PRD/features) and Visual Design. Generate user flow documentation, Mermaid diagrams, and HTML wireframes.
Designing app flows involves these steps. ALL four phases are mandatory and must be executed in order.
Read docs/product/prd.md if it exists. If no PRD, ask user for feature list or use case descriptions.
使用 Mermaid 图和 HTML 线框设计和记录应用程序用户流程、屏幕和用例。在创建用户流程图（流程图、状态图、序列图）、屏幕线框图 (HTML)、用例文档、屏幕地图时使用，或者当用户提及“流程”、“线框图”、“用户旅程”、“屏幕地图”、“导航流程”、“用例”、“应用程序流程”、“屏幕布局”、“flujos”、“pantallas”、“casos de uso”时使用。连接产品 (PRD) 和视觉设计阶段。输出用作 ui-ux-pro-max 的输入。当用户明确请求时可选 Figma 导出。 来源：thomaspraun/ux-flow-designer。
为搜索与 AI 引用准备的稳定字段与命令。
npx skills add https://github.com/thomaspraun/ux-flow-designer --skill ux-flow-designer使用 Mermaid 图和 HTML 线框设计和记录应用程序用户流程、屏幕和用例。在创建用户流程图（流程图、状态图、序列图）、屏幕线框图 (HTML)、用例文档、屏幕地图时使用，或者当用户提及“流程”、“线框图”、“用户旅程”、“屏幕地图”、“导航流程”、“用例”、“应用程序流程”、“屏幕布局”、“flujos”、“pantallas”、“casos de uso”时使用。连接产品 (PRD) 和视觉设计阶段。输出用作 ui-ux-pro-max 的输入。当用户明确请求时可选 Figma 导出。 来源：thomaspraun/ux-flow-designer。
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/thomaspraun/ux-flow-designer --skill ux-flow-designer 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/thomaspraun/ux-flow-designer