Claude-skill-registry design-styles

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

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/design-styles" ~/.claude/skills/majiayu000-claude-skill-registry-design-styles && rm -rf "$T"

manifest: skills/data/design-styles/SKILL.md

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