Distinctive Frontend Aesthetic Generation

Problem

Generated frontend code often lands in the same visual pattern: white background, purple gradient, Inter, Roboto, centered cards, and generic buttons. It may work, but it lacks context and a memorable point of view. This skill targets the gap between a functional requirement and a deliberate interface style: it asks what the interface is for, who uses it, and which aesthetic direction should be committed to before writing code.

How it works

It works in two stages:
- Design judgment: parse purpose, tone, constraints, and differentiation, then choose an executable direction such as minimal, brutalist, editorial, retro-futuristic, toy-like, or industrial, instead of listing vague adjectives.
- Implementation: produce production-grade HTML/CSS/JS, React, or Vue interfaces with attention to Typography, Color & Theme, Motion, Spatial Composition, and background texture. It favors avoiding Arial, Inter, Roboto, system fonts, and default patterns such as purple gradients on white, while keeping implementation complexity matched to the chosen vision.

Boundaries

This skill fits components, pages, application prototypes, and interactive interfaces; it does not cover backend logic, database design, or non-visual engineering tasks. If the project has brand guidelines, design systems, or strict accessibility requirements, include those constraints explicitly. Bold aesthetic choices do not replace performance, accessibility, or real product constraints.