dont-make-me-think

别让我思考——可用性评审与重新设计

运用 Steve Krug 的《别让我思考》原则评估并改进 UI。报告本身也必须践行 Krug 的主张：易于浏览、以视觉为主、毫无赘述。人类应能在 30 秒内快速浏览完；AI Agent 应能解析报告并着手修复。

使用时机

当用户要求对截图、实时 URL 或 HTML/CSS 代码进行可用性审计、UX 评审或 UI 反馈时，触发此技能。不要将其用于视觉或品牌评审、WCAG 无障碍审计，或后端/API 评审——应将这些请求转交给其他流程。

依赖项预检（必需）

此技能仅在实时 URL路径中调用 /browse（frontmatter dependencies）。请在首次导航前运行一次：

if test -f "$HOME/.claude/skills/browse/SKILL.md"; then
  echo "browse_mode=installed browse_skill=$HOME/.claude/skills/browse/SKILL.md"
elif test -f "$HOME/.agents/skills/browse/SKILL.md"; then
  echo "browse_mode=installed browse_skill=$HOME/.agents/skills/browse/SKILL.md"
elif command -v asm >/dev/null && asm deps --help >/dev/null 2>&1; then
  asm deps discover dont-make-me-think --json || echo "discover failed; acquire still runs" >&2
  echo "browse_mode=lease"
else
  echo "Missing skill: browse. Install: asm install github:garrytan/gstack:browse -p claude -s global --yes" >&2
  echo "No asm yet: npm install -g agent-skill-manager@latest" >&2
  echo "browse_mode=none"
fi
printf 'dmmt_session=%s\n' "dont-make-me-think-$(date +%s)-$$"   # record it; reuse it verbatim

先运行安装路径测试，因为 gstack 可能会在 asm 不知情的情况下安装 /browse。

1. browse_mode=installed：读取记录的 browse_skill 路径。
2. browse_mode=lease：运行 asm deps acquire browse --session <dmmt_session> --json；直接读取返回的 skillMdPath。
3. browse_mode=none，或第 2 步失败：在错误处理部分选择 无可评审输入 行（软失败）。绝不要评审无法加载的 URL。
4. 务必在 finally 中释放。 如果执行了第 2 步，则每次到达终止结果时（包括停止），都运行一次 asm deps release --session <dmmt_session> --json。

编辑前同步仓库（必需）

以下步骤 1-4 均为只读。重新设计模式（第 5 步）会写入 UI 源文件：用户确认试运行差异后，在首次编辑前，运行 references/redesign-mode.md 中的七个仓库同步步骤（git -C "$repo"，先 stash，并记录跳过项）。如发生 rebase 冲突，运行 git -C "$repo" rebase --abort，不写入任何文件，然后停止并询问用户。绝不要强制同步。此技能不会提交任何内容。

说明

遵循此工作流，以节省 Agent 的上下文预算。每完成一步后，输出该步骤的完成报告。

1. 检查前置条件——根据“输入处理”表识别输入类型。
   • 如果未提供输入，选择错误处理中的无可评审输入行。
   • 如果评审需要加载实时 URL（没有 evidence-dir，或根据 references/orchestrated-runs.md 回退到实时 URL），运行依赖项预检。
2. 处理输入——执行对应输入类型的“输入处理”操作。
3. 评估——根据“十项评估维度”为每个适用维度打 0–10 分，并按“报告格式”标注每个问题的严重程度。如果证据不足以支持某个维度的评估，应将其标记为未评估，而不是猜测。
4. 生成报告——填写 references/report-format.md 中的模板并打印出来。如果指定了 output-dir，还要将报告写入 <output-dir>/usability-review.md。
5. 重新设计（可选）——仅当用户要求修复时，运行重新设计模式。

前置条件

需要一个可评审的输入；仅实时 URL 需要 /browse；只有重新设计模式需要 UI 文件写入权限。

输入处理

输入类型	操作
截图/图像	直接评审。若需获取精确的配色、尺寸或密度数据，或需处理多张图像，请运行 python3 scripts/process_screenshots.py <image_path> [--recursive]（references/screenshot-processing.md）
实时 URL	按照“使用实时网站”中的说明使用 /browse
Orchestrator evidence-dir	评审其中的 page.html + screenshots/，而不是使用 /browse；说明未测试的交互
HTML/CSS/JS 代码	阅读代码，重点关注用户体验
线框图/模型图	关注信息架构，而非视觉润色
口头描述	先提出澄清问题

所有数值结论都必须使用脚本标准输出中的 JSON。切勿将视觉估算当作测量结果。

检查线上网站

1. 使用 /browse 导航到页面，并以 1280 px 宽度截取整页屏幕截图。
2. 点击或悬停主行动号召、主导航，以及一个表单字段（如果有）。记录每项的作用。
3. 将页面宽度设为 375 px 并截取屏幕截图。如果无法设置宽度，将第 9 项（移动端）标记为未评估。
4. 根据这些屏幕截图和交互进行检查；在 未测试 下列出每项未执行的操作。

