Buy ProDownload
Guide · Claude Code and MCP

Keep Claude Code on your design system.

Claude Code builds UI fast, and it drifts: 14px where your scale says 16, a grey a shade off, a button that doesn’t match the others. EvenUI gives it an MCP server that loads your tokens before it builds, scans what it built, and fixes what’s off, with the file and line for each.

Download for MacDownload for Windows

How it works

Three steps once, then every UI change Claude makes is checked the same way.

  1. 01

    Capture your design system

    In EvenUI, Design systems → New. Point it at your component library’s repository, at pages that get the system right, or at a tokens file. Make it the default.

  2. 02

    Connect Claude Code

    Claude Code → Add to Claude Code adds it for every project. Add to a prototype repo writes a .mcp.json the team can commit, with a skill that teaches Claude the workflow. Open a new Claude Code session afterwards: sessions already open don’t see new servers.

  3. 03

    Ask Claude to build, then check

    For example: “Build the pricing page using the Acme design system, then audit it with EvenUI and fix anything off-system.”

What Claude does with it

The loop a careful designer would run, on every element, before you see the result.

  1. get_design_system loads your tokens, so it builds with only those values.
  2. scan_page scans the page on the dev server against your system.
  3. get_finding returns each issue’s elements, the CSS file and line behind it, and the token to use.
  4. Claude fixes the source and scans again.
  5. compare_scans confirms what was fixed and that nothing came back.
  6. It reports the score before and after, with a link that opens the scan in the app.
claude

> Build the pricing page with the Halcyon design system, then audit it with EvenUI and fix anything off-system.

⏺ evenui · get_design_system Halcyon

10 colours · 10 spacing steps · 4px grid

⏺ Write src/pages/pricing.tsx

⏺ evenui · scan_page localhost:5173/pricing

Score 86 · 18 issues

⏺ evenui · get_finding × 6

⏺ Update src/pages/pricing.css

⏺ evenui · compare_scans

86 → 100 · 18 fixed · 0 new

Make it the rule: add this to CLAUDE.md

Claude reads CLAUDE.md at the start of every session, so the check happens without being asked.

## UI checks
After any change to the UI, scan the page on the dev server with EvenUI
(scan_page, against our default design system). Fix every high and medium
issue using get_finding for the file and line, then run compare_scans and
report the score before and after. If something is deliberate, say so and
I'll decide whether to accept it.

The 14 tools

All of them work on your computer. Scans Claude runs appear in the app straight away, in the same history as yours.

get_design_system

Your tokens as CSS variables or a Tailwind v4 @theme, read before Claude writes anything.

list_design_systems

The systems you’ve captured, and which one is the default.

create_design_system

Capture a system from a repository, pages that get it right, or a tokens file.

scan_page

Scan a URL, a localhost dev server, a file or raw HTML, checked against your system.

scan_site

Crawl a site from a start URL and score every page (Pro).

get_finding

Every affected element: selector, HTML, the winning declaration with its file and line, and the token to use.

get_finding_screenshot

An annotated crop of the page, so Claude can see the issue.

list_findings

Page through and filter a scan’s issues.

compare_scans

Before and after: fixed, new, better and worse, matched by what each issue is.

accept_finding

Mark an issue as intentional when you say it’s deliberate.

restore_finding

Count an issue again.

get_inventory

The system a page actually renders: its colours, type, spacing, radii and shadows.

get_scan

A scan from the shared history, by id or by page.

list_scans

Every scan, the app’s and Claude’s, in one history.

Why does Claude Code drift from a design system?

It writes plausible CSS, not your CSS. Without your tokens in front of it, a padding becomes 14px when your scale says 16, a grey is typed a shade off, and a fourth button style appears. Each one is small; together they’re the drift a design review catches a week later.

Does it work with Cursor and other agents?

Yes. It’s a standard MCP server, so Cursor and any other MCP client can use it. The app adds it to Claude Code in one click.

Is the Claude Code connection free?

Yes. Scanning pages, design systems, comparisons and every tool except whole-site audits are free, with no time limit. EvenUI Pro adds site audits, watching sites, stress tests and shareable reports, $49.99 one-time.

Do my pages leave my computer?

No. The MCP server runs on your computer, scans run in a local Chromium, and scans and design systems are stored there. Claude sees what the tools return, the same as any other tool it calls.

Free for Mac and Windows.

The MCP server comes with the app. Pro adds whole-site audits: $34.99 this week with LAUNCH30, usually $49.99.Buy Pro

Download for MacDownload for Windows