What is UXLoom?
UXLoom is an MCP server that acts as a critic for AI generated designs. It models journeys as state machines and screens as nodes, then reports unreachable screens, dead ends, missing error, empty and loading states, WCAG contrast failures and small touch targets before code is written.
UXLoom is the critic layer for generated interfaces. AI generators tend to produce happy path screens, so UXLoom checks what is missing: states, routes and accessibility, using rules instead of an opinion from a language model.
Designs live in a project file, uxloom.project.json, kept in git next to the code. Journeys become state machines, and each screen is a node with a contract listing the states it must have.
What it checks
- Unreachable screens and dead end states in a journey.
- Missing error, empty and loading states on a screen.
- WCAG contrast failures and undersized touch targets.
- Labels that will overflow once text is localized, such as a checkout label that breaks in German.
The workflow an agent follows
The README lays out a loop: project_init, brief_start and brief_answer, journey_define, screen_register, then project_validate. The agent fixes findings and repeats until there are zero errors, then runs coverage_report.
From the command line
Humans and CI use the same package. The commands are init, preview, export, check, audit and diff. A check exits with code 1 on errors, so a happy path only design can be blocked from merging.
Who UXLoom is for
Best for
- Teams generating screens with AI tools who want proof that journeys and states are complete.
- Designers pairing it with an accessibility audit skill and a wireframe spec skill for deeper review.
- Engineers who want design completeness as a CI gate before a design handoff.
Not for
- Pixel level visual design. UXLoom reasons about journeys and states, and its previews are wireframe mocks.
- Reading an existing Figma file. For that, see the Figma MCP page.
- Teams that dislike structured data. The design lives in a JSON project file that you maintain with the tools.
Use it with UiChemy
UXLoom does not build pages. Its export command can write SVG for Figma or Penpot import, and from Figma a design can go through UiChemy: Figma to WordPress converts it, and Composer edits it. Click Get Started on uichemy.com.
Connect UXLoom: Check Journeys and States Before Code Exists to your AI client
npx uxloom initRegister with your agent
For Claude Code run claude mcp add uxloom -- npx -y uxloom. For Codex CLI run codex mcp add uxloom -- npx -y uxloom.
Or run the one command setup
Run npx uxloom init. The README says it sets up the MCP config, an agent skill and a starter project file.
Keep the project file in git
uxloom.project.json lives in your workspace. The README says the design is data, versioned next to the code it specifies.
Verify it
Ask the agent to start a project and validate it, or run npx uxloom check on the project file. Errors make the command exit with code 1.
Client configuration
claude mcp add uxloom -- npx -y uxloom
codex mcp add uxloom -- npx -y uxloomEndpoints and ports
uxloom.project.jsonJourneys and screen contracts, kept in gitnpx uxloom check design/uxloom.project.jsonExits 1 on errorsWhat you can do with it
- Deterministic reportsThe README says the same input gives a byte identical report, which is what lets completeness gate CI.
- State coverageEvery screen declares the states it needs, and missing error, empty and loading states are flagged.
- Accessibility checksWCAG contrast and touch target checks run as part of validation.
- Localization overflowLabels that will break under longer translations are caught before development.
- Live preview and commentsReviewers pin comments in a browser preview and send them to an agent as a work item.
- Implementation drift auditaudit compares the build with the contract for web and native code, and can check a Figma or Penpot export.
- CI output formatscheck and audit accept JSON, SARIF and GitHub annotation output.
Tools it exposes
project_init
Starts a project, the first step in the documented workflow.
brief_start
Begins the design brief, which the agent then answers.
brief_answer
Records an answer to a brief question.
journey_define
Defines a user journey as a state machine.
screen_register
Registers a screen as a node with its state contract.
project_validate
Runs the critics: journey completeness, state coverage, WCAG contrast, touch targets and text expansion.
coverage_report
Reports coverage once validation shows zero errors.
design_review
Runs the bounded review loop, with a maximum of 3 rounds, for decisions that carry a rationale.
comment_context
Returns the pinned layout block, screen contract, journey references and current findings for a reviewer comment.
Frequently asked questions
What is UXLoom?
It is an MCP server and CLI that validates UI and UX design before code exists. It models journeys as state machines and screens as nodes with required states, then reports what is missing, such as unreachable screens, dead ends or absent error states.
How do I install UXLoom?
Run claude mcp add uxloom -- npx -y uxloom for Claude Code, or codex mcp add uxloom -- npx -y uxloom for Codex CLI. You can also run npx uxloom init, which the README says creates the MCP config, an agent skill and a starter file.
Does it work with Claude?
The README says the interface is an MCP server that works with Claude Code, Codex and any MCP client, and that Agent Skills are included. It lists a Claude Code walkthrough in its quickstart, so that route is the best documented one.
Which tools does it provide?
The workflow names project_init, brief_start, brief_answer, journey_define, screen_register, project_validate and coverage_report. The README also mentions design_review and comment_context. Agents work through the first group in order and repeat validation until no errors remain.
Can it gate CI?
Yes. The check command exits with code 1 on errors, and both check and audit can output JSON, SARIF or GitHub annotations. The README also describes an update baseline option, so existing findings are frozen and only new drift blocks a merge.
Can it export designs to Figma?
The export command can write SVG meant for Figma or Penpot import, and an optional manifest flag adds a round trip key. It does not read a live file. For that, compare the Figma MCP page or the Penpot MCP page.
How active is the project?
The repository is MIT licensed, has 2 stars and its last push was August 9, 2026. The README says it is released and maintained, and that the JourneyGraph format may still change until version 1.0.