frontend-design

Professional Frontend Design

This skill transforms generic AI-generated UIs into production-grade, visually distinctive interfaces. It provides a design reasoning framework, industry-aware style selection, and concrete engineering standards.

Design System Generation

Before writing any frontend code, walk through this reasoning framework. The goal is to make deliberate design decisions — not default to generic blue-and-white SaaS templates.

Step 1: Analyze Requirements

Identify these before choosing any visual direction:

• Product type — What category? (SaaS, e-commerce, dashboard, portfolio, etc.)
• Audience — Who uses this? (developers, executives, consumers, elderly, children)
• Platform — Web, mobile, desktop, or cross-platform?
• Constraints — Existing brand guidelines? Required framework? Accessibility level (AA/AAA)?

Step 2: Select Design Direction

Use the Industry Reference Table (below) as a starting point, then refine based on project specifics.

Choose explicitly:

• Style — The visual language (glassmorphism, brutalism, flat, etc.)
• Color mood — Emotional tone (trust blue, energetic orange, calm pastels, dark OLED)
• Typography mood — Character (professional, playful, editorial, technical)
• Key effects — Signature interactions (hover lifts, parallax, scroll reveals, blur)

Step 3: Define Anti-Patterns

Every product type has styles that actively harm it. Name them explicitly before implementation:

• Finance: playful colors, excessive animation, dark mode by default
• Healthcare: bright neon, motion-heavy, low contrast
• Creative agency: corporate minimalism, generic templates
• Government: ornate design, low contrast, motion effects

Step 4: Output Design Summary

Before writing code, output a brief design system summary:

**Design System**: [Product] — [Style]
**Colors**: [Primary] / [Accent] / [Neutral] / [Semantic]
**Typography**: [Heading font] + [Body font] — [Scale]
**Effects**: [Key interactions]
**Avoid**: [Named anti-patterns]

This takes 30 seconds and prevents hours of rework from misaligned visual direction.

---

Style Reference

25 styles with key characteristics. Use this to select and combine styles — most projects blend 1-2 primary styles.

Style	Key Characteristics	Best For	Avoid When
Minimalism / Swiss	Monochromatic, geometric grid, essential elements only	Enterprise, dashboards, tools	Playful brands, children's products
Glassmorphism	backdrop-filter: blur(10-20px), translucent overlays, vibrant backgrounds	Modern SaaS, fintech dashboards	Low-performance targets, print
Brutalism / Neubrutalism	Bold borders 2-4px, primary colors, thick offset shadows, no gradients	Creative agencies, portfolios, Gen-Z	Corporate, healthcare, finance
Neumorphism / Soft UI	Dual shadows (light+dark), embossed/debossed, monochromatic, rounded	Wellness, smart home, controls	Data-dense, text-heavy, low contrast risk
Claymorphism	Soft 3D, thick borders 3-4px, double shadows, rounded 16-24px	Educational, children's, playful apps	Corporate, legal, finance
Dark Mode (OLED)	Deep black #000, dark grey #121212, neon accents, high contrast	Streaming, dev tools, gaming, fintech	Print content, elderly users
Flat Design	2D, bold colors, no shadows, clean lines, icon-heavy	Cross-platform, complex dashboards	Where depth/hierarchy is critical
Bento Box Grid	Modular cards, asymmetric grid, varied sizes, Apple-style	Product showcases, feature pages	Simple single-column content
Aurora UI	Vibrant gradients, northern lights, 8-12s ambient animations	Creative, AI platforms, luxury	Performance-constrained, accessibility-critical
Motion-Driven	Scroll effects, parallax 3-5 layers, 300-400ms transitions	Storytelling, portfolios, agencies	Motion-sensitive users, data tools
Hero-Centric	Full-viewport hero, compelling headline, high-contrast CTA	Landing pages, product launches	Multi-feature pages, dashboards
Conversion-Optimized	Single CTA focus, minimal distractions, trust signals, form-centric	Lead gen, signups, pricing pages	Content sites, portfolios
Feature Showcase	3-4 column grid, benefit cards, interactive elements	SaaS feature pages, product tours	Simple products, single-function tools
Data-Dense Dashboard	Multiple charts, KPI cards, data tables, minimal padding, grid	BI/analytics, monitoring, admin	Consumer apps, marketing sites
Executive Dashboard	Large metrics, summary KPIs, minimal detail, whitespace	C-suite reporting, high-level views	Drill-down analysis, operations
Real-Time Monitoring	Live data, status indicators, alert pulses, streaming charts	DevOps, IoT, trading, operations	Static content, marketing
Editorial / Magazine	Asymmetric grid, pull quotes, drop caps, CSS Grid columns	Blogs, news, long-form content	Dashboards, tools, e-commerce
Organic Biophilic	Nature-inspired, organic shapes, earth tones, flowing SVG	Sustainability, wellness, eco brands	Tech-forward, cybersecurity
AI-Native UI	Conversational, minimal chrome, streaming text, typing indicators	Chatbots, AI assistants, voice	Data-heavy, multi-panel interfaces
Exaggerated Minimalism	Oversized type clamp(3rem, 8vw, 12rem), extreme whitespace	Fashion, luxury, art, editorial	Dense information, dashboards
Pixel Art / Retro	8-bit aesthetic, blocky, pixelated fonts, nostalgic palette	Gaming, indie, retro brands	Professional services, healthcare
E-Ink / Paper	Paper-like texture, high contrast, monochrome, reading-focused	Reading apps, documentation, notes	Dynamic content, media-heavy
Spatial UI (VisionOS)	Glass panels, depth layers, translucent, immersive	XR/VR interfaces, spatial computing	2D-only contexts, accessibility-first
Cyberpunk	Neon on black, terminal/HUD, glitch effects, monospace	Gaming, security, crypto, dev tools	Conservative brands, elderly users
Swiss Modernism 2.0	Strict grid, Helvetica/Inter, modular, 12-column, WCAG AAA	Government, education, documentation	Creative/expressive brands

