Ask an AI coding agent to “rebuild this landing page” from a single screenshot and you get something that looks roughly right and is wrong in every detail: the wrong greys, a font that is close but not the one, spacing that drifts a few pixels on every element. The model is not failing; it simply never had the source of truth. A website visual blueprint is that source of truth.
A blueprint is more than a screenshot
A screenshot is a flat image. A visual blueprint is a structured package that pairs the image with the machine-readable facts an agent cannot reliably infer by looking:
- Full-page screenshots across desktop, tablet and mobile, so the agent sees real CSS breakpoint behaviour, not one arbitrary width.
- An area-weighted colour palette as exact hex values, so no more guessing #f0eee6 from a JPEG.
- The fonts actually rendered on the page, in prominence order.
- Image assets, as URLs and inline data-URIs.
- A sitemap of the crawled domain, so multi-page structure is explicit.
Why the tokens matter more than the pixels
Vision models are good at layout and bad at precision. They can tell that a button is in the top-right, but they cannot read a hex code off a compressed image, and they will happily invent a font name. Design tokens close that gap: the agent reasons about layout from the picture and pulls exact values from the metadata. That is the difference between “looks similar” and “pixel-accurate.”
What a good blueprint looks like on disk
WebForge_Project/
pages/
home/
desktop.png tablet.png mobile.png
metadata.json # title, url, fonts, colors
sitemap.json # discovered domain tree
metadata.json # global colors, fonts, timestampsFeed the global metadata.json first so the agent loads the palette and fonts, then the device PNG as the visual reference. That ordering, tokens before pixels, is what keeps the rebuild honest.
WebForge produces exactly this package for any URL. You can try it free on the homepage, or install the extension to crawl a whole domain.