ui-ux-suite

English · 简体中文 · 日本語 · Español · Français

ESLint for design. It finds the exact line, the measured wrong value, and the exact fix.

What is it · How to use · Before / after · Compare · FAQ

What is ui-ux-suite?

ui-ux-suite is a zero-dependency design linter that audits your CSS, JSX, HTML, and Tailwind config and returns specific, located, measured findings with a concrete fix, not generic advice.

Most "design review" tools tell you "improve your contrast." This tool tells you:

.hero-subtitle at src/styles.css:14: text #fbfbfb on #ffffff = 1.03:1, fails WCAG 2.2 AA (needs 4.5:1). Fix: change color to #767676 (4.54:1 on white) or darker.

That is the whole point. Every finding is located (file:line + selector), measured (the real wrong number), and fixed (the exact change). It scores 12 design dimensions grounded in WCAG 2.2, APCA contrast, and the Laws of UX, citing the WCAG success criterion or the named law it depends on.

• It audits, it never edits. Every run is read-only and outputs suggestions (before → after). Applying a fix is your call.
• It runs anywhere. One MCP server + one npx CLI → works in Claude Code, Cursor, VS Code, Codex, Gemini, Windsurf, and Continue.
• It needs nothing. Pure Node built-ins. No install weight, no API keys, no network, no telemetry. Your code stays on your machine.

See a real run: sample audit report · sample terminal output

How to use it (3 steps)

1. Run it on any project

npx ui-ux-suite .

You get a ranked list of located + measured + fixed findings and a weighted 0–10 score across 12 dimensions. No config, no setup.

2. Pick the output you need

npx ui-ux-suite .                      # human-readable report (default)
npx ui-ux-suite . --json | jq          # machine-readable JSON (banner goes to stderr)
npx ui-ux-suite . --html report.html   # standalone dark-theme HTML report
npx ui-ux-suite . --fail-under 7        # exit 1 if the score drops below 7 (CI gate)

Exit codes: 0 ok · 1 audit error or below --fail-under · 2 path not found · 3 insufficient evidence.

3. Wire it into your AI editor (optional)

npx ui-ux-suite --mcp     # start the MCP server over stdio

Then ask your editor: "Audit this project's design." The MCP tool uiux_audit_run runs the same engine and returns the same located findings.

# Claude Code
claude mcp add ui-ux-suite npx ui-ux-suite --mcp

# Codex CLI
codex mcp add ui-ux-suite -- npx -y ui-ux-suite --mcp

{ "mcpServers": { "ui-ux-suite": { "command": "npx", "args": ["ui-ux-suite", "--mcp"] } } }