v2.4.3 — engine fix: shared CSS systems restored on every token

What's new in v2.4.3 — the engine fix that restored every page's design system

Fix — token dispatch ran before shared CSS systems were built

• Root cause: every generated page embedded undefined where its shared CSS should be. The token switch sat above the var bandCss / var artCss assignments, so every page shipped without its mesh aurora fields, giant data-wash numbers, dot grids, constellations, iso-stacks, glyph tiles, donut charts, mini bars, stats bands, bento grids, and band marquees/footers — while still passing the craft audit (which checks body markup, not CSS).
• Fix: the dispatch switch now runs after every shared CSS system is assigned. No token output contains a literal undefined (locked by a new regression test).

More fixes on the same path

• Data-wash numbers no longer glue together — 336,000 + 40,000 previously rendered as one clipped blob (336,00040,00). The wash is now space-evenly with gap, a 32vw per-span cap, and text-overflow:ellipsis at narrow widths. Numbers stay separate and legible on desktop and phone.
• The webpage token's isometric stamp now floats — artCss (prism float, drop shadow, glyph tiles) was never included in the webpage token's stylesheet; the hero stamp now carries it like every other token.
• Palette check hardened — the dashboard token now uses palette vars instead of hard-coded slate hexes, and the palette constraint counts colors case-insensitively (so #FF3366 vs #ff3366 is one color, not two). 1500/1500 stress-test cells pass.

Regenerated artifacts

All seven end-user examples were regenerated through the fixed engine — auto.html, alternates, before-after.webp, gallery.webp, and the showcase desktop/phone shots — and docs/engine.js + extension/engine.js are rebuilt so the live playground shares the fix. This release ships the regenerated before/after WebP pair for every example as release assets.

Validation

• 59/59 unit tests · 1500-cell stress test (100 sources × 15 tokens) 0 errors, 0 undefined, fidelity avg 99.6% · audit 0 failures · gold review PASS · all workflow YAMLs parse

Full changelog: CHANGELOG.md

---

🛒 GitHub Actions Marketplace

This release publishes the reimagine-it Design Health action to the GitHub Actions marketplace.

Quick start

- uses: Kayforkind/reimagine-it@v2.4.3
  with:
    path: "**/*.html"

What it checks

Category	Checks
Typography	Hierarchy levels, text measure, missing display fonts
Palette	Off-palette accents, unstyled ::selection, >5 non-neutral colors
Motion	Missing prefers-reduced-motion, missing :focus-visible, non-compositor animation
Content	Blank plates, placeholder labels, fabricated content
Structure	No hero SVG, missing landmarks, broken images
Performance	Missing content-visibility, CLS risk, DOM depth

18 deterministic rules. No LLM. No API key.

---

📊 Measured quality (auto-generated)

Direction	Fidelity (title kept)	Usability (quality /100)	Content art (glyphs/donut/bars/prism)
webpage	18/18	100/100	9.0
landing	18/18	100/100	10.0
dashboard	18/18	100/100	10.8
infographic	18/18	100/100	9.0
cinematic	18/18	100/100	13.0
artistic	18/18	100/100	11.0
photography	18/18	100/100	20.0
svg	18/18	100/100	10.0
3js	18/18	100/100	2.0
simulation	18/18	100/100	13.0
glass	18/18	100/100	10.0
editorial	18/18	100/100	8.0
motion	18/18	100/100	14.0
gradient	18/18	100/100	10.0
showcase	18/18	100/100	14.0
Output diversity: 27.5% mean pairwise difference between directions on the same source — no two tokens produce the same page.
Coverage: 60 generated pages (15 tokens × 4 sources), all audited structurally. Regenerate with node scripts/benchmark-tokens.js.

v2.4.2 — 80% fidelity floor, all 15 tokens in the extension

What's new in v2.4.2 — source fidelity floor raised to 80% across every token

Fidelity: every source anchor survives the redesign

The engine previously let headings override real source anchors, so phrases like "Venator Become" or "Arcade Tee" silently vanished from the output. Anchors are now headings + source anchors, deduplicated — all 15 tokens keep every clickable phrase.

Links & emails on every token

A shared Source-index footer now renders all content.links and emails on every generated page, not just webpage/landing tokens.

No more truncated tokens

Simulation, cinematic, 3js, and dashboard render the full source signal instead of the first few facts/anchors.

Measured results

• All 105 token×source fidelity cells ≥80% (worst token: 80%) — up from 61 of 105 below 80%
• All seven shipped examples report 100% fidelity in their auto.json reports
• New regression test locks the floor (57/57 tests pass)
• Benchmark diversity now 19.9% (was 15.6% — a side effect of higher fidelity)

Extension & CI

• Extension popup now exposes all 15 tokens (editorial, motion, gradient, glass, showcase added to the original ten)
• docs-drift CI job fails the build if case tables diverge from manifest/auto.json ground truth

Validation

• 57/57 unit tests · 15-token benchmark gate all PASS · audit 0 failures · all workflow YAMLs parse · Pages live

Full changelog: CHANGELOG.md

---

🛒 GitHub Actions Marketplace

This release publishes the reimagine-it Design Health action to the GitHub Actions marketplace.

Quick start

- uses: Kayforkind/reimagine-it@v2.4.2
  with:
    path: "**/*.html"

What it checks

Category	Checks
Typography	Hierarchy levels, text measure, missing display fonts
Palette	Off-palette accents, unstyled ::selection, >5 non-neutral colors
Motion	Missing prefers-reduced-motion, missing :focus-visible, non-compositor animation
Content	Blank plates, placeholder labels, fabricated content
Structure	No hero SVG, missing landmarks, broken images
Performance	Missing content-visibility, CLS risk, DOM depth

18 deterministic rules. No LLM. No API key.

v2.4.1 — static before/after WebP, interactive-token fix

Summary

• Static before/after WebP composites replace animated GIFs — every end-user example now ships a single before-after.webp (source left, redesign right, gold arrow). 460–610 KB GIFs become 36–54 KB WebP; the 3.7 MB gallery animation becomes a 133 KB static grid; the meridian 3js/svg suite uses 16–30 KB static renders. The Pages site loads one request per image.
• Fixed interactive-token freeze — page() joined the shared fx layer and token scripts (3js, simulation) with no separator (})()(function(){…})()), throwing a TypeError that silently disabled the orbit canvas and timeline. Now separated; regression test added.
• Web-fonts playground toggle — "Use web fonts" upgrades the chosen voice with Google Fonts; the flag travels through share links.
• Currency and quantity extraction — $49, $1,200, $2.1B, 40 staff, 12,000 cabinets now survive into the redesign. 100-source stress test: 100% fidelity, 136/136 quality, 0 errors.

