Distinctive Frontend Aesthetics

design

frontend-aesthetics is a Claude Code skill that guides frontend design decisions to produce distinctive UIs, steering clear of the generic AI-generated look defined by purple gradients, Inter/Roboto fonts, and flat gray surfaces. It covers four areas: typography (recommending DM Sans, Playfair Display, JetBrains Mono over overused system fonts), color (1–2 dominant plus 1–2 accent colors inspired by IDE themes such as Dracula, Nord, and Tokyo Night), animation (CSS-only for Vanilla JS projects, Motion/Framer for React, prioritizing orchestrated page-load staggering and micro-interactions), and depth-rich backgrounds using layered gradients, noise, and geometric patterns. Output is a structured JSON containing typography, colors, animations, backgrounds, and anti_pattern_validation fields, including WCAG compliance warnings. Ideal for frontend developers and designers building landing pages, dashboards, or UI components who want results that feel crafted rather than generated.