reimagine-it

reimagine-it

The source file is the design brief. Turn existing HTML into a beautiful, usable page — without losing its meaning.

▶ 39-second walkthrough — silent screen capture of the playground: paste HTML → Auto draws three directions → pick one → download the standalone artifact.

Try the live playground · See the results · Run it locally · Install it · The lab behind it

One command. One inspectable result.

reimagine-it redesigns an existing HTML page from the content already inside it. It extracts the real headings, facts, links, names, dates, numbers, and colors, then builds a stronger visual system around them — without replacing the page with invented filler.

npx reimagine-it --auto -i page.html -o redesign.html
npx reimagine-it variations -i page.html -n 4 -o review/
npx reimagine-it lock -i brand.html -o house.lock.json
npx reimagine-it audit redesign.html

Source in. Beautiful, usable HTML out. The source stays untouched. The result is one standalone HTML file — offline, no CDN, no Figma, no build step. Four commands share that engine: generate (or --auto), variations, lock, and audit.

See it work

Real sources, real CLI output — nine committed journeys. The seven launch journeys own seven distinct Auto tokens, so a juice bar, a skate deck, and a streetwear drop do not share a silhouette; the two newest prove the v2.7.0 guarantees — a bakery collection becomes a photography folio (not a data poster), and a city budget becomes an infographic whose first fold is the source's own timeline.

Source	Auto	Score	Fidelity	Alternates
Venator	gradient	246	100%	artistic, landing
Crimson Circuit	cinematic	258	100%	gradient, motion
Velocita	artistic	240	100%	gradient, editorial
Maracuyá	landing	246	100%	editorial, photography
Flick Fits	photography	250	100%	showcase, editorial
Meridian Tower	3js	260	100%	editorial, cinematic
Horizon	dashboard	330	100%	infographic, gradient
Hearth & Grain	photography	226	100%	dashboard, gradient
Millbrook	infographic	278	100%	simulation, dashboard

Proven beyond the showcase — examples/public-sources/ redesigns six real public-domain pages (National Park Service, NASA, NOAA/NWS, Census Bureau, Federal Register, Smithsonian) with no declared palette for the engine to lean on: Artemis II → 3js orbit (100%), hurricane outlook → landing (100%), Yellowstone bulletin → editorial (84%), Census income brief → infographic (21/21 facts), FOIA rule → simulation, Apollo 11 → simulation. Community proofs in examples/community/ cover jobs the journeys don't — a clinic bulletin → infographic, a fashion campaign → lookbook. Every artifact regenerates byte-identically in CI.

One command, three furnished designs — point /reimagine-it at a building page and it ships an orbitable 3D object, a magazine feature, and a living SVG diagram from the same source: npx reimagine-it --auto -i meridian.html. See the suite →

The 60-second proof

Start with a real page — not a generic prompt:

<!-- before.html -->
<h1>A Letter to the Night Tide</h1>
<p>Field notes from the coast, written after the last light.</p>
<h2>Three things the water taught us</h2>
<ul>
  <li>Patience · 12 minutes of stillness</li>
  <li>Distance · 4 miles offshore</li>
  <li>Return · notes from 2026</li>
</ul>

Generate a direction:

npx reimagine-it --auto -i before.html -o redesign.html

Open redesign.html. It is a standalone artifact: no server, CDN, API key, Figma file, or build step is required.

For a reviewable client handoff, keep the decision report too:

npm run auto -- \
  -i before.html \
  -o review/auto.html \
  --report review/auto.json \
  --seed 42

The report records the selected direction, candidate scores, seed, rationale, source anchors, and source-fidelity checks. The input file is never overwritten.

Seventeen design builders

Every token is a real generator in the engine — each one reads the same extracted content and builds a structurally different composition. Layouts are generated, not pasted from a design kit; source facts are not invented. Every builder also ships with a content-derived art layer: anchor initials become monogram tiles, source numbers become donut and bar charts, and the palette shades isometric 3D prisms — all inline SVG, all offline.

Builder	Real output (same source)	Best for	Character
webpage		Articles and source documents	Measured reading hierarchy
landing		Products and services	Hero and action rhythm
dashboard		Metrics and operations	Console, KPIs, and status
infographic		Facts and comparisons	Shared scales and timelines
cinematic		Narrative moments	Depth and paced chapters
artistic		Posters and expressive pages	Asymmetric type and layered fields
photography		Portfolios and collections	Folio plates and captions
svg		Marks and diagrams	Inline geometric illustration
3js		Spatial stories	Offline orbitable canvas
simulation		Time and process	Playable timeline and scrubber
glass		Modern panels and cards	Frosted backdrop-filter depth