The fastest way to get an AI agent to match a reference design is to stop describing it and start showing it, with structure. Here is the workflow we use to turn a live site into a context pack that Claude Code, Cursor, Windsurf or Copilot can actually build against.
1. Capture the reference, not a screenshot
Paste the URL into the WebForge online tool, or run the CLI. You get multi-viewport full-page screenshots plus a metadata.json of colours and fonts. Capturing all three viewports matters: the agent needs to see how the layout collapses on mobile, or it will invent breakpoints.
pip install webforge-theatom
webforge stripe.com --crawl --max 5 # -> WebForge_stripe.com.zip2. Unzip it into the repo you are working in
Drop the package into a reference/ folder inside your project. Now the files live where the agent can read them with its normal file tools, with no copy-pasting images into chat and no losing the metadata.
3. Prompt with the tokens first
Point the agent at the metadata before the image. A prompt that works well:
Read reference/metadata.json for the exact palette and fonts.
Then use reference/pages/home/desktop.png as the visual target.
Rebuild the hero section in React + Tailwind, matching the hex
values from metadata.json exactly. Do not approximate colours.4. Iterate against the mobile capture
Once the desktop version is close, hand over mobile.png and ask the agent to reconcile the responsive behaviour. Because the capture is a real render at 390px wide, the agent is matching against the site's actual breakpoints instead of guessing.
Why this beats pasting a screenshot
- Exact colours and fonts, so no design drift.
- Three viewports, so responsive behaviour is grounded in reality.
- Files on disk, so the agent uses them as first-class context across many turns.
- A sitemap, so multi-page rebuilds stay consistent.
The same package works with any agent that can read images and JSON. The point is giving it structured context instead of a lossy picture.