Clone any website
Overview
Clone a shipped page into Figma accurately, without eyeballing it. Capture the rendered state, extract the tokens, rebuild section by section, then compare on three axes: visual, structural, semantic.
Design files drift behind production, and rebuilding a page by eye lands close enough to pass review and far enough to be wrong. This recipe pairs a browser capture with a token extraction so every value in the rebuild comes from the page rather than from a guess. Dembrandt supplies the measurable half: palette, type scale, spacing, radii and component patterns read from computed styles in a real browser. The screenshots and the DOM supply the rest. Rebuild one section at a time, compare after each, and verify at the end by extracting your own rebuild and diffing the two token sets.
Read the full eleven-step method
Extract the original as the reference
Extract your rebuild once it is deployed
Diff the two token sets
Two auto layout frames, desktop and mobile, built from extracted values, plus a token diff that names whatever is still off.
More in Extraction
Browse all
All recipes →
Continue reading
Getting started
Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.
MCP
Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.
Skills
30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.