Design Styles Skill

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