Lintapple runs a design-rules check on an AI-generated UI, 157 stars

An AI can write a working feature and still produce a page a designer would reject. The developer gholtzap built lintapple to catch that case. It loads the running web app in a headless browser, measures each element against a policy file in the repo, and lists every rule the page breaks with the element, the measured value and a suggested fix.

The project has 157 stars on GitHub and ships as the npm package lintapple, which reached version 0.1.19 in its first days there. The license is listed as none in the GitHub API response and the npm tarball is open.

What the check reads

The policy sits at the project root as ui-policy.json. The default version carries nine rule groups: an allowed font list, an allowed text-size list, per-selector size rules for h1 to h3 and buttons, a minimum control size of 15 pixels, a minimum gap between controls of 8 pixels, a minimum inset for a button inside its container of 8 pixels, a minimum general layout gap of 8 pixels, a banned-copy list that in the default file includes "unlock your potential", "seamlessly" and "game-changing", two viewports to check at 390 by 844 pixels and 1440 by 900 pixels, and one colour scheme. A team edits the file to match its own app.

The checker also measures contrast against WCAG, at 4.5 to 1 for normal text and 3 to 1 for large text, and reports placeholders, hover state and focus state separately. It flags any element whose text falls outside the horizontal viewport, and any fixed element or open dialog whose body does not fit the vertical viewport.

What the page has to tell it

Some checks run from the DOM alone. Others need a mark on the element. The README lists nine data-* attributes, including data-ui-stack for a group whose child spacing matters, data-ui-actions for a button row whose gaps matter, data-ui-container for a surface whose button insets matter, data-ui-radius plus data-ui-radius-inner for a nested surface whose corner radius should equal the outer radius minus the inset, and data-ui-align plus data-ui-align-item for a group whose elements must share an edge. A team adds these as it marks up its components, or configures the policy's controlContainers list to point at existing button wrappers.

Where it runs

The command-line form is a single npm script. The output lists each finding with its rule, element, measured value and suggested fix, and the exit code says whether the page passed. For a project with an existing test suite, lintapple ships a Playwright helper that reads the same policy, attaches the JSON report to the test and fails if findings exist. The author's own project rules, written in AGENTS.md, name the step bluntly: fix the interface, do not change the policy or remove the contract attributes to make a check pass.

The useful part of this for a team working with coding agents is that the policy is a short JSON file an agent can read and must obey, and the check runs in CI like any other test. An agent that produced a button a user cannot tap, a heading at an unapproved size, or a hero that overflows a phone screen now fails a specific test with a specific line to fix, instead of passing review on code quality and failing on screenshots a day later.

Source

gholtzap/lintapple on GitHub, lintapple on npm, and the live demo.