跳转到使用指南
Break UI作者 Emil Kowalski

Break UI Skill.

找出演示数据掩盖的界面问题。Break UI 引导编码智能体用合理的极端值测试真实组件,在修改设计之前先呈现发现的问题。

  • UI 压力测试
  • 边界情况测试数据
  • 审查报告
来源审查 · break-uiSKILL.md
任务 设计审查与无障碍 产出 • 包含来源、限制和可选值的字段清单 • 最坏情况测试数据和仅限开发环境的数据集切换器 • 按优先级排序的故障、建议的修复方案以及需要负责人决定的事项 开始之前 组件源码、现有演示数据和字段限制;用于视觉验证的运行中应用和浏览器。
编辑摘要 · 已审查来源 2026-10-12 · 非生成示例

01 功能介绍

测试组件本身,而不是人为伪造的故障

此工作流程在固定版本的来源中有描述。它不是实际运行记录,也不是基准测试。

基于来源的工作流程非执行基准测试

工作方式

成员列表在名字较短时可能显示正常,但邮箱地址一长,操作菜单就被挤出屏幕。Break UI 会把每个显示的值追溯到 props、测试数据或 API 数据,检查其限制,并从相同的数据入口替换测试数据。它不会为了制造故障而改动布局。

测试结果应便于直接对比:在演示数据与最坏情况数据之间切换,并按需分别提供空列表、单项列表和大量条目状态。报告会区分内容不可读或操作不可达、视觉异常,以及容易出问题的设计假设,也会记录哪些情况已经能正常处理。

预期交付物

  • 包含来源、限制和可选值的字段清单
  • 最坏情况测试数据和仅限开发环境的数据集切换器
  • 按优先级排序的故障、建议的修复方案以及需要负责人决定的事项
查看示例需求

从输入到发现

  1. 01
    映射每个显示的值

    阅读组件、验证规则和 API 结构。记录限制和字段缺失时的行为,包括数量、徽章、图片和列表长度,而不仅是文本输入。

  2. 02
    构造可信的边界情况

    在与现有数据结构相同的测试数据中,组合长名称、短名称、缺失字段和本地化标签。已知限制时遵循数据结构约束(schema);未找到上限的字段应如实记录,而不是自行编造限制。

  3. 03
    在真实尺寸下对比

    将切换器保留在开发环境或原型路由中。检查组件的实际容器、320px 宽度及其最宽布局,以及放大后的文字;如果产品支持深色模式和 RTL,也要包含。

  4. 04
    先报告,再修复

    为每个故障给出严重程度、触发值、建议的修复方案和文件位置。遇到换行还是截断这类决定时请暂停;仅在被要求时才应用修复,然后重新测试演示状态和极端状态。

02 适用场景

适用场景

适用于内容会变化的现有组件。它检查界面能否应对真实数据变化,而不是重新设计视觉风格。

适合的情况

  • 密集的列表和卡片成员行、搜索结果和文件卡片把名称、元数据、徽章和操作组合在一起,争夺有限的空间。
  • 本地化界面过长的翻译标签、非拉丁字符的名称以及受支持的 RTL 布局,可能暴露英文演示文本所遗漏的假设。
  • 空集合与大型集合检查零项、一项、分页边界和现实的大型列表,包括复数处理和滚动行为。

需要检查的限制

  • 不评判视觉风格该技能不会选择新的视觉方向,也不会重新设计组件。其发现只涉及真实数据和现有设计。
  • 不自动做产品决策某个字段应该换行、截断还是消失,可能需要负责人来决定。默认工作流程是先报告,并在应用修复之前停止。
  • 视觉证据需要浏览器仅基于源码的审查可以识别风险,但无法证明用户实际看到的内容。来源要求将推断出的发现与经视觉检查的故障区分开来。

请提供这些输入

  • 实际的组件提供组件或页面、其常用容器以及可用的本地路由。仅有截图无法揭示数据边界或验证限制。
  • 数据结构和限制包括演示测试数据、props 或 API 类型、验证规则和可选字段。合成记录即可;请勿提供真实客户数据。
  • 支持的状态和环境说明最大列表规模、支持的语言、深色模式和 RTL 要求。并指明请求是仅需报告,还是包含已批准的修复。

