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:

User asks about...Also matchesLoadDashboard, analytics, metrics, monitoring, data viz后台, admin panel, management system, backoffice, CRM, internal toolreferences/dashboard.mdEditorial, magazine, journalism, news, articleblog post, report, white paper, newsletterreferences/editorial.mdLanding page, SaaS, product page, startup, B2Bwebsite, 官网, corporate site, personal site, portfolio, agencyreferences/saas.mdE-commerce, shopping, product, fintech card, consumerstore, shop, marketplace, cart, checkoutreferences/ecommerce.mdEducation, learning app, quiz, language, sciencelesson, flashcard, tutorial, training, coursereferences/education.mdGenerative art, music tool, 3D, creative tool, synthesizertool, studio, editor, canvas, sequencer, DAWreferences/creative.mdMobile app, iOS, Android, onboarding, home screenapp, 应用, 界面, UI screenreferences/mobile.mdUnsure / generalUse aesthetic directions table below + references/palettes.md

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

Design challengeLoadFont selection, type scale, hierarchyreferences/design-system/typography.mdColor palette, dark mode, contrastreferences/design-system/color-and-contrast.mdLayout, spacing, grids, visual hierarchyreferences/design-system/spatial-design.mdAnimations, transitions, loading statesreferences/design-system/motion-design.mdForms, states, focus, keyboard navreferences/design-system/interaction-design.mdMobile-first, breakpoints, fluid designreferences/design-system/responsive-design.mdLabels, errors, empty states, microcopyreferences/design-system/ux-writing.md

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:

DirectionFeelSignatureMinimal / EditorialType-driven, generous spaceOne strong font, minimal colorBold / ExpressiveHigh contrast, graphicDominant color blockDark / PremiumMoody, atmosphericDeep bg, elevated surfaces (not shadows)Warm / HumanRounded, approachableSoft palette, organic formsData / TechnicalDense, systematicGrid, monospace, tightNeo-brutalistRaw, unconventionalBold outlines, broken gridLuxury / SilenceMaximum negative spaceOne image, sparse text

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 ( <details>, 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):

css

: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 <dialog> 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 <style> — always specify weights used, include font-display: swap
• Responsive: mobile-first, breakpoints at 640px and 1024px. Use clamp() for fluid values
• No frameworks by default — vanilla CSS + HTML. CDN Tailwind only if user asks
• Hover states + focus-visible rings on all interactive elements
• @media (prefers-reduced-motion: reduce) block for all animations
• Minimum visual completeness: populated data, real copy, working nav state

React Output Spec#

• Functional components only — no class components
• Declare color tokens as const theme = { ... } with OKLCH values and hex fallbacks
• Google Fonts: add a <link> in the returned JSX or instruct user to add to index.html
• Prefer inline styles for one-off values; extract repeated patterns to a styles object
• State assumptions upfront in a comment block: which components are stateful, what props to pass
• If Tailwind: use @apply for repeated patterns; if CSS modules: one .module.css per component
• No useEffect for layout — CSS-only animations and transitions preferred
• Prop defaults must be realistic content (no undefined, no "Lorem ipsum")

Multi-Screen / Flow Support#

When a user asks for a flow (onboarding, checkout, wizard, multi-step form):

1. Render all screens side-by-side horizontally, each in a 390px frame with label above
2. Use a shared currentStep state variable to show/hide screens if making it interactive
3. Annotate transitions: "→ swipe left to advance" or "→ tab triggers step 2"
4. Each screen must be visually complete — never leave a screen empty as placeholder
5. Apply onboarding principles: show don't tell, make skip visible, reach "aha" in ≤3 steps

Performance Baseline#

Every output must meet these minimums:

• Images: loading="lazy" on below-fold images, width/ height attributes to prevent CLS, srcset for responsive images, WebP/AVIF format preference
• Fonts: font-display: swap, subset to used character ranges when possible, preconnect to Google Fonts origin: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
• CSS: No @import for CSS files (blocks render) — only for Google Fonts in <style>. Use content-visibility: auto for off-screen sections
• Animation: Only transform and opacity (GPU-composited). No will-change unless animation is imminent. Use Intersection Observer for scroll-triggered animations — never scroll event listeners
• Layout: No layout thrashing (read then write, never interleave). Avoid forced synchronous reflows

Production Hardening Checklist#

