Design Styles Skill

AI-powered design system with 100+ curated styles for rapid frontend development.

Overview

This skill provides a comprehensive design vocabulary optimized for AI-assisted code generation. Each style includes complete design tokens, color palettes, typography, and component patterns.

Style Categories

1. Minimalist (8 styles)

Clean, focused designs emphasizing whitespace and simplicity.

Style	Description	Best For
`clean`	Pure white, subtle shadows	Landing pages, portfolios
`scandinavian`	Warm neutrals, natural textures	E-commerce, lifestyle
`japanese-zen`	Asymmetric balance, muted tones	Wellness, luxury
`swiss`	Grid-based, Helvetica, bold contrast	Corporate, data
`flat-design`	No shadows, bright colors	Mobile apps, dashboards
`whitespace`	Extreme minimalism	Galleries, portfolios
`monochrome`	Single color variations	Editorial, fashion
`brutalist-minimal`	Raw, functional	Tech, experimental

2. Dark Mode (7 styles)

Sophisticated dark interfaces for reduced eye strain.

Style	Description	Colors
`dark-elegant`	Rich blacks, gold accents	`#0D0D0D`, `#D4AF37`
`dark-professional`	Charcoal, blue accents	`#1A1A2E`, `#4A90D9`
`dark-vibrant`	Deep purple, neon accents	`#1A0A2E`, `#FF6B6B`
`midnight`	Navy blue base	`#0A1628`, `#60A5FA`
`charcoal`	Warm dark grays	`#1F1F1F`, `#E5E5E5`
`obsidian`	Pure black, minimal	`#000000`, `#FFFFFF`
`nord-dark`	Nord color palette	`#2E3440`, `#88C0D0`

3. Modern UI (8 styles)

Contemporary interface patterns from major design systems.

Style	Key Feature	Effect
`glassmorphism`	Frosted glass	`backdrop-filter: blur(10px)`
`neumorphism`	Soft UI, embossed	Inset/outset shadows
`material-design`	Google's system	Elevation shadows
`fluent-design`	Microsoft's system	Acrylic, reveal
`aurora`	Gradient overlays	Animated gradients
`frosted`	Heavy blur effect	Glass + depth
`clay`	Soft 3D elements	Inflated surfaces
`bento`	Grid cards layout	Modular containers

4. Retro & Vintage (8 styles)

Nostalgic designs from past eras.

Style	Era	Characteristics
`80s-neon`	1980s	Hot pink, cyan, grid lines
`90s-web`	1990s	Beveled buttons, gradients
`vaporwave`	Aesthetic	Pink/purple, glitch, roman busts
`memphis`	1980s	Geometric, bold patterns
`mid-century`	1950s	Organic shapes, muted colors
`art-deco`	1920s	Gold, geometric, symmetry
`pixel-art`	8-bit	Pixelated, limited palette
`synthwave`	Retro-future	Sunset gradients, chrome

5. Futuristic (7 styles)

Sci-fi inspired designs for tech-forward projects.

Style	Inspiration	Key Elements
`cyberpunk`	Blade Runner	Neon on dark, glitch
`sci-fi`	Space tech	Blue glow, holographic
`neon-tech`	Modern tech	Bright neons, dark bg
`holographic`	Holograms	Rainbow gradients, transparency
`matrix`	The Matrix	Green code, black
`dystopian`	Post-apocalyptic	Gritty, industrial
`space-age`	1960s Futurism	Curves, silver, orange

6. Nature-Inspired (7 styles)

Organic designs drawing from natural elements.

Style	Palette	Mood
`organic`	Earthy browns, greens	Grounded, natural
`earth-tones`	Terra cotta, sage	Warm, sustainable
`botanical`	Deep greens, cream	Fresh, eco-friendly
`ocean`	Blues, teals, sand	Calm, refreshing
`forest`	Dark greens, browns	Mysterious, rich
`sunset`	Orange, pink, purple	Warm, inspiring
`aurora-borealis`	Green, purple, blue	Magical, dynamic

7. Bold & Expressive (6 styles)

High-impact designs that make statements.

Style	Approach	Usage
`neo-brutalist`	Raw HTML, bold borders	Tech, experimental
`bold-geometric`	Sharp angles, primary colors	Startups, creative
`maximalist`	More is more, layered	Entertainment, fashion
`pop-art`	Comics, halftone dots	Youth, media
`graffiti`	Street art, spray texture	Urban, music
`comic-book`	Speech bubbles, action lines	Games, youth

8. Professional (7 styles)

Business-appropriate designs for enterprise.

Style	Industry	Tone
`corporate`	General business	Trust, stability
`enterprise`	Large orgs	Sophisticated, neutral
`fintech`	Finance	Modern, secure
`legal`	Law	Traditional, authoritative
`medical`	Healthcare	Clean, trustworthy
`consulting`	Services	Premium, expert
`saas`	Software	Friendly, capable

9. Gradient & Color (6 styles)

Color-focused designs with dynamic gradients.

Style	Type	Example
`gradient-mesh`	Multi-point gradients	Apple-style blurs
`duotone`	Two-color overlay	Spotify style
`triadic`	Three-color harmony	Vibrant, balanced
`complementary`	Opposite colors	High contrast
`analogous`	Adjacent colors	Harmonious
`split-comp`	Split complementary	Dynamic balance

Usage

Basic Application

code

/style cyberpunk tailwind

Style Combination

code

/style "glassmorphism + dark-mode" css

With Artifact Generator

code

/artifact create dashboard
/style cyberpunk
# Applies style to current artifact

Integration Points

•Artifact Generator: Direct style application to artifacts
•Component Templates: Style-aware component generation
•Keycloak Theming: Auth page customization (if using Keycloak)

Style Token Structure

Each style provides:

json

{
  "name": "style-name",
  "category": "category",
  "colors": {
    "primary": "#...",
    "secondary": "#...",
    "accent": "#...",
    "background": "#...",
    "surface": "#...",
    "text": "#...",
    "textMuted": "#..."
  },
  "typography": {
    "fontFamily": "...",
    "headingFont": "...",
    "fontSize": { "base": "16px", "scale": 1.25 },
    "fontWeight": { "normal": 400, "bold": 700 }
  },
  "spacing": {
    "unit": "4px",
    "scale": [0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64]
  },
  "effects": {
    "borderRadius": "...",
    "shadow": "...",
    "transition": "..."
  },
  "keywords": ["prompt", "keywords", "for", "ai"]
}

Best Practices

•Consistency: Apply one primary style across project
•Accessibility: All styles meet WCAG AA contrast
•Performance: Prefer CSS variables over runtime
•Responsiveness: Tokens include responsive scales
•Customization: Styles are starting points, adjust as needed