What is UI UX Suite?
UI UX Suite is a design audit tool that also runs as an MCP server. It reads CSS, JSX, HTML and Tailwind classes, then reports located findings with the measured wrong value and an exact before and after fix. It scores 12 weighted dimensions and never edits your source.
The README's headline example is a single contrast failure: .hero-subtitle on line 14 of src/styles.css sets #fbfbfb on #ffffff, which measures 1.03 to 1. The suggested fix is #767676. Every finding follows that shape.
It is a command-line auditor first and an MCP server second. Run it on a folder and you get a ranked list plus a score out of 10, with no config file and no setup step.
What a finding contains
- Located. The file, the line and the selector, like a linter error.
- Measured. The real wrong value, such as a contrast ratio, rather than an adjective like low.
- Fixed. An exact before and after change, plus the WCAG criterion or named UX law behind it.
- Project-level findings, such as five font families where one or two would do, still score but have no single line to cite.
Safe by default
The static audit executes nothing and makes no network call. It needs no API key and sends nothing off your machine. It audits only: a fix is printed for you to apply, and the tool never edits a project file.
Deep mode is opt-in. It visits only the URL you give it, needs playwright-core plus @axe-core/playwright, and falls back to source findings when those are absent.
Where it fits
Best for
- Teams that want a design score as a CI gate, using
--fail-underor a baseline that fails on a new finding. - Agents that should check contrast, spacing and typography against measured numbers. Pair it with the accessibility audit skill for wider checks.
- Reviews that need SARIF output for GitHub code scanning.
Not for
- Anyone who expects automatic edits. It reports and never rewrites.
- Palette generation. It scores contrast, and a color skill suits choosing new colors.
- Visual taste feedback on a screenshot. The related critique skill is closer to that job.
Use it with UiChemy
UI UX Suite audits the CSS and markup you already have. UiChemy builds the WordPress page itself, writing into Elementor or Gutenberg, so the two do different jobs. To build a page first, click Get Started on uichemy.com.
Connect UI UX Suite MCP: A Design Linter That Cites the Exact Line to Fix to your AI client
claude mcp add ui-ux-suite -- npx -y ui-ux-suite --mcpRegister with Claude Code
Run the command above. The README also gives the same form for Codex: codex mcp add ui-ux-suite -- npx -y ui-ux-suite --mcp.
Use a config entry in other editors
Cursor, VS Code, Gemini CLI, Windsurf, Continue, OpenCode and Zed take the same command as a config entry in JSON, TOML or YAML. The per-editor snippets live in docs/editors.md in the repository.
Try the command line first
Run
npx ui-ux-suite .in a project folder. You get a ranked findings list and a weighted score out of 10 with no setup.Add it to CI if you want a gate
Use
npx ui-ux-suite . --fail-under 7to exit 1 below a score of 7, or--write-baselinethen--baselinewith--fail-on-regressionto fail only on new findings.
Endpoints and ports
--json, --html, --sarifMarkdown is the default; JSON, HTML and SARIF 2.1.0 on requestNode 18 or newerRequired for the dev dependency route; zero runtime dependenciesWhat you can do with it
- Located, measured, fixed findingsEach located finding names the file, line and selector, gives the measured value, and prints the exact before and after change with its WCAG criterion.
- Twelve weighted dimensionsThe score out of 10 spans 12 dimensions, and accessibility carries the most weight. WCAG 2.2 and APCA contrast are both reported.
- Four report formatsOutput comes as a ranked Markdown report, JSON, standalone HTML or SARIF 2.1.0 for GitHub code scanning.
- CI gate and baselineFail under an absolute score, or freeze today's debt in a baseline file and fail only on a regression.
- Reads real source filesCSS, JSX, HTML and Tailwind classes are analysed statically, so nothing runs and nothing leaves the machine by default.
- Fourteen skills, sixteen toolsThe README says an agent gets 14 skills and 16 tools, so a request like audit this project's design works in chat. The README does not list the tool names.
- Tested against a broken fixtureThe repository runs 356 tests, and the shipped broken fixture, which scores 3.7 out of 10, must keep producing findings with a file, line and fix.
Tools it exposes
16 tools, names not listed
The README says an agent can call 16 tools but does not name them, so ask your MCP client to list the server's tools after connecting.
Frequently asked questions
What is UI UX Suite?
UI UX Suite is an open source design auditor described as ESLint for design. It reads CSS, JSX, HTML and Tailwind classes, reports the exact line, the measured wrong value and the fix, and gives a weighted score out of 10 across 12 dimensions.
How do I install the UI UX Suite MCP server?
Run claude mcp add ui-ux-suite -- npx -y ui-ux-suite --mcp for Claude Code, or the codex mcp add form for Codex. Other editors take the same command as a JSON, TOML or YAML config entry, with snippets in the repository's editors document.
Does UI UX Suite change my source files?
No. The README states it never modifies a source file in the project you point it at. A fix appears as a printed before and after change for you to apply, and the only files it writes are report and baseline files you asked for.
Does it send my code anywhere?
By default no. The static audit uses only Node built-ins, needs no API key, collects no telemetry and makes no network call. Deep mode visits only the URL you hand it, and it needs two extra packages that are opt-in.
Which tools does the MCP server expose?
The README says 16 tools and 14 skills are available to an agent but does not name the tools, so the list on this page is empty. Run the server and ask your client to list its tools to see the exact names.
Can I use it in CI?
Yes. Use --fail-under 7 to exit 1 when the score drops below 7, or write a baseline file and fail only on a new finding or a score drop. Output can be JSON, HTML or SARIF 2.1.0 for GitHub code scanning.
Which agents does it work with?
The README lists Claude Code, Cursor, Codex, Copilot and Gemini CLI, plus 70 or more other agents that read the Agent Skills format. Because the skills are Markdown, they run on whatever model your editor is pointed at.
What does it cost?
The repository is MIT licensed and the static audit needs no API key, so there is no usage fee for the tool itself. It uses Node built-ins with no telemetry, and the static audit makes no network call. Deep mode only visits the URL you hand it.