AI NewsDev toolsAnnouncement

ai-design-check catches what makes an AI-built interface look generated

ai-design-check is a free linter. It finds the patterns that make an AI-built screen look AI-built, then has an agent fix them.

AI News

Editorial2 min read

LinkedInX
The ai-design-check repository page on GitHub

Image: GitHub

Why it mattersA team that releases screens written by Claude Code or Cursor keeps hitting the same look. A linter the agent can read turns that look into a diff.

A screen written by a coding agent reads like a screen written by a coding agent. ai-design-check is a free linter. It lists the patterns that cause it. The repository is on npm as @enmera/ai-design-check under MIT, from Enmera and Searvia. It went up on 28 October. On 2 November it had 171 stars and 9 forks.

What it checks

The project has 87 rules. 50 run on their own. The other 37 need eyes on the screen, so the checker marks them for review. The checker reads front-end files in several languages. On the web, it reads React .tsx and .jsx, Vue, Svelte, HTML, Blade and CSS. It reads i18n JSON files. On mobile, it reads SwiftUI .swift and Jetpack Compose .kt. It runs on plain Node 20 or newer. It has no dependencies and needs no API key.

The rule areas, in the author's own list: accessibility, type and shape, writing and copy, components, layout, visual language, motion, data, localisation, selectors and navigation. Each rule says what to do, why, and how to fix it. The text is in English and Turkish.

Two sample findings from the README show what it catches. A line in src/pages/dashboard.tsx sets a font size outside the scale, with the rule type-scale and severity error. Another says a translation is in Title Case and must be sentence case under the sentence-case rule.

The fix step

The second half is an agent skill. You add it with npx skills add enmerasoftware/ai-design-check. The agent then measures the screen. It writes a short brief from the product. It repairs the screen. It shows the count of findings before and after. The author's example shows a dashboard going from 266 findings to 0. Features, data and words stay.

A .ai-design-check.json file lets a team set names that keep their capitals. It can say which directories allow raw <button> and <input>. It can map raw elements to their shared component. It can also turn individual rules off, or soften them from error to warn.

Four other commands live beside the checker. inventory counts how many different buttons, inputs, headings and cards a project uses. narrow tests what breaks on a phone or in a long language. system suggests a type scale and colours from one brand colour. story builds a short before-and-after video from two HTML files.

Where the rules come from

The authors say the rules came out of their own two products, Enmera and Searvia. They name the patterns that read as generated. They name what broke at narrow widths. They name what people did not understand. They then compared with 16 highly rated apps, which the README does not list by name.

A team that pays Claude Code or Cursor to write screens pays for a specific house style. The model has learned that style. This linter is a way to replace that house style with yours. The agent runs the fix step, so it is a diff, not a rewrite by hand.

Source

ai-design-check on GitHub, by Enmera.

SourceGitHub

This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.

Share
LinkedInX
Start a project