What problem does it solve? Creating multiple visual directions for a web design normally requires rebuilding each concept from scratch. This Skill systematically produces alternative design variations from an existing base design, changing colors, typography, animation intensity, and spacing while preserving page structure and content. ## Core Features & Use Cases - Systematic Variation Generation: Produces N coherent design variations, each with a distinct identity (e.g., dark premium, bold maximalist, clean minimal), output to designs/{base}v{N}/docs/. - Structure Preservation: Keeps page architecture, section order, text content, mock data, and functionality intact while restyling the visual layer. - Dimension Reference: Ships a variation-dimensions.md reference covering color strategies, typography shifts, five animation intensity levels, spacing densities, and texture styles with per-dimension checklists. - Use Case: After completing a base web design, ask for three variations to compare a dark luxury direction against a vibrant startup look and a minimal editorial style side-by-side before committing to implementation. ## Quick Start Generate three design variations from the base design in designs/1 with different color, typography, and animation directions.