---

Industry Design Reference

Recommended design direction by product category. Use as a starting point — adapt to specific project needs.

Category	Style	Color Mood	Typography	Effects	Anti-Patterns
SaaS	Glassmorphism + Flat	Trust blue, accent contrast	Professional, clear hierarchy	Subtle hover 200ms, smooth transitions	Excessive animation, dark mode default
E-commerce	Vibrant + Feature Showcase	Brand primary, success green	Engaging, clear hierarchy	Card hover lift 200ms, scale	Flat without depth, text-heavy pages
E-commerce Luxury	Liquid Glass + Glassmorphism	Premium minimal, gold accent	Elegant serif + refined sans	Slow animations 400-600ms, parallax	Vibrant block colors, playful tones
Healthcare	Neumorphism + Accessible	Calm blue, health green	Readable, large 16px+	Soft shadows, smooth press 150ms	Bright neon, motion-heavy, low contrast
Educational	Claymorphism + Micro-interactions	Playful, clear hierarchy	Friendly, engaging	Soft press 200ms, progress animations	Dark modes, complex jargon
Financial Dashboard	Dark Mode + Data-Dense	Dark bg, red/green alerts, trust blue	Clear, readable mono	Real-time number animations, alert pulse	Light mode default, slow rendering
Analytics Dashboard	Data-Dense + Heat Map	Cool-to-hot gradients, neutral grey	Functional, monospace data	Hover tooltips, chart zoom, filters	Ornate design, no filtering
Creative Agency	Brutalism + Motion-Driven	Bold primaries, artistic freedom	Bold, expressive, variable	CRT scanlines, neon glow, glitch	Corporate minimalism, hidden portfolio
Portfolio	Motion-Driven + Minimalism	Brand primary, artistic	Expressive, variable weight	Parallax 3-5 layers, scroll reveals	Corporate templates, generic layouts
Fitness/Gym	Vibrant + Dark Mode	Energetic orange #FF6B35, dark bg	Bold, motivational	Progress rings, achievement unlocks	Static design, no gamification
Restaurant/Food	Vibrant + Motion-Driven	Warm orange/red/brown	Appetizing, clear	Food image reveals, menu hover	Low-quality imagery, outdated info
Real Estate	Glassmorphism + Minimalism	Trust blue, gold, white	Professional, confident	3D property tour, map hover	Poor photos, no virtual tours
Travel	Aurora UI + Motion-Driven	Vibrant destination, sky blue	Inspirational, engaging	Destination parallax, itinerary animations	Generic photos, complex booking
News/Media	Minimalism + Flat	Brand + high contrast	Clear, readable serif/sans	Breaking news badges, article reveals	Cluttered layout, slow loading
AI/Chatbot	AI-Native + Minimalism	Neutral, AI purple #6366F1	Modern, clear	Streaming text, typing indicators, fade-in	Heavy chrome, slow response feedback
Developer Tool	Dark Mode + Minimalism	Syntax theme, blue focus	Monospace, functional	Syntax highlighting, command palette	Light mode default, slow performance
Productivity	Flat + Micro-interactions	Clear hierarchy, functional	Clean, efficient	Quick actions 150ms, task animations	Complex onboarding, slow performance
Social Media	Vibrant + Motion-Driven	Vibrant engagement colors	Modern, bold	Scroll animations, icon animations	Heavy skeuomorphism, poor a11y
Gaming	3D + Retro-Futurism	Vibrant, neon, immersive	Bold, impactful	WebGL, glitch effects	Minimalist design, static assets
Non-profit	Accessible + Organic	Cause-related, trust, warm	Heartfelt, readable	Impact counters, story reveals	No impact data, hidden financials
Legal	Trust & Authority + Minimal	Navy #1E3A5F, gold, white	Professional, authoritative	Practice area reveals, credential display	Outdated design, hidden credentials
Banking	Minimalism + Accessible	Navy, trust blue, gold	Professional, trustworthy	Number animations, security indicators	Playful design, poor security UX
Music Streaming	Dark Mode + Vibrant	Dark #121212, vibrant accents	Modern, bold	Waveform visualization, playlist animations	Cluttered layout, poor audio player
Video Streaming	Dark Mode + Motion-Driven	Dark bg, poster colors, brand	Bold, engaging	Video player, content carousel parallax	Static layout, slow video player
Job Board	Flat + Minimalism	Professional blue, success green	Clear, professional	Search/filter animations, application flow	Outdated forms, hidden filters
Marketplace	Vibrant + Flat	Trust colors, category colors	Modern, engaging	Review animations, listing hover	Low trust signals, confusing layout
Smart Home/IoT	Glassmorphism + Dark Mode	Dark, status indicator colors	Clear, functional	Device status pulse, quick actions	Slow updates, no automation
Government	Accessible + Minimalism	Professional blue, high contrast	Clear, large type	Focus rings 3-4px, skip links	Ornate design, low contrast, motion

