Lintapple：为 AI 生成界面提供 UI 检查

AI 应该不可能做出糟糕的 UI。

npm · Demo

安装

需要 Node.js 22 或更高版本。在你的应用项目目录中运行：

npm install -D lintapple && npx lintapple init

这会创建 ui-policy.json 和一个 lint:ui 脚本。现有设置会保留。 在 ui-policy.json 中设置字体和文字大小以匹配你的应用。在 lint:ui 脚本中设置应用 URL；默认为 http://localhost:3000。

使用

启动你的应用，然后运行：

npm run lint:ui

每条发现都包含规则、元素、测量值和建议的修复方案。 退出码：0 通过，1 有发现，2 检查未完成。

要检查另一个 URL 或保存 JSON 报告：

npx lintapple http://localhost:3000 --json

对于异步加载的页面，添加 --ready '[data-app-ready]'，并指定一个页面就绪时可见的选择器。

在 Playwright 中使用

在页面就绪后，将以下内容添加到现有测试中：

import { expectUI } from 'lintapple/playwright';

await expectUI(page, testInfo);

发现会导致测试失败，并附加一份 JSON 报告。该辅助函数会读取你的 ui-policy.json。 参见示例测试。

标记布局元素

字体、对比度、控件尺寸和屏幕边界检查无需额外标记即可工作。 为需要布局信息的检查添加以下属性：

你也可以在策略中使用 controlContainers 来选择现有的按钮容器。 参见示例样式。

许可证

MIT。参见LICENSE。