Rethemer

Route: Top nav → Rethemer

The Rethemer 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 rethemed side by side.

• URL mode — paste a URL; fetched via the dev-server proxy
• HTML file mode — upload a .html file from disk
• Reading the report — the right-side panel that lists every approximation

Current state

The pipeline is currently mocked — it injects your tokens.css as a high-specificity overlay onto the source HTML. A real AI-driven rewrite ("rebuild this component using shadcn 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 Rethemer 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.