How to use Mateo with Claude Code or Cursor

← All guidesJuly 17, 2026 · 2 min read

The difference between AI-generated UI that looks generic and UI that looks designed is almost entirely context. Here's a setup that works, step by step.

1. Generate the specification

Run the site whose design you want to match through Mateo. Use the URL when it's live; add a screenshot on paid plans if a specific state matters. You get a design.md with exact values and an AI Context summary.

2. Put the file where the tool can see it

Claude Code reads the repository directly:

Save the download as design.md in the project root.
Mention it once per session - "UI work follows design.md" - or add that rule to your project's CLAUDE.md so every session inherits it.

Cursor:

Add design.md to the project.
Reference it in chat with @design.md, or cite it from your rules so it applies to all generations.

3. Establish the constraint once

The prompt that changes everything is the standing rule, not the per-request reminder:

All interface work in this project follows design.md. Colors, typography, spacing, radii, shadows, and motion come from that file - never from your defaults. When design.md doesn't cover a case, derive from its closest rule and say so.

4. Use component specs for precision work

For a single component that must be right, paste just its block from the report's Component specifications section - every value is already inlined, so the model has nothing left to guess.

5. Audit against the spec

After a large generation, close the loop:

Audit the UI you just wrote against design.md. List every deviation - color, type, spacing, motion - and fix them.

Models are notably better at checking work against a document than at holding every rule during generation. Use that.