Design Variation
Component Variants
One size does not fit all. Master the art of prompting for States, Themes, and Sizes to build a comprehensive UI library.
The Variant Matrix
1. Functional Variants
Changes in purpose and visual weight.
Primary (Solid)
Secondary (Tint)
Ghost (Clear)
Outline (Border)
2. State-Based Variants
Changes in interaction and feedback.
Hover (Lift)
Active (Press)
Disabled (Gray)
Loading (Pulse)
Responsive Adaptations
A component isn't finished until it works on every device. Prompt for structural variants based on the Breakpoint.
Mobile Variant
"Stack items vertically, use full-screen overlays for menus, and increase tap targets to 48px."
Desktop Variant
"Use a 3-column horizontal grid, hover-reveal details, and fixed-side navigation."
Pro Tip: Theme Variants
Instead of generating a new component for Dark Mode, prompt the AI to: "Generate this hero block using CSS variables for colors so it automatically flips between light/dark themes."