A new linter fails the build when an AI agent ships the purple-gradient landing page

The page you can draw in advance

Ask almost any coding agent for a landing page and the result is predictable: a purple-to-blue gradient, the Inter typeface, a centered headline, a sparkle-emoji slogan, a Get Started button and three identical translucent cards. As dev.to reported in a post by the tool's author, none of this is a bug. The code type-checks, the tests pass and the page loads. It just looks like every other generated page.

Existing code checkers, called linters (programs that scan code and flag problems), judge correctness. The author's point is that nothing in a normal build pipeline judges taste. So the author built tastelint, which names each habit, points to the exact file and line, gives the page a score and fails the build when the score is too low.

How the scoring works

The scanner reads HTML, CSS, SCSS, React, Vue, Svelte and MDX files, plus the styling shortcuts written inside Tailwind class strings. It uses fixed rules, with no browser, no network connection and no AI model involved. That makes results repeatable.

There are 17 rules. Four are rated high severity: a cool purple-to-blue gradient, a sentence that could ship on any other product, a card nested inside a card, and gray text on a near-gray background. Most of the rest are medium, such as the three-matching-cards layout, indigo or violet used as an unchosen accent, and glass-effect panels. A few are low, such as decorative blurred orbs and buttons that say only "Learn More".

• Each high finding costs 12 points, each medium 5, each low 2.
• Any single rule is capped at 12 points of damage.
• The score is 100 minus the total, never below 0.

You set the pass mark with a flag. With the threshold at 90, a single high finding is enough to fail.

From 9/100 to 100/100

The post walks through a typical generated homepage for a small shipping tool. Scanning it produced 24 findings (3 high, 20 medium, 1 low) and a score of 9/100, so the check exited with an error code that stops an automated pipeline. Each line named the rule that fired, and a verbose mode adds the suggested fix and the offending line of code.

The fixes are specific. A button gets flagged for having no object, so "Get Started" becomes something that says what it does. A sentence gets flagged because it would work equally well for a bank and a bakery. After following the hints, the page used one chosen serif font, one accent color, left-aligned text, copy that only fits that product and no card grid. It then scored 100/100 and passed.

The author is candid about what this does. The linter does not make a page good. It makes the default page fail, which forces you or the agent to make a real decision.

Teaching the agent before it writes

Catching the problem in continuous integration (the automated checks that run on every code change) is useful, but the author argues that not generating it is better. A separate command installs a short design guide into the places where Claude Code, Cursor and Codex look for instructions. The guide, which the author calls the Plain Surface Charter, tells the agent to pick a typeface deliberately, spend one accent color, write copy that fails anywhere else and run the scanner before declaring the work done.

For teams that use GitHub, the report can also be exported in a standard format called SARIF so findings show up inline on a pull request. If a flagged item is intentional, a comment in the code can switch a rule off for that line.

The optional model review and the limits

The scanner never needs an AI model. A separate, optional review command first scans, stops if the score is already 100, and otherwise sends the score, rule names and short snippets (capped at 20 findings) to an AI model, asking for concrete edits. A dry-run option shows exactly what would be sent without making any network call. The default host is a gateway service named AtmoRouter, but the tool can be pointed at any OpenAI-compatible server, including one running on your own machine.

The author also lists the limits. Because the tool reads source code rather than rendering the page, it cannot compute real layout or true contrast against a gradient. It identifies a "card" by a class name or by a combination of rounded corners and a shadow, border or fill. It will miss things and occasionally flag something you meant, which is why the author calls the score a gate, not a verdict.

Adding a rule means writing a small function, so the project invites contributions. The author's own suggestion is a rule for bento grids, the tiled-box layouts that are another common generated look.