design-styles

What this skill does

# Design Styles Skill

Access 263+ curated design styles with AI-optimized prompt keywords for frontend development.

## Overview

This skill provides comprehensive access to 19 design categories, each containing multiple style variations optimized for AI-assisted code generation. Use these styles to rapidly prototype and implement consistent design systems.

## 19 Design Categories

### 1. Minimalist Styles
- **Clean Minimalism**: Simple, white space, subtle shadows
- **Scandinavian Design**: Natural materials, muted colors, functionality
- **Japanese Minimalism**: Zen aesthetics, negative space, natural elements
- **Swiss Design**: Grid-based, clean typography, limited color
- **Flat Design**: No gradients, bright colors, simple shapes

**Prompt Keywords**: `minimal`, `clean`, `simple`, `whitespace`, `scandinavian`, `zen`, `flat`

### 2. Historical Styles
- **Art Deco**: Geometric patterns, gold accents, bold lines
- **Victorian**: Ornate details, rich colors, decorative elements
- **Baroque**: Dramatic, ornate, gold embellishments
- **Gothic**: Dark tones, pointed arches, medieval elements
- **Renaissance**: Classical proportions, symmetry, refined details

**Prompt Keywords**: `art-deco`, `victorian`, `baroque`, `gothic`, `renaissance`, `historical`, `ornate`

### 3. Retro & Vintage
- **80s Retro**: Neon colors, geometric shapes, gradients
- **90s Web**: Bright colors, basic shapes, nostalgia
- **Vaporwave**: Pastel colors, glitch effects, 80s-90s aesthetics
- **Memphis Design**: Bold colors, geometric shapes, playful patterns
- **Mid-Century Modern**: Organic shapes, clean lines, warm woods

**Prompt Keywords**: `retro`, `80s`, `90s`, `vaporwave`, `memphis`, `vintage`, `mid-century`

### 4. Digital UI Styles
- **Neumorphism**: Soft shadows, subtle depth, monochromatic
- **Glassmorphism**: Frosted glass, transparency, blur effects
- **Skeuomorphism**: Real-world textures, shadows, 3D elements
- **Material Design**: Elevation, bold colors, deliberate motion
- **Fluent Design**: Acrylic materials, depth, motion, light

**Prompt Keywords**: `neumorphism`, `glassmorphism`, `material`, `fluent`, `skeuomorphic`, `soft-ui`

### 5. Futuristic Styles
- **Cyberpunk**: Neon colors, dark backgrounds, tech aesthetics
- **Sci-Fi**: Futuristic UI, holographic elements, space themes
- **Neon Tech**: Glowing elements, dark mode, electric colors
- **Dystopian**: Dark, gritty, industrial elements
- **Hi-Tech**: Clean tech, blue accents, digital interfaces

**Prompt Keywords**: `cyberpunk`, `sci-fi`, `neon`, `futuristic`, `dystopian`, `tech`, `holographic`

### 6. Nature-Inspired
- **Organic**: Natural shapes, earth tones, flowing forms
- **Botanical**: Plant motifs, green palettes, natural textures
- **Ocean Theme**: Blues, waves, aquatic elements
- **Forest Theme**: Greens, browns, woodland imagery
- **Desert**: Warm tones, sand colors, minimalist plants

**Prompt Keywords**: `organic`, `botanical`, `nature`, `ocean`, `forest`, `desert`, `earth-tones`

### 7. Bold & Expressive
- **Maximalism**: Layered elements, rich colors, abundant decoration
- **Brutalist**: Raw, concrete-like, bold typography
- **Neo-Brutalism**: Bright colors, thick borders, bold shadows
- **Expressive Typography**: Large text, varied fonts, dynamic layouts
- **Colorful Chaos**: Multiple bright colors, overlapping elements

**Prompt Keywords**: `maximalist`, `brutalist`, `neo-brutalist`, `bold`, `expressive`, `vibrant`

### 8. Dark Mode Styles
- **Dark Elegant**: Deep blacks, gold accents, luxury feel
- **Dark Minimalist**: Simple dark UI, subtle contrasts
- **Dark Neon**: Dark background, bright neon accents
- **Dark Material**: Material design in dark theme
- **OLED Black**: Pure black, high contrast, battery-saving

**Prompt Keywords**: `dark-mode`, `dark-elegant`, `dark-minimal`, `dark-neon`, `oled-black`

### 9. Gradient & Color
- **Gradient Mesh**: Complex gradients, colorful blends
- **Duotone**: Two-color schemes, bold contrasts
- **Rainbow**: Full spectrum, vibrant multi-color
- **Pastel Gradients**: Soft color transitions, gentle tones
- **Metallic Gradients**: Chrome, gold, silver effects

