Web capture and visual blueprints that put clarity in AI context

AI agents require clear visual references to recreate frontend layouts accurately. WebForge scrolls, resizes, and compiles any page into a structured, code-ready design specification package.

Generated Output Package Structure

Every capture complies with the WebForge context specification. It packages visual layouts alongside structural tokens so AI agents can reconstruct frontend code with high precision.

WebForge_Project/
├── pages/
├── home/
├── desktop.png (1440x900 full page)
├── tablet.png (768x1024 full page)
└── mobile.png (390x844 full page)
└── about/
├── desktop.png
└── metadata.json
├── sitemap.json (Discovered domain tree)
└── metadata.json (Global colors, fonts & timestamps)

At WebForge, we build tools to serve AI-driven development.

Core Views on AI ContextsWorkflow
Structure and Sitemap IndexingTechnical Specs
Window Dimension Resizing PolicyDocumentation
JSON Metadata SchemasAI Input Specs

Frequently Asked Questions

Everything you need to know about capturing websites with WebForge for AI coding workflows.

What is WebForge?

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.

Is WebForge free?

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.