Spread
Route: Top nav → Spread
The Spread takes any web page — by URL or as an uploaded HTML file — and renders it as it would look in your design system. A draggable slider lets you compare original vs spread side by side.
- URL mode — paste a URL; fetched via the dev-server proxy
- HTML file mode — upload a
.htmlfile from disk - Reading the report — the right-side panel that lists every approximation
Current state
The pipeline is currently mocked — it injects your
tokens.cssas a high-specificity overlay onto the source HTML. A real AI-driven rewrite ("rebuild this component using component primitives in your library") is on the roadmap — see REBUILD_PLAN.md.
What that means in practice: surfaces, text, and borders pick up your tokens cleanly; structural decisions (which component to use, which layout to apply) don't change. The slider + report panel UX is the final shape; the rebuild quality is what improves when the real pipeline lands.
Why this matters
The Spread answers a question that takes most teams a quarter of engineering time: "What would our existing surfaces look like in our new design system?" Today's mock pipeline already answers it for color, type, and surface decisions. Tomorrow's real pipeline answers it for component-level decisions too.
The output is also a sales demo: paste a competitor's URL, see it in your system. Or paste your old marketing page from before the rebrand. Or your team's intranet that nobody has the budget to refresh.