Frontend Design

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:

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:

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:

1. Display + Body pairing — Two distinct typeface families. Display = characterful, Body = readable. Never the same font for both.
2. CSS variables — --font-display, --font-body, --font-accent (optional monospace)
3. Modular scale — Choose a ratio (1.25 major third, 1.333 perfect fourth, 1.5 augmented fourth) and apply consistently
4. Weight contrast — Use minimum 3 weights with intentional contrast (e.g., 300 body, 600 subheads, 900 display)
5. 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

1. Dominant + accent model — One dominant color family with one sharp contrasting accent. Evenly distributed palettes are timid.
2. CSS custom properties — Define at minimum: --color-surface, --color-text, --color-accent, --color-accent-contrast, --color-muted
3. Atmospheric backgrounds — Never flat white. Use subtle gradients, noise textures, or tinted surfaces. Background must have depth.
4. 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:

1. One hero entrance — Scale + fade, clip-path reveal, text split stagger, or counter-scroll parallax
2. One scroll-linked effect — Section reveal, sticky parallax image, progress-driven transformation, or horizontal scroll gallery
3. 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.

1. Is the brand/product unmistakable in the first viewport?
2. Is there ONE strong visual anchor (not multiple competing elements)?
3. Can the page be understood by scanning headlines only?
4. Does each section have exactly ONE job?
5. Are cards actually necessary, or are they a lazy default?
6. Does the design have a nameable aesthetic direction (not "clean modern")?
7. Would this look premium with all decorative shadows removed?
8. Does it have at least one element that would make a designer say "I wouldn't have thought of that"?
9. 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

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

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