Breaking changes

None. Output remains 100% offline by default.

Testing

• 56/56 unit tests · 15-token audit · benchmark 100/100 gate
• Live Pages verified: WebP assets 200, old GIF URLs 404

---

📊 Measured quality (auto-generated)

Direction	Fidelity (title kept)	Usability (quality /100)	Content art (glyphs/donut/bars/prism)
webpage	18/18	100/100	5.0
landing	18/18	100/100	8.0
dashboard	18/18	100/100	6.8
infographic	18/18	100/100	5.0
cinematic	18/18	100/100	5.0
artistic	18/18	100/100	6.0
photography	18/18	100/100	6.0
svg	18/18	100/100	6.0
3js	18/18	100/100	2.0
simulation	18/18	100/100	5.0
glass	18/18	100/100	5.0
editorial	18/18	100/100	2.0
motion	18/18	100/100	6.0
gradient	18/18	100/100	5.0
showcase	18/18	100/100	5.0
Output diversity: 15.6% mean pairwise difference between directions on the same source — no two tokens produce the same page.
Coverage: 60 generated pages (15 tokens × 4 sources), all audited structurally. Regenerate with node scripts/benchmark-tokens.js.

v2.4.0 — the 10x builder upgrade

The 10x builder upgrade

One command now ships a $100k-look redesign with a typographic voice, an OKLCH palette system, generative art direction, composition bands, and a self-critiquing Auto.

