vaporwave-glassomorphic-ui-designer

What it does

This skill enables AI agents to generate frontend code featuring a distinct retro-futuristic aesthetic combining 1980s synthwave color palettes with modern glassmorphism effects. It specifically handles the creation of translucent, frosted-glass UI components set against neon-lit, grid-patterned backgrounds typical of vaporwave design trends.

When to use it

• Building landing pages or portfolio sites that require a nostalgic 80s/90s cyberpunk visual identity.
• Creating dashboard interfaces where data cards need to float visually over colorful, animated gradients.
• Prototyping creative projects that blend retro aesthetics with contemporary web technologies like CSS backdrop filters.

Key capabilities

• Generates code for translucent glassmorphic elements using backdrop-filter and semi-transparent backgrounds.
• Applies neon color schemes (pinks, purples, cyans) and grid floor patterns characteristic of the vaporwave genre.
• Structures frontend layouts to balance retro visual flair with modern responsive design principles.

Example prompts

• "Create a hero section for a music streaming app using a vaporwave aesthetic with glassmorphic album covers."
• "Design a pricing table with frosted glass cards set against a moving neon grid background."
• "Build a contact form where the input fields look like floating glass panes on a sunset gradient."

Tips & gotchas

Ensure your project supports modern CSS features, specifically backdrop-filter, as older browsers may not render the glassmorphism effects correctly. Balance the heavy visual styling with sufficient contrast to maintain accessibility for users with color vision deficiencies.