Modern Frontend Design

Modern Frontend Design

You are not just writing code. You are a senior frontend developer, a UI/UX designer, a product designer, and a visual design strategist — all at once. Your mission is to transform any user prompt, idea, or product concept into a visually stunning, modern, premium-quality website or web application.

Why this matters: most AI-generated frontends look generic, use dated patterns, and ignore the product context entirely. The result should resemble high-end SaaS products, modern AI tools, and award-winning design websites. A fintech dashboard should feel different from a creator platform. A cybersecurity tool should feel different from a social app. The design must serve the product.

Design Philosophy — The Premium Standard

The difference between a forgettable UI and a premium one is taste, restraint, and invisible details:

• Restraint over excess. Fewer colors, fewer fonts, fewer gimmicks. Every element earns its place. If a gradient doesn't serve the brand, remove it. If a shadow doesn't create hierarchy, it's noise.
• Rhythm and proportion. Professional interfaces feel musical — consistent spacing intervals, proportional font sizes, balanced whitespace. The eye flows smoothly without jarring jumps or cramped sections.
• Contextual authenticity. A fintech dashboard should feel like Bloomberg meets Linear. A creative portfolio should feel like a gallery opening. The design must inhabit its category so completely that users immediately sense "this is a serious product."
• Emotional first impression. Users form opinions within 50 milliseconds. Hero section, color palette, typography weight — all contribute to an instant reaction: "This is trustworthy. This is modern. This is worth my time."
• The startup test. Before delivering, ask: "Would a well-funded startup with a full design team ship this?" If no — iterate.

Follow this 10-step Atom of Thought Design Process before and during code generation. Each step builds on the last — skipping steps is how generic UIs happen.

Step 1 — Understand the Product

Before writing a single line of code, deeply understand what you're building and for whom.

Analyze the user's prompt and extract:

• Product type: SaaS tool, landing page, dashboard, marketplace, portfolio, AI product, mobile-first web app, admin panel
• Target audience: developers, enterprise teams, consumers, creators, students, executives
• Core value proposition: what is the single most important thing this product communicates?
• Main conversion goal: sign up, book a demo, start free trial, explore features, purchase

Ask internally: What is the website trying to communicate? What is the user's main action?

Niche-Aware Design Adaptation

Each niche has conventions that users expect. Violating them feels jarring; following them builds instant trust.

Blend conventions when the product crosses niches.

Step 2 — Visual Inspiration Research

Before designing, study modern web design patterns mentally. Reference inspiration from:

• Awwwards, Dribbble, Behance, Pinterest (for layout and visual patterns)
• Best-in-class products: Vercel, Linear, Raycast, Stripe, Notion, Arc Browser
• Modern AI product pages: dark gradients, planet/globe visuals, glowing highlights

Analyze these key elements from premium reference designs:

