ai-design-check CLI
A 147-rule design check that finds AI-interface tells, fixes the mechanical ones and hands the rest to an agent skill
- 247 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The --fix command edits project files, so run it with --dry-run first
- The scan command opens a running page in your Chrome
- The skill and redesign let the agent edit code; redesign works on a separate git branch
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add cli/ai-design-checkDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The --fix command edits project files, so run it with --dry-run first
- The scan command opens a running page in your Chrome
- The skill and redesign let the agent edit code; redesign works on a separate git branch
This is third-party code. Review the repository files before installing.
What it does
ai-design-check reads a web project (React, Vue, Svelte, Laravel Blade, HTML; Tailwind, Bootstrap or plain CSS) and SwiftUI, Jetpack Compose, Flutter and React Native apps. A checker with no dependencies and no API key applies 147 rules and points to the file and line: a removed focus ring, font sizes off the scale, Title Case in translations, decorative uppercase. `--fix` repairs what has one answer: spacing and corners move to the nearest step of your scale, very heavy type becomes bold. Colors, wording and hierarchy stay in the report because they take a decision. `--fix --dry-run` lists the changes first. The skill (`npx skills add enmerasoftware/ai-design-check`) hands the rest to an agent: it measures the screen, writes a short brief from your product, repairs it and shows the count before and after. `scan` opens a running page in your Chrome and checks contrast, sizes, overlaps and script errors. `redesign` has the agent study the page and redo it on a separate git branch, proving each step.
Who it is for. Frontend developers and designers who build interfaces with Claude Code, Cursor or Codex and want to remove the generated-screen look.
Good fit when
- An interface was built by an agent and looks templated, and you cannot quite say why
- A component lost its focus ring without a replacement and you need to find it across the project
- Spacing and font sizes drifted from the scale and need pulling back automatically
- A running localhost must be checked for contrast, overlaps and console errors
- You ask an agent to redo a page on a branch, proving each pass
Not a fit when
- You need a replacement for a designer: the tool finds violations and fixes mechanical ones while taste and brand stay with you
- The page is behind sign-in and you would rather not hand over a cookie: for redesign you can save the page to a file and pass that
- You need a check of server rendering without running it: scan works on a running page
Example request
Check this project with ai-design-check, show what can be fixed automatically and repair the restLimitations
Part of the rules fix automatically and the rest stays in the report, so the skill agent has to decide what to do with color, wording and hierarchy. `scan` needs a locally installed Chrome. `redesign` requires a Claude Code or Codex agent because the page content decision is made by a model. With the `--in-place` flag no branch or commits are made, and a pass that loses improvements is rolled back. The package is on npm and the rules cover the web and four mobile stacks.
How to disable. The check needs no removal: it runs through npx and installs nothing. Remove the skill from the project's .agents/skills folder. Redesign branches are deleted with the usual git branch -D.
FAQ
What does the tool check?
147 rules: accessibility (focus, tap sizes), typography and size scale, spacing and corners, casing in translations and tells of a templated interface. Every violation comes with a file, a line and a rule name.
Do I need an API key?
No. The check, mechanical fixes and the scan command run with no model and no key. An agent is needed only for the skill and the redesign command.
What does the --nearest-type flag do?
It moves text-[Npx] sizes to the nearest theme size; for example lg:text-[64px] becomes lg:text-6xl.
Which platforms are supported?
Web projects in React, Vue, Svelte, Laravel Blade and HTML styled with Tailwind, Bootstrap or CSS, and apps in SwiftUI, Jetpack Compose, Flutter and React Native.
How do I check a running page?
Run npx @enmera/ai-design-check scan http://localhost:3000. The page opens in your Chrome at desktop and phone width.
Discussion
No questions or reviews yet.
Related
CLI toolsFinds AI-look tells in generated frontend, from purple gradients to cream and terracotta, and rewrites the interface
A skill and CLI for agents: UI without the templated look, 25 commands, rule-based anti-slop checks and a 0 to 100 quality score
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
README in short
The description promises to find the tells of a generated interface, fix them and keep them from coming back. Three steps: check, fix without an agent, a skill for the rest. A table of tools follows (check, skill, scan, redesign), a section on the live page and result examples.