reimagine-it skill
A skill and CLI that rebuild an HTML page from its own facts, numbers and colors into one offline file, in 17 directions
- 214 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill runs an npm package through `npx` on your machine and writes HTML files to disk.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/reimagine-itDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill runs an npm package through `npx` on your machine and writes HTML files to disk.
This is third-party code. Review the repository files before installing.
What it does
reimagine-it takes a finished HTML page and builds a new standalone page from its own headings, facts, names, dates, numbers, links and colors. The source file stays untouched, and the result is a single HTML file with no CDN, build step or API key. The `/reimagine-it` skill requires the agent to run the CLI; it must not hand-author the page. The `npx reimagine-it --auto -i page.html -o redesign.html` command picks one of 17 directions on its own, from infographic and dashboard to a 3D scene and a simulation. `variations` prepares several options with a contrast sheet, `lock` saves a brand style as JSON, and `audit` checks a page against 19 rules. The same engine runs as an MCP server with tools such as `design_auto`, `design_variations`, `design_lock` and `audit_html`.
Who it is for. Designers, marketers and front-end developers with a finished HTML page that needs a new look without rewriting its content.
Good fit when
- A landing page looks dated and nobody plans to change its text and figures.
- A report or budget in HTML turns into an infographic or dashboard with the same numbers.
- A client sees several directions through `variations` and a contrast sheet.
- A brand style is saved to `house.lock.json` and carried over to other pages.
- A finished page goes through the rules audit before publishing, including in CI.
Not a fit when
- The source is a PDF, PPTX or DOCX: the engine reads HTML only, so other formats must first become a page.
- You need markup for a specific framework: the output is a single standalone HTML file.
- The page content is loaded by scripts from a server: the result is built from what the file itself contains.
Example request
/reimagine-it turn `report.html` into an infographic with the same numbers and show two more directions.Limitations
The input is an HTML file or stdin. Running it needs Node.js, the command goes through `npx` and the package is downloaded from npm. The result needs no network or API key until `--web-fonts` is enabled for Google fonts. If the CLI fails to run, the agent must name the reason and may not substitute hand-written markup. By default `-o` overwrites an existing file, and `--no-clobber` forbids replacing. The same result repeats with the same `--seed`.
How to disable. Delete the `reimagine-it` skill from the agent's skills directory and remove the plugin with the agent's own plugin manager. Remove the `reimagine-it` entry from the MCP config.
FAQ
How do I install reimagine-it in Claude Code?
Run `npx skills add Kayforkind/reimagine-it`, or `/plugin marketplace add Kayforkind/reimagine-it` followed by `/plugin install reimagine-it@reimagine-it`. Then call `/reimagine-it`.
Do I need an API key or a network?
No. The engine is deterministic and works offline. The network is needed to download the package and for Google fonts when `--web-fonts` is on.
How do I get several variants?
`npx reimagine-it variations -i page.html -n 4 -o review/` creates four directions and a contrast sheet. The same `--seed` reproduces the variant you liked.
How do I connect reimagine-it as an MCP server?
Add a server with the `npx` command and the arguments `-y --package reimagine-it reimagine-it-mcp` to the client config. It exposes `reimagine`, `design_auto`, `design_variations`, `design_lock`, `extract_content`, `list_tokens`, `audit_html` and `list_rules`.
How is it different from the Reimagine It service?
It is a different project. Here Kayforkind's CLI rebuilds HTML from its own content, and the interview-based reimagineit.ai service has no connection to it.
How do I check a finished page?
`npx reimagine-it audit redesign.html` runs Design Health: 19 rules with no model and no keys. A separate `Kayforkind/design-health-action` covers CI.
Discussion
No questions or reviews yet.
Related
Skillsdesign-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A 147-rule design check that finds AI-interface tells, fixes the mechanical ones and hands the rest to an agent skill
A design skill against templated AI interfaces: new pages, audits, redesigns and design extraction from a screenshot or URL
The /taste skill turns a URL into design tokens and trade-off principles, with ready rules for Cursor and Claude Code
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| reimagine-it (this card) | no | 214 | |
| Impeccable | no | 108,873 | Impeccable reviews and edits an interface with commands in the browser; reimagine-it rebuilds a finished page from its HTML content |
| Frontend Design (Ilm-Alan) | no | 167 | Frontend-design sets aesthetic anchors for new markup; reimagine-it redoes an existing page |
README in short
The project page shows nine before-and-after journeys, six public agency pages and a table of scores per direction. A browser extension and a CI action are described separately.
README badge
Original SKILL.md
---
name: reimagine-it
description: >-
Content-Derived Design — reads existing HTML and writes a stronger standalone
page from headings, facts, names, dates, numbers, links, emails, and colors
already in that file. CLI: npx reimagine-it --auto -i page.html -o out.html;
also variations, lock, and audit. Use when the user says /reimagine-it, "reimagine it", "reinvent this",
"redesign this page", "make an infographic", wants a content-aware redesign
or a visual leap instead of a mood board. All 17 tokens: webpage,
infographic, svg, 3js, simulation, artistic, cinematic, dashboard,
photography, landing, editorial, gradient, showcase, motion, glass,
lookbook, particles — plus leftover words as a brief. Also /reimagine-it
audit for quality checks. The agent runs the CLI; it does not hand-author
the page.
Installed via npx skills add Kayforkind/reimagine-it or plugin marketplace.
Not /better. Not a mood board. Does not ingest PDF, PPTX, or DOCX.
license: MIT
metadata:
author: Kayforkind
version: "2.15.0"
hosts:
- claude-code
- cursor
- codex
- copilot
- gemini-cli
- factory-droid
- agent-skills
keywords:
- content-derived-design
- redesign
- infographic
- svg
- threejs
- frontend
- html
- css
- palette
- motion
- offline