reimagine-it-variations

Featured

Generate several distinct design directions from one HTML source plus a contrast sheet that shows every direction side by side. Use when the user says /reimagine-it variations, "show me options", "give me three takes", "which direction works best", or wants to compare design directions before choosing one. CLI: npx reimagine-it variations -i page.html -n 4 -o review/. Part of the reimagine-it Content-Derived Design suite.

Web & Frontend 134 stars 25 forks Updated today MIT

Install

View on GitHub

Quality Score: 90/100

Stars 20%
71
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
83
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# /reimagine-it variations **Parent:** [../SKILL.md](../SKILL.md) — the full Content-Derived Design engine. This sub-skill handles only multi-direction exploration. Generates 2–8 distinct directions from one source plus an `index.html` contrast sheet that lays them out side by side with per-direction quality, fidelity, and voice. One seed reproduces the whole set. ## Usage ```bash npx reimagine-it variations -i page.html -n 4 -o review/ npx reimagine-it variations -i page.html -n 4 --seed 42 -o review/ # reproducible npx reimagine-it variations -i page.html -n 4 --ref house.lock.json # on-brand ``` Output per run: | File | What it is | |------|-----------| | `variation-1-<token>.html` … | One standalone page per direction | | `index.html` | Contrast sheet: all directions side by side | | `variations.json` | Ranked report: token, seed, voice, fit, quality, fidelity | ## Procedure 1. Run with `-n 3` unless the user asked for a different count. 2. Read `variations.json` back to the user: rank, token, quality, fidelity. 3. Name the *structural* difference between the top two — not just the colors. 4. Print the seed and tell the user how to reproduce the set. 5. Once a direction is chosen, generate it standalone with `npx reimagine-it -i page.html -t <token> --seed <seed>`. ## Must not - Present variations as options when fidelity is below 80% for any of them - Describe two variations as different if they share a silhouette - Lose the seed — the set is only reviewa...

Details

Author
Kayforkind
Repository
Kayforkind/reimagine-it
Created
3 weeks ago
Last Updated
today
Language
JavaScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Featured

reimagine-it-generate

Generate one Content-Derived Design direction from an HTML source, or let Auto choose the strongest direction. Use when the user says /reimagine-it generate, "redesign this page", "make it a landing page", "turn this into an infographic", names a token (webpage, infographic, svg, 3js, simulation, artistic, cinematic, dashboard, photography, landing), or wants a content-aware redesign instead of a mood board. CLI: npx reimagine-it --auto -i page.html -o out.html. Part of the reimagine-it Content-Derived Design suite.

134 Updated today
Kayforkind
Data & Documents Featured

reimagine-it

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. Tokens: webpage, infographic, svg, 3js, simulation, artistic, cinematic, dashboard, photography, landing, plus leftover words as a brief. Also /reimagine-it audit for quality checks. Installed via npx skills add Kayforkind/reimagine-it or plugin marketplace. Not /better. Not a mood board. Does not ingest PDF, PPTX, or DOCX.

134 Updated today
Kayforkind
AI & Automation Featured

reimagine-it-audit

Design Health — runs 19 deterministic quality checks on HTML output. Use when the user says /reimagine-it audit, "audit this page", "check design quality", or wants to verify craft-floor compliance before shipping. Catches blank plates, missing focus rings, non-compositor motion, off-palette accents, dead motion, fabricated content. No LLM, no API key. CI-ready with --json and exit codes. Part of the reimagine-it Content-Derived Design suite.

134 Updated today
Kayforkind