S
Site Building SOPKnowledge Base
Search
← All topics

frontend-design

runnable

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics

site-buildingfrontendfrontenddesign
Agent trigger phrases: frontend-design · frontend guide · design guide · build ui · landing page · dashboard · web component · frontend design

Trigger: Use when "build UI", "landing page", "dashboard", "web component", "frontend design". Production-grade frontend interfaces with distinctive design.

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

  • Purpose: What problem does this interface solve? Who uses it?
  • Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian.
  • Constraints: Technical requirements (framework, performance, accessibility).
  • Differentiation: What makes this UNFORGETTABLE?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

  • Production-grade and functional
  • Visually striking and memorable
  • Cohesive with a clear aesthetic point-of-view
  • Meticulously refined in every detail

Frontend Aesthetics Guidelines

  • Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter. Pair a distinctive display font with a refined body font.
  • Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals.
  • Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
  • Backgrounds & Visual Details: Create atmosphere and depth. Apply gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use: overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (purple gradients on white backgrounds), predictable layouts, cookie-cutter design.

Mike's Design Standard — Non-Negotiable Rules

Every website built with this skill must be professional, beautiful, elegant, and built to convert. The benchmark: if a Fortune 500 brand or elite boutique agency built it, it belongs.

Permanently Banned Aesthetics:

  • Glassmorphism — frosted glass effects, backdrop-blur cards on gradient backgrounds
  • Neon/Cyber — neon colors, grid lines, glitch effects, monospace-everything
  • Playful/Bouncy — emoji-heavy layouts, confetti blobs, spring-bounce animations
  • Earthy Generic — terracotta + sage + cream "wellness" starter kit look
  • Basic SaaS Clone — purple gradient hero, Inter font, three feature cards

Required in Every Build:

  1. Clear typographic hierarchy — H1 dominant, H2 supporting, body readable
  2. Conversion anchor above the fold — phone number, primary CTA, or lead form visible without scrolling
  3. Trust signal within 2 sections of hero — reviews, ratings, credentials, or years in business
  4. Real copy — no lorem ipsum, no placeholder text. Write real content.
  5. Mobile-first layout — every section must look good at 375px before desktop
  6. Intentional color palette — max 2-3 colors (primary, dark, accent) + neutral base. No rainbow.

Niche Design Defaults

Local Home Services (roofing, HVAC, plumbing, electrical):

  • Dominant, authoritative — this business owns the market
  • Phone number top-right + sticky header always
  • Above-fold CTA: call or form — never just "learn more"
  • Trust signals: licensed, insured, years in business, review count
  • Color: dark authority (charcoal, navy, or deep green) + bold accent (orange, red, or gold)
  • Photography placeholders: crew, trucks, completed jobs — NOT stock handshake photos

Professional Services (law, finance, consulting, accounting):

  • Formal, credible, trust-first — the most reliable firm in the room
  • Credentials and awards visible above fold
  • No urgency tactics — gravitas over hype
  • Color: navy, charcoal, burgundy, or forest green + white + minimal accent
  • Headlines: outcome-focused, not feature-focused ("We Win Cases" not "Experienced Lawyers")

Health / Med Spa / Cosmetic / Wellness (premium):

  • Aspirational and clinical simultaneously
  • Before/after results prominent
  • Consultation CTA (not "buy now")
  • Color: soft neutrals (off-white, warm gray) + one refined accent (dusty rose, sage, slate)
  • Headlines: transformation language, not clinical jargon

SaaS / Tech / Digital Products:

  • Product-led — show the thing, let it speak
  • Social proof: logos, user count, review aggregate
  • Single clear value prop, above fold
  • Color: dark or light depending on product — never random
  • Headlines: outcome + speed ("Get X in Y time")

Design System with CSS Variables

Define ALL brand values as CSS custom properties in globals.css:

:root {
  --color-primary: #1B4D3E;
  --color-primary-light: #2A6B56;
  --color-accent: #D4A853;
  --color-bg: #FAFAF8;
  --color-bg-alt: #F0EDE6;
  --color-text: #1A1A1A;
  --color-text-muted: #6B7280;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
  --shadow-elevated: 0 8px 40px rgba(0,0,0,0.12);
  --max-width: 1200px;
}

Reference via Tailwind arbitrary values: bg-[var(--color-primary)] or direct CSS color: var(--color-text).

Font Loading

Always use next/font/google for Google Fonts. Never use <link> tags or external CDN:

import { Playfair_Display, Inter } from 'next/font/google';

const playfair = Playfair_Display({
  subsets: ['latin'],
  variable: '--font-display',
  display: 'swap',
});

Apply font variables on <html>: className with both variables.

Image Handling

ALL images use next/image. Never use <img> tags.

  • Above-fold hero: use priority prop
  • Below-fold: default lazy loading
  • Image sources: Always local (/images/site/). Never use Unsplash, Pexels, or any stock photo CDN.
  • Use CSS bg-gradient placeholders during development, not stock photo URLs.

Component Architecture for Local SEO Sites

Shared components (used on every page):

  • Header.tsx - Sticky, phone number + CTA always visible, mobile hamburger
  • Footer.tsx - Comprehensive links: services, areas, blog, utility pages
  • TrustBar.tsx - Licensed, insured, review count, guarantee
  • CTASection.tsx - Reusable full-width CTA with phone + button + neighborhoods
  • SchemaMarkup.tsx - JSON-LD injection via script tag with type application/ld+json

Page-specific components:

  • ServiceCard.tsx - Image + title + brief + link
  • AreaCard.tsx - Area name + brief + link
  • TestimonialCard.tsx - Quote, name, neighborhood, star rating
  • BeforeAfterSlider.tsx - Interactive drag slider for before/after image pairs
  • PricingTable.tsx - Service rows with prices and features

Conversion-Focused Layout

Every page follows this vertical rhythm:

  1. Hero with CTA (above fold)
  2. Trust bar (immediately below hero)
  3. Primary content sections
  4. Mid-page CTA (after ~2 scroll depths)
  5. More content
  6. Testimonials / social proof
  7. Full-width CTA section (bottom)

Phone number visible at ALL times via sticky header.

Premium Component Sources

  • 21st.dev — Animated backgrounds, shaders, particle effects, mouse-highlight cursors, text effects
  • shadcn/ui — Functional UI components: forms, dialogs, dropdowns, tables, toasts, command palettes
  • Aceternity UI — Wow-factor hero sections: spotlight effects, 3D card tilts, moving borders
  • Magic UI — Animated counters, shimmer buttons, meteor shower effects, border beam animations
  • Framer Motion — Page transitions, scroll-triggered reveals, gesture interactions
  • GSAP (GreenSock) — Pro-level scroll animations, complex timelines, SVG animation, pin sections
  • Lenis — Smooth scroll — replaces native browser scroll with buttery-smooth interpolated scrolling
  • Animate.css — Simple, no-JS entrance animations — fade in, bounce, slide in

Component Selection Guide

| Need | Use | |------|-----| | Functional form/dialog/table | shadcn/ui | | Animated hero background | 21st.dev or Aceternity | | Scroll-triggered reveals | Framer Motion or GSAP | | Number counters / shimmer effects | Magic UI | | Complex scroll storytelling | GSAP + Lenis | | Quick entrance animations | Animate.css | | Custom interactive animations | Framer Motion | | SVG animation / complex timelines | GSAP | | Smooth scroll experience | Lenis |

Animation Screenshot Rule

Never run visual-qa-loop on animated components. When framer-motion, gsap, animate__ classes, @keyframes, or transition: are detected — skip the screenshot loop for that element. Tell the user: "This component uses animation — screenshots won't capture it accurately. Please review it in the browser."

View raw JSON →Back to index