Apply when the design will be used in real products:

Text resilience:

• All text containers handle overflow: overflow: hidden; text-overflow: ellipsis for single-line, -webkit-line-clamp for multi-line
• Test with 2× expected content length — does the layout survive?
• Test with 0 content — does the empty state make sense?
• Headings: overflow-wrap: break-word to prevent horizontal scroll on mobile

i18n readiness:

• No fixed-width containers for text — allow 30% expansion for German/French
• Use logical properties: margin-inline-start not margin-left (RTL support)
• Numbers: use Intl.NumberFormat for locale-aware formatting
• Dates: use Intl.DateTimeFormat — never hardcode date formats

Error & edge states:

• Network failure: show last-known data with "Unable to update" banner, not a blank screen
• Slow connection: skeleton screens appear within 200ms if data isn't ready
• Invalid data: graceful degradation (show "--" for missing numbers, not NaN/undefined)

Input robustness:

• Debounce search/filter inputs (300ms)
• Prevent double-submit on forms (disable button after first click, re-enable on error)
• Paste handling: strip formatting on paste into plain-text inputs

---

Anti-Patterns (AI Slop Fingerprints)#

Avoid these in every output — they are the telltale signs of AI-generated design:

Anti-patternInsteadTwo variations in the same aesthetic directionEnsure A/B/C feel like different studios — re-check the direction tableInter, Roboto, Arial, system-ui as display fontsDistinctive fonts: Instrument Sans, Fraunces, Outfit, NewsreaderHardcoded hex values in CSS rulesCSS custom properties with OKLCH: color: var(--text)Lorem ipsum or placeholder textReal, domain-plausible contentGeneric "Feature 1 / Feature 2 / Feature 3" copySpecific feature names that match the domainFive or more colors used at similar weight60-30-10: one dominant color used with convictionCards with identical sizes and equal visual weightVary card sizes to create rhythm and hierarchyHover states missing on interactive elementsEvery button, link, and card needs hover + focus-visibleMobile layouts that are just desktop shrunk downRethink for thumb zones, touch targets, and vertical flowGradient abuse (5+ color gradient backgrounds)One solid color or a two-stop gradient maximumPurple-to-blue gradients, cyan-on-dark, neon accentsIntentional palette from OKLCH, tinted neutralsGlassmorphism everywhere (blur, glow borders)Purposeful decorative elements that reinforce brandBig rounded icons above every headingThey rarely add value — use typography for hierarchyCards nested inside cardsFlatten hierarchy — use spacing and dividersEverything centeredLeft-aligned with asymmetric layouts feels more designedSame spacing everywhereVaried spacing creates rhythm — tight groups, generous separationsGradient text on headings/metricsDecorative, not meaningful — use solid color with weightDark mode as default with glowing accentsEarn dark mode: different surface depths, desaturated accents, no shadowsBounce/elastic easingExponential ease-out — real objects decelerate smoothlyoutline: none without replacement:focus-visible with 2-3px offset ringModals for everythingConsider alternatives: inline expansion, drawers, popoversPure black (#000) or pure white (#fff)Always tint — pure extremes don't exist in natureGray text on colored backgroundsUse darker shade of the background colorEmpty state = "No data" text onlyDesign as onboarding moment: acknowledge, explain value, CTAText that overflows its containeroverflow-wrap: break-word, text-overflow: ellipsis, line-clamp

---

Accessibility Baseline#

Apply to every output — non-negotiable:

• Text contrast minimum: 4.5:1 for body, 3:1 for large text (≥24px bold or ≥18.5px normal)
• All interactive elements: minimum 44×44px touch/click target (use pseudo-elements if visual size is smaller)
• Focus rings: never outline: none without a custom visible :focus-visible replacement
• Don't convey meaning by color alone — pair with icon, label, or pattern
• Avoid pure white on pure black for long-form text — slightly off-white/off-black ( #F0EDE8 on #111) reduces eye strain
• @media (prefers-reduced-motion: reduce) — preserve functional animations (progress, loading), remove spatial movement
• Use rem/ em for font sizes, never px for body text — respect browser settings
• Minimum 16px body text on all viewports
• Keyboard navigation: logical tab order, skip links for nav-heavy pages, roving tabindex for component groups
• ARIA: landmarks ( main, nav, aside), live regions for dynamic content, aria-describedby for form errors