--- name: design-styles-skill description: "Access 263+ design styles with AI-optimized prompt keywords for frontend development" triggers: - design style - design aesthetic - visual style - minimalism - maximalism - art deco - brutalist - neomorphism - glassmorphism - cyberpunk - vaporwave globs: - "*.tsx" - "*.css" - "*.scss" - "*.tailwind.config.*" - "theme*.ts" --- # 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 - **Claude**: Claude/Anthropic-inspired warm editorial minimalism, quiet surfaces, coral accents, and conversational hierarchy - **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. ``` ### Claude-Inspired Product UI ``` Create a product workspace with the Claude design style. Use a warm neutral canvas, dark brown ink, and a restrained coral accent for primary actions. Keep surfaces quiet with 1px borders, low elevation, generous spacing, readable line lengths, and sentence-case headings. Avoid gradients, glass effects, decorative noise, and oversized shadows; preserve WCAG AA contrast in light and dark mode. ``` ### 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 --- Source attribution: Lobbi-Docs Original project: https://github.com/Lobbi-Docs/claude/blob/4e6f280df2e29ed0df1b326e3b651711de6068f3/plugins/frontend-design-system/skills/design-styles/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Dave AI. ## Upstream license notice MIT License Copyright (c) 2025 Golden Armada Team Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Dave AI resource metadata Creator / publisher: Lobbi-Docs Original project: https://github.com/Lobbi-Docs/claude/blob/4e6f280df2e29ed0df1b326e3b651711de6068f3/plugins/frontend-design-system/skills/design-styles/SKILL.md Attribution basis: Recovered original package and original project license at a pinned revision Fields of work: Design, Development & Engineering, Product Management Roles: Frontend Developer, Graphic Designer, Growth Product Manager, Product Designer, UX Designer Specialties: Cross Platform, Design, Frontend Tools: Tool not specified Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 4af28de587949e708a867115c5f687c21aca7c6055a639d2af575d535fd121f2 Metadata reviewed: 2026-10-27 This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.