What's new

• Typographic voices — editorial, grotesque, techno, serifClassic, highContrast, expressive, monoForward — picked from the source's profile + seed + --brief, with a fluid type scale and 4/8 spacing rhythm. Default output stays 100% offline; --web-fonts opts into Google Fonts.
• OKLCH palette system — the source accent is hue-rotated into two harmonious role colors with lightness ramps, contrast-enforced, referenced via --a2/--a3 CSS variables.
• Generative art direction — aurora mesh fields, data-wash numbers, halftone dot grids, anchor constellations, CSS-3D isometric stacks, plus cursor spotlight / tilt cards / count-up micro-interactions on every token.
• Composition bands — stats, bento, quote, CTA, marquee, footer archetypes; webpage/landing/infographic/showcase now compose instead of hard-coding one page.
• Self-critiquing Auto — draws 3 directions, scores against a 136-point design battery (type scale, art, motion, palette, fidelity, landmarks), re-rolls weak draws, and reports voice + design score. --emit writes design-token.json + quality-report.json.
• Plan hook — --plan '{"token":"landing","voice":"grotesque"}' lets a model harness steer the deterministic pipeline.
• Playground — Auto shows three drawn directions with scores; pick one or hit ↻ Recreate.
• Content intelligence — extraction adds images, tables, tone, reading time, script detection.
• Housekeeping — removed superseded legacy artifacts; regenerated all end-user examples + GIFs through the new engine.

Validation

• 55/55 unit tests · 15-token audit · benchmark 100/100 gate · gold audit 0 failures
• Fresh engine output passes the gold craft audit · all workflow YAMLs parse

Try it: npx reimagine-it --auto -i page.html -o redesign.html · playground: https://kayforkind.github.io/reimagine-it/#playground

---

🛒 GitHub Actions Marketplace

This release publishes the reimagine-it Design Health action to the GitHub Actions marketplace.

Quick start

- uses: Kayforkind/reimagine-it@v2.4.0
  with:
    path: "**/*.html"

What it checks

Category	Checks
Typography	Hierarchy levels, text measure, missing display fonts
Palette	Off-palette accents, unstyled ::selection, >5 non-neutral colors
Motion	Missing prefers-reduced-motion, missing :focus-visible, non-compositor animation
Content	Blank plates, placeholder labels, fabricated content
Structure	No hero SVG, missing landmarks, broken images
Performance	Missing content-visibility, CLS risk, DOM depth

18 deterministic rules. No LLM. No API key.

---

📊 Measured quality (auto-generated)

Direction	Fidelity (title kept)	Usability (quality /100)	Content art (glyphs/donut/bars/prism)
webpage	18/18	100/100	5.0
landing	18/18	100/100	8.0
dashboard	18/18	100/100	6.5
infographic	18/18	100/100	5.0
cinematic	18/18	100/100	5.0
artistic	18/18	100/100	6.0
photography	18/18	100/100	6.0
svg	18/18	100/100	6.0
3js	18/18	100/100	2.0
simulation	18/18	100/100	5.0
glass	18/18	100/100	5.0
editorial	18/18	100/100	2.0
motion	18/18	100/100	6.0
gradient	18/18	100/100	5.0
showcase	18/18	100/100	5.0
Output diversity: 14.8% mean pairwise difference between directions on the same source — no two tokens produce the same page.
Coverage: 60 generated pages (15 tokens × 4 sources), all audited structurally. Regenerate with node scripts/benchmark-tokens.js.

