Screenshot → React, in seconds

Steal the look.
Keep the code clean.

Drop a screenshot of any interface you admire. A Claude vision agent rebuilds it as a production-ready React + TypeScript + Tailwind component — previewed live, ready to paste.

Drop a screenshot→See how it works

5 free generations · no credit card

screenshot.png

agent ⟶ tsx

export default function Hero() {
  return (
    <section className="...">
      <h1>Steal the look</h1>
    </section>
  )▌
}

Three steps. No design system required.

/how-it-works

Drop the screenshot

Drag, paste, or browse any PNG, JPEG, WebP, or GIF of a UI you like.

Claude reads the pixels

A vision agent maps layout, spacing, type, and color into a single self-contained component.

Preview & paste

Tweak in the live Sandpack preview, copy the TSX, drop it straight into your project.

Live, not lossy

Watch it render before you trust it.

Every generation mounts in a real in-browser sandbox with Tailwind loaded. Flip between the rendered result and the source, copy when it looks right. No surprises after paste.

· Self-contained .tsx, typed props, sensible defaults
· Tailwind utilities only — no stray CSS files
· Zero external UI libraries to install

PreviewCode

Pricing card

Generated from a screenshot

Get started

Pricing

Start free. Scale when it sticks.

Free

$0/mo

→5 generations / month
→Live preview
→Copy-ready TSX

Start free

Pro

$19/mo

→100 generations / month
→Priority model
→All Free features

Choose Pro

Steal the look.Keep the code clean.