Using Mateo output with AI coding tools

Mateo's output is designed to be pasted. There are three ways to use it, in increasing order of precision.

1. AI Context - the quick brief

The AI Context tab holds a compressed, copy-ready brief of the design. Paste it into any AI tool's chat or context window and ask for what you want built. It's small enough to leave room for your actual request.

2. design.md - the project reference

Download the full document (Download .md) and place it in your project:

• Claude Code: drop design.md in the repository root and reference it - "follow the design system in design.md". Claude Code reads project files directly.
• Cursor: add it to the project and reference it with @design.md in chat, or cite it from your rules file.
• Other tools: any assistant that accepts file context or long pastes can use it the same way.

The document is structured markdown - headings, tables, exact values - precisely because that's what these tools parse best.

3. Component specs - one component at a time

When you want one component built exactly, paste just its block from the report's Component specifications section - every value is already inlined, so one paste yields one faithful component.

A workflow that works

1. Generate a spec from the site whose quality you want to match.
2. Put design.md in the repo.
3. In your AI tool, establish the rule once: "All UI work follows design.md - colors, type, spacing, and motion come from it, not from your defaults."
4. For high-fidelity individual components, paste their spec blocks from the Component specifications section.