Frontend Design Skill

Create distinctive, production-grade frontend interfaces that no human would identify as AI-generated. Every output must look like it was crafted by an expensive design agency — bold, intentional, and memorable.

Design Thinking Protocol

Before writing ANY code, complete this checklist. Do not skip steps.

1. Purpose — What problem does this interface solve? Who uses it?

2. Tone — Pick ONE extreme aesthetic direction. This is mandatory — never proceed with an unnamed direction.

Choose from (or invent your own with equal specificity):

Brutally minimal | Maximalist chaos | Retro-futuristic | Organic/natural
Luxury editorial | Brutalist/raw | Art deco/geometric | Soft/pastel
Industrial/utilitarian | Neo-Memphis | Swiss modernist | Japanese minimal
Retrofuture terminal | Nordic calm | Tokyo neon | Desert warmth

If you cannot name the tone in two words, you have not decided. "Clean modern" is NOT a tone — it is the absence of one, and produces AI slop.

3. Constraints — Framework (HTML/React/Vue/Svelte), browser support, performance budget, existing brand kit.

4. Differentiation — What is the ONE thing someone will remember about this page? Name it explicitly before coding.

The Anti-Slop Manifesto

These rules exist because LLMs converge on statistically average output — pleasant, inoffensive, and utterly forgettable. The patterns below are blacklisted not because they are inherently bad, but because their indiscriminate use is the #1 signal of AI-generated design.

Blacklisted Fonts

NEVER use these as the primary display font without explicit user request:

Font	Why	Use Instead
Inter	#1 AI default (~90% of LLM UIs)	Satoshi, General Sans, or a serif like Fraunces
Roboto	#2 AI default (Android/Chrome ecosystem)	Outfit, Plus Jakarta Sans (as body only), Karla
Arial / system-ui	Absence of typographic choice	Any intentional font selection
Open Sans	Legacy AI default (pre-2022 training data)	Source Sans 3, Nunito (body only)
Poppins	Figma template saturation	Figtree, Outfit, DM Sans (body only)
Space Grotesk	Was distinctive, now AI "quirky-safe" default	Syne, Anybody, Chakra Petch
Montserrat	Overused geometric sans	Josefin Sans, Barlow, Jost

Rule: If a font is in the top-20 Google Fonts by popularity, justify it explicitly or reject it. Read references/typography-pairings.md for 20+ curated pairings organized by tone.

Blacklisted Colors

NEVER use these as primary accent without explicit intent:

Color	Hex	Why
Tailwind indigo-500	`#6366f1`	The ur-AI-color. Traceable to a single Tailwind docs decision.
Tailwind violet-500	`#8b5cf6`	Second most common AI accent.
Tailwind purple-500	`#a855f7`	Gradient endpoint for indigo→purple.
Tailwind blue-500	`#3b82f6`	The "enterprise" AI alternative to purple.
The AI gradient	`from-indigo-500 to-purple-600`	The canonical AI gradient and all its variants.
Flat white backgrounds	`#ffffff`, `#f9fafb`, `#f8fafc`	AI never explores dark themes, earth tones, or atmospheric depth.

Rule: If your palette could be reproduced by npx create-next-app + Tailwind defaults, start over. Read references/color-systems.md for 15+ curated palettes.

Blacklisted Layouts

NEVER produce these structures:

The 9-section AI template: Hero → logos bar → 3-col features → "how it works" steps → testimonial carousel → pricing table → FAQ accordion → CTA banner → 4-col footer. This exact sequence is reproduced across every AI-generated SaaS page.
Symmetric 3-column card grids as the primary content structure.
Centered everything — text-center on every section, mx-auto on every container, no spatial tension.
Cards for everything — rounded-xl shadow-lg p-6 on every content block regardless of whether it needs card treatment.

Rule: Every layout must have at least ONE grid-breaking element: asymmetry, overlap, full-bleed, diagonal flow, or unexpected negative space. Read references/layout-patterns.md for wireframes.

Blacklisted Animations

fade-in-up on every element via IntersectionObserver (the universal AI scroll reveal)
hover:-translate-y-1 hover:shadow-xl on every card
transition-all duration-300 applied indiscriminately
Gradient color cycling animations
Generic parallax on everything

Rule: Maximum 2-3 intentional motions per page. Each must serve hierarchy or atmosphere. Read references/motion-recipes.md for 12+ distinctive alternatives.

Blacklisted Copy

Never write these phrases:

