WebForge is a free Chrome extension that captures any website into an AI-ready visual blueprint. It stitches full-page screenshots across desktop, tablet and mobile viewports, crawls same-domain pages, and extracts CSS design tokens, fonts and colors so AI coding agents can rebuild the layout accurately.

Yes. WebForge is completely free to install and use. You can download it from GitHub and support development through Buy Me a Coffee.

Which AI tools does WebForge work with?

WebForge output is optimized for Claude Code, Cursor, Windsurf, GitHub Copilot, ChatGPT, Gemini, Lovable, Bolt.new, v0 and any AI coding workflow that accepts screenshots and design-token context.

How is WebForge different from GoFullPage or a normal screenshot tool?

Unlike a plain screenshot extension, WebForge captures multiple viewports, crawls the whole domain, and exports a structured package containing screenshots plus JSON metadata of colors, fonts and sitemap: everything an AI agent needs to reconstruct the frontend code.

What does the exported WebForge package contain?

Each export is a ZIP containing a pages/ folder with desktop.png, tablet.png and mobile.png per page, a per-page metadata.json (title, URL, fonts, colors), a global metadata.json with combined design tokens and timestamps, and a sitemap.json of the discovered domain tree.

Can I try WebForge without installing the extension?

Yes. The WebForge website has a free online capture tool. Paste any website URL and it instantly returns multi-viewport full-page screenshots (desktop, tablet, mobile) plus extracted colors, fonts and images, downloadable as a ZIP. The online tool captures a single page; installing the extension unlocks full-domain crawling, login and bot-protected pages, and pixel-perfect fidelity.

Is there a Python or Node package?

Yes. The same capture engine ships as webforge-theatom on both PyPI (pip install webforge-theatom) and npm (npm install webforge-theatom), with an identical capture() and crawl() API plus a webforge CLI, ideal for scripts, notebooks and AI agent pipelines.

How does WebForge help AI coding agents rebuild sites accurately?

Vision models are good at layout and poor at precision. WebForge pairs real multi-viewport screenshots with machine-readable design tokens (exact hex colors and the real font stack) so the agent reasons about layout from the image and pulls exact values from the metadata, eliminating color drift and font guessing.

Does WebForge store or send my captured data anywhere?

No. The extension and packages run captures locally in your own browser or environment and export a ZIP to your machine. The free online tool captures a single page on-demand and returns the ZIP to you without retaining it.

Capturing the web for AI coding agents

Practical guides on visual blueprints, design tokens, and giving Claude Code, Cursor and Copilot the context they need to rebuild websites accurately.

July 5, 2026·5 min read
Screenshot-to-code, done right: multi-viewport capture and design tokens
Single-screenshot-to-code tools drift because they lose colour, type and responsive context. Here is why multi-viewport capture with extracted design tokens fixes it.
screenshot to codedesign tokensresponsive
Read post →
June 20, 2026·6 min read
How to turn any website into a Claude Code or Cursor context pack
A practical workflow for capturing a reference site as a clean context pack and handing it to Claude Code, Cursor or Copilot so the rebuild matches the original.
Claude CodeCursorworkflow
Read post →
June 2, 2026·5 min read
What is a website visual blueprint (and why AI coding agents need one)
A visual blueprint is a structured capture of a website (multi-viewport screenshots plus design tokens) that gives AI coding agents the context they need to rebuild a page accurately.
AI codingvisual blueprintdesign tokens
Read post →

Screenshot-to-code, done right: multi-viewport capture and design tokens

How to turn any website into a Claude Code or Cursor context pack

What is a website visual blueprint (and why AI coding agents need one)