Turning a real page into something Bolt, Lovable or Cursor can build from
Screenshots make coding agents guess. A capture — markup, extracted CSS, asset manifest, spec — makes them accurate. How to produce and use one.
Coding agents are good at transformation and bad at perception. Give one a screenshot and it will confidently invent your spacing, your font and your gradient. Give it the actual rendered markup and styles and it will convert them into components accurately, because there is nothing left to guess.
What an agent actually needs
Not a prompt. A small bundle of facts:
- The settled markup — the DOM after JavaScript ran, not the server's shell.
- The styles that applied — computed values, not a pile of stylesheets it has to resolve mentally (including cross-origin ones it cannot read).
- The asset manifest — what each image, icon, font and video is, where it sat and what size it was rendered at.
- The fonts actually used — the four faces the page renders in, not the thirty it declares.
- The breakpoints — where the layout changes and what it changes to.
- A structure spec — sections in order, with their role: hero, feature grid, logo strip, pricing table, footer.
That last item is what turns a wall of <div>s into a component plan the agent can follow.
The workflow
1. Capture the page. Open it, let it settle, capture the rendered DOM and computed styles. CopyAnySite's AI dev kit export writes exactly the bundle above: markup, extracted CSS, asset manifest, font list, breakpoints, and a spec/prompt file describing the page's structure.
2. Drop the kit into the project. In Bolt or Lovable, add the files to the workspace and reference them in your instructions. In Cursor or Claude Code, put them in the repo — agents read files far more reliably than they read pasted blobs.
3. Ask for a conversion, with your own constraints. For example:
Usingcapture/index.htmlandcapture/styles.cssas the source of truth, rebuild the sections listed incapture/SPEC.mdas React components insrc/sections/. Use our tokens fromsrc/tokens.tsfor colour and type — do not copy the source's hex values or font families. Keep the layout, spacing and breakpoints exactly as captured. Replace all images with placeholders frompublic/placeholders/.
That prompt works because every fact it needs is in a file, and the only creative decisions left are the ones you asked for.
4. Use MCP if your tool supports it. The extension ships an MCP server, so an agent can trigger a capture and read the result directly instead of being handed files — useful when you are iterating across several pages.
5. Diff the build against the capture. Screenshot both at the same viewport and compare. Then fix the deltas, which are usually spacing at one breakpoint and a font-weight.
What to strip before you ship
The kit is a reference, not a licence:
- replace every image, icon and illustration
- replace or license the fonts (they are the most common accidental infringement in this workflow)
- rewrite the copy
- remove logos and brand names
- delete anything that came from a logged-in view
Why not just paste the URL into the builder?
Because the builder fetches from its server, sees the pre-JavaScript HTML or a screenshot, and cannot read cross-origin stylesheets or licensed fonts at all. Anything it cannot fetch, it fabricates — plausibly, which is worse than obviously. A capture taken in your own browser has your session, the settled DOM and the real computed styles.
FAQ
How do I give Bolt or Lovable a real copy of a website?
Capture the rendered page and add the exported files to the project, then instruct the agent to build from those files. Pasting a URL makes the tool fetch a shell or look at a screenshot and guess.
Can Cursor or Claude clone a website from a URL?
They can approximate it. For accuracy, put a captured bundle — markup, extracted CSS, asset manifest, spec — in the repo and ask for a conversion; that turns a perception problem into a transformation problem.
What is an AI dev kit export?
A folder containing the captured markup, the extracted stylesheet, an asset manifest, the fonts the page renders in, the breakpoints, and a spec file describing the sections — the input a coding agent needs to rebuild a page without inventing values.
Does this work for a whole site?
Yes, with a bounded crawl: capture each page and produce a kit per page. Keep the page count small enough that the agent's context stays useful — section-by-section beats site-at-once.
Is the generated code safe to ship?
Only after you have replaced the assets, fonts and text. The generated code itself is usually fine; the material it references is what creates legal risk.
Try it on the page you are looking at
CopyAnySite is a Chrome extension: open any page you can reach, press capture, and take away a standalone HTML file, an editable WordPress page, or a kit a coding agent can build from. The free key needs no card.
Download CopyAnySite