AI Design System Skill

You have access to an AI-powered design system with 50+ professionally curated visual styles. This skill enables you to apply cohesive, distinctive aesthetics to components and interfaces while avoiding generic "AI slop" patterns.

Core Capabilities

1. Style Application

Apply any of 50+ curated styles to components:

"apply art-deco style"
"use brutalist aesthetic"
"make it look cyberpunk"

2. Style Blending

Combine multiple styles with weighted blending:

"blend japandi with scandinavian 80/20"
"mix brutalist with glassmorphism 60/40"
"combine art-deco with cyberpunk 50/50"

3. Component Generation

Generate styled components with current active style:

"create button with current style"
"generate card component in art-deco style"
"build navigation bar using brutalist tokens"

4. Token Management

Access and apply design tokens:

"show available tokens for art-deco"
"list all minimalist styles"
"what colors are in cyberpunk theme?"

Style Categories (50+ Styles)

1. Minimalist & Modern (5 styles)

minimalist: Pure simplicity, maximum white space, subtle interactions
brutalist: Raw HTML aesthetic, stark typography, intentional "broken" design
scandinavian: Light woods, soft colors, cozy functionality
japandi: Japanese minimalism meets Scandinavian warmth
swiss: Grid-based, sans-serif typography, asymmetric layouts

2. Historical & Classical (5 styles)

art-deco: Geometric patterns, gold accents, luxury materials
art-nouveau: Organic curves, nature motifs, ornamental typography
baroque: Ornate details, dramatic contrasts, rich embellishments
victorian: Decorative borders, serif typography, vintage colors
renaissance: Classical proportions, balanced compositions, refined details

3. Retro & Nostalgic (5 styles)

retro-80s: Neon colors, geometric shapes, synthwave vibes
retro-90s: Bold gradients, CD-ROM aesthetics, early web nostalgia
vaporwave: Pastel pinks/blues, glitch effects, surreal imagery
y2k: Metallic finishes, bubble letters, early 2000s tech aesthetic
mid-century: Atomic age design, bold colors, organic shapes

4. Digital UI (5 styles)

glassmorphism: Frosted glass effects, backdrop blur, transparency layers
neumorphism: Soft shadows, subtle depth, tactile surfaces
material-design: Elevation system, bold colors, motion principles
fluent-design: Acrylic materials, depth layers, light/shadow
skeuomorphic: Real-world textures, dimensional shadows, tactile metaphors

5. Futuristic & Sci-Fi (5 styles)

cyberpunk: Neon against dark, tech grunge, high contrast
cybernetic: Chrome finishes, holographic elements, tech interfaces
space-age: Cosmic colors, star fields, futuristic typography
dystopian: Industrial grays, worn textures, utilitarian design
solarpunk: Eco-futurism, green technology, optimistic sustainability

6. Nature-Inspired (5 styles)

organic: Natural forms, earth tones, flowing shapes
botanical: Plant motifs, green palettes, growth patterns
coastal: Ocean blues, sandy neutrals, weathered textures
desert: Warm sands, terracotta, minimalist landscapes
forest: Deep greens, wood textures, layered canopy effects

7. Bold & Expressive (5 styles)

maximalist: Pattern overload, color clashing, intentional chaos
pop-art: Bold colors, halftone patterns, comic book aesthetics
psychedelic: Swirling patterns, kaleidoscopic colors, optical effects
graffiti: Urban textures, spray paint effects, street art energy
punk: DIY aesthetic, collage style, rebellious typography

8. Illustration & Artistic (5 styles)

hand-drawn: Sketchy lines, imperfect shapes, human touch
watercolor: Soft washes, color bleeding, organic textures
flat-illustration: Vector art, solid colors, simplified shapes
isometric: 3D perspective, technical illustration, game-like views
line-art: Minimal strokes, monochrome, elegant simplicity

9. Cultural & Regional (5 styles)

mediterranean: Warm blues, terracotta, sun-bleached aesthetics
nordic: Cool tones, minimalist patterns, functional beauty
asian-zen: Balance, negative space, natural materials
tribal: Geometric patterns, earth pigments, cultural motifs
moroccan: Rich colors, intricate patterns, ornamental details

10. Special Purpose & Emerging (5 styles)

