mcpField
U
ux-flow-auditor

ux-flow-auditor

github.com/heyeddi-com设计与 UI088 次安装1 天前更新
代码仓库

关于 ux-flow-auditor

ux-flow-auditor 是用于追踪任务流程并记录交互阻碍的技能，帮助团队检查任务是否符合点击次数预算。它通过 JSON 流程定义生成报告和截图，产物保存在 `.heyeddi/` 下。

主要功能

  1. 01用 JSON 定义任务流程
  2. 02借助 Playwright 追踪交互
  3. 03检查任务点击次数预算
  4. 04生成报告和截图
  5. 05在 `.heyeddi/` 记录阻碍

适用场景

  1. 01测量更改设置所需的点击次数
  2. 02检查上线后的任务易用性
  3. 03比较桌面端与移动端流程
  4. 04验证任务是否符合验收点击预算

安装

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

$npx skills add https://github.com/heyeddi-com/heyeddi-skills --skill ux-flow-auditor

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

manifest.json
context/
ANTI_PATTERNS.md
EXAMPLES.md
PROSE_ANTI_SLOP.md
VOCABULARY.md
reference/
cross-pillar-handoff.md
subagents.md
scripts/
_heyeddi_paths.py
_skill_cli.py
init_ux_flows.py
README.md
trace_flow.py

详细介绍

UX 流程审计员

以任务为导向的 UX：完成目标需要点击多少次，用户会在哪里受阻。

所有产物都放在 .heyeddi/docs/ 和 .heyeddi/audits/ 下：切勿放在仓库根目录。

跨支柱同步（必须）

阅读 reference/cross-pillar-handoff.md。每次流程追踪都要前后衔接：

@heyeddi  load_workflow_context --route /path
trace_flow …
update ux-flows report + friction notes
@heyeddi  append_pillar_opinion --pillar ux …
→ @heyeddi-product updates AC if needed; @heyeddi-design notes layout friction

适用场景

  • “更新设置需要点击多少次？”
  • 发布后的易用性检查
  • 对比桌面端与移动端流程（使用单独的流程 JSON 或视口）
  • 产品验收：任务在点击次数预算内完成

子 Agent（默认）

参见 reference/subagents.md。通过 Task shell 运行 trace_flow.py（需要开发服务器和 Playwright）。

流程

init_ux_flows          → ux-flows.md index + example .flow.json
define steps in ux-flows/<task>.flow.json
trace_flow --task-id   → ux-flows/<task>.md + audit screenshot
agent adds friction notes to report

说明

  1. 确保 .heyeddi/product.md 定义了用户任务（可选上下文）。
  2. 每个项目运行一次 python scripts/init_ux_flows.py --project-root <root>。
  3. 添加或编辑 .heyeddi/docs/ux-flows/<task-id>.flow.json，并填写步骤（expect、fill、click）。
  4. 启动开发服务器；如果地址不是 http://localhost:5173，请设置 DEV_SERVER_URL。
  5. python scripts/trace_flow.py --task-id <id> --project-root <root> --check
  6. 在生成的 Markdown 报告中追加阻碍说明。

流程 JSON 架构

{
  "task_id": "update-profile",
  "goal": "User saves profile",
  "start_route": "/settings",
  "max_clicks": 4,
  "viewport_width": 1440,
  "steps": [
    { "action": "expect", "selector": ".settings .p-inputtext", "label": "Form visible" },
    { "action": "fill", "selector": ".settings input >> nth=0", "value": "Alex", "label": "Name" },
    { "action": "click", "selector": "button:has-text('Save')", "label": "Save" }
  ]
}

.heyeddi/ 输出

路径用途
.heyeddi/docs/ux-flows.md任务、预算和最近一次运行的索引
.heyeddi/docs/ux-flows/<task>.flow.json机器可读的步骤
.heyeddi/docs/ux-flows/<task>.md人类可读的报告和阻碍说明
.heyeddi/audits/ux-flow/步骤截图

链路

  • 在 @heyeddi-handoff / @heyeddi-design 之后：验证任务能否完成
  • @visual-auditor：布局证明；此技能：交互证明
  • @engineering-excellence：关注点不同（代码结构）

评论

支持 Markdown