v2.3.8 — shareable links, --diff, token benchmark

What's new in v2.3.8

• Shareable result links — the no-install playground encodes the source + token into the URL hash, so any redesign becomes a one-click link that reproduces the same output (deterministic per-source seed, replacing the random draw). Try it: https://kayforkind.github.io/reimagine-it/#playground
• --diff CLI flag — print a before/after summary (direction, palette, anchors, art elements, fidelity %, size) without writing a file: npx reimagine-it -i page.html --auto --diff
• 15-token benchmark — node scripts/benchmark-tokens.js generates all 15 directions × 4 representative sources through the real CLI and writes benchmark/BENCHMARK.md. Every token scores 100/100 usability and full fidelity, with 18.4% mean pairwise output diversity — no two tokens produce the same page.
• Design Health badge — the README header now shows the live status of the separate design-health-action repo's audit workflow.
• Launch post — docs/LAUNCH-POST.md is a ready-to-publish write-up for dev.to, HN, and Reddit.

Validation

• 47/47 unit tests pass; audit-tokens.js: all 15 tokens pass.
• CLI + benchmark scripts pass node --check.
• Distribution PRs opened: VoltAgent/awesome-agent-skills#966 and ComposioHQ/awesome-claude-skills#1736.

---

🛒 GitHub Actions Marketplace

This release publishes the reimagine-it Design Health action to the GitHub Actions marketplace.

Quick start

- uses: Kayforkind/reimagine-it@v2.3.8
  with:
    path: "**/*.html"

What it checks

Category	Checks
Typography	Hierarchy levels, text measure, missing display fonts
Palette	Off-palette accents, unstyled ::selection, >5 non-neutral colors
Motion	Missing prefers-reduced-motion, missing :focus-visible, non-compositor animation
Content	Blank plates, placeholder labels, fabricated content
Structure	No hero SVG, missing landmarks, broken images
Performance	Missing content-visibility, CLS risk, DOM depth

18 deterministic rules. No LLM. No API key.

v2.3.7 — playground presets, Horizon journey, richer tokens

What's new in v2.3.7

• Try it — no install playground upgrade: one-click sample sources (Startup, Data report, Restaurant, Game) and the previously missing showcase direction chip — all 16 directions (auto + 15) reachable from the landing page.
• Shareable result links — the playground now encodes the exact source + token into the URL (hash), so any redesign can be sent as a one-click link that reproduces the same output (deterministic per-source seed).
• Horizon example journey — a plain SLO/uptime page becomes a navy mission-control dashboard: donut chart, sparkline KPIs, scaled bars — every number (99.99%, 2.1B, 180 ms, 42%) pulled from the source itself. Seventh entry in the hero cycler and case grid with desktop/phone proof.
• Token upgrades from the design audit — photography plates gain monogram glyphs, the svg token gains a source-numbers data strip, glass panels get prism accents, the gradient headline animates its gradient, and glyph tiles float with staggered idle motion (respects prefers-reduced-motion).
• --diff CLI flag — generate and print a before/after summary (direction, palette, anchors, art elements, fidelity %, size) without writing a file: npx reimagine-it -i page.html --auto --diff.
• Fix — percent metrics now extract — 99.99%-style numbers were silently dropped by the extractor (trailing \b after % never matched). Negative lookahead replaces it; regression tests added.
• Engine bundles rebuilt (docs/engine.js, extension/engine.js); all example GIFs, manifest, and token board regenerated from the current engine.

Measured quality (new)

All 15 directions × 4 representative sources score 100/100 usability and full fidelity with 18.4% mean pairwise output diversity — no two tokens produce the same page. Full table in the README; regenerate anytime with node scripts/benchmark-tokens.js.

Validation

• 46/46 unit tests pass; audit-tokens.js: all 15 tokens pass; gold audit: 0 failures.
• Workflow YAMLs parse; Actions already on checkout@v5 / setup-python@v6 / setup-node@v6.

