Spread

Route: Top nav → Spread

Spread takes a web page — by URL or as an uploaded HTML file — and rebuilds it in your design system. Your tokens, your component recipes, your layout rules. A draggable slider compares it against the original.

Then it does the unusual part: it tells you where it approximated.

• URL mode — paste a URL
• HTML file mode — upload a saved .html, which is also how you spread a JavaScript app or a page behind a login
• Reading the report — the list of every shortcut it took

What you need

Spread runs on your own Anthropic key, added in Settings. On the hosted app you also need to be signed in, because the page fetcher is for signed-in users.

Without a key you get the manual path instead: the /spread skill in Claude Code, which needs neither a key nor an account, and can crawl a whole site. That is a real alternative rather than a consolation.

What it costs

A run is roughly €0.40–0.80 on your key, and the exact estimate is shown before anything is spent — you approve it at a checkpoint. A second run against the same library is cheaper, because the design system it sends is cached.

What it will not do

• It will not show you an unvalidated page. If the rebuild comes back without its report, Spread refuses to render it and tells you which part was missing. A page without its honesty list is not a spread.
• It will not pretend about a JavaScript app. Fetched over HTTP, a React or Vue app is an empty shell — Spread detects that and points you at file mode rather than charging you to rebuild a loading screen.
• It will not fetch anything private. The page fetcher refuses private networks, non-HTML responses, and anything over 1 MB.

Why this matters

Spread answers a question that usually costs a quarter of engineering time: "what would our existing pages look like in the new design system?"

It is also the honest version of a demo. Anyone can generate a pretty page; showing exactly where the rebuild bends is what makes it usable in a real migration.