| name | modern-frontend-design |
| description | How to design and build modern, premium-quality frontend interfaces that look like high-end SaaS products, modern AI tools, and award-winning design websites — not generic templates or outdated layouts. Use this skill whenever the user asks you to build a frontend, create a landing page, design a dashboard, scaffold a web app UI, build a SaaS interface, create a portfolio site, or produce any kind of user-facing web interface. Also use it when the user says things like "make it look modern", "build me a beautiful UI", "create a homepage for my app", "design a pricing page", or mentions anything related to frontend design, UI/UX, component architecture, or responsive web layouts — even if they don't explicitly say "frontend" or "design".
|
| version | 1.0.0 |
| author | deveshpunjabi |
| tags | ["frontend","design","ui-ux","landing-page","dashboard","web-design","tailwind","nextjs","react","saas"] |
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.
| Niche | Design Direction |
|---|
| AI / ML tools | Dark themes, glowing accents, futuristic gradients, clean data viz |
| Developer tools | Monospace accents, high-contrast, code-block styling, minimal chrome |
| Fintech | Trust-heavy, clean whites/blues, data-dense but organized, professional typography |
| Social platforms | Vibrant colors, rounded shapes, avatar-centric, card-based feeds |
| Cybersecurity | Dark UI, terminal aesthetics, status indicators, alert-driven layouts |
| Creative agencies | Bold typography, warm tones, media-rich, gallery layouts, personality-forward |
| SaaS dashboards | Sidebar navigation, metric cards, tables, clean neutral palettes |
| E-commerce | Product grid focus, prominent CTAs, trust badges, review integration |
| Health / Wellness | Soft colors, generous whitespace, calming gradients, accessible fonts |
| Education | Structured layouts, progress indicators, readable typography, friendly colors |
| Startups / Landing pages | Hero-driven, social proof, feature grids, pricing, strong CTAs |
| Consulting / B2B | Authority-driven, dark premium backgrounds, numbered value props, client logos |
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:
- Dark futuristic gradient backgrounds — deep navy to near-black with subtle radial color bleeds
- Glowing highlight effects — soft, refined accent glows on key elements (not garish neon)
- Minimal premium layouts — fewer elements, more impact, strong visual focus
- Bold hero typography — 48–72px display text with mixed weights and italic accents
- Glassmorphism cards —
backdrop-filter: blur(12px), rgba backgrounds, subtle light borders
- Smooth visual flow — clear reading path from top to bottom through every section
- Floating UI elements — decorative badges, labels, dots, subtle grid patterns for depth
- 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
| Library | Best For |
|---|
| Framer Motion | React projects — declarative, performant, page transitions |
| GSAP | Complex timelines, scroll-triggered sequences, SVG animation |
| CSS transitions | Simple hovers and state changes (no library needed) |
| Intersection Observer | Scroll-triggered class toggling with vanilla JS |
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:
| Layer | Recommended | Why |
|---|
| Framework | React / Next.js | Component model, ecosystem, SSR/RSC support |
| Styling | Tailwind CSS | Rapid iteration, design-system-friendly, responsive utilities |
| Components | shadcn/ui + Radix UI | Accessible, unstyled primitives you can theme to any design |
| Animation | Framer Motion | Declarative, performant, micro-interactions and page transitions |
| Language | TypeScript | Type safety, better DX, self-documenting interfaces |
| Icons | Lucide React | Clean, consistent, extensive icon set that matches modern UIs |
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)
| Token | Width | Target |
|---|
sm | 640px | Large phones (landscape) |
md | 768px | Tablets |
lg | 1024px | Small laptops |
xl | 1280px | Desktops |
2xl | 1536px | Large displays |
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
Spacing
Color and Polish
Overall Impression
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:
npm install
npx tsc --noEmit
npm run build
If any command fails:
- Read the full error output
- Fix every error in the source code
- Re-run the failing command
- Repeat until zero errors
11.2 — Lint & Code Quality
npx next lint
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
npm run dev &
sleep 5
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000
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:
| Check | What to Look For | Fix |
|---|
| Import errors | Importing from non-existent files or packages | Add missing dependencies or fix import paths |
| Type mismatches | Props passed incorrectly between components | Align prop types with usage |
| Missing keys | .map() without key prop | Add unique key to mapped elements |
| Hydration mismatches | window/document used at top level in SSR | Wrap in useEffect or dynamic import with ssr: false |
| Event handler types | onClick handlers with wrong TypeScript types | Use React.MouseEvent<HTMLElement> |
| Image optimization | <img> tags instead of next/image | Replace with <Image> component |
| Missing alt text | Images without alt attributes | Add descriptive alt text |
| Broken links | Anchor tags pointing to non-existent routes | Fix href values or create missing pages |
11.5 — Cross-Page Navigation Test
If the site has multiple pages/routes:
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
| Check | Method | Fix |
|---|
| Mobile layout | Verify no horizontal scrollbar at 375px | Fix overflow, use overflow-x-hidden on wrapper |
| Touch targets | All buttons/links ≥ 44×44px on mobile | Increase padding or min-height/width |
| Focus states | Tab through all interactive elements | Add focus:ring or focus-visible styles |
| Color contrast | Run npx axe or Lighthouse accessibility audit | Adjust text/background color pairs |
| Heading order | h1 → h2 → h3, no skipped levels | Fix heading hierarchy |
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:
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:
| Agent | Installation |
|---|
| Claude Code | npx skills add deveshpunjabi/modern-frontend-skill |
| Cursor | Copy to .cursor/skills/ |
| Windsurf | Copy to .windsurf/skills/ |
| Cline | Copy to .cline/skills/ |
| Codex | Copy to .codex/skills/ |
| Aider | Reference in .aider.conf |
| Any agent | Copy SKILL.md to the agent's skill/instruction directory |
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:
| Anti-Pattern | What Goes Wrong | Fix |
|---|
| Rainbow soup | Too many unrelated colors | Stick to your palette — primary, neutral, 1-2 accents max |
| Wall of cards | Identical cards in grid, no visual hierarchy | Vary sizes, highlight featured items, use visual weight |
| Giant hero, empty page | Massive hero, thin underwhelming content below | Maintain proportional section weight throughout the page |
| Button overload | Multiple CTAs competing for attention | One primary + one secondary CTA per section maximum |
| Fake depth | Shadows and gradients on everything | Use depth purposefully to create clear visual hierarchy |
| Stock photo blanket | Generic photos unrelated to the product | Use illustrations, product screenshots, or abstract visuals |
| Inconsistent radius | Mixing sharp + fully rounded randomly | Pick one radius language and commit to it throughout |
| Bootstrap syndrome | Default template look with swapped colors | Design from scratch using the visual system you defined |
| Typography neglect | Same size/weight for all text elements | Build clear hierarchy: display, heading, subhead, body, caption |
| Spacing chaos | Random margins and padding, no system | Every value from the spacing scale — no arbitrary numbers |
| The gray wasteland | Everything is gray text on gray background | Use contrast deliberately — important content gets high contrast |
| Lorem ipsum laziness | Placeholder text that makes design unjudgeable | Write realistic copy that matches the product's voice and length |
| Navbar graveyard | Navigation with 8+ links crammed in one row | Group into sections, add dropdowns, max 5-6 primary nav items |
| The flat page | No visual rhythm — sections blend into each other | Alternate backgrounds, use dividers, vary section layouts |
The "Premium or Redo" Test
After building, view the full page and honestly evaluate:
- 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?
- Squint test — Squint at the page. Can you see clear visual hierarchy? Are the important elements dominant?
- 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.
