uiforge

---

Three outputs from one site — behave, look, edit

Most tools give you a still. UIForge gives you the behavior first, then the look and the editable code:

	what it is	for
⭐ Archive (uiforge-archive)	the complete behavior — the site's own code + every recorded response, replayed offline from a browsable, editable mirror (real files, real filenames — not opaque blobs)	a copy that works: tabs, filters, lists, client-side transitions, motion, scroll
Freeze (uiforge-freeze)	a self-contained, pixel-faithful still — real CSS/fonts/assets kept, scripts stripped, time frozen	an exact offline still — and the oracle the rebuild is measured against
Restore (uiforge-restore · -sourcemap)	editable source that renders pixel-identical — the real DOM componentized into React with classes kept byte-exact, or the site's real original source recovered when it shipped source maps	editing, developing, shipping with your content — without the fidelity drift

The archive runs the real JavaScript against cached data, so every interaction behaves exactly as the original — no reconstruction, because it is the behavior. (This is why it beats "Save As": a naive save of a modern app never records the XHR/API data the app fetches, so it opens as a broken shell — the archive records and replays that data.) The freeze renders identical to the live site (it is its CSS); the restore keeps the real DOM + real CSS, so it's pixel-identical by construction — verified: ui.shadcn.com restores to 0.00% pixel difference — and where a site ships source maps it recovers the actual original .tsx.

---

Restore it into editable code — that renders pixel-identical

Point Restore at the archive and get an editable React project that renders exactly like the original — because it keeps the real DOM, the real class strings (byte-for-byte), and the real compiled CSS. Fidelity is the default, not something chased with an LLM. Every result is proven by an offline pixel-gate against the freeze:

site	restored as	pixel diff vs the original
ui.shadcn.com	React, classes kept verbatim	0.00% — pixel-identical
vercel.com	″	1.8% (only the WebGL canvas hero — it needs JS)
linear.app	″	5% (a JS-state menu — recovered as real source by Tier A ↓)

And when a site ships or leaks source maps, the top tier recovers its actual original source — real .tsx with the original names, comments, and types. linear.app → 421 real source files, including the exact MobileMenu.tsx (with its useState open-logic) that a static render can't reproduce. Two tiers, best-first, everything from the archive — offline:

/uiforge:clone ui.shadcn.com --restore

---

Cloned — and it actually works. Five flagship sites.

Each site below was archived and replayed offline by the plugin (uiforge-archive --explore). The GIFs are the clone running with no network — the interactions are genuine, driven by the site's own code against recorded data.

And each is pixel-faithful as a Freeze — original (left) vs freeze (right):

---

It clones motion and interaction too — not just a static snapshot

---

Install

Prerequisites: Claude Code, Node, and Playwright for the rendering tiers (npm i -D playwright && npx playwright install chromium).

/plugin marketplace add TaewoooPark/UIForge
/plugin install uiforge@uiforge

Or locally: git clone https://github.com/TaewoooPark/UIForge.git && claude --plugin-dir ./UIForge.

---

Clone a site

The command — one command, three modes

/uiforge:clone <url│file.html> [--archive] [--restore] [--content path.md] [--explore] [--headed] [--profile dir]

you want…	say	what it does
a copy that works / behaves	--archive, or "clone it so it actually works"	⭐ records the real code + data → an offline replay where tabs/filters/lists/transitions work
editable source, pixel-identical	--restore (or --react), or "…for my product (product.md)"	real DOM → React with classes byte-exact + real source recovered from source maps — proven by pixel-gate
a pixel-faithful still	(default) / --freeze	a self-contained freeze

Or just say it — the agent picks the mode:

Clone vercel.com so it actually works — the tabs and pricing should switch.   → Archive
Make a site with the same design as stripe.com, but for my product (product.md). → Restore
Give me an exact offline copy of linear.app's landing page.                     → Freeze