---

Common Page Structures

Use these as starting points for layout composition — adapt to project needs.

Page Type	Structure	Key Components
SaaS Dashboard	Collapsible sidebar + top bar + main grid	Stat cards, charts, data tables, activity feed, filters
Landing Page	Hero → social proof → features → how-it-works → pricing → CTA → footer	Hero with CTA, testimonial carousel, feature grid, pricing cards
Admin Panel	Fixed sidebar + breadcrumb top bar + content area	CRUD tables with sort/filter/search, detail drawers, bulk actions
E-commerce Product	Sticky nav + image gallery + details + related	Image carousel, variant selector, add-to-cart, reviews, recommendations
Documentation	Left nav + main content + right TOC (sticky)	Search, version switcher, code blocks with copy, prev/next nav
Blog / Editorial	Top nav + hero article + content + sidebar	Featured image, reading time, table of contents, share buttons, related
Settings / Profile	Sidebar tabs or top tabs + form sections	Section nav, form groups, save/cancel, danger zone at bottom
Auth Flow	Centered card, minimal chrome	Logo, form, social login, link to alt flow (signup↔login), error inline

---

UI States

Every data-dependent view must handle all five states. Shipping only the success state is the single most common quality gap in AI-generated UIs.

State	What to Show	Implementation
Loading	Skeleton shimmer matching content layout — never a blank screen or spinner alone	Skeleton components that mirror the final layout shape
Error	What went wrong + how to fix it + retry action	Error boundary (React) or error component; include retry button
Empty	Helpful message + primary action to populate	Illustration optional; clear CTA ("Create your first project")
Success	The actual content, fully interactive	Default state — but don't forget the other four
Partial / Degraded	Available data + indicator for what's missing or stale	"Last updated 5m ago" badge, greyed-out sections, retry for failed parts

---

Frontend-Backend Integration

When building a tool with both backend and frontend, these patterns determine perceived quality:

• API loading: Every fetch must show loading state immediately, not after a delay. Use useSWR, react-query, or equivalent for cache + revalidation.
• Optimistic updates: For user-initiated mutations (toggle, delete, reorder), update the UI immediately and roll back on failure. Waiting for the server round-trip feels sluggish.
• Error boundaries: Wrap route segments in error boundaries so one failed API call doesn't crash the entire page. Show a localized error with retry, not a white screen.
• Auth flow: Login/signup → redirect to intended destination (not always home). Show auth state in nav (avatar/menu). Handle token expiry gracefully (refresh silently, prompt re-login only when needed).
• Real-time updates: For dashboards/chat, use WebSocket or SSE with reconnection logic. Show connection status indicator. Degrade gracefully to polling if WS fails.
• Form submissions: Disable submit button during request, show inline progress, display success confirmation or inline errors. Never navigate away without confirming unsaved changes.
• Pagination / infinite scroll: Show count ("1-25 of 342"), maintain scroll position on back-nav, use cursor-based pagination for real-time data.

