variant-design

English | 中文

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

A Claude Code skill inspired by the Variant design community, powered by the Impeccable design system. Give it a prompt, get three divergent design directions — each from a different studio's aesthetic — then iterate with one-word actions.

Sample output

Three variations from a single prompt — each feels like a different studio:

A — Editorial	B — Dark Dashboard	C — SaaS Landing

What it does

Generate Mode (default)

1. Detects your scenario — dashboard, SaaS landing page, editorial, e-commerce, mobile app, creative tool, education, portfolio, food & beverage, fashion & lifestyle
2. Loads design system references — typography, color theory (OKLCH), spatial design, motion, micro-interactions, interaction, responsive, UX writing
3. Generates 3 distinct variations — each pulls from a different aesthetic direction with full interactivity (scroll reveals, animated charts, hover effects, functional JS)
4. Runs an AI Slop Test — quality gate that catches generic AI aesthetic fingerprints before presenting
5. Ships working code — Context-aware output: auto-detects React projects and generates .tsx components; generates zero-dependency interactive HTML otherwise. Real content, no lorem ipsum
6. Offers variation actions — push further, polish, critique, swap styles, remix colors, shuffle layouts, add motion, dramatize, make interactive

Analyze Mode (existing sites)

1. Scans your existing code — reads HTML, CSS, JSX, Vue, Svelte files for design tokens
2. Extracts design primitives — colors, fonts, spacing, components, transitions, breakpoints
3. Detects inconsistencies — near-duplicate colors, off-grid spacing, missing hover states, contrast failures, font scale issues
4. Generates a style report — scored audit with severity levels and priority fix list
5. Produces tokens — consolidated CSS custom properties file from scattered hardcoded values
6. Generates style-matched pages — new pages that follow your existing design system exactly
7. Creates migration plans — phased checklist for consolidating an inconsistent codebase

audit                    → Full style consistency report
tokens                   → Extract tokens from existing CSS
match                    → Generate new pages matching your existing style
new page pricing         → Add /pricing page following your current design
migrate                  → Phased plan to consolidate design tokens
compare old new          → Side-by-side existing vs. redesigned

Installation

Claude Code (recommended)

claude skill install https://github.com/YuqingNicole/variant-design-skill

Or add manually to your project's SKILL.md — copy the contents of SKILL.md into your existing skill file.

Other Claude interfaces

Claude.ai (web/desktop): Paste the contents of SKILL.md into a Project's custom instructions, or drop it at the top of a conversation as a system prompt.

API / custom integrations: Include SKILL.md as a system message before your user turn.

Usage

Basic triggers

The simplest way — just describe what you want:

design a dashboard for a crypto trading terminal
show me 3 directions for a SaaS landing page
give me UI options for a wellness app

Directed triggers — lock in a style or reference a site

You can be more specific by naming an aesthetic direction, a palette, or even an existing site you want to match:

developer tools homepage, code-first hero with CLI snippet, dark Data/Technical direction

landing page for an AI agent tool — Dark Indigo palette, Geist font, Code-First layout from saas.md

3 variations for a food delivery app — one Warm/Human, one Bold/Expressive, one Neo-brutalist

reproduce the visual style of [site you described] — dark navy, monospace, swim lane diagrams

Tip: the more constraints you name (direction + palette + layout pattern), the more targeted the output. The more open the prompt, the more divergent the three variations will be.

Anatomy of a directed prompt

[what it is] + [domain] + [aesthetic direction or palette] + [layout hint] + [any signature detail]

Examples:

Variation actions

After seeing the initial 3 variations, iterate with:

Quick iteration shorthand

In Claude Code you can use shorthand for fast iteration:

A vary strong          → Push Variation A to maximum
B remix colors         → 3 new palettes for Variation B
C → mobile             → Show C as mobile viewport
pick A                 → Select A as winner
A + B colors           → Mix A layout with B palette
tokens A               → Extract CSS tokens from A
compare                → Side-by-side view of all 3
open B                 → Re-open B in browser
react A                → Export Variation A as React .tsx component
react B                → Export Variation B as React .tsx component
show context           → Print current persisted palette/fonts/direction
reset context          → Clear context, start fresh next session

What you'll see

Files are written to variant-output/ and auto-opened in your browser — you never need to manually find or open files. Each variation comes with a compact Summary Card in the terminal (direction, palette, fonts, interactions). Actions are grouped into Reshape / Tune / Animate / Refine / Export categories.

On iteration, the same file is overwritten and re-opened — your browser tab refreshes automatically. The terminal shows a 2-3 line summary of what changed, not the full code.

Context persists across sessions. When you re-enter a project directory, the skill reads variant-output/.variant-context.json and resumes your last palette, fonts, direction, and iteration count automatically:

✦ Resuming context: Amber Warm · Editorial · Instrument Serif + Instrument Sans · picked B · 4 iterations
  (reset context to start fresh)

No need to re-specify preferences you've already confirmed. Use show context to inspect the current context, or reset context to start fresh.

Output format is context-aware: if your current directory contains a React project (package.json with react dependency), output is .tsx components. Otherwise, zero-dependency HTML is the default. Override with --react or --html. See below for more.

React output (context-aware)

In a React project, the skill automatically switches to .tsx output:

# In a React/Next/Vite project directory:
design a dashboard  →  generates variant-output/VariantA.tsx, VariantB.tsx, VariantC.tsx
                        Detects Next.js → adds "use client" where needed
                        Detects framer-motion → uses it; otherwise CSS animations

# In any other directory:
design a dashboard  →  generates variant-output/variant-dashboard-A.html (unchanged)

# Explicit override anywhere:
design a dashboard --react   →  always .tsx
design a dashboard --html    →  always HTML

# Export a specific variation:
react A              →  export Variation A as .tsx
export to next       →  export winning variation as Next.js App Router component

Generated .tsx files go to variant-output/ — move them to src/components/ to include in your project's build. The preview command is inferred from your package.json scripts (npm run dev, pnpm dev, etc.).

Reference library

Domain references

Scenario-specific materials (starter prompts, palettes, typography, layouts, real community examples):

Design system references (Impeccable)

Foundational design principles loaded for every generation:

Design principles

• Real content wins. Plausible headlines, real data, actual copy. Makes designs feel alive.
• Commit fully. Half-executed aesthetics look worse than simple ones.
• Never converge. If A is dark, B cannot also be dark. Each must feel like a different studio.
• Typography first. Distinctive display font + reliable body. Never Inter, Roboto, Arial, system-ui.
• Color = one bold OKLCH choice. One dominant color used with conviction beats five timid colors. Always tint neutrals.
• No AI slop. No purple gradients, no glassmorphism, no bounce easing, no centered-everything layouts.

Contributing

PRs welcome. Each domain reference file follows a consistent 6-section schema:

1. Starter Prompts (domain-grouped)
2. Color Palettes (CSS custom properties)
3. Typography Pairings
4. Layout Patterns
5. Signature Details
6. Real Community Examples

Design system references follow the Impeccable style structure with principles, code examples, and anti-patterns.

Examples

The examples/ directory contains runnable demos:

Open any example directly in your browser to see the interactions in action.

Built with Claude Code Skills. Design system powered by Impeccable.