Remember drawing red circles on screenshots and writing "please reduce spacing here"? Paper Snapshot just killed the screenshot. It captures your live site and pastes it into the canvas as editable layers.
What Is This?
Paper Snapshot is a Chrome extension built by the Paper team. The concept is straightforward: open any website in Chrome, run the extension, and it captures that page's sections as editable HTML/CSS layers directly into the Paper canvas. Not a screenshot. The actual HTML structure and CSS styles come through intact.
For those unfamiliar with Paper — it's a design tool founded by Stephen Haney, the creator of Radix UI, back in 2024. They raised a $4.2M seed led by Accel and are currently in open alpha. The core concept is simple: the canvas itself runs on HTML/CSS. Unlike Figma's proprietary format, everything is built on web standards, so you can export designs directly as React or Tailwind code.
Snapshot extends this canvas to a new level. Previously, you had to start from a blank canvas or ask an agent to generate designs. Now you can start from your production site. Getting your starting point from production — that's the key idea.
How is this different from Google Stitch?
Google recently launched Stitch, an AI UI design tool. Stitch generates UIs from text prompts, while Paper Snapshot captures existing sites for editing. They go in opposite directions — Stitch is 0→1, Snapshot is 1→1.1.
What Changes?
Until now, the only way to bring a live site into a design tool was through screenshots. Take a screenshot, paste it into Figma, layer annotations on top, and mark up what needs to change. The problem? That screenshot is just a flat image. Want to move a button? You have to redraw it.
| Screenshot Approach | Paper Snapshot | |
|---|---|---|
| Capture result | Flat image (PNG/JPG) | Editable HTML/CSS layers |
| Text editing | Not possible (must rewrite on top) | Edit directly |
| Layout changes | Not possible (must redraw) | Move, delete, add elements |
| Code export | Not possible | Export as React / Tailwind |
| AI agent connection | Not possible | Connect via MCP to Cursor, Claude Code, etc. |
Paper's official roadmap describes Snapshot as "No more drawing on screenshots." The HTML/CSS from captured sites loads directly into the Paper canvas, so you can manipulate actual elements.
Here's what this looks like in practice. When a designer says "let's adjust the hero section spacing and change the CTA button color," the old way was: screenshot → recreate in Figma → build mockup → hand off to developer. With Snapshot? Capture site → edit in Paper → agent pushes to code. The translation step disappears.
This completes the loop from production to production. The Paper team's blog emphasizes a "bidirectional workflow" — pulling sections of your live app onto a canvas for spatial exploration, then pushing decisions back as code. Snapshot is the final piece of that puzzle.
Getting Started: The Essentials
- Install Paper Snapshot Chrome Extension
Get it from the Chrome Web Store. It's just 301KB. - Set Up Your Paper Account
Create a free account at app.paper.design. Install the desktop app for MCP connectivity. It's free during open alpha. - Open the Site You Want to Capture
Navigate to any website in Chrome — your own site, a competitor's, or anything that inspires you. - Capture with Snapshot
Click the extension icon and select the area to capture. The HTML/CSS layers land directly in your Paper canvas. - Edit on Canvas → Export as Code
Modify text, colors, and layout freely, then export as React or Tailwind. If you've connected an AI agent, just say "apply these changes to the codebase."
Good to Know
Paper is still in open alpha. Team collaboration, component system (slots, props), and CSS Grid are still in development. Don't expect Figma-level maturity. But for frontend developers or small teams doing rapid prototyping, it's already quite usable.
