Distinctive Frontend Interface Generator

Problem

Many generated frontends feel like AI output: Inter, Roboto, or system fonts; purple gradients on white; centered heroes; stacked cards; default shadows. They may work, but they lack context, brand character, and a memorable idea. The harder problem is not rendering an interface, but giving a component, page, or application a coherent design direction.

How It Works

The skill starts with design thinking before implementation:

• Purpose: identify the problem, user, and context.
• Tone: commit to a strong direction such as brutalist/raw, editorial/magazine, retro-futuristic, luxury/refined, or playful/toy-like.
• Constraints: account for framework, performance, accessibility, and technical limits.
• Differentiation: choose one memorable differentiator.

Implementation targets HTML/CSS/JS, React, Vue, and similar frontend stacks, with attention to Typography, Color & Theme, Motion, Spatial Composition, and background detail. It favors CSS variables, distinctive font pairings, asymmetric layouts, overlap, diagonal flow, negative space, gradient meshes, noise, texture, animation-delay, or the Motion library for high-impact moments.

Boundaries

Use it for components, landing pages, app interfaces, and prototypes that need stronger design intent. If a project already has strict design systems, brand tokens, or accessibility rules, state those constraints explicitly; the skill does not replace design tokens, brand assets, or accessibility audits, but it helps generated code feel more deliberately designed.