Supanova Design Engine

This is a standalone HTML generator that ships with opinionated presets for design variance, motion intensity, visual density, and landing page purpose. It outputs browser-ready code with no build step, which is refreshing if you're prototyping quickly or just tired of toolchain overhead. The baseline leans toward high design variance and moderate motion, tuned for conversion-focused pages, but it adapts when you ask for something different in your prompt. It's pulled 124 installs and 322 GitHub stars, so people are actually using it. Best for rapid landing page iteration when you want something more visually interesting than a default Tailwind template but don't want to write CSS from scratch.

skills.sh installs: 245
GitHub stars: 406
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add uxjoseph/supanova-design-skill --skill supanova-design-engine --agent claude-code

Installs into .claude/skills of the current project.

Files

Supanova Design Engine

1. ACTIVE BASELINE CONFIGURATION

DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
VISUAL_DENSITY: 3 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
LANDING_PURPOSE: conversion (conversion | brand | portfolio | saas | ecommerce)

AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 3, conversion). Do not ask the user to edit this file. ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 8.