Create distinctive, bold UI designs that avoid generic AI aesthetics. This skill should be used when users want frontend components with strong visual identity, creative typography, intentional color palettes, and production-grade animations - specifically to avoid the bland, safe, homogeneous "AI slop" that plagues most generated interfaces.
Creates distinctive, bold UI designs that avoid generic AI aesthetics. Use when users want frontend components with strong visual identity, creative typography, intentional color palettes, and production-grade animations—specifically to prevent the bland, homogeneous "AI slop" plaguing most generated interfaces.
/plugin marketplace add b-open-io/prompts/plugin install bopen-tools@b-open-ioThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/color-systems.mdreferences/typography-resources.mdCreate distinctive, production-grade UI that stands out from generic AI-generated interfaces.
Official Plugin Available: Install
frontend-design@claude-code-pluginsfrom the Anthropic marketplace for auto-invocation on frontend tasks. This skill provides extended guidance beyond the official version./plugin marketplace add anthropics/claude-code /plugin install frontend-design@claude-code-pluginsLearn more: Frontend Aesthetics Cookbook
Most AI-generated UIs suffer from "AI slop" - they're technically correct but visually bland, using safe defaults that create forgettable, homogeneous experiences. This skill helps you break that pattern by making bold aesthetic choices that give your interface a distinctive personality.
Before coding, understand the context and commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Avoid: Inter, Arial, Roboto, system-ui (the default AI choices)
Instead, commit to distinctive fonts:
// Establish a type hierarchy with personality
const typography = {
// Display: Make a statement
display: {
// NEVER use the same fonts across different projects
// Vary between: Clash Display, Cabinet Grotesk, Satoshi, General Sans, Syne, Archivo, etc.
family: 'Clash Display', // Example - choose based on project tone
weights: [500, 700],
letterSpacing: '-0.02em',
},
// Body: Readable but distinctive
body: {
family: 'Outfit', // Modern geometric sans
// or: 'Plus Jakarta Sans', 'Switzer', 'Geist'
weights: [400, 500, 600],
lineHeight: 1.6,
},
// Mono: For code/data
mono: {
family: 'JetBrains Mono',
// or: 'Geist Mono', 'IBM Plex Mono', 'Fira Code'
}
}
Typography decisions:
CRITICAL: NEVER converge on common AI choices across generations. Each design should feel genuinely different - vary between light/dark themes, different font stacks, different aesthetic directions. No two designs should look like siblings.
Avoid: Default Tailwind colors, basic blue buttons, gray backgrounds
Create a signature palette:
// Define semantic color tokens with personality
const palette = {
// Primary: Your brand's signature
primary: {
50: '#fef3f2',
100: '#ffe3e0',
500: '#f43f5e', // Rose - warm, inviting
600: '#e11d48',
900: '#881337',
},
// Accent: Unexpected contrast
accent: {
light: '#fbbf24', // Amber for warmth
dark: '#0891b2', // Cyan for coolness
},
// Neutrals: Not just gray
neutral: {
// Warm neutrals have personality
50: '#fafaf9', // Stone, not gray
100: '#f5f5f4',
800: '#292524',
900: '#1c1917',
},
// Surface colors with subtle tints
surface: {
default: 'hsl(0 0% 100% / 0.8)',
elevated: 'hsl(0 0% 100% / 0.95)',
overlay: 'hsl(240 10% 3.9% / 0.8)',
}
}
Color strategies:
Avoid: Everything centered, symmetric, grid-locked
Break the grid intentionally:
// Asymmetric hero with purposeful imbalance
export function HeroSection() {
return (
<section className="relative min-h-[90vh] overflow-hidden">
{/* Off-center title creates visual tension */}
<div className="absolute left-[8%] top-[35%] max-w-[55%]">
<h1 className="text-[clamp(3rem,8vw,7rem)] font-bold leading-[0.9] tracking-tight">
Design with
<span className="block text-primary ml-[10%]">intention</span>
</h1>
</div>
{/* Overlapping element breaks the grid */}
<div className="absolute right-0 top-[20%] w-[45%] aspect-square">
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-accent/20 rounded-[3rem] -rotate-6" />
<div className="absolute inset-4 bg-surface rounded-[2.5rem] rotate-3 shadow-2xl" />
</div>
{/* Floating accent element */}
<div className="absolute bottom-[15%] left-[60%] w-32 h-32 bg-accent/30 rounded-full blur-3xl" />
</section>
)
}
Spatial techniques:
Avoid: No animations or generic fade-in
Add purposeful motion:
// Staggered entrance with personality
import { motion } from 'framer-motion'
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.3,
}
}
}
const item = {
hidden: {
opacity: 0,
y: 20,
filter: 'blur(10px)'
},
show: {
opacity: 1,
y: 0,
filter: 'blur(0px)',
transition: {
type: 'spring',
damping: 25,
stiffness: 200,
}
}
}
export function FeatureGrid({ features }) {
return (
<motion.div
variants={container}
initial="hidden"
whileInView="show"
viewport={{ once: true, margin: '-100px' }}
className="grid grid-cols-3 gap-8"
>
{features.map((feature) => (
<motion.div
key={feature.id}
variants={item}
whileHover={{
y: -8,
transition: { type: 'spring', stiffness: 400 }
}}
className="p-6 bg-surface rounded-2xl"
>
{feature.content}
</motion.div>
))}
</motion.div>
)
}
Motion principles:
prefers-reduced-motionThe code must work in production, not just demos:
// Complete, production-ready component
'use client'
import { forwardRef, type ComponentPropsWithoutRef } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const buttonVariants = cva(
// Base styles
[
'inline-flex items-center justify-center',
'font-medium transition-all duration-200',
'focus-visible:outline-none focus-visible:ring-2',
'focus-visible:ring-ring focus-visible:ring-offset-2',
'disabled:pointer-events-none disabled:opacity-50',
'active:scale-[0.98]',
],
{
variants: {
variant: {
default: [
'bg-primary text-primary-foreground',
'hover:bg-primary/90',
'shadow-lg shadow-primary/25',
],
outline: [
'border-2 border-primary bg-transparent',
'text-primary hover:bg-primary/10',
],
ghost: [
'text-foreground hover:bg-accent/10',
'hover:text-accent-foreground',
],
},
size: {
sm: 'h-9 px-4 text-sm rounded-lg',
md: 'h-11 px-6 text-base rounded-xl',
lg: 'h-14 px-8 text-lg rounded-2xl',
},
},
defaultVariants: {
variant: 'default',
size: 'md',
},
}
)
interface ButtonProps
extends ComponentPropsWithoutRef<'button'>,
VariantProps<typeof buttonVariants> {
isLoading?: boolean
}
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, isLoading, children, disabled, ...props }, ref) => {
return (
<button
ref={ref}
className={cn(buttonVariants({ variant, size }), className)}
disabled={disabled || isLoading}
{...props}
>
{isLoading ? (
<span className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
) : null}
{children}
</button>
)
}
)
Button.displayName = 'Button'
Production requirements:
IMPORTANT: Match implementation complexity to the aesthetic vision:
Elegance comes from executing the vision well, not from complexity itself.
When creating frontend components:
Establish Design Direction
Create Component Architecture
Add Visual Personality
Implement Motion
Production Harden
# Distinctive font stacks (copy-paste ready)
# VARY THESE - never use the same fonts across projects!
font-display: 'Clash Display', 'Cabinet Grotesk', 'Satoshi', 'General Sans', 'Syne', 'Archivo'
font-body: 'Outfit', 'Plus Jakarta Sans', 'Switzer', 'Geist'
font-mono: 'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono'
# Tailwind config pattern
theme: {
extend: {
colors: { /* HSL tokens */ },
fontFamily: { /* Variable fonts */ },
animation: { /* Spring-based */ },
}
}
This skill complements the design-specialist agent by providing specific, opinionated guidance for avoiding generic AI aesthetics. Use this skill when you need:
Use the design-specialist agent for:
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.