Overview
How might we design component variants so people can trust and act on AI output?
When this pattern fits
- Perfect for design system development, component library creation, and A/B testing workflows where exploring multiple design variations improves decision-making.
When to skip or lighten it
- Locked design system with one approved button spec.
- Variants that ignore platform HIG or accessibility.
- Six variants when user asked for one quick fix.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Variants as images only, not editable components.
No diff highlight of what changed between variants.
Regenerating all when user liked one aspect only.
Variants missing focus and disabled states.
How products use it
| Product | Implementation |
|---|---|
| Figma AI | Multiple layout options on selected frames. |
| V0 | Component alternatives from prompt iterations. |
| Relume | Section variants in site builder library. |
| Builder.io | AI block variations in visual editor. |
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Component Variants" AI interface design pattern.
Pattern Definition:Frequently asked questions
Variants vs variation grid?
Component variants target UI parts. Variation grid often means full image generations.
How many variants?
Three to four distinct directions beat six similar tweaks.
Merge variant?
Let users pin layout from A and typography from B when possible.
Handoff?
Export to code or design system components, not screenshots only.