Frontend Interface Aesthetic Generator

Problem

When generating frontend pages, outputs often converge on the same safe patterns: Inter or Roboto type, purple-white gradients, and stock card layouts. The code may work, but the interface lacks context-specific character and feels like a generic prototype rather than a production surface.

How It Works

The skill asks the model to make design decisions before implementation:
- Purpose: what problem the interface solves and who it serves
- Tone: one clear direction, such as refined minimalism, brutalism, retro-futurism, editorial, or art deco
- Constraints: framework, performance, accessibility, and stack
- Differentiation: the detail that makes the result memorable

It then produces working HTML/CSS/JS, React, or Vue code with deliberate typography, CSS variables, motion, spatial composition, and background texture. The guidance explicitly avoids generic fonts, cliched palettes, and template-like components, while matching implementation complexity to the chosen aesthetic: maximalist work needs richer effects, while minimalist work needs restraint and precision.

Boundaries

Best suited for components, pages, and application interfaces where visual quality matters; not intended for backend logic, data analysis, or visual-free scripts. If the project already has a design system, provide it as a constraint so the generated direction does not conflict with existing patterns.