frontend-design

verified	true
lastVerifiedAt	"2026-03-05T00:00:00.000Z"
name	frontend-design
description	Create distinctive, production-grade web interfaces with intentional aesthetic direction. Avoids generic AI aesthetics (centered layouts, Inter/Arial, purple gradients, uniform corners). Use for UI components, dashboards, landing pages, React/HTML/CSS layouts where design quality matters.
version	1.0.0
model	sonnet
invoked_by	both
user_invocable	true
tools	["Read","Write","Edit","Bash","Glob","Grep"]
agents	["frontend-pro","developer","nextjs-pro"]
category	frontend
tags	["ui","design","css","react","typography","animation","components","aesthetics"]
aliases	["ui-design","design-system","frontend-aesthetics"]
best_practices	["Choose a bold aesthetic direction and execute it with precision","Avoid generic AI slop — centered layouts, Inter/Arial/Roboto, purple gradients, uniform rounded corners","Select fonts that are characterful and context-appropriate, not default safe choices","Commit to a cohesive color palette with dominant and sharp accent colors","Prioritize high-impact motion (page load, key transitions) over scattered micro-interactions","Match code complexity to vision — elaborate for maximalist, restrained for minimalist"]
error_handling	strict
streaming	supported
source	builtin
trust_score	100
provenance_sha	6d2998f14963c88a

Frontend Design

"Every design should feel specifically crafted for its context, never cookie-cutter."

Overview

This skill enables creation of distinctive, production-grade frontend interfaces that avoid the generic AI-generated aesthetic that has become ubiquitous. The goal is intentional design that reflects the specific context, brand, and purpose of the interface.

When to Invoke

• Building UI components, dashboards, or page layouts
• User requests "make this look good" or "design a UI"
• React, HTML, CSS, or Tailwind styling work
• Any request where visual quality and distinctiveness matter

The Anti-AI-Slop Principle

Generic AI-generated interfaces share predictable patterns that signal laziness:

Overused patterns to AVOID:

• Centered hero layout with heading + subtext + CTA button
• Inter, Arial, Roboto, or system-ui as primary font
• Purple-to-blue gradient as accent color
• Uniform 8px or 12px border-radius everywhere
• Card grids with identical padding and shadow
• Soft pastel color palette with low contrast
• Animated gradient text as a "premium" signal
• Generic icons (plus, arrow, chevron) for decorative purposes

What to do instead:

• Choose an aesthetic direction and commit to it fully
• Make typography do real work — size contrast, weight variation, spacing rhythm
• Use color that creates tension or warmth, not just fills space
• Let layout breathe asymmetrically — not everything needs to be centered

Aesthetic Directions

Brutalist Minimal

/* High contrast, raw, confident */
:root {
  --bg: #ffffff;
  --text: #000000;
  --accent: #ff0000;
  --border: 2px solid #000000;
  --radius: 0px;
}

.card {
  border: var(--border);
  padding: ;
  : (--bg);
}