markus41/plugins/frontend-design-system/skills/design-styles

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

1. Consistency: Choose one primary style per project
2. Accessibility: Ensure sufficient color contrast (WCAG AA/AAA)
3. Performance: Optimize CSS for chosen style effects
4. Responsiveness: Adapt style elements for mobile
5. 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