**Prompt Keywords**: `gradient`, `duotone`, `rainbow`, `pastel`, `metallic`, `colorful`

### 10. Professional & Corporate
- **Corporate Blue**: Professional, trustworthy, clean
- **Financial**: Conservative, secure, traditional
- **Legal**: Professional, serif fonts, formal
- **Medical**: Clean, white, trustworthy, accessible
- **Tech Startup**: Modern, bold, innovative

**Prompt Keywords**: `corporate`, `professional`, `business`, `financial`, `medical`, `startup`

### 11. Creative & Artistic
- **Artistic Grunge**: Textured, rough edges, creative chaos
- **Watercolor**: Soft blends, artistic, flowing
- **Abstract Art**: Geometric shapes, bold colors, creative
- **Pop Art**: Bold colors, comic style, high contrast
- **Collage**: Layered images, mixed media, creative

**Prompt Keywords**: `artistic`, `grunge`, `watercolor`, `abstract`, `pop-art`, `collage`

### 12. Gaming & Entertainment
- **Gaming UI**: HUD elements, stats displays, action-focused
- **Streaming**: Dark theme, vibrant accents, chat-friendly
- **RPG Fantasy**: Medieval, magical elements, ornate
- **Esports**: Bold, energetic, competitive
- **Retro Gaming**: Pixel art, 8-bit colors, nostalgic

**Prompt Keywords**: `gaming`, `streaming`, `rpg`, `fantasy`, `esports`, `pixel-art`, `8-bit`

### 13. E-commerce
- **Luxury Store**: Elegant, spacious, high-end feel
- **Fast Fashion**: Trendy, bold, image-heavy
- **Marketplace**: Clean grids, product-focused, functional
- **Subscription Box**: Curated, minimal, lifestyle-focused
- **Handmade**: Artisanal, warm, personal touch

**Prompt Keywords**: `ecommerce`, `luxury`, `fashion`, `marketplace`, `subscription`, `handmade`

### 14. Educational
- **Academic**: Clean, readable, professional
- **Kids Learning**: Colorful, playful, friendly
- **Course Platform**: Organized, clean, progress-focused
- **Documentation**: Clear hierarchy, code-friendly, searchable
- **Tutorial**: Step-by-step, visual, engaging

**Prompt Keywords**: `educational`, `academic`, `learning`, `kids`, `course`, `tutorial`, `docs`

### 15. Social & Community
- **Social Network**: User-focused, feed-based, interactive
- **Forum**: Threaded, readable, community-focused
- **Dating App**: Personal, image-heavy, swipe-friendly
- **Community Hub**: Welcoming, organized, discussion-friendly
- **Blog Platform**: Reading-focused, typography-heavy, clean

**Prompt Keywords**: `social`, `forum`, `dating`, `community`, `blog`, `feed`

### 16. Productivity
- **Task Manager**: Clean, organized, action-focused
- **Dashboard**: Data-rich, charts, analytics
- **Note Taking**: Distraction-free, typography-focused
- **Calendar**: Time-based, clean grids, color-coded
- **Project Management**: Boards, timelines, team-focused

**Prompt Keywords**: `productivity`, `dashboard`, `tasks`, `notes`, `calendar`, `project-management`

### 17. Health & Wellness
- **Fitness**: Energetic, motivational, stats-focused
- **Meditation**: Calm, minimal, soothing colors
- **Nutrition**: Fresh, colorful, food-photography
- **Healthcare**: Clean, accessible, trustworthy
- **Mindfulness**: Gentle, nature-inspired, peaceful

**Prompt Keywords**: `fitness`, `meditation`, `wellness`, `nutrition`, `healthcare`, `mindfulness`

### 18. Travel & Hospitality
- **Travel Booking**: Image-heavy, adventure-focused
- **Hotel**: Luxury, spacious, elegant
- **Restaurant**: Food-focused, atmospheric, inviting
- **Tourism**: Destination-focused, inspirational, vibrant
- **Airline**: Clean, efficient, professional

**Prompt Keywords**: `travel`, `hotel`, `restaurant`, `tourism`, `airline`, `hospitality`

### 19. Experimental & Emerging
- **3D UI**: Three-dimensional elements, depth, immersive
- **AR/VR Interface**: Spatial, futuristic, immersive
- **Particle Effects**: Animated particles, dynamic, engaging
- **Morphing Shapes**: Fluid animations, organic transitions
- **Generative