Examples

What a capture gives you

One capture of mateoux.io, Mateo's own site, walked through end to end: the Rebuild Package, how coverage and known gaps are reported, the DESIGN.md, and the agent prompt.

The Rebuild Package

Paste mateoux.io into the capture bar and press Capture. Mateo loads the live page in a real browser, captures it, and prepares the Rebuild Package automatically. Export it as a zip and you get one folder:

mateoux.io-rebuild/
  • REBUILD.mdThe build specification. Your agent reads it first.
  • evidence.jsonEvery measured value. When anything is ambiguous, it wins.
  • screenshots/Visual ground truth: desktop at five scroll depths, plus mobile.
  • assets/The site's original downloadable images, logos, icons and SVGs.
  • DESIGN.mdThe design language, as a supporting reference.
  • AGENT_PROMPT.mdThe ready-to-paste prompt for your coding agent.

The Rebuild Package is for sites you own or have permission to reproduce. To borrow the look of a site you don’t own, use DESIGN.md. Terms

Inside REBUILD.md

The measured parts (tokens, page geometry, assets) are assembled directly from the captured evidence. An AI model writes the narrative parts (signature moments, composition, motion choreography, responsive notes, acceptance criteria) from that same evidence.

  1. §0How to use this package
  2. §1Build target & signature moments
  3. §2Design tokens (measured)
  4. §3Page anatomy & geometry (measured at 1440×900)
  5. §4Assets & placement
  6. §5Motion & interaction
  7. §6Responsive behavior
  8. §7Unknowns & decisions
  9. §8Acceptance criteria
  10. §9Self-validation loop

Coverage and known gaps

Every capture says what it measured. Coverage shows how much rebuild evidence the capture holds in each dimension. It describes completeness, not a quality score.

LayoutTypographyColor & effectsAssetsMotionResponsiveInteractionsPage completeness

High coverage

Strong evidence for a faithful first build.

Medium coverage

A solid first build with a few gaps to iterate on.

Low coverage

Limited evidence. The build leans on screenshots and iteration.

Known gaps list what Mateo could not verify, so your agent asks you instead of guessing. Both appear in the Capture details panel next to the result. Mateo captures evidence, not a guarantee. Your agent closes the last gap with you.

DESIGN.md

DESIGN.md describes the design language only: no content and no assets from the source. It ships inside the Rebuild Package and exports on its own. Here is its outline:

mateoux.io · DESIGN.mdOutline

  1. ## 1. Visual Theme & Atmosphere

    The design's identity in prose and its signature visual moments.

  2. ## 2. Color Palette & Roles

    The palette grouped by role, with values and where each is used.

  3. ## 3. Typography Rules

    Families, the full type hierarchy, and the principles behind it.

  4. ## 4. Component Stylings

    Buttons, cards, inputs and navigation, with hover, active, disabled and focus states.

  5. ## 5. Visual Composition & Assets

    The defining page sections: composition, imagery style and background treatment.

  6. ## 6. Interaction & Motion

    Transitions, hover effects, scroll effects and the motion personality.

  7. ## 7. Layout Principles

    Spacing scale, grid and container widths, whitespace and the radius scale.

  8. ## 8. Depth & Elevation

    The shadow scale and how depth is created.

  9. ## 9. Do's and Don'ts

    Concrete rules that cite the captured values.

  10. ## 10. Responsive Behavior

    Breakpoints, touch targets and how the layout adapts on smaller screens.

Share gives any capture a public, read-only link to its DESIGN.md and screenshot. The Rebuild Package, evidence and source assets are never public.

The agent prompt

Unzip the package into your project, open it in Claude Code, Cursor or Codex, and paste the agent prompt (Copy agent prompt in the Export menu, or AGENT_PROMPT.md). It tells your agent to:

  • Read REBUILD.md first.
  • Treat the screenshots as ground truth and use assets/ directly.
  • Let evidence.json win whenever anything disagrees.
  • Ask you about anything marked (inferred) or listed under Unknowns.
  • Finish the self-validation loop in REBUILD.md §9.

Expect a strong first pass, then iterate on the known gaps.

Try it on your own site

The best way to judge a capture is on a site you know well. The Free plan includes three captures a month, and every plan includes the Rebuild Package, DESIGN.md and the agent prompt.

Capture a site for free