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 Art: Algorithmic, unique, creative

Prompt Keywords: 3d, ar, vr, particles, morphing, generative, experimental

How to Use Prompt Keywords

1. Style Selection

Choose a style based on your project needs:

"Create a [component] with [style-keyword] design style"
Example: "Create a login form with glassmorphism design style"

2. Combining Styles

Mix keywords for hybrid designs:

"Create a dashboard with dark-mode and neumorphism"
"Design a card component with cyberpunk and glassmorphism"

3. Specific Elements

Target specific UI elements:

"Create glassmorphism buttons"
"Design a brutalist navigation bar"
"Build a neumorphic card component"

Style Selection Decision Tree

Project Type?
├── Corporate/Professional → Corporate Blue, Material Design
├── Creative/Portfolio → Artistic, Bold, Glassmorphism
├── E-commerce → Luxury Store, Marketplace, Clean Minimalism
├── Gaming → Cyberpunk, Neon Tech, Gaming UI
├── Health/Wellness → Meditation, Organic, Pastel
├── Educational → Academic, Kids Learning, Documentation
├── Social → Social Network, Community Hub, Blog
└── Experimental → 3D UI, AR/VR, Generative Art

User Demographic?
├── Young/Trendy → Vaporwave, Neo-Brutalism, Bold
├── Professional → Corporate, Clean Minimalism, Material
├── Creative → Artistic, Maximalism, Expressive
├── Technical → Dark Mode, Brutalist, Hi-Tech
└── General → Scandinavian, Flat Design, Material

Mood/Atmosphere?
├── Energetic → Cyberpunk, Neon, Bold
├── Calm → Minimalism, Meditation, Pastel
├── Luxury → Art Deco, Dark Elegant, Metallic
├── Playful → Memphis, Colorful, Pop Art
└── Professional → Corporate, Swiss Design, Material

Example Prompts

Minimalist Login Page

Create a login page with Scandinavian minimalism design style.
Use muted colors, natural material textures, and generous whitespace.
Include a clean form with subtle shadows and simple typography.

Cyberpunk Dashboard

Design a dashboard with cyberpunk aesthetic.
Use dark background (#0a0e27), neon cyan (#00ffff) and magenta (#ff00ff) accents.
Include glowing borders, tech-inspired grid layouts, and holographic card effects.

Glassmorphism Card Component

Create a card component with glassmorphism style.
Use frosted glass effect with backdrop-filter blur,
semi-transparent white background (rgba(255,255,255,0.1)),
subtle border, and soft shadow.

Neo-Brutalist Button

Design a button with neo-brutalist style.
Use bright background color (#ffff00), thick black border (4px),
bold offset shadow (8px 8px 0 #000), and strong typography.

Art Deco Hero Section

Create a hero section with Art Deco style.
Use geometric patterns, gold (#d4af37) and black color scheme,
symmetrical layout, bold lines, and elegant serif typography.

Links to Full Style Reference

For complete design specifications, color palettes, typography systems, and component examples:

Full Style Database: [[Resources/Design-Systems/Style-Database]]
Color Palettes: [[Resources/Design-Systems/Color-Palettes]]
Typography Systems: [[Resources/Design-Systems/Typography]]
Component Examples: [[Resources/Design-Systems/Component-Library]]
Design Tokens: [[Resources/Design-Systems/Design-Tokens]]

Integration with Other Skills

css-generation: Convert style selections to CSS/Tailwind code
component-patterns: Apply styles to component patterns
keycloak-theming: Use styles for authentication pages

Quick Reference Table

Category	Popular Styles	Primary Colors	Use Cases
Minimalist	Clean, Scandinavian, Flat	White, Gray, Black	Corporate, SaaS
Digital UI	Glassmorphism, Material	Translucent, Bold	Modern apps
Futuristic	Cyberpunk, Neon Tech	Neon, Dark	Gaming, Tech
Bold	Brutalist, Neo-Brutalist	Bright, High contrast	Creative, Agencies
Professional	Corporate, Medical	Blue, White	Business, Healthcare

Best Practices

Consistency: Choose one primary style per project
Accessibility: Ensure sufficient color contrast (WCAG AA/AAA)
Performance: Optimize CSS for chosen style effects
Responsiveness: Adapt style elements for mobile
Brand Alignment: Match style to brand personality

Resources

Design inspiration: Dribbble, Behance, Awwwards
Component libraries: shadcn/ui, Material-UI, Chakra UI
Color tools: Coolors, Adobe Color, Paletton
Typography: Google Fonts, Font Pair, Typescale