enmerasoftware/ai-design-check

What it does

AI coding agents produce interfaces with recognizable tells: off-scale font sizes, spacing off the 4 px grid, emoji icons, removed focus rings, icon buttons with no accessible name. This project packages 76 design rules and a Node-based checker that reports those measurable defects with rule ID, file and line. Rules were derived from shipped Enmera and Searvia screens and compared with 16 highly rated dashboard designs; each rule documents what, why and how to fix it in English and Turkish.

It targets dashboards, admin panels, SaaS screens and landing pages, and also reads SwiftUI (.swift) and Jetpack Compose (.kt) app code. Rules that need judgement, such as layout and selector choices, are marked review and left to people or agents.

Quick start

Requires Node 20 or newer. From the project root, run the checker via npx:

npx @enmera/ai-design-check

To check a specific folder or language, pass a path and language, for example npx @enmera/ai-design-check src lang. Findings are printed with file and line; errors cause exit code 1 (--strict also fails on warnings). --json produces machine-readable output and --format github emits pull request annotations.

To let a coding agent fix the screen, install the bundled skills and ask it to fix the design:

npx skills add enmerasoftware/ai-design-check

The agent reads the rules, edits in passes and re-runs the checker, reporting before and after counts. For an existing project, record current findings first so only new ones are reported:

npx @enmera/ai-design-check --write-baseline

Configuration lives in ai-design-check.json or .design-rules.json: include/ignore globs, i18n dictionaries, shared component mappings, per-rule allow lists and severity overrides.

Other commands

inventory counts distinct looks for buttons, inputs, headings, badges and cards. narrow renders a page at phone width (default 320 px) in your installed Chrome and reports sideways scrolling, clipped text and desktop-only content. system generates a design system (fonts, type scale, WCAG-checked colours, shape tokens) from a character and brand colour into CSS, Tailwind v4, JSON, Swift and Compose files. story produces a square before/after video and needs Chrome and ffmpeg. hook checks a single edited file from JSON on stdin for use in agent hooks.

Constraints

• The checker is plain Node with no npm dependencies, but narrow and story drive an installed Chrome over the DevTools protocol, and story also needs ffmpeg.
• Class-based rules only inspect class strings (class, className, cn(), clsx(), cva(), twMerge()), not comments or copy.
• Ignores addable in source must carry a reason after --; an ignore without one is not honoured.
• Rules that require judgement are review-only and are not enforced automatically.
• Adding rules means editing rules.json and regenerating docs with npm run docs; tests run via npm test.
• MIT licensed.

HotRepo's take

On 2026-11-01 the repository appeared on HotRepo's new-project board for JavaScript, recording 121 stars and 8 forks after gaining 21 stars in a window of just under two hours. The star curve shows a steep early run, from 100 to 121 stars in the last two hourly samples, which is a short observation window rather than a trend. The project's distinguishing point is the pairing of a dependency-free checker with agent skills that try to prevent regressions on the next edit, not just clean up once.

Project source and documentation