by Kayforkind
Content-Derived Design: existing HTML in, a stronger standalone page out — from the nouns, dates, and colors already in the file. CLI + agent skill. Offline. No CDN.
# Add to your Claude Code skills
git clone https://github.com/Kayforkind/reimagine-itreimagine-it is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by Kayforkind. Content-Derived Design: existing HTML in, a stronger standalone page out — from the nouns, dates, and colors already in the file. CLI + agent skill. Offline. No CDN. It has 52 GitHub stars.
reimagine-it's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/Kayforkind/reimagine-it" and add it to your Claude Code skills directory (see the Installation section above).
reimagine-it is primarily written in JavaScript. It is open-source under Kayforkind on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh reimagine-it against similar tools.
No comments yet. Be the first to share your thoughts!
Unlocks once the catalog security scan passes (runs nightly).
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
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
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.
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% | landing, artistic |
| Crimson Circuit | cinematic |
258 | 100% | gradient, landing |
| Velocita | artistic |
240 | 100% | gradient, landing |
| Maracuyá | landing |
246 | 100% | photography, gradient |
| Flick Fits | photography |
250 | 100% | showcase, landing |
| Meridian Tower | 3js |
260 | 100% | editorial, svg |
| Horizon | dashboard |
330 | 100% | gradient, landing |
| Hearth & Grain | photography |
226 | 100% | landing, editorial |
| Millbrook | infographic |
278 | 100% | simulation, editorial |
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 →
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.
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 |
<img src="https://raw.githubusercontent.com/Kayforkind/reimagine-it/main/docs/tokens/artistic-desktop.p |