编排运行

对于包含 orchestrated-by、evidence-dir 或 output-dir 的行，请遵循 references/orchestrated-runs.md；没有这些行时，不做任何更改。重新设计模式仍需 明确确认。

十项检查维度

阅读 references/krug-principles.md，了解任一检查维度的详细信息。根据适用情况进行评估。

#	检查维度	核心问题
1	自明性	用户是否会停下来琢磨这是什么或有什么作用？
2	浏览性	你能在 2-3 秒内掌握页面结构吗？
3	视觉层级	视觉权重是否与重要性相符？
4	用词精简	每个词都值得保留吗？
5	导航	你是否始终知道自己在哪里，以及如何继续？
6	主干测试	初次进入此页面时，你能否回答：这是什么网站？这是哪个页面？我能做什么？
7	着陆页清晰度	你能在 5 秒内说清这个网站的功能吗？
8	可供性	哪些元素可以点击或轻触，是否一目了然？
9	移动端	触控目标、操作可达性，以及是否没有隐藏手势？
10	善意	UI 是否尊重用户的时间与信任？

报告格式

使用 references/report-format.md 中的模板和报告规则（不写段落，每条发现占一行，每个问题都要有选择器，评分须如实）。其中还包含各种变体、BLOCKED 区块和读者检查项。示例内联摘要行；使用 output-dir 时，应在最重要的问题之前打印：

Thinking Cost: HIGH — 3 critical issues found (disabled button, missing nav labels, no landing clarity)

状态（标题下 **Result:** 行的第一个词）：

状态	适用情况
COMPLETE	已撰写报告；所有适用的检查维度均已评分。
PARTIAL	已撰写报告；至少一个适用的检查维度标记为未评估。
BLOCKED	未撰写报告：没有可供检查的输入。改为打印四行的 BLOCKED 区块。

严重程度： 🔴 严重 — 阻碍页面的主要任务，或可能导致错误或离开页面。🟡 中等 — 用户可以完成任务，但会停顿、重读或返回上一步。🟢 轻微 — 仅需润色，预计不会拖慢操作。

思考成本： 存在任何 🔴 问题时为 HIGH；不存在 🔴 但存在 🟡 问题时为 MODERATE；其他情况为 LOW。

重新设计模式

当用户希望应用修复（而不仅仅是报告问题）时，请遵循 references/redesign-mode.md。其中的约束性规则如下：

• 先完成检查报告，再针对每项修复展示试运行差异（文件路径、选择器、修改前/后），优先列出 🔴 问题。
• 在用户明确确认前，不得写入任何内容。编排器不得代替用户确认。
• 仅进行必要的最小更改，并保留品牌风格。每次编辑前记录文件内容；如果写入失败，则恢复原内容。
• 绝不要使用 git checkout 或 git restore 回滚：这些命令会丢弃用户的其他编辑。
• 最后提供重新设计摘要（Result:、Evidence:、Uncertainty:、Decision:）。

错误处理

情况	操作
没有可供检查的输入：未提供输入、/browse 不可用、URL 无法访问、图像无法读取，或描述问题未得到回答	只询问一次，要求提供 URL、PNG/JPEG 屏幕截图、HTML 导出文件或描述；若未提供，则打印 BLOCKED 区块
屏幕截图预处理失败	通过视觉进行检查；在 已测量 下记录失败情况
HTML/CSS 代码不完整	评估现有内容；在 未评估 下指出缺失部分
重新设计模式 — 文件不可写	在重新设计摘要中注明该文件；以规格说明的形式给出修复方案

边缘情况

各类边缘情况的快速检查、无问题页面、原生应用、CSS 框架、多张或超大屏幕截图、嵌入式指令，请参阅 references/edge-cases.md。

验收标准

预期输出：references/report-format.md 中的 Usability Review 报告。满足以下条件即表示运行通过：

• 每个适用的评估维度都已评分；否则须列在 Not assessed 下，且状态为 PARTIAL
• 每个问题都包含单行的 Problem、Impact、Fix 和 Where 字段
• Thinking Cost 与问题数量相符；Fix Priority 按影响排序，其次按工作量排序
• 完整模板包含 mermaid Issue Map；快速检查和无问题版本不包含该图
• 报告以 **Result:** 行开头，并以 Evidence and Limits 和 Next Decision 结尾；Measured 仅引用脚本输出
• 输出通过 references/report-format.md 中的四项读者检查；如果没有人类审阅者的回答，则无法确认人类是否理解
• Redesign Mode 在确认前不写入任何内容，并以 Redesign 摘要结尾
• 在每种终止结果下，都会释放已租用的 /browse
• 报告可在 30 秒内快速浏览：使用表格和项目符号，不写段落

步骤完成报告

每完成一个 Instructions 步骤后，都输出一份报告；模板和检查项见：references/step-completion-reports.md。