v2.3.6 — CI token audits, data-heavy Auto, animated + live gallery

v2.3.6

CI token audits

• scripts/audit-tokens.js (structural: undefined/NaN/empty body/misplaced markup) and scripts/render-audit.js (headless Chrome: visible text, no horizontal overflow, heading) now run as a token-audit job in the audit workflow on every push touching the engine.

Data-heavy Auto detection

• Auto now detects data-heavy sources (>=6 measurable facts or density-rich) and boosts the infographic token, stating so in the rationale. Field report -> infographic; essay -> editorial unchanged.

Gallery: animation + live demo

• 3js and motion chips show looping animated GIFs captured from the real outputs.
• "▶ Live demo" renders the current token in the browser (scrollable desktop + phone frames) via the in-page engine.

Also

• All 44 tests pass; engine bundles fresh; examples regenerated with stable Auto choices.

---

🛒 GitHub Actions Marketplace

This release publishes the reimagine-it Design Health action to the GitHub Actions marketplace.

Quick start

- uses: Kayforkind/reimagine-it@v2.3.6
  with:
    path: "**/*.html"

What it checks

Category	Checks
Typography	Hierarchy levels, text measure, missing display fonts
Palette	Off-palette accents, unstyled ::selection, >5 non-neutral colors
Motion	Missing prefers-reduced-motion, missing :focus-visible, non-compositor animation
Content	Blank plates, placeholder labels, fabricated content
Structure	No hero SVG, missing landmarks, broken images
Performance	Missing content-visibility, CLS risk, DOM depth

18 deterministic rules. No LLM. No API key.

v2.3.5 — webpage token fix, token gallery

v2.3.5

Fix — webpage token shipped an empty page

The webpage generator called page(title, bodyHTML) but page(title, css, body, script) expects the stylesheet second. The whole markup landed in <style> and <body> was the literal string undefined. Now fixed — the token emits the full page again.

Fix — blurry hero chips and screenshots

Landing hero chips used backdrop-filter with no fallback, smudging under software rasterization; removed. The example builder no longer forces swiftshader, so screenshots are sharp, and phone captures render at 480px.

New — interactive token gallery (wide + tall)

