majiayu000 This skill creates sophisticated, atmospheric web interfaces that resonate with modern developers and "vibe coders." Focus on creating memorable, polished designs with depth, glow effects, and intentional aesthetics.
The user provides design requirements: a component, page, dashboard, or full application. They may specify mood, colors, or technical constraints.
Design Philosophy
Before coding, establish a clear aesthetic direction:
Mood Selection
Choose a primary mood that drives all decisions:
- Aurora/Cosmic: Animated gradients, mesh backgrounds, space-inspired depth
- Neon Cyber: Electric glows, sharp contrasts, futuristic terminals
- Glass Premium: Refined glassmorphism, frosted layers, subtle luxury
- Minimal Dark: Deep blacks, precise typography, intentional whitespace
- Warm Terminal: Cozy developer vibes, amber/green accents, retro-modern
- Vapor Wave: Pink/cyan gradients, nostalgic 80s/90s aesthetic, dreamy
Core Questions
- Who is this for? Developers, designers, power users, general audience?
- What feeling should it evoke? Professional, playful, mysterious, trustworthy, cutting-edge?
- What's the one memorable element? Every great design has a signature moment.
Color System Architecture
Dark Theme Foundations (Recommended for Vibe Coders)
Build depth with layered backgrounds:
:root {
/* Background layers - darkest to lightest */
--bg-void: #05020a; /* Deepest black with color tint */
--bg-deep: #0a0812; /* Base layer */
--bg-primary: #0f0c18; /* Main content background */
--bg-secondary: #161224; /* Cards, elevated surfaces */
--bg-tertiary: #1e1830; /* Hover states, highlights */
--bg-elevated: #261e40; /* Highest elevation */
}
Accent Color Palettes
Purple/Violet (Linear, Raycast style)
--accent-primary: #a855f7;
--accent-secondary: #8b5cf6;
--accent-glow: rgba(168, 85, 247, 0.5);
Cyan/Teal (Terminal, tech style)
--accent-primary: #06b6d4;
--accent-secondary: #22d3ee;
--accent-glow: rgba(6, 182, 212, 0.5);
Emerald/Green (Nature, success style)
--accent-primary: #10b981;
--accent-secondary: #34d399;
--accent-glow: rgba(16, 185, 129, 0.5);
Rose/Pink (Creative, playful style)
--accent-primary: #f43f5e;
--accent-secondary: #fb7185;
--accent-glow: rgba(244, 63, 94, 0.5);
Amber/Gold (Warm, premium style)
--accent-primary: #f59e0b;
--accent-secondary: #fbbf24;
--accent-glow: rgba(245, 158, 11, 0.5);
Text Hierarchy
Always tint text colors to match the accent:
--text-primary: #f0eef5; /* Main text - warm white */
--text-secondary: #a8a3b5; /* Secondary - muted */
--text-tertiary: #6b6578; /* Subtle labels */
--text-muted: #443d52; /* Disabled, hints */
Background Effects
Aurora/Mesh Gradients
Create atmospheric depth with layered animated gradients:
/* Multi-point mesh gradient */
--mesh-gradient:
radial-gradient(at 40% 20%, rgba(168, 85, 247, 0.3) 0px, transparent 50%),
radial-gradient(at 80% 0%, rgba(139, 92, 246, 0.2) 0px, transparent 50%),
radial-gradient(at 0% 50%, rgba(217, 70, 239, 0.15) 0px, transparent 50%),
radial-gradient(at 80% 50%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(168, 85, 247, 0.2) 0px, transparent 50%);
body::before {
content: '';
position: fixed;
inset: 0;
background: var(--mesh-gradient);
animation: aurora-drift 25s ease-in-out infinite;
pointer-events: none;
}
@keyframes aurora-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-1%, 2%) scale(1.02); filter: hue-rotate(15deg); }
}
Noise Texture Overlay
Add subtle grain for depth:
.app::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.025;
pointer-events: none;
mix-blend-mode: overlay;
}
Glassmorphism Techniques
Glass Panels
.glass-panel {
background: rgba(15, 12, 24, 0.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
}
Glass with Glow Border
.glass-glow {
position: relative;
}
.glass-glow::after {
content: '';
position: absolute;
top: 0;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), transparent);
box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}
Glow & Neon Effects
Glow Shadows
--glow-sm: 0 0 10px rgba(168, 85, 247, 0.3);
--glow-md: 0 0 20px rgba(168, 85, 247, 0.4);
--glow-lg: 0 0 40px rgba(168, 85, 247, 0.5);
/* Combined shadow + glow */
--shadow-glow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.2);
Gradient Borders on Hover
.card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, transparent, transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
transition: background 0.3s;
}
.card:hover::before {
background: linear-gradient(135deg, #a855f7, #8b5cf6, #d946ef);
}
Pulsing Glow Indicators
.status-indicator {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
box-shadow: 0 0 8px #10b981, 0 0 16px #10b981;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }
50% { opacity: 0.6; box-shadow: 0 0 4px currentColor; }
}
Typography
Font Pairing Recommendations
Modern Tech (Linear style)
- Display:
'Space Grotesk','Outfit','Sora' - Body:
'Inter'(sparingly),'DM Sans' - Mono:
'JetBrains Mono','Fira Code'
Premium/Luxury
- Display:
'Playfair Display','Cormorant' - Body:
'Source Sans Pro','Lato'
Playful/Creative
- Display:
'Archivo Black','Bebas Neue' - Body:
'Nunito','Quicksand'
Gradient Text
.gradient-text {
background: linear-gradient(135deg, #a855f7, #8b5cf6, #d946ef);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-shift 8s linear infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
Micro-interactions
Lift on Hover
.interactive {
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 300ms ease-out;
}
.interactive:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-glow);
}
Focus Ring Animation
*:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px rgba(168, 85, 247, 0.5);
animation: focus-pulse 1.5s ease-in-out infinite;
}
@keyframes focus-pulse {
0%, 100% { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px rgba(168, 85, 247, 0.5); }
50% { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px rgba(168, 85, 247, 0.8); }
}
Staggered Entrance
.item { animation: fade-up 300ms ease-out backwards; }
.item:nth-child(1) { animation-delay: 50ms; }
.item:nth-child(2) { animation-delay: 100ms; }
.item:nth-child(3) { animation-delay: 150ms; }
@keyframes fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
Buttons
Primary Gradient Button
.btn-primary {
background: linear-gradient(135deg, #a855f7, #8b5cf6, #d946ef);
border: none;
color: white;
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: 500;
box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4);
transition: all 150ms ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 24px rgba(168, 85, 247, 0.5), 0 0 40px rgba(168, 85, 247, 0.3);
filter: brightness(1.1);
}
Accessibility
ALWAYS include reduced motion support:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Anti-Patterns to AVOID
- Generic white backgrounds with purple accents (overused AI aesthetic)
- Flat, lifeless designs without depth or atmosphere
- Inconsistent glow intensities (too bright or too subtle)
- Over-animating everything (choose 2-3 key moments)
- Using blur without purpose (blur should create hierarchy)
- Ignoring dark mode (vibe coders prefer dark themes)
- Cookie-cutter card layouts without visual interest
Implementation Checklist
When building:
- Establish color system with CSS variables
- Add atmospheric background (gradient or texture)
- Implement glass/elevated surfaces with blur
- Add glow effects to interactive elements
- Create smooth hover/focus transitions
- Include entrance animations for key elements
- Test with prefers-reduced-motion
- Ensure text contrast meets WCAG standards
Remember: The goal is to create interfaces that developers WANT to use and look at. Every design choice should contribute to an atmosphere that feels intentional, refined, and memorable.