03 关键决策

关键决策

  1. 测试数据通过真实边界注入

    修改 prop 或模拟响应测试的是组件的行为。若为了强行制造故障而编辑标记或 CSS,测试的就是另一个组件。

  2. 短值和缺失值同样重要

    单字母名称、缺失头像或数量为一,可能暴露首字母缩写、回退显示和复数处理方面的缺陷,而这些是长字符串永远发现不了的。

  3. 最坏情况成为回归测试数据

    在获批的修复完成后,保留该测试数据用于后续检查,并与常规数据对比。切换器仅限开发环境,绝不能发布到生产环境。

04 从一个具体需求开始

从一个具体需求开始

下面的示例需求尚未经过测试。使用前请先检查该技能的设置。

检查设置

从 Emil Kowalski 的公开技能仓库安装,并为你的代理选择此技能。

限定范围的安装命令
npx skills@latest add emilkowalski/skills --skill break-ui

README 记录了使用 npx skills@latest add emilkowalski/skills 从仓库安装的方法。下面限定范围的命令会选中此条目。npx 需要 Node.js/npm;来源未固定最低版本。运行前请查看上游说明。

从一个数据驱动的组件开始

此示例需求为原创且未经测试。请将其中的组件和环境细节替换为你项目的实际情况。

示例需求
在我们现有原型路由中的 MemberList 组件上使用 break-ui。先检查 prop 类型和验证限制。创建合成的演示数据和真实的最坏情况测试数据,涵盖长名字和单字母名字、很长的 example.com 电子邮件、缺失的头像和角色,以及受支持的非拉丁文本。添加空状态和单成员状态,以及代码中找到的现实列表上限规模。让数据集切换器仅限开发环境,并在测试期间保持组件标记和样式不变。检查其实际侧边栏宽度、320px、受支持的最宽布局和 200% 缩放。报告故障时附上文件位置、建议的修复方案和需要做的决定。将经浏览器验证的发现与基于代码的风险分开,记录哪些部分经受住了考验,暂时不要应用修复。

修复前先审查证据

对照代码和实际浏览器行为检查报告。将未经验证的观察与已复现的故障分开。

  • 每个被测试的字段都有真实来源,以及有文档记载的限制或明确的未知。
  • 切换数据会到达同一个组件边界;该控件仅限于开发环境或原型。
  • 发现包含失败的值、位置和证据;不遗漏常规数据和通过的情况。

OpenDesign为编码代理提供本地设计工作区。此列表并不表示该技能已捆绑,也不表示其外部工具、凭据和软件依赖已包含在内。

05 来源与许可证

来源与许可证

本页描述下方链接的固定版本来源。上游的行为和要求可能会变化。

来源所有者
Emil Kowalski
许可证
MIT
已审查的快照
2026-10-12 · 2d228630ba14
来源编辑摘要
用真实的极端数据和仅限开发环境的对比开关对现有 UI 进行压力测试;先报告故障,再修复。这是对固定版本来源的编辑摘要,不是执行报告。

由 OpenDesign 基于所链接的来源撰写的原创摘要。仓库星标数是带日期的热度信号,不代表技能使用量或质量评分。

06 开始之前的常见问题

开始之前的常见问题

Break UI会自动修复组件吗?

默认不会。它会报告故障和建议的修复方案,然后等待。来源也支持明确的修复请求;对于存在多个有效答案的决定,仍需先解决。

它只测试长文本吗?

不是。其目录涵盖缺失值、数字、集合、时间、媒体、状态和环境。空列表和单项列表是独立的情况,不能替代长文本测试数据。

没有项目也能运行吗?

来源允许使用独立组件和自包含的 HTML 对比。没有浏览器访问权限时,发现必须标注为推断,而不是经视觉验证。

Break UI

用演示数据之外的情况测试界面

从一个组件和符合实际情况的合成数据开始。查看暴露的问题,选择修复方案,并保留测试数据供后续回归检查。

限定范围的安装命令
npx skills@latest add emilkowalski/skills --skill break-ui