ui-testing

ui-testing 技能概览

ui-testing 是一个实用、以清单驱动的指南，用来在 UI 组件上线前验证它们是否真的可用。它最适合正在创建组件、页面或设计系统部件的人：你想快速发现隐藏按钮、对比度不足、缺少 focus 状态、以及移动端触控目标过小等问题，而不必从零搭建一整套视觉测试框架。

如果你已经有 UI 代码，并且需要一套可重复的上线前审查流程来检查 UI Design 质量，ui-testing 会特别有用。它不是一个大而全的测试套件；它聚焦的是那些在 code review 里容易被忽略、但用户一眼就能感受到的视觉与可访问性问题。

ui-testing 适合做什么

当你的核心任务是确认生成或修改后的界面是否真正可用时，就用 ui-testing：标签是否清晰可读、控件是否可见、状态是否容易区分、布局在浅色/深色模式或响应式场景下是否稳得住。它最大的价值，是帮你抓住那些在代码里“看起来没问题”，但一到浏览器里就暴露出来的回归。

ui-testing 最适合什么场景

这个技能很适合组件级工作、Storybook 风格的 UI 审查，以及需要快速做可访问性基础检查的应用页面。如果你想要的是轻量的 ui-testing guide，而不是沉重的测试栈，它会是个合适的选择。

主要限制

ui-testing 不能替代端到端测试、截图 diff，或产品分析数据。它也默认你可以查看渲染后的 UI，并借助人工或辅助流程去判断各类状态。如果你的需求是在大量页面上做自动化回归覆盖，它就不是最合适的主工具。

如何使用 ui-testing 技能

正确安装并加载

进行 ui-testing install 时，请从仓库路径使用该技能，并在支持 skills 的环境中加载它。先阅读 SKILL.md，再按照技能运行时里链接的说明继续操作。在这个仓库中，技能正文本身就是主要事实来源，因此不需要去寻找额外的 rules/、resources/ 或 scripts/ 目录。

把模糊需求变成可执行提示词

ui-testing usage 的效果最好，前提是你给它一个明确的 UI 目标，以及你希望检查的失败类型。不要只说“测试这个 UI”，而要直接写成：“检查这个按钮组件的对比度、可见边框、hover/focus 状态、44px 触控目标尺寸，以及深色模式下的可读性。” 这样模型才有边界清晰的清单和明确结果。

先读，再验证

先看 SKILL.md 里的目的说明和预检清单。最有价值的仓库阅读路径是：

1. SKILL.md：清单与适用范围
2. 你正在测试的组件或页面
3. 浏览器、story 或预览环境中的渲染结果

如果你是在做 ui-testing for UI Design，在追代码实现细节之前，先关注可见性、间距和状态变化。

能明显提升结果的实用工作流

最好在 UI 创建完成后再用 ui-testing，而不是提前用。输入时要带上组件类型、平台、主题和预期交互状态。好的输入会像这样： “桌面端 Web modal，浅色和深色模式，键盘导航，主按钮和次按钮，一个 loading 状态。” 像“检查一下这个 modal”这样的弱输入，通常只会得到很浅的反馈，因为技能不得不自己猜重点。

ui-testing 技能常见问题

ui-testing 只是做可访问性吗？

不是。可访问性是它的重要组成部分，但这个技能同样关注视觉正确性：对比度、可见性、状态样式、响应式表现，以及触控目标尺寸。所以当你关心的是把 UI 打磨到可以交付，而不只是满足基础无障碍要求时，ui-testing 比单纯的 accessibility 提示词更合适。

使用它一定要有完整测试框架吗？

不一定。即使你只有浏览器预览、Storybook 或本地开发构建，ui-testing 也依然有用。它能帮你在投入自动化之前，先判断应该检查什么、哪些失败最关键。

什么情况下不该用这个技能？

如果你需要的是大范围的功能测试覆盖、API 校验，或者跨很多屏幕的像素级回归套件，就先别用它。若你的 UI 还太抽象，根本没法有意义地检查，它也不是好选择。这个技能最适合界面已经存在、你需要做一次聚焦验证的时候。

对新手友好吗？

是的，只要你能描述一个组件并检查它渲染后的状态就行。清单式结构让 ui-testing 对新手很容易上手，但输入质量依然重要：你把平台、状态和边界情况说得越清楚，结果就越有用。

如何改进 ui-testing 技能

先补齐缺失上下文

最有效的提升方式，是把作用范围一次说清：组件名称、设备类型、主题、交互状态，以及你已经怀疑的可访问性问题。比如说，“移动端 checkout drawer，深色模式，检查文字对比度、关闭按钮可见性、focus 顺序和 44px 触控目标”，就比泛泛地说一句请求强得多。

直接点出你关心的失败模式

ui-testing 最强的地方，是它可以对准具体风险。常见失败模式包括：没有明显边框的幽灵按钮、和背景混在一起的文字、缺失的 focus ring、过于拥挤的点击目标。直接提到这些问题，会让 ui-testing guide 更有用，因为它会把检查范围收窄到真正会阻碍用户的问题。

第一次结果后继续迭代

把第一轮输出当成筛查结果，然后再发第二轮请求，聚焦最可能出问题的地方。如果结果太宽泛，就让它一次只复查一个状态：默认、hover、focus、disabled、loading 或深色模式。这样得到的判断，通常比一次性要求“全都检查一遍”更可靠。

把清单当成提示词模板来用

改进 ui-testing 的最好方式，是把内置清单改写成你自己的审查提示词。先写清上线必须满足的条件，再补上你这个 UI Design system 的独特要求。这样技能就会围绕真实验收标准运作，而不是停留在泛泛评论层面。