A UI teardown is the full pipeline run — from URL to generated Next.js project. Here’s what happens at each stage.
Step 1: Capture with websnap
websnap https://example.com --output ./capture
websnap launches a browser, navigates to the URL, and captures:
- Full-page screenshot at multiple viewports
- Serialized DOM tree with computed styles
- All loaded assets (fonts, images, SVGs)
- Network requests and resource timings
Step 2: Inspect with webprobe
webprobe injects into the page to extract metadata that isn’t available from the DOM alone:
- Bounding box coordinates for every element
- Stacking context and z-index layers
- Scroll containers and overflow behavior
- Interactive states (hover, focus, active)
Step 3: Analyze with webast
webast takes the captured data and performs static analysis:
- Identifies component boundaries based on DOM structure and style patterns
- Detects repeated patterns (list items, card grids, navigation links)
- Maps the layout hierarchy (header, main, sidebar, footer)
- Extracts the design token palette
Step 4: Generate with web2next
web2next takes the analysis output and generates a complete Next.js project:
- One component per identified boundary
- Design tokens as CSS custom properties
- Responsive styles preserved from the original
- Proper semantic HTML elements
Step 5: Verify with webdiff
webdiff renders the generated project and compares it pixel-by-pixel against the original screenshots, producing a diff report with similarity scores.
The entire pipeline runs in under a minute for most sites.