design-variants

What problem does it solve?

Rapidly exploring multiple meaningful visual directions is difficult and time-consuming, and teams often end up comparing only marginal variations instead of distinct design approaches. This Skill provides a reproducible way to generate several production-plausible, labeled design options so stakeholders can compare layouts, typography, color systems, and interaction patterns side-by-side.

Core Features & Use Cases

• Generate multiple self-contained HTML previews: Produces responsive HTML files with inline CSS, intentional typography, cohesive color systems, and basic interactivity for each variant.
• Archetype-driven directions and anti-pattern checks: Maps each variant to a distinct design archetype, enforces banned tokens and patterns, and includes a comparison index page for side-by-side review.
• Use Case: Use this Skill to create three distinct landing-page concepts for stakeholder review, then hand the chosen direction to implementation workflows or frontend design skills.

Quick Start

Generate three distinct design variants for the hero section of the marketing landing page.