Each of the 14 tokens now has desktop and phone previews (docs/tokens/*.png), shown in an interactive gallery on the landing page with selector chips and prev/next — no more cramped grid where every example was a tiny thumbnail.

Also

• Regenerated all end-user examples + GIFs; engine bundles rebuilt; 44/44 tests pass.
• npm auto-publish runs on release (NPM_TOKEN set), so 2.3.5 goes live to the registry automatically.

---

🛒 GitHub Actions Marketplace

This release publishes the reimagine-it Design Health action to the GitHub Actions marketplace.

Quick start

- uses: Kayforkind/reimagine-it@v2.3.5
  with:
    path: "**/*.html"

What it checks

Category	Checks
Typography	Hierarchy levels, text measure, missing display fonts
Palette	Off-palette accents, unstyled ::selection, >5 non-neutral colors
Motion	Missing prefers-reduced-motion, missing :focus-visible, non-compositor animation
Content	Blank plates, placeholder labels, fabricated content
Structure	No hero SVG, missing landmarks, broken images
Performance	Missing content-visibility, CLS risk, DOM depth

18 deterministic rules. No LLM. No API key.

v2.3.4 – Dribbble-grade landing, 14-token gallery, npm + MCP polish

v2.3.4

Dribbble-grade landing page (https://kayforkind.github.io/reimagine-it/)

• Dark cinematic redesign with animated hero art panel, keyword marquee, transformation cycler
• 14-token scroll-revealed grid, show/hide case-study cards, statistics bar
• Live playground preserved — all 14 tokens selectable in-browser

14-token visual board

• One real source through all 14 design tokens, captured as a labeled PNG grid
• Embedded in the README and the landing page — shows genuine CLI output, not mockups

npm package polish

• README image URLs now absolute (raw.githubusercontent.com) — renders on npmjs.com
• Verified end-to-end: npx reimagine-it@latest ships a redesign, MCP server initializes correctly
• MCP invocation fixed: npx --package reimagine-it reimagine-it-mcp (the bin lives inside the package)

Design Health Action — Marketplace auto-publish

• publish.yml workflow added to Kayforkind/design-health-action
• v1 major tag auto-created on release — verified working with v1.0.1
• Use: uses: Kayforkind/design-health-action@v1

Regeneration

• All 4 end-user examples, 5 GIFs, and docs assets regenerated and synced
• 44/44 tests pass; engine bundles fresh; Pages rebuilt and serving

---

🛒 GitHub Actions Marketplace

This release publishes the reimagine-it Design Health action to the GitHub Actions marketplace.

Quick start

- uses: Kayforkind/reimagine-it@v2.3.4
  with:
    path: "**/*.html"

What it checks

Category	Checks
Typography	Hierarchy levels, text measure, missing display fonts
Palette	Off-palette accents, unstyled ::selection, >5 non-neutral colors
Motion	Missing prefers-reduced-motion, missing :focus-visible, non-compositor animation
Content	Blank plates, placeholder labels, fabricated content
Structure	No hero SVG, missing landmarks, broken images
Performance	Missing content-visibility, CLS risk, DOM depth

18 deterministic rules. No LLM. No API key.

v2.3.3 - Dribbble-grade design engine

Dribbble-grade design engine (all 14 tokens)

Every generator now sits on a polished shared shell: film grain, scroll-progress bar, tinted scrollbar, deduplicated @Property tokens, View Transitions.

Token upgrades:

• Landing — animated hero art panel + keyword marquee
• Dashboard — ambient glow, pulsing live dot, gradient-sheen cards, glowing sparklines
• Editorial — magazine masthead, accent wash
• Cinematic — ghost scene numerals, animated title rule
• Artistic — aurora-light drift blur, word hover lift
• Gradient — breathing aurora backdrop, keyword ticker, tilt hover
• Photography — mosaic rhythm, caption lift (plate-in keyframes fixed)
• Infographic — row-in entrance animation fixed (was referenced, never defined)
• Motion — ghost step numerals, pulsing dots
• Glass — hover lift + sheen sweep
• Simulation — glowing active step, title rule
• Showcase — icon hover scale/tilt
• webpage — contents pills light up on hover

Data honesty

• Bare digits no longer treated as facts; only unit-qualified numbers (142 ms, 27 users) survive
• Infographic rows show only numbers occurring in their section text
• Auto no longer triple-scores webpage or gifts dashboard for generic content

Case-study bundles

• Each end-user example ships a CASE_STUDY.md (exact command, Auto rationale, score, fidelity %, alternatives, GIF proof)
• docs/CASE_STUDIES.md index linked from README and the Pages landing page

Version notes

• Version 2.3.3 across package, extension, plugin manifests, skill frontmatter, README badge/pin
• npm publication is wired but skips until secrets.NPM_TOKEN is configured in the repository

---

🛒 GitHub Actions Marketplace

This release publishes the reimagine-it Design Health action to the GitHub Actions marketplace.

Quick start

- uses: Kayforkind/reimagine-it@v2.3.3
  with:
    path: "**/*.html"

What it checks

Category	Checks
Typography	Hierarchy levels, text measure, missing display fonts
Palette	Off-palette accents, unstyled ::selection, >5 non-neutral colors
Motion	Missing prefers-reduced-motion, missing :focus-visible, non-compositor animation
Content	Blank plates, placeholder labels, fabricated content
Structure	No hero SVG, missing landmarks, broken images
Performance	Missing content-visibility, CLS risk, DOM depth

18 deterministic rules. No LLM. No API key.