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.

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.