Layoza

Layoza — design engineering for AI agents

An open-source MCP server + agent skills that turn Claude Code, Cursor, Codex, OpenCode, Antigravity and Windsurf into a UI/UX design expert: it reads your site's design DNA, picks motion that fits the brief, and checks every change in a real Chromium browser.

▶ Download the full 2½-minute showcase (MP4, 17 MB): all four briefs, recorded live in Chromium

npx layoza init            # adds the skills + MCP server to every agent it finds in this project

npx layoza qa index.html # design and usability: contrast, overflow, focus, menu, screenshots

Then just talk to your agent. Example prompts:

Build a homepage for a family-run bakery in Leeds. Warm, not twee.

Add a pricing page that matches the rest of this site. Our dashboard feels cluttered. Fix the design without changing the brand. Redesign the agency homepage with a kinetic hero, but keep every page and form working. Check this page on mobile and fix anything a visitor would trip over.

---

Why

Layoza exists so AI-built sites stop looking like slop. Every design it helps make should be unique: never a copy, a re-skin or a repeat, from the nav through the hero and every section to the footer, built modern and for one brief only. A per-project ledger (.layoza/looks.jsonl) records each dealt look, and every design-system / mechanics deal run prints a uniqueness block scoring nav, hero, sections, footer and motion against the last 20 runs (--window 1-200).

AI agents write front-end code quickly, but the result tends to look the same everywhere: cream and terracotta, Inter, three rounded cards, a purple gradient. They also break things they cannot see: a heading cut by the sticky header, a phone menu that Escape will not close, text at 3:1 contrast, a canvas that pushes LCP past 4 s.

Results

Six setups got the same one-line brief, the same model (Claude Opus 5.5) and one build agent each, and none could see the others' output:

A fresh blind judge then compared scroll stills at 1440 and 375 px for design, usability, creativity and content. Rival pages were frozen; only Layoza was rebuilt between rounds. Judge the pages yourself below.

Restaurant brief : a harbour seafood kitchen

Dashboard brief : a bakery chain's morning sales

Store brief : a small linen shop

Kinetic agency brief : a motion-led studio homepage

Where Layoza does not win. Read this before you trust the pictures.

• Kinetic is a tie, not a win. taste-skill's page was as strong there; across repeated rounds the lead changed hands and stayed inside judge noise.
• Older single-brief rounds: impeccable beat Layoza on a simple page with no animation, and ui-ux-pro-max beat it in an earlier kinetic round.
• One judge per round, judging screenshots. Motion itself is not judged, which is why the video uses real browser recordings.
• Weak spots judges keep naming:
• creativity on kinetic pages is merely good, not striking
• headings that look cut by the sticky header in mid-scroll stills
• small hero art on phones
• a 3D hero whose lab LCP is well over the 2.5 s target

Full method, every round and the judge notes (with the raw scores) are in docs/CROSS-TYPE-BENCHMARK-2026-10.md. The demo pages were removed in October 2026 ahead of a fresh set. To run the QA on any page:

npx layoza qa path/to/index.html

What it does

Output is written in the project's own stack:

• React, Next.js, Astro, Vue, Nuxt, SvelteKit
• plain HTML/CSS/JS
• WordPress block themes (theme.json v3)
• Elementor or Bricks JSON
• Shopify Liquid

Four modes

The layoza router skill picks the mode from your prompt, so you can simply ask the agent: *"Add a pricing page that matches the rest of the site."*

Which one do I need?

• Starting from nothing → A. You get three different directions to choose from before any code is written.
• The site already looks right and you need more of it → B. Layoza copies your look; it does not impose its own.
• The site works but looks tired or fails accessibility → C.
• You want a new look → D. A baseline is taken first, so you can roll back.

Install

You need Node.js 18 or newer. The npm package ships prebuilt binaries for Windows x64, macOS (Intel and Apple silicon) and Linux (x64 and arm64); on other platforms it compiles from source on first run, which needs Rust. Visual QA also needs Playwright:

npm i -D playwright && npx playwright install chromium

Then, in your project:

npx layoza init      # skills + MCP config for every agent it detects

npx layoza doctor # checks Node, Playwright and the MCP handshake

Or add the MCP server by hand:

Claude Code

claude mcp add layoza -- npx -y -p layoza layoza-mcp

For the skills, copy skills/* into .claude/skills/, or run npx layoza init.

Cursor

.cursor/mcp.json

{ "mcpServers": { "layoza": { "command": "npx", "args": ["-y", "-p", "layoza", "layoza-mcp"] } } }

OpenAI Codex

codex mcp add layoza -- npx -y -p layoza layoza-mcp

Windsurf

~/.codeium/windsurf/mcp_config.json

{ "mcpServers": { "layoza": { "command": "npx", "args": ["-y", "-p", "layoza", "layoza-mcp"] } } }

OpenCode

opencode.json

{ "mcp": { "layoza": { "type": "local", "command": ["npx", "-y", "-p", "layoza", "layoza-mcp"], "enabled": true } } }

Google Antigravity

npx layoza init copies the skills into .agents/skills/ and writes .agents/skills.json and the .agents/plugins/layoza plugin. See docs/ANTIGRAVITY-OPTIMIZATION.md.

MCP tools

| `deal