modern-frontend-design

Files (1)

• SKILL.md

SKILL.md (first lines)

> From [modern-frontend-skill](https://github.com/deveshpunjabi/modern-frontend-skill) by Devesh Punjabi. Copyright (c) 2026 Devesh Punjabi, used under the MIT License. See [NOTICE.md](../../../NOTICE.md).

# 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:

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

From wpgaurav/WordPress-skills, MIT.

More from wpgaurav/WordPress-skills