How to get more accurate design specifications from Mateo

Mateo's output quality tracks its input quality. A few deliberate choices raise it.

Pick the page that carries the system

Analyze the page where the design system actually lives - usually the homepage or a core product page. Sparse pages (404s, bare login screens) expose few components and produce thin specifications; a rich page gives the extractor real evidence for every section.

Prefer URL when you have it

Live extraction reads exact values; image analysis estimates them. If the design is reachable, URL analysis is strictly more precise. Keep screenshots for what they're uniquely good at: states and designs that aren't crawlable.

Make screenshots worth reading

When you do use screenshots (Pro & Max):

• Full-page or generous captures beat tight crops - context teaches the model the layout system.
• Native resolution beats scaled-down exports; compression artifacts blur exact color reads.
• One clean state beats a collage.

Combine when the state matters

URL + screenshot is the highest-accuracy mode: exact values from the live CSS, anchored to the visual state in your capture. It's the right choice for dark modes, signed-in views, or any variant the default page load doesn't show.

Read the honesty flags

The output tells you how much to trust it: "full" means rich live extraction, "partial" means thin CSS access with marked estimates, "screenshot-only" means everything is a visual read. When a run comes back partial on a site that blocks crawlers, re-running with a screenshot attached usually improves it.

Check the Overview first

The Design Overview scorecard at the top is the fastest quality signal - if the sub-scores or DNA descriptors misread the design, the deeper sections likely inherited the problem, and a better input (richer page, cleaner screenshot) is the fix.