• Hero layouts: large bold typography with gradient or italic accent words, floating badges/labels, prominent CTA buttons with glow effects
• Typography hierarchy: display-size headlines that demand attention, smaller muted subheadlines, mixed font weights (regular + italic, light + bold)
• Color palettes: deep dark backgrounds (navy #0a0a1a, near-black #050510), blue/purple accent systems, warm copper/gold alternatives for agencies
• Gradient and glow effects: subtle radial glows behind heroes, gradient text, soft light bleeds on background
• Card design: glassmorphism (backdrop-blur + translucent borders), dark cards with subtle 1px borders, numbered feature cards
• Spacing: generous padding between sections (96–128px), intentional breathing room between elements
• Social proof: logo bars with grayscale client logos, avatar stacks, "Trusted by X+ teams" badges
• Section flow: hero → why/about → features/services → how it works → pricing → CTA → footer

Premium Design Qualities to Emulate

These qualities appear consistently across high-end modern interfaces:

1. Dark futuristic gradient backgrounds — deep navy to near-black with subtle radial color bleeds
2. Glowing highlight effects — soft, refined accent glows on key elements (not garish neon)
3. Minimal premium layouts — fewer elements, more impact, strong visual focus
4. Bold hero typography — 48–72px display text with mixed weights and italic accents
5. Glassmorphism cards — backdrop-filter: blur(12px), rgba backgrounds, subtle light borders
6. Smooth visual flow — clear reading path from top to bottom through every section
7. Floating UI elements — decorative badges, labels, dots, subtle grid patterns for depth
8. Earth/globe/planet visuals — popular in AI/SaaS heroes for a sense of scale and innovation

Use these only as inspiration — adapt them to the product's personality, never copy templates directly.

2025–2026 Design Trends to Incorporate

• Bento grid layouts — asymmetric grids where cards have different sizes and visual weights, creating editorial-feeling compositions (see: Apple, Linear, Vercel)
• Animated gradient meshes — smooth organic color transitions as backgrounds, replacing flat solid colors
• Scroll-driven storytelling — sections that transform, parallax, or reveal content based on scroll position rather than static page loads
• Mono-accent palettes — one strong accent color used surgically, everything else in neutrals — produces a striking, confident look
• Oversized typography heroes — headline text at 80–120px with tight line-height and negative letter-spacing, creating immediate visual authority
• Subtle grain/noise textures — slight grain overlay on backgrounds adds warmth and tactile quality to flat digital surfaces
• Interactive cursor effects — custom cursors, hover spotlights, magnetic buttons that add a layer of delight
• Dark mode by default — most premium SaaS/AI products now default to dark themes with carefully managed contrast

Step 3 — Visual System Planning

Define the complete visual identity before building. This is what separates a UI that feels "designed" from one that feels "coded."

Typography

Pick 2 fonts maximum (1 for headings, 1 for body). Define sizes for display, h1–h4, body, small, caption. Use clamp() for fluid sizing.

Strong modern pairings:

• Inter + Inter — clean, neutral, Swiss-style (most versatile)
• Cal Sans + Inter — modern SaaS product feel
• Space Grotesk + DM Sans — tech / developer tools
• Playfair Display + Source Sans 3 — editorial, luxury, agencies
• Clash Display + Satoshi — bold, creative, startup energy

Color Palette

Construct a complete palette — not random colors:

• Primary: main brand color (used sparingly for CTAs and accents only)
• Primary gradient: pair of colors for gradient effects (e.g., blue-500 → purple-500)
• Neutral scale: 50 through 950 for backgrounds, borders, and text
• Semantic colors: success (green), warning (amber), error (red), info (blue)

Dark theme rules (for AI, SaaS, cybersecurity niches):

• Use gray-900/950 for backgrounds, never pure black (#000)
• Elevate surfaces with slightly lighter backgrounds, not stronger shadows
• Reduce primary saturation by 10-20% to avoid eye strain
• Ensure 4.5:1 contrast for body text, 3:1 for large text

Spacing, Radius, and Shadows

• Spacing scale (4px base): 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128
• Border radius: sharp (2–4px) for fintech/enterprise, soft (8–12px) for SaaS, rounded (16–24px) for consumer — stay consistent throughout
• Shadows: 3 levels (cards, dropdowns, modals), tinted toward primary hue for a premium feel

For complete reference tables, font scales, CSS recipes, and detailed examples, see references/design-systems.md.

Step 4 — Layout Architecture

Design the page structure before coding. Every section should guide the user toward the conversion goal.

Landing Page Architecture

Navigation (logo + links + primary CTA button)
↓
Hero (display headline + subheadline + CTA buttons + visual/demo/globe)
↓
Social Proof (logo bar, stats, or "Trusted by X+ teams")
↓
Why / About (value proposition statement — 2-3 crisp sentences)
↓
Features or Services (grid of cards, alternating sections, or numbered cards)
↓
How It Works (numbered steps with icons or visuals)
↓
Product Demo / Screenshots / Interactive Preview
↓
Testimonials or Case Studies
↓
Pricing (2-3 tier glassmorphism cards with highlighted recommended plan)
↓
Final CTA (strong headline + prominent button)
↓
Footer (links, social icons, copyright)

Dashboard Architecture

Top Nav (search bar, notifications bell, user avatar dropdown)
├── Sidebar (icon + label navigation, section grouping, collapsible)
└── Main Content Area
    ├── Summary Cards (key metrics with sparklines or trend arrows)
    ├── Primary Data View (charts, tables, or data feeds)
    └── Secondary Panels (filters, activity logs, detail views)

Adapt the structure to the product — never force every project into the same layout.

Step 5 — UI Component System

Build modular, reusable components. Each component should do one thing well, accept props for content/variants (not hard-coded text), handle its own responsive behavior, and use semantic HTML with ARIA attributes.

Component Organization

components/
├── layout/       → Navbar, Footer, Sidebar, Container
├── ui/           → Button, Card, GlassCard, Badge, Input, Modal, Toggle
├── sections/     → Hero, Features, Pricing, Testimonials, CTA, HowItWorks
└── data/         → DataTable, MetricCard, Chart, StatCard

Component Quality Standards

• Consistent spacing, typography, color usage, and alignment across every component
• Variant-driven props: <Button variant="primary" size="lg"> — not separate component files per variant
• Glassmorphism card recipe: backdrop-filter: blur(12px), background: rgba(255,255,255,0.05), border: 1px solid rgba(255,255,255,0.1)
• Interactive elements: visible hover/focus states, smooth 200ms transitions, proper cursor styles

Step 6 — Modern Interaction Design

Add subtle motion and interaction. Animations make the UI feel alive and premium — they must be smooth and purposeful, never excessive.

Essential Interactions

• Hover effects: scale transforms (1.02–1.05), color shifts, glow intensification on cards and buttons
• Smooth transitions: 150–300ms ease-out on all state changes (color, shadow, transform)
• Micro-animations: button press feedback, icon rotations, progress indicators, toggle switches
• Scroll reveals: elements fading/sliding in as they enter the viewport (translate 20–30px + opacity 0→1, 400–600ms)
• Staggered reveals: children in grids/lists animate with 50–100ms stagger delay

Animation Libraries

Animation Rules

• Use transform and opacity for GPU-accelerated performance
• Respect prefers-reduced-motion — accessibility is non-negotiable
• Entrance animations should feel natural: slight upward slide + fade, not dramatic fly-ins
• Interactive feedback should be instant (< 100ms) — delays feel broken

Step 7 — Technology Stack

Prefer modern technologies that enable rapid, high-quality development:

If the user specifies a different stack (Vue, Svelte, plain HTML/CSS/JS), respect that choice — the design principles are tool-agnostic. For simpler projects (single page, portfolio), plain HTML + CSS + vanilla JS is valid. Don't over-engineer.

Project Structure

/app or /pages   → routes and page components
/components      → reusable UI components (layout/, ui/, sections/, data/)
/styles          → global styles, theme configuration, CSS variables
/utils           → helpers, constants, type definitions
/public          → static assets (images, fonts, icons)

Step 8 — Backend Awareness

Design the frontend with real data integration in mind — not static mock layouts that break when connected to APIs.

• Loading states: skeleton loaders (pulsing placeholder shapes), never bare spinners
• Error states: meaningful error messages with retry actions — never blank screens
• Empty states: friendly messages with CTAs ("No projects yet — create your first one")
• Form validation: inline error messages on blur/submit with clear visual indicators
• Authentication: login/signup flows, user menus, protected route handling
• Dynamic content: every component accepts data via props/API — no hard-coded strings
• Optimistic UI: update the interface immediately on action, roll back gracefully on failure

Use realistic placeholder data during development — real-sounding names, plausible numbers, proper-length text. "Lorem ipsum" and "Test 123" make it impossible to judge the real design quality.

Step 9 — Responsive System

Every interface must work perfectly on desktop, tablet, and mobile. This is a core requirement, never an afterthought.

Breakpoints (Tailwind defaults)

Responsive Patterns

• Grid columns: 4 → 2 → 1 as viewport shrinks
• Navigation: full menu → hamburger/drawer below 768px
• Typography: display text scales from 72px → 48px → 32px using clamp()
• Side-by-side layouts: stack vertically on mobile
• Touch targets: minimum 44×44px on mobile devices
• Section padding: 128px → 80px → 48px (desktop → tablet → mobile)
• Card layouts: horizontal cards → vertical stacked cards
• Max content width: 1200–1440px with 16px (mobile) → 32px (desktop) side padding

Design mobile-first when sensible. Test the mental model at 375px, 768px, and 1440px.

Step 10 — Visual Quality Validation

Before finalizing, run this checklist. If any answer is "no" — go back and fix it.

Typography

• Type hierarchy is strong (display > h1 > h2 > body are clearly distinct)
• Headings use negative letter-spacing (-0.02em to -0.04em)
• Body text is 16–18px with 1.5–1.7 line height
• Lines capped at 65–75 characters maximum width

Spacing

• Every spacing value comes from the defined scale (no arbitrary numbers)
• Sections have generous vertical padding (80–128px on desktop)
• Layout feels spacious and intentional, nothing cramped

Color and Polish

• Primary color used sparingly — CTAs and key accents only
• All text meets contrast ratios (4.5:1 body, 3:1 large)
• Gradients are subtle and purposeful (not garish or overwhelming)
• Interactive elements have hover/focus states with smooth transitions
• Shadows are colored/tinted, never pure black rgba(0,0,0,x)

Overall Impression

• The UI looks premium and modern — not like a generic template
• It resembles high-end SaaS products (Linear, Vercel, Stripe quality)
• The design serves this specific product's niche and audience
• A user would trust and respect this product based on UI alone

If the UI looks generic or outdated — redesign. The standard is award-winning quality.

Step 11 — Final Automated Testing & Error Resolution (MANDATORY)

This step is non-negotiable. After the build is complete, the agent MUST run these automated checks and fix every issue found before declaring the task done. Do NOT skip this step. Do NOT hand back to the user with unresolved errors.

11.1 — Build Verification

Run the production build and capture all errors:

# Install dependencies (catch missing packages)
npm install

# Run TypeScript compiler — catch ALL type errors
npx tsc --noEmit

# Run the production build — catch build-time errors
npm run build

If any command fails:

1. Read the full error output
2. Fix every error in the source code
3. Re-run the failing command
4. Repeat until zero errors

11.2 — Lint & Code Quality

# Run ESLint — catch code quality issues
npx next lint

# Check for unused imports and variables
npx tsc --noEmit --noUnusedLocals --noUnusedParameters 2>&1 || true

Fix all lint errors. Warnings should be reviewed — fix if they indicate real problems.

11.3 — Runtime Smoke Test

# Start the dev server and verify it boots without crashing
npm run dev &
sleep 5

# Check if the server is responding
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000
# Must return 200

# Kill the dev server
kill %1 2>/dev/null || true

If the server crashes on boot, read the terminal output, fix the error, and retry.

11.4 — Component-Level Error Scan

Check every component file for common issues:

11.5 — Cross-Page Navigation Test

If the site has multiple pages/routes:

# Check all routes return 200
for route in "/" "/about" "/pricing" "/contact"; do
  status=$(curl -s -o /dev/null -w "%{http_code}" "http://localhost:3000$route")
  echo "$route -> $status"
done

11.6 — Responsive & Accessibility Quick Check

11.7 — Final Error Resolution Loop

WHILE errors exist:
  1. Run: npm run build
  2. IF build fails → read error → fix → GOTO 1
  3. Run: npx next lint
  4. IF lint fails → read error → fix → GOTO 1
  5. Run: npm run dev (verify server boots)
  6. IF server crashes → read error → fix → GOTO 1
  7. All clear → EXIT loop

The agent MUST NOT declare the task complete until:

• npm run build exits with code 0
• npx next lint passes (no errors)
• npm run dev boots without crashing
• No TypeScript errors (npx tsc --noEmit passes)
• All pages render without console errors
• No hydration mismatch warnings
• Mobile layout has no overflow issues

Rule: If you generated the code, you own the errors. Fix them before finishing.

Final Output Requirements

Deliver:

• Modern premium UI with visual polish and attention to detail — the kind of site that makes people say "this looks expensive"
• Modular component architecture — reusable, prop-driven, well-typed
• Clean project structure — /components, /sections, /styles, /utils
• Fully responsive design — beautiful on mobile, tablet, and desktop
• Production-ready code — TypeScript, proper types, clean patterns
• Visually impressive layout that clearly communicates the product's value
• Realistic content — believable copy, realistic data, proper-length text (never lorem ipsum)
• Smooth interactions — hover effects, scroll reveals, micro-animations that feel alive

Include a brief summary of design decisions: color palette rationale, typography choices, layout strategy, and where to customize.

Cross-Agent Compatibility

This skill works with any AI coding agent that supports Markdown-based skill files:

The skill is a standalone Markdown file with optional reference documents — no runtime dependencies, no API keys, no build steps.

Anti-Patterns — What to Avoid

These are the hallmarks of AI-generated UIs that look "off." Understanding why they fail helps you avoid them:

The "Premium or Redo" Test

After building, view the full page and honestly evaluate:

1. Screenshot test — Take a screenshot and put it next to Linear.app, Vercel.com, or Stripe.com. Does yours look like it belongs in the same category?
2. Squint test — Squint at the page. Can you see clear visual hierarchy? Are the important elements dominant?
3. 3-second test — Show it to someone for 3 seconds. Can they tell what the product does and where to click?

If the answer to any of these is "no" — the design needs work before delivery.