Variant Design

Solve the blank canvas problem. Prompt → 3 fully-formed distinct designs → vary → export.

About

Inspired by the Variant design community — a space where designers share divergent takes on the same brief. This skill brings that practice into Claude Code: every prompt yields three designs that feel like they came from different studios, then lets you iterate with one-word actions.

Built on the Impeccable design system — a comprehensive set of design references covering typography, color theory, spatial design, motion, interaction patterns, responsive design, and UX writing. Every design decision is grounded in these principles.

Supports: HTML (default) · React · 7 domain reference libraries · 27 palettes · design system references · variation actions

Project Context Initialization

On first use in a project, gather design context to ground all future generations. Ask the user:

1. Users & Purpose — Who uses this? What problem does it solve? What's the core task?
2. Brand & Personality — Existing brand colors? Tone (playful / serious / technical / warm)? Any sites you admire?
3. Aesthetic Preferences — Light or dark? Minimal or dense? Any direction from the aesthetic table you're drawn to?
4. Constraints — Framework requirements? Accessibility standards beyond baseline? Target devices?

If the user can't answer, infer from their codebase: scan for existing color variables, font imports, component patterns, and README/brand docs. Confirm inferences before proceeding.

Persist context as a comment block at the top of generated files or in the conversation — reference it in every subsequent generation to ensure consistency across variations.

Scenario Detection → Load Reference

Identify the scenario and load the corresponding reference file before designing:

Always also load the relevant design system references from references/design-system/ based on what matters most for the design:

For initial generation, load at minimum: typography, color-and-contrast, and spatial-design. Load others as the design demands.

Core Workflow

1. Parse → Detect → Load

Identify scenario, load domain reference file + relevant design system references, pick 3 starter prompts and palettes. Study the Real Community Examples for composition patterns and what makes each design work — extract the principle, not the surface style.

2. Generate 3 Distinct Variations

Each variation = a different studio's interpretation. Never two in the same direction.

Universal aesthetic directions:

For each variation, define before coding:

• Starter prompt (from reference or custom)
• Color palette (from reference or palettes.md) — use OKLCH for perceptually uniform colors where possible
• Typography: display font + body font (see banned fonts list below)
• Layout pattern (from reference) — consult spatial-design.md for grid and hierarchy principles
• Motion strategy — consult motion-design.md for timing and easing
• One signature detail that makes this variation unforgettable

3. Implement

Working code — HTML (default) or React. Real content, no lorem ipsum. Visually complete.

Label: Variation A — [Name] / B — [Name] / C — [Name]

4. AI Slop Test (Quality Gate)

Before presenting, run this check on each variation:

> If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, redesign.

A distinctive interface should make someone ask "how was this made?" not "which AI made this?" Review the Anti-Patterns table below — they are the fingerprints of AI-generated work.

5. Offer Variation Actions

After presenting, always offer:

> Which direction resonates? Options:

> - Vary strong — push aesthetic to its extreme

> - Vary subtle — polish, same direction

> - Distill — strip to essence, remove everything non-essential

> - Change style — keep layout, swap visual language

> - Remix colors — 3 alternative palettes using OKLCH

> - Shuffle layout — same content/style, different composition

> - Polish — refine spacing, typography, and micro-details

> - Critique — audit against design system principles

> - Extract tokens — export design tokens as CSS/JSON/Tailwind config

> - See other views — mobile / dark mode / empty state / onboarding / hover states

Variation Action Definitions

Vary strong

Amplify current direction to maximum. More contrast, stronger type, bolder color, more dramatic composition. Consult references/design-system/typography.md for scale ratios and references/design-system/color-and-contrast.md for high-contrast palette construction.

Before → After example:

• Body text 16px, heading 32px → Body 15px, heading 72px (ratio 1.25 → 1.5+)
• Accent used on buttons only → Accent dominates hero section, bleeds into nav
• Subtle 200ms fade-in → Dramatic 600ms staggered reveal with scale transform

Vary subtle

Tighten spacing, refine hierarchy, soften where needed. Same direction, higher craft. Focus on vertical rhythm, optical alignment, and micro-interactions per references/design-system/spatial-design.md and references/design-system/motion-design.md.

Before → After example:

• Inconsistent padding (16/20/24px) → Locked to 4pt grid (16/24/32px)
• Generic hover (opacity change) → Contextual hover (card lifts 2px, button darkens accent)
• Missing OpenType → tabular-nums on data, font-kerning: normal on headlines

Distill

Strip the design to its absolute essence. Inspired by the Impeccable distill philosophy — ruthless simplification reveals what truly matters.

Process:

1. Identify the single core purpose of the interface
2. For each element, ask: "Does removing this break the core purpose?" If no, remove it.
3. Simplify across all dimensions:
• Information: Reduce visible options, use progressive disclosure (
  , hover reveals)
• Visual: Fewer colors (aim for 2–3 total), fewer type sizes, remove decorative elements
• Layout: Collapse sections, merge related content, eliminate redundant containers
• Interaction: Fewer clicks to complete the primary task, remove confirmation steps where undo works
• Content: Shorter headlines, tighter copy, remove introductory paragraphs that restate the heading
4. Verify: Can a new user complete the core task faster? If not, you removed the wrong things.

Before → After example:

• 5-section landing page → 2 sections: hero with value prop + single CTA
• Dashboard with 12 metric cards → 3 key metrics large + "Show all" expandable
• Nav with 8 items → 4 primary + overflow menu

Change style

Extract structure/layout DNA, replace entire visual language with a different direction from the table above.

Remix colors

Keep all shapes, type, layout. Generate 3 palettes using OKLCH color space (per references/design-system/color-and-contrast.md):

1. Analogous to current — shift hue ±30°, adjust chroma
2. Complementary contrast — opposite hue, rebalanced lightness
3. Unexpected/left-field — completely different mood

Always tint neutrals toward the brand hue. Never use pure gray, pure black (#000), or pure white (#fff).

Before → After example (palette 3, unexpected):

• Dark indigo tech dashboard → Warm cream editorial palette with rust accent
• All neutrals shift from cool blue-gray → warm stone-tinted

Shuffle layout

Same content + style. Rearrange structure: try full-bleed → asymmetric grid → editorial columns → card masonry. Consult references/design-system/spatial-design.md for grid systems and visual hierarchy principles.

Before → After example:

• Centered hero + 3-column grid → Full-bleed left-aligned hero + asymmetric 2-column with oversized feature

Polish

Apply Impeccable design system refinements systematically:

• Typography (references/design-system/typography.md): vertical rhythm, modular scale, OpenType features (tabular-nums for data, proper fractions), font-display: swap, size-adjust fallback metrics
• Spatial (references/design-system/spatial-design.md): squint test, hierarchy through multiple dimensions, optical alignment (text negative margin -0.05em, icon center offsets)
• Interaction (references/design-system/interaction-design.md): all 8 interactive states (default/hover/focus/active/disabled/loading/error/success), focus-visible rings, proper form design (visible labels, blur validation, aria-describedby errors)
• Motion (references/design-system/motion-design.md): 100/300/500 rule, ease-out-expo for enters, exit at 75% of enter duration, staggered animations with CSS custom properties
• UX Writing (references/design-system/ux-writing.md): specific button labels (verb + object), error formula (what → why → fix), empty states that teach the interface, link text with standalone meaning
• Clarify copy: Scan all visible text — replace vague labels with specific ones, remove redundant intros, ensure every word earns its place. "Submit" → "Create account". "Error" → "Email needs to be in name@example.com format."

Critique

Systematic audit against design system principles. Score each dimension and provide specific fixes:

1. Typography: Is hierarchy clear? Scale ratio consistent? Fonts distinctive? Vertical rhythm locked?
2. Color: WCAG contrast passing? Neutrals tinted? 60-30-10 balance? No pure black/white?
3. Layout: Passes squint test? Varied spacing creates rhythm? Cards justified? No nested cards?
4. Motion: Durations appropriate (100/300/500)? Ease-out for enters? Reduced motion respected? Only transform+opacity animated?
5. Interaction: All 8 states designed? Focus rings present? Touch targets ≥44px? Skeleton > spinner?
6. Responsive: Mobile-first? Content-driven breakpoints? Input method detected (pointer/hover)? Safe areas?
7. Writing: Specific button labels? Helpful errors (what/why/fix)? Empty states that teach? No redundant copy?
8. Resilience: Text truncation handled? Long content graceful? Loading/error states present? i18n-ready spacing?

Extract tokens

Export the design's token system in the requested format:

CSS Custom Properties (default):

:root {
  /* Primitives */
  --blue-500: oklch(55% 0.2 260);
  --stone-100: oklch(95% 0.01 60);
  /* Semantic */
  --color-primary: var(--blue-500);
  --color-surface: var(--stone-100);
  /* Typography */
  --font-display: 'Fraunces', serif;
  --font-body: 'Instrument Sans', sans-serif;
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --text-xl: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  /* Spacing */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 48px; --space-2xl: 96px;
  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 350ms;
}

JSON (for design tools / Figma): Same structure as flat key-value JSON.

Tailwind config: Extend theme with colors, fontFamily, spacing, transitionTimingFunction.

See other views

Render additional views with full design system compliance:

• Empty state — not just "No items." Design as an onboarding moment:

1. Acknowledge briefly ("No projects yet")
2. Explain the value of filling it ("Create your first project to start tracking progress")
3. Provide a clear primary action (prominent CTA button)
4. Add visual interest (illustration, icon, or subtle pattern — never a sad face)
5. If applicable, show a preview of what it will look like when populated

• Data-filled state — realistic volume: 3–7 items for lists, 6–12 months of data for charts, edge cases included (one very long name, one empty optional field)

• Mobile viewport — not a shrunk desktop. Per references/design-system/responsive-design.md:
• Rethink for thumb zones (primary actions bottom-right for right-handed)
• Touch targets ≥44px with padding
• Navigation collapses to hamburger + drawer or bottom tab bar
• Tables transform to cards with data-label attributes
• Use @media (pointer: coarse) for larger tap areas

• Dark ↔ Light toggle — per references/design-system/color-and-contrast.md:
• Dark mode uses lighter surfaces for depth (no shadows)
• Desaturate accent colors slightly for dark backgrounds
• Reduce font weight (light text on dark appears heavier)
• Never pure black (#000) background — use oklch(12-18% ...) tinted

• Onboarding flow — per Impeccable onboard principles:
• Show Don't Tell: inline demos > text instructions
• Make It Optional: skip button always visible, no forced tours
• Time to Value: reach the "aha moment" in ≤3 steps
• Context Over Ceremony: teach at the moment of need, not upfront
• Respect User Intelligence: no condescending language, allow power-user shortcuts

• Hover / active / focus states — all interactive elements with visible state changes

Variation Loop

After any variation action, always:

1. Present the updated design (labelled with the action taken, e.g. "Variation A — Distill")
2. Offer the full action menu again — the loop never ends until the user moves on
3. If the user has iterated 3+ times on the same direction, proactively suggest: "Want to branch? I can apply this to one of the other variations."

Design Principles

Grounded in the Impeccable design system. Consult individual references for deep implementation guidance.

Content & Intent

• Real content wins. Plausible headlines, real data values, actual copy. Makes designs feel alive.
• Commit fully. Half-executed aesthetics look worse than simple ones. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
• Never converge. If A is dark, B cannot also be dark. Each must feel like a different studio.
• Match type to domain. Don't default to generic app UI — load the right reference.

Typography (→ references/design-system/typography.md)

• Distinctive display + reliable body. Use Google Fonts @import, always specify weights.
• Banned display fonts: Inter, Roboto, Arial, Open Sans, Lato, Montserrat, system-ui, system defaults.
• Better alternatives: Instrument Sans, Plus Jakarta Sans, Outfit, Onest, Figtree, Urbanist, Fraunces, Newsreader, Lora.
• Modular scale: Use fewer sizes with more contrast (5-size system: xs/sm/base/lg/xl+). Popular ratios: 1.25, 1.333, 1.5.
• Fluid type: Use clamp(min, preferred, max) for responsive sizing. Not for buttons/labels.
• Vertical rhythm: Line-height as base unit for all vertical spacing.
• OpenType features: tabular-nums for data tables, diagonal-fractions for recipes, all-small-caps for abbreviations.
• Never mix more than 2 typefaces. One well-chosen family in multiple weights often suffices.

Color (→ references/design-system/color-and-contrast.md)

• Use OKLCH for perceptually uniform palettes. Reduce chroma as you approach white/black.
• Tint your neutrals toward the brand hue — even chroma 0.01 creates subconscious cohesion.
• 60-30-10 rule: 60% neutral, 30% secondary, 10% accent. Accent colors work because they're rare.
• Never pure black/white. Always tint. Pure black/white never appears in nature.
• Never gray on color. Gray text on colored backgrounds looks washed out — use a darker shade of the background color.
• Two-layer tokens: Primitive (--blue-500) + semantic (--color-primary: var(--blue-500)). Dark mode redefines semantic only.

Layout & Space (→ references/design-system/spatial-design.md)

• 4pt base grid (not 8pt — too coarse). Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px.
• Use gap instead of margins for sibling spacing.
• Squint test: Blur your eyes — can you identify the most important element, second most, and clear groupings?
• Hierarchy through multiple dimensions: Combine size, weight, color, position, and space (2-3 at once).
• Cards are not required. Spacing and alignment create grouping naturally. Never nest cards inside cards.
• Container queries for component-level responsiveness.

Motion (→ references/design-system/motion-design.md)

• 100/300/500 rule: 100-150ms instant feedback, 200-300ms state changes, 300-500ms layout changes, 500-800ms entrances.
• Ease-out-expo (cubic-bezier(0.16, 1, 0.3, 1)) for elements entering. Exit at 75% of enter duration.
• Only animate transform and opacity. For height: use grid-template-rows: 0fr → 1fr.
• Stagger with CSS custom properties: animation-delay: calc(var(--i) * 50ms). Cap total stagger time.
• Reduced motion is not optional. Always include @media (prefers-reduced-motion: reduce).
• Never bounce/elastic easing. Real objects decelerate smoothly.

Interaction (→ references/design-system/interaction-design.md)

• Design all 8 states: default, hover, focus, active, disabled, loading, error, success.
• Focus rings: Never outline: none without replacement. Use :focus-visible.
• Forms: Visible labels (not just placeholders), validate on blur, errors below fields with aria-describedby.
• Skeleton screens > spinners. Optimistic UI for low-stakes actions.
• Undo > confirm dialogs. Users click through confirmations mindlessly.
• Modals only as last resort. Prefer native
  when needed. Consider Popover API for non-modal overlays.

UX Writing (→ references/design-system/ux-writing.md)

• Specific button labels: "Save changes" not "OK", "Create account" not "Submit".
• Error formula: What happened → Why → How to fix. Never blame the user.
• Empty states are opportunities: Acknowledge, explain value, provide clear action.
• Link text must standalone: "View pricing plans" not "Click here".

Code Export

• HTML: Single-file, embedded CSS, optional vanilla JS. Default.
• React: Functional components, Tailwind or CSS modules — state assumptions upfront.

HTML Output Spec

• CSS custom properties for all colors — use OKLCH where supported with hex fallback: --accent: oklch(65% 0.2 250); / fallback: #6366F1 /
• Semantic token layer: --color-primary, --color-surface, --color-text mapping to primitives
• Google Fonts via @import in