Reverse-engineer any website's design into a spec your AI can build.
Paste a URL and Mateo analyzes the live interface, extracts the CSS, tokens, typography, components, and motion rules, then turns them into a benchmark-quality design.md your AI tools can build from.
AI can build faster when it understands the design system.
Screenshots show what something looks like. Mateo explains how it's built - the spacing, type scale, color roles, component behavior, and motion your tools otherwise have to guess.
It's the design-context layer that sits between a live website and your AI coding tools - the product taste, rules, and structure an agent usually has to invent.
Live website
any public URL
design.md
the design-context layer
Your AI builder
From live website to buildable spec in one step.
No setup, no plugins. Three moves: paste, extract, generate.
Paste a URL
Point Mateo at any public website - your own, a competitor, or a reference you admire.
Extract the design system
It loads the live page and reads the real CSS - color roles, type scale, spacing, components, motion.
Generate an AI-ready spec
Out comes a structured design.md document plus a machine-readable context file your agent can build from.
## Color- accent #635BD7 · 12% of surface- ink #0B0B0F · headings, body ## Typography- display Inter 600 / 48px- body Inter 400 / 16px / 1.6 ## Motiontransform 200ms ease-out // hoverA complete design system, not a description.
Mateo captures the decisions behind an interface - the parts an AI has to understand to rebuild it faithfully.
Color tokens
Exact hex values and the role each plays - surface, ink, accent, signal.
Typography hierarchy
Families, weights, sizes, line-height and tracking for every level.
Spacing system
The underlying 4 / 8 / 16 rhythm - structure, not arbitrary pixels.
Components
Buttons, inputs, cards: padding, radius, fill, border and states.
Layout patterns
Grids, containers, section composition and responsive structure.
Motion rules
Durations, easing curves, and what actually animates on hover and scroll.
Interaction states
Hover, focus, active and disabled - captured from the page, not guessed.
Brand atmosphere
The intangibles - density, contrast and mood that make it feel like itself.
Implementation guidance
Do's and don'ts so the build matches the source's intent.
AI-ready context
A machine-actionable summary you paste straight into your agent.
From pixels your AI can only look at - to rules it can build from.
A premium technical document - not a wall of code.
Section 01 below is verbatim output from a live linear.app generation - the remaining panels illustrate the document format.
Visual Theme & Atmosphere
Color System
Typography
Components
- padding
- 10px 16px
- radius
- 10px
- font
- 600 / 14px
- fill
- #635BD7
Motion
Layout
AI Implementation Notes
- doReserve the violet accent for primary actions only.
- doUse the 4 / 8 / 16 spacing scale for all rhythm.
- don'tAdd drop shadows for elevation - use hairlines + surface.
- don'tIntroduce new radii; 10px controls, 16px cards.
For anyone building interfaces with AI in the loop.
Founders building with AI
Ship a product that looks designed - without a design team in the loop.
Designers turning references into systems
Turn any site you admire into a structured, reusable spec in seconds.
Engineers implementing polished UI
Build pixel-honest interfaces from real values - not from a screenshot.
Product teams standardizing frontend quality
One source of design truth your whole stack can build against.
AI agents that need design context
Give your agent the rules it usually has to infer - as structured input.
Simple, transparent pricing.
Free gives you the full design system plus the AI Context Summary from any URL. Pro and Max add screenshot input - alone or combined with a URL - the Do's and Don'ts and Responsive Behavior sections, and higher monthly limits.
Free
Try it on any public site.
- 3 generations / month
- URL input only
- Full design system - sections 1–8
- AI Context Summary
- Screenshot input (alone or with a URL)
- Do's and Don'ts + Responsive Behavior sections
Pro
The full toolkit for one builder.
- 25 generations / month
- URL, screenshot, or URL + screenshot input
- Do's and Don'ts + Responsive Behavior sections
- AI Context Summary (paste into Cursor)
- Saved library
- Extra generations available later
Max
More monthly runway for heavy building.
- 60 generations / month
- URL, screenshot, or URL + screenshot input
- Do's and Don'ts + Responsive Behavior sections
- AI Context Summary (paste into Cursor)
- Saved library
- Extra generations available later
Questions, answered.
Everything you'd want to know before pasting your first URL.
What exactly does Mateo generate?
A structured design-system document extracted from a live website: color roles with exact hex values, the type scale, spacing system, component specs, motion rules, and layout principles - plus a machine-readable AI context your coding agent can build from.
How is this different from giving my AI a screenshot?
A screenshot shows what a site looks like; Mateo reads the real CSS and reports how it's built. Your AI gets exact values - hex, px, weights, easing - instead of guessing them from pixels.
Which AI tools does the output work with?
Any tool that accepts pasted context: Claude Code, Cursor, v0, Lovable, Bolt, and the rest. Every plan includes the AI Context Summary, which is written specifically to be pasted straight in.
What does the free plan include?
3 generations per month from a URL on any public site, with the full descriptive design system (sections 1–8) and the AI Context Summary. Paid plans add screenshot input, the Do's and Don'ts and Responsive Behavior sections, and higher monthly limits.
What counts as one generation?
Each completed run - from a URL or URL + screenshot - uses one generation, as does building a remix with instructions. If a run fails before we start writing your document (say the site couldn't be reached), it doesn't count.
Do unused generations roll over?
No - your quota resets at the start of each month. If you regularly need more, pick a higher plan; extra generation packs are coming later.
What if a site blocks automated access?
Some sites sit behind bot protection. On a paid plan you can upload a screenshot instead and Mateo will read the design from the image. A blocked attempt that never reached generation doesn't use up a credit.
Can I cancel anytime?
Yes. Billing runs through Stripe and you can cancel in one click; your plan stays active until the end of the current billing period and simply doesn't renew.
Give your AI the design context it's missing.
Paste any URL and get a buildable design.md in about 90 seconds. Add a screenshot for even sharper visual fidelity.