"Revolutionize your workflow" / "Transform the way you..."
"Unlock the power of..." / "Seamlessly integrate..."
"Built for the modern..." / "Supercharge your..."
"Take your X to the next level" / "Everything you need to..."
"Say goodbye to [pain point]" / "Powered by cutting-edge..."

Forbidden words (unless quoting the user): seamless, leverage, cutting-edge, robust, scalable, empower, game-changer, next-level, holistic, innovative, state-of-the-art, delve

Copy rule: Headlines carry specific meaning. One short supporting sentence per section. "If deleting 30% improves the page, keep deleting."

Blacklisted Components

Gradient CTA buttons (bg-gradient-to-r from-indigo-500 to-purple-600)
Blurred backdrop navbar (backdrop-blur-md bg-white/80) as default
Icon + heading + paragraph in 3-column grid (the universal feature block)
Floating badges/pills on hero images
Testimonial carousels with circular avatars and star ratings
"Trusted by" logo clouds in horizontal strips
Generic pricing tables (Free / Pro / Enterprise with "Most Popular" badge)

Typography System

Every project must establish a deliberate type system:

Display + Body pairing — Two distinct typeface families. Display = characterful, Body = readable. Never the same font for both.
CSS variables — --font-display, --font-body, --font-accent (optional monospace)
Modular scale — Choose a ratio (1.25 major third, 1.333 perfect fourth, 1.5 augmented fourth) and apply consistently
Weight contrast — Use minimum 3 weights with intentional contrast (e.g., 300 body, 600 subheads, 900 display)
Size drama — Display headings should be 3x+ body size. Award winners use 12:1 ratios (180px display / 14px body). AI defaults to timid 4:1 ratios.

See references/typography-pairings.md for 20+ copy-paste-ready pairings organized by aesthetic tone.

Color System

Dominant + accent model — One dominant color family with one sharp contrasting accent. Evenly distributed palettes are timid.
CSS custom properties — Define at minimum: --color-surface, --color-text, --color-accent, --color-accent-contrast, --color-muted
Atmospheric backgrounds — Never flat white. Use subtle gradients, noise textures, or tinted surfaces. Background must have depth.
Dark/light as intentional choice — Pick one as primary based on the tone. Don't add dark mode as a checkbox feature.

See references/color-systems.md for 15+ curated palettes with CSS variable blocks.

Spatial Composition

Grid-breaking is mandatory — At least one element per page must break the grid: overlap, bleed, asymmetric placement, diagonal flow
Asymmetric layouts — 7/12 + 5/12 column splits, varied gutters (24px vs 64px), non-uniform padding
Full-bleed heroes — Edge-to-edge imagery without inherited gutters or shared max-width constraints
Negative space as design — Generous whitespace is intentional, not empty. Asymmetric whitespace (120px top, 80px bottom) adds rhythm.
"Every section has one job" — One headline, one supporting sentence, one purpose. No section tries to do two things.
Cards only for interactions — If content doesn't need a border/shadow to function, it doesn't need a card.

See references/layout-patterns.md for 6 landing page + 3 dashboard layout wireframes with CSS Grid code.

Motion & Animation

Ship exactly 2-3 intentional motions:

One hero entrance — Scale + fade, clip-path reveal, text split stagger, or counter-scroll parallax
One scroll-linked effect — Section reveal, sticky parallax image, progress-driven transformation, or horizontal scroll gallery
One hover/reveal interaction — Magnetic cursor, card perspective tilt, underline expand, or color field shift

Implementation: CSS-only for plain HTML. Framer Motion for React. Built-in transitions for Vue/Svelte. Focus on high-impact moments — one well-orchestrated page load beats scattered micro-interactions.

See references/motion-recipes.md for 12+ copy-paste recipes with CSS and Framer Motion versions.

Background & Texture

Never default to flat solid colors. Create atmosphere:

SVG noise — feTurbulence filter for organic grain texture over gradients
Gradient mesh — 4-6 overlapping radial-gradients for depth (not linear gradients)
Geometric patterns — Dot grids, line grids, cross-hatch via CSS radial-gradient or linear-gradient
Film grain — Pseudo-element with noise texture at 3-5% opacity
Slow-moving ambient animation — Aurora/blob keyframes at 30s+ duration in background

See references/background-textures.md for copy-paste SVG and CSS recipes.

The "Human Touch" — What Expensive Designers Add

Include at least 2 of these in every project:

Custom cursor — Circular div (20px) following mouse with 150ms lerp delay, expanding on hover
Asymmetric whitespace — Non-uniform padding (120px 8% 80px 12%), varied section margins
One rule-breaking element — A card rotated 2deg, an image bleeding off-viewport, a reversed-color section
Typography responding to content — Pull-quotes in gutters, drop caps, margin indices, weight scaling with importance
Scroll-triggered color shifts — Section background color changes to match content emotional tone
Variable font animation — font-variation-settings animating weight on scroll or hover

Output Type Protocols

Landing Page

Structure: Hero → Support → Detail → Final CTA (4 sections, not 9)

Hero: Full-bleed, brand + headline + one sentence + CTA + dominant visual. No floating badges, no multiple CTAs.
Support: One concrete feature, offer, or proof point.
Detail: Atmosphere, workflow depth, or story.
Final CTA: Single conversion action.
Viewport budget: Header + hero content must fit in initial viewport.

Dashboard / App UI

Follow "Linear-style restraint":

Calm surface hierarchy with strong typography and spacing
Minimal color palette (2-3 colors max)
Dense but readable information architecture
Sidebar (240px) + main + optional inspector (320px) via CSS Grid grid-template-areas
Single clear accent color. No card mosaics, no decorative gradients behind product UI.

Component Library

Establish design tokens first (CSS custom properties)
Show dark + light variants of every component
Atomic: tokens → elements → components → compositions
Each component must work in isolation and in composition

Poster / Marketing

Single focal point, dramatic typography scale (100px+ headlines)
High-contrast color, print-quality layout
Design a digital poster, not a web page with poster content

Web App

Functional elegance: keyboard-first, clear information hierarchy
State management visible in UI (loading, empty, error, success states)
Dense information display, not spacious marketing layout

Verification Litmus Test

Before delivering ANY output, self-check against these questions. If more than 2 answers are "no," iterate before showing the user.

Is the brand/product unmistakable in the first viewport?
Is there ONE strong visual anchor (not multiple competing elements)?
Can the page be understood by scanning headlines only?
Does each section have exactly ONE job?
Are cards actually necessary, or are they a lazy default?
Does the design have a nameable aesthetic direction (not "clean modern")?
Would this look premium with all decorative shadows removed?
Does it have at least one element that would make a designer say "I wouldn't have thought of that"?
Does it look like ANY other AI-generated page? If yes, redesign.

For a detailed 20-point scoring rubric, see references/anti-slop-checklist.md.

Technology Adaptation

Framework	Typography	Motion	Styling
Plain HTML/CSS	Google Fonts `@import`	CSS `@keyframes` + `animation-timeline`	CSS custom properties + Grid/Flexbox
React / Next.js	`next/font` or Google Fonts	Framer Motion (`motion` components)	Tailwind (heavily customized config) or CSS Modules
Vue	Google Fonts in `index.html`	`<Transition>` components	Tailwind (customized) or scoped styles
Svelte	Google Fonts in `app.html`	Built-in `transition:` directives	Scoped `<style>` with CSS custom properties

Tailwind rule: If using Tailwind, you MUST customize tailwind.config — override colors, fonts, border-radius, and shadows. Default Tailwind config produces AI slop. Extend, don't default.

Edge Cases

Scenario	Response
User provides no design direction	Pick a bold tone, explain your choice, proceed
User says "clean and simple"	Interpret as Swiss modernist minimalism, not generic
User provides brand guidelines	Honor them, but elevate — add atmospheric depth, intentional motion
User says "like Apple/Linear"	Study the SPECIFIC principles (restraint, density, typography) — don't copy surface aesthetics
Vague "make it look good"	Treat as landing page with luxury editorial tone unless context suggests otherwise
Very quick request	Use `scripts/init_frontend.py` to scaffold, then customize

Dependencies

No runtime dependencies required
Google Fonts (free, loaded via CDN)
Optional: Framer Motion (React projects), GSAP (advanced scroll animations)
scripts/slop_checker.py for automated post-generation verification (Python 3.8+, stdlib only)

Relationship to Other Skills

Skill	Relationship
`brainstorming`	Use before this skill when the user hasn't decided what to build
`web-artifacts-builder`	Complementary — use for interactive prototypes after design
`canvas-design`	Alternative for Claude.ai canvas-based design

wjgoarxiv/my-frontend-design-skill

What is my-frontend-design-skill?

Ask in your favorite AI

Documentation