dark-mode: True blacks, OLED optimization, reduced eye strain
high-contrast: WCAG AAA compliance, accessibility-first, clear hierarchy
print-inspired: Newspaper layouts, editorial typography, ink textures
terminal: Monospace fonts, CLI aesthetics, hacker green or amber
low-fi: Intentional degradation, pixel art, retro computing

Token Reference Structure

Design tokens are organized hierarchically:

src/design-system/
  tokens/
    styles/
      {style-name}.json          # Complete style definition
    core/
      colors.json                # Base color palette
      typography.json            # Font definitions
      spacing.json               # Spacing scale
      shadows.json               # Shadow tokens
      animations.json            # Motion tokens

Each style token file includes:

colors: Primary, secondary, accent, surface, text
typography: Font families, sizes, weights, line heights
spacing: Margin, padding, gap scales
borders: Radius, width, styles
shadows: Elevation levels, focus states
animations: Transitions, durations, easings

Usage Guidelines

Anti-AI-Slop Principles

NEVER use these generic patterns:

Inter, Roboto, Arial, or Helvetica as primary fonts
Purple/blue gradients on white backgrounds (#667eea → #764ba2)
Generic rounded corners (border-radius: 8px everywhere)
Cookie-cutter card layouts with drop shadows
Overused emoji in UI (🚀 ✨ 🎉)
Generic "modern" spacing (gap: 1rem)

ALWAYS follow these rules:

Commit fully to a chosen aesthetic - no half measures
Use design tokens for ALL values - no magic numbers
Define hover states - every interactive element needs feedback
Consider dark mode - design for both light and dark from the start
Test accessibility - maintain WCAG AA contrast minimum
Use distinctive fonts - choose typefaces that match the style
Add personality - each style should feel unique and intentional

Style Application Workflow

Select Style: Choose from 50+ styles or blend multiple
Load Tokens: Reference token files for the selected style(s)
Apply Systematically: Use tokens for colors, typography, spacing
Add Interactions: Define hover, focus, active, disabled states
Test Cohesion: Ensure all components feel unified
Document Usage: Note which styles are applied where

Component Generation Best Practices

When generating components:

Start with semantic HTML structure
Apply style tokens, not hardcoded values
Include all interactive states (hover, focus, active, disabled)
Add ARIA attributes for accessibility
Provide variants (sizes, colors, states)
Include usage examples and documentation

Blending Formula

When blending styles with ratios (e.g., 80/20):

Dominant style (80%): Core colors, primary typography, main spacing
Accent style (20%): Secondary colors, accent fonts, decorative elements

Example blend:

"blend art-deco with cyberpunk 70/30"
→ Art-deco base with cyberpunk accent colors and occasional neon highlights

Integration with Development Workflow

With Coder Agent

"Hey coder, apply brutalist style to the dashboard components"
→ Coder applies brutalist tokens systematically

With Reviewer Agent

"Reviewer, check if components follow art-deco style guide"
→ Reviewer validates token usage and style consistency

With Planner Agent

"Planner, create a style migration plan from material to glassmorphism"
→ Planner breaks down token replacement strategy

Quick Reference Commands

Inspect Styles

"list all available styles" - Show all 50+ styles
"describe {style-name}" - Get detailed style info
"show {style-name} tokens" - Display token values

Apply Styles

"apply {style-name}" - Set active style
"use {style-name} for {component}" - Style specific component
"restyle {component} as {style-name}" - Convert existing component

Blend Styles

"blend {style-a} with {style-b}" - 50/50 blend
"blend {style-a} with {style-b} {ratio}" - Custom ratio
"what would {style-a} + {style-b} look like?" - Preview blend

Generate Components

"create {component} in {style-name}" - New styled component
"generate {component-set} using current style" - Multiple components
"build {layout} with {style-name} tokens" - Complex layouts

Tips for Success

Be Specific: "Apply art-deco style" is better than "make it fancy"
Stay Consistent: Use one style (or blend) per project section
Trust the Tokens: Don't override token values without good reason
Test Early: Apply styles early in development, not as afterthought
Document Choices: Note which styles and why in commit messages
Embrace Constraints: Limitations drive better design decisions

Resources

Style Guide: @references/style-guide.md - Detailed aesthetic rules
Prompt Templates: @references/prompt-templates.md - Ready-to-use prompts
Token Schema: @references/token-schema.md - Token structure reference

Last Updated: 2025-12-03 Version: 1.0.0 Styles Available: 50+