---

Dark Mode Implementation

When the project needs dark mode, implement it properly — not as an afterthought:

• Use CSS custom properties for all colors: --color-bg, --color-text, --color-surface
• Apply via prefers-color-scheme media query for system default + class toggle for user override
• Dark mode is NOT inverted colors — use desaturated, lighter tonal variants with adjusted contrast
• Shadows become less visible in dark mode — use border or elevated surface colors instead
• Test all semantic colors (error red, success green, warning amber) against dark backgrounds
• Store user preference in localStorage; respect system preference as default

---

Micro-Copy & UX Writing

Words are UI. Bad copy makes good design feel broken.

• Button labels: Use specific verbs ("Save changes", "Create project", "Send invite") — never generic ("Submit", "OK", "Click here")
• Error messages: State the cause + the fix ("Email is already registered — try logging in instead") — never just "Invalid input" or "Error occurred"
• Empty states: Tell the user what this space is for + how to fill it ("No projects yet. Create your first project to get started.")
• Confirmation dialogs: Name the destructive action ("Delete 3 files permanently?") — never "Are you sure?"
• Loading text: Describe what's happening if it takes >3s ("Loading your dashboard..." not just a spinner)
• Success feedback: Confirm what happened ("Project created" not "Success")
• Placeholder text: Use realistic examples ("jane@company.com") not instructions ("Enter your email")

---

Quality Standards

1. Accessibility (CRITICAL)

• Contrast minimum 4.5:1 normal text, 3:1 large text (WCAG AA)
• focus-visible rings 2-4px on all interactive elements — never outline: none without a visible replacement
• alt text for meaningful images; empty alt="" for decorative
• aria-label on icon-only buttons and links
• Tab order matches visual order; all interactive elements keyboard-operable
• Sequential heading hierarchy h1→h6, no level skip; one h1 per page
• Never convey information by color alone — add icon or text
• @media (prefers-reduced-motion: reduce) guard on every animation/transition
• Skip-to-content link on every page
• Semantic HTML: <nav>, <main>, <article>, <section>, <button> — never <div onclick>

2. Touch & Interaction (CRITICAL)

• Minimum 44x44px touch targets (Apple HIG) / 48x48dp (Material)
• 8px+ gap between adjacent touch targets
• Never rely on hover alone for primary interactions — use click/tap
• Loading buttons: disable during async operations, show spinner
• Visual tap feedback within 100ms
• touch-action: manipulation on interactive elements to remove 300ms tap delay
• Respect safe areas for notch, Dynamic Island, gesture bars
• Cursor: pointer on all clickable elements (web)

3. Performance (HIGH)

• Images: WebP/AVIF format, responsive srcset/sizes
• loading="lazy" on all below-fold images
• Declare width/height or aspect-ratio on images/media to prevent CLS
• font-display: swap or optional; preload only critical fonts
• Lazy load non-hero components via dynamic import / route splitting
• Reserve space for async content — no layout jumps (CLS < 0.1)
• Virtualize lists with 50+ items (react-virtual, tanstack-virtual)
• Skeleton screens or shimmer for operations exceeding 300ms
• Critical CSS inlined or early-loaded for above-the-fold content

4. Style Consistency (HIGH)

• Match style to product type using the Industry Reference Table
• SVG icon libraries (Heroicons, Lucide, Phosphor) — never emoji as icons
• One icon set and visual language across the entire product
• Consistent elevation/shadow scale for cards, sheets, modals
• Design light and dark variants together — test contrast separately
• One primary CTA per screen; secondary actions visually subordinate
• Effects (shadows, blur, radius) must align with chosen style

5. Layout & Responsive (HIGH)

• Mobile-first: base styles target small screens, min-width media queries scale up
• <meta name="viewport" content="width=device-width, initial-scale=1"> — never disable zoom
• Systematic breakpoints: 375 / 768 / 1024 / 1440
• Minimum 16px body text on mobile (prevents iOS auto-zoom)
• Line length: 35-60 chars mobile, 60-75 chars desktop (max-width: 65ch)
• No horizontal scroll on mobile
• 4pt/8dp spacing rhythm throughout; consistent spacing scale
• max-width container on desktop (e.g., max-w-7xl)
• Use min-h-dvh instead of 100vh on mobile (accounts for browser chrome)
• Consistent z-index scale: 0 / 10 / 20 / 40 / 100 / 1000

6. Typography & Color (MEDIUM)

• Design tokens as CSS custom properties: --color-primary, --spacing-md, --font-size-base
• Semantic color tokens (primary, secondary, error, surface, on-surface) — no raw hex in components
• Fluid typography with clamp(): e.g., clamp(1rem, 0.5rem + 1.5vw, 1.25rem)
• Consistent type scale: 12 / 14 / 16 / 18 / 24 / 32 / 48
• Line-height 1.5-1.75 for body text; 1.1-1.3 for headings
• Font weight hierarchy: bold headings 600-700, regular body 400, medium labels 500
• Dark mode: desaturated/lighter tonal variants — never just invert colors
• Tabular/monospaced figures for data columns, prices, timers

7. Animation (MEDIUM)

• Micro-interactions: 150-300ms; complex transitions: ≤400ms; never >500ms
• Animate only transform and opacity — never width, height, top, left
• ease-out for entering elements, ease-in for exiting
• Exit animations ~60-70% of enter duration for responsive feel
• Stagger list/grid item entrance: 30-50ms per item
• Prefer spring/physics-based curves for natural motion feel
• All animations must be interruptible by user interaction
• Maximum 1-2 animated elements per view at once
• Skeleton/progress indicator for any load exceeding 300ms

8. Forms & Feedback (MEDIUM)

• Visible <label> per input — never placeholder-only labels
• Error messages below the related field, not only at form top
• Validate on blur, not on each keystroke
• Required fields: asterisk indicator + required attribute
• Helper text below complex inputs (persistent, not tooltip-only)
• Disabled state: opacity 0.38-0.5 + cursor: not-allowed + semantic disabled
• Progressive disclosure: reveal complex options only when relevant
• Confirm before destructive actions (delete, discard, overwrite)
• Auto-save for long forms to prevent data loss
• Toast auto-dismiss 3-5s; use aria-live="polite" for screen readers
• Error messages must state cause + how to fix (not just "Invalid input")

9. Navigation (HIGH)

• Bottom nav: max 5 items, each with icon + text label
• Back behavior must preserve scroll position and filter/input state
• All key screens reachable via deep link / URL
• Current location visually highlighted in navigation
• Modals/sheets: clear close/dismiss affordance; swipe-down on mobile
• Large screens (≥1024px): prefer sidebar nav; small screens: bottom/top nav
• Never mix Tab + Sidebar + Bottom Nav at the same hierarchy level
• Route change: move focus to main content region for screen readers
• Drawer/sidebar for secondary navigation, not primary actions

10. Charts & Data Visualization (LOW)

• Match chart type to data: trend→line, comparison→bar, proportion→pie/donut
• Accessible color palettes + pattern/texture supplements (not color-only)
• Provide data table alternative for screen readers
• Legend visible near chart, not below scroll fold
• Tooltips on hover (web) / tap (mobile) showing exact values
• Responsive: simplify on small screens (horizontal bar, fewer ticks)
• Skeleton/shimmer placeholder while chart data loads
• No pie chart for >5 categories — switch to bar
• All interactive chart elements keyboard-navigable
• aria-label summary describing the chart's key insight

---

Pre-Delivery Checklist

Run this verification gate before declaring any frontend work complete:

• All interactive elements keyboard accessible
• Color contrast meets WCAG AA (4.5:1 text, 3:1 large text)
• Touch targets ≥44px with 8px+ gaps
• No horizontal scroll at 375px width
• prefers-reduced-motion media query on all animations
• Semantic HTML throughout (no <div onclick>, proper heading hierarchy)
• Loading/skeleton states for all async content
• Error states for all data-dependent views
• Empty states with helpful message + action
• Dark mode tested if applicable (contrast, readability, brand)
• Responsive tested at 375px, 768px, 1024px, 1440px

---

When to Use in Superpowers

• During executing-plans or subagent-driven-development when tasks involve UI/frontend
• When the user cares about premium visual quality, brand alignment, or accessibility
• Apply the Design System Generation framework before implementation begins
• Recommend an appropriate stack guided by user constraints (e.g., Next.js + Tailwind + Radix, Svelte + skeleton UI, plain HTML + CSS for simple sites)