gholtzap/lintapple

lintapple – 面向开发者的 UI 检查工具

这是什么 – lintapple 是一个基于 Node 的命令行工具，它根据您在 ui-policy.json 文件中定义的视觉设计规则集来检查 Web 应用的用户界面。它旨在捕获 AI 可能生成的 UI 问题，确保“AI 不可能做出糟糕的 UI”。

使用方法

1. 将其安装为开发依赖（Node 22+）。init 命令会生成 ui-policy.json 文件并添加 lint:ui npm 脚本。
2. 在应用运行期间执行脚本（默认为 http://localhost:3000）。该工具会抓取页面，测量字体、对比度、控件大小、间距、对齐、圆角半径等，并输出发现列表。
3. 每个发现都会显示违反的规则、涉及的要素、测量值以及建议的修复。退出代码让 CI 知道运行是通过（0）、发现问题（1）还是无法完成（2）。
4. 您可以输出 JSON 报告（--json）或将工具指向不同的 URL。
5. 对于异步加载的页面，您可以使用 CSS 选择器（--ready）告诉 lintapple 页面何时准备好。

与 Playwright 集成 – 一个小的辅助函数（expectUI）可以在 Playwright 测试中导入。页面准备好后，调用 await expectUI(page, testInfo)。任何 UI 违规都会导致测试失败，并将 JSON 报告附加到测试输出。

标记辅助 – 大多数检查不需要额外的标记，但您可以添加数据属性来为 linter 提供更多布局上下文：

• data-ui-stack、data-ui-actions、data-ui-container – 用于间距检查的组。
• data-ui-number – 需要等宽数字的数字。
• data-ui-content – 文本必须保持在其边界内的容器。
• data-ui-align / data-ui-align-item – 对齐组。
• data-ui-radius / data-ui-radius-inner – 强制执行一致的圆角半径和内部关系。

您还可以在策略文件中配置 controlContainers 来定位现有的按钮容器。

为什么重要 – UI 一致性很难手动强制执行，尤其是当 UI 代码由 AI 工具生成或修改时。lintapple 让开发人员能够自动验证视觉标准（字号、对比度、按钮大小、对齐等）在代码发布前是否得到遵守，并直接融入现有的测试管道。

许可证 – MIT。

---

所有详细信息均直接取自仓库的 README。