Skip to content

v2.4.0 — the 10x builder upgrade

Choose a tag to compare

@Kayforkind Kayforkind released this 26 Aug 12:13
· 14 commits to main since this release

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.