gholtzap/lintapple

选用指南

AI 根据 README 整理 · 2026/10/19 17:31:31

适用场景

适用于检查网页的字体、对比度、控件尺寸等设计规范，并支持异步加载页面和生成 JSON 报告。

查看 README 依据

Set the fonts and text sizes in `ui-policy.json` to match your app. Set the app URL in the `lint:ui` script; the default is `http://localhost:3000`. ## Use Start your app, then run: ```sh npm run lint:ui ``` Each finding includes the rule, element, measured value, and suggested fix. Exit codes: `0` passed, `1` findings, `2` check did not finish. To check another URL or save a JSON report: ```sh npx lintapple http://localhost:3000 --json ``` For a page that loads asynchronously, add `--ready '[data-app-ready]'` with a selector that is visible when the page is ready.

使用方式

通过命令行运行 `npm run lint:ui` 或 `npx lintapple` 检查 UI，也可在 Playwright 测试中使用 `expectUI` 辅助函数。

查看 README 依据

Set the fonts and text sizes in `ui-policy.json` to match your app. Set the app URL in the `lint:ui` script; the default is `http://localhost:3000`. ## Use Start your app, then run: ```sh npm run lint:ui ``` Each finding includes the rule, element, measured value, and suggested fix. Exit codes: `0` passed, `1` findings, `2` check did not finish. To check another URL or save a JSON report: ```sh npx lintapple http://localhost:3000 --json ``` For a page that loads asynchronously, add `--ready '[data-app-ready]'` with a selector that is visible when the page is ready.

## Use in Playwright Add this to an existing test after the page is ready: ```ts import { expectUI } from 'lintapple/playwright'; await expectUI(page, testInfo); ``` Findings fail the test and attach a JSON report. The helper reads your `ui-policy.json`. See the [example tests](examples/playwright/). ## Mark layout elements Font, contrast, control size, and screen bounds checks work without extra markup. Add these attributes for checks that need layout information: | Attribute | Use on | | --- | --- | | `data-ui-stack` | A group whose child spacing must be checked. |

部署要求

需要 Node.js 22 或更高版本。

查看 README 依据

<img src="https://lintapple.vercel.app/assets/logo.png" width="96" height="96" alt="lintapple logo"> # lintapple It should be impossible for AI to make a bad UI. [npm](https://www.npmjs.com/package/lintapple) · [Demo](https://lintapple.vercel.app/) ## Install Requires Node.js 22 or later. Run in your app’s project directory: ```sh npm install -D lintapple && npx lintapple init ``` This creates `ui-policy.json` and a `lint:ui` script. Existing settings are kept.