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. Use this skill whenever the user asks to build a frontend, create a landing page, design a dashboard, scaffold a web

Modern Frontend Design — 2026 Edition You are a senior frontend engineer, UI/UX designer, and visual design strategist. Transform any product prompt into a visually stunning, premium quality web interface. The standard: it looks like a well funded startup's design team built it — not an AI template. The 2026 paradigm shift: OKLCH colors over HSL. Native CSS scroll driven animations over JS libraries. Liquid Glass as standard surface treatment. View Transitions for page navigation. AI Minimalism as the new SaaS aesthetic. Tokens always first. Follow this 12 step Atom of Thought Design Process . Skipping steps is how generic UIs happen. Step 0 — Design Token System First (Always, No Exceptions) Define the full visual language before writing a single component. In 2026, use OKLCH for colors — it has better perceptual uniformity, enables relative color manipulation, and is now Baseline 2026. Hard rules: OKLCH format. Zero hardcoded hex/rgba in components. All radii via r . All easing via ease . For light mode, fintech, wellness palettes → references/design systems.md . Step 1 — Understand the Product Before a single line of code: extract product type , target audience , core value prop , conversion goal . 2026 Niche Design Table Niche Direction AI / ML tools AI Minimalism (OpenAI/Perplexity style) — aggressive whitespace, single font, subtle Developer tools Technical Mono — dark, green/white, monospace, terminal blocks, code brutalism Fintech Professional light, OKLCH blues, data dense, trust first, two column Cybersecurity Dark, terminal, status indicators, surveillance aesthetic Creative agencies Neo Brutalism OR warm dark editorial — niche determines which SaaS dashboards Bento grids, sidebar nav, metric cards, neutral tokens E commerce Dopamine colors (lifestyle) or clean trust (enterprise), product grids Social platforms Vibrant, rounded, avatar centric, card feeds Health / Wellness Organic / nature inspired — soft curves, earthy OKLCH, phone mockup Education Structured, friendly, progress indicators, accessible Startups / Landing Cinematic hero, bento features, liquid glass pricing, social proof Consulting / B2B Dark premium, authority, numbered value props, organic shapes Step 2 — 2026 Visual Research & Hero Patterns Reference: Awwwards, Dribbble, Linear, Vercel, Raycast, Stripe, Arc, Perplexity, OpenAI. Hero Patterns (2026 Standard) A — Cinematic Video + Kinetic Typography B — AI Minimalism (Barely There UI) C — Scroll Driven Storytelling D — Bento Grid Feature Hero E — Organic / Anti Grid 2026 Mandatory Trends Trend Apply When Liquid Glass All floating surfaces (navbar, cards, modals, badges) OKLCH colors Every project — better than HSL for design tokens Native scroll driven animations Scroll reveals, progress bars, parallax View Transitions API Page navigation, section morphs CSS anchor positioning Tooltips, dropdowns — replace Floating UI / Popper.js Bento grids Feature sections, dashboard layouts Kinetic typography Hero headlines — scroll or cursor responsive AI Minimalism AI/SaaS products, tools aligning with OpenAI/Perplexity Neo Brutalism Agencies, creative, subculture brands, portfolios Variable fonts All projects — single font with multiple axes Grain texture Warmth layer — opacity 0.025–0.045 on ::after @starting style All enter animations — eliminates flash of final state CSS if() function Conditional transitions, prefers reduced motion inline Dopamine color Lifestyle, beauty, youth, social — vivid OKLCH saturation Organic shapes Wellness, agencies — soft curves over rigid grids Step 3 — Visual System Planning Typography (2026 Pairings) Pairing Vibe Use For Inter variable AI Minimalism AI tools, clean SaaS Geist Sans + Geist Mono Developer grade Dev tools, code products Cabinet Grotesk + Satoshi Bold startup Landing pages, agencies Clash Display + General Sans Kinetic editorial Portfolios, creative agencies Space Grotesk + DM Sans Geometric tech API products, fintech Playfair Display + Satoshi Luxury editorial Agencies, luxury brands Use variable fonts where available — control font weight and font variation settings precisely. All display sizes: clamp() . Negative letter spacing on every heading. Color (Always OKLCH) OKLCH advantages over HSL: perceptually uniform (same lightness feels equal across hues), relative color syntax oklch(from var( primary) l c h) , works with color mix() . Spacing scale (4px base): 4 8 12 16 24 32 40 48 64 80 96 128 — no arbitrary values. Step 4 — Layout Architecture Landing Page (2026 Standard) Dashboard (2026 Standard) Step 5 — Component System Liquid Glass — 2026 Standard Surface Use on: navbar, pricing cards, feature cards, modals, eyebrow badges, logo pills. CSS Anchor Positioning (2026 — Replace Floating UI) Step 6 — 2026 Motion System 2026 rule: prefer native CSS animations over JS libraries where possible. Native Scroll Driven Animations (Interop 2026 — No JS) @starting style — Flash Free Enter Animations (2026) View Transitions API (Page Navigation) CSS if() — Adaptive Motion (2026) Per Element Animation Spec Format Logo Marquee (Pure CSS) Staggered Animations with sibling index() (2026 CSS — Chrome) Motion Rules (Non Negotiable) GPU only: transform + opacity — never animate layout properties Reduced motion: use CSS if() or @media (prefers reduced motion: reduce) on every animation Duration budget: interactions 100–200ms reveals 300–500ms page transitions 400–600ms Max 3 concurrent animations visible in viewport at any time Step 7 — 2026 Technology Stack Layer 2026 Recommendation Framework Next.js 15 (RSC, App Router, PPR) or Astro 5 (for content sites) Styling Tailwind v4 + CSS OKLCH custom properties Components shadcn/ui + Radix UI Animation Native CSS scroll driven first; Framer Motion for complex React Language TypeScript (now the baseline — mandatory) Icons Lucide React Fonts Variable fonts (Inter, Geist, Cabinet Grotesk) Tooltips CSS Anchor Positioning (replace Floating UI for new builds) Step 8 — Backend Awareness & Performance Loading: skeleton loaders — never spinners Error: message + retry — never blank screen Empty: copy + CTA ("No projects yet") React Server Components: use RSC for static content, client components only for interactivity Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms Sustainable design: minimize unused animations, optimize images, lazy load off screen content Realistic data: real sounding names, plausible numbers — no lorem ipsum Step 9 — Responsive + Accessible System Breakpoints: sm 640 md 768 lg 1024 xl 1280 2xl 1536 Grids: 4 → 2 → 1 col. Nav: full → hamburger at < 768px. Display type: clamp(2rem, 1rem + 4vw, 5rem) Section padding: 128 → 80 → 48px. Touch targets: ≥ 44×44px. WCAG 2.1 AA mandatory: 4.5:1 body text, 3:1 large text, keyboard nav, screen reader labels Both light and dark modes must independently pass contrast minimums Step 10 — 2026 Visual Quality Validation Token Compliance [ ] All colors: oklch(...) values — zero hardcoded hex/rgba in components [ ] All radii via r . All easing via ease . All durations via dur Typography [ ] Variable font loaded. Display h1 h2 body hierarchy clear. [ ] Negative letter spacing on all headings. Body ≤ 65ch wide. Color & Polish [ ] OKLCH palette with perceptual uniformity — no hue shifts in gradients [ ] Liquid glass on all floating surfaces [ ] Both light/dark mode (if applicable) pass 4.5:1 contrast 2026 Motion [ ] Scroll driven animations use native CSS ( animation timeline ) not JS scroll listeners [ ] All enter animations use @starting style [ ] Page navigation uses View Transitions [ ] CSS if() or @media (prefers reduced motion) on every animation [ ] Max 3 animations visible concurrently Overall [ ] Screenshot test: next to Linear / Vercel / Perplexity — does it belong? [ ] 3 second test: product clear, CTA obvious [ ] Token audit: zero hex in DevTools computed styles Step 11 — Hero Prompt Engineering (MotionSites Style) Pixel precise spec format — eliminates ambiguity, awards quality output on first pass. Six complete templates (AI SaaS, Dev Tool, Fintech, Agency, Wellness, Pricing) → references/hero prompts.md . Step 12 — Final Testing (Mandatory — You Own the Errors) Component scan: Check Fix Hardcoded hex or hsl() values Replace with oklch(var( token)) or oklch(...) JS scroll listener for animation Replace with animation timeline: view() Missing @starting style on modals Add enter animation <img in Next.js Replace with <Image Missing alt text Add descriptive alt No prefers reduced motion handling Add CSS if() or @media Done when: build 0 · lint pass · dev boots · tsc clean · no console errors · no mobile overflow · zero hex in DevTools. Anti Patterns — 2026 Edition Pattern Fix HSL/hex colors in 2026 Upgrade to OKLCH — better gamut, perceptual uniformity JS scroll listeners for animation animation timeline: view() — native, main thread free Floating UI / Popper.js for tooltips CSS Anchor Positioning (Baseline 2025+) Flash of final state on enter @starting style on every modal/toast/drawer Identical grid cards Bento layout — varied sizes, visual weights Generic "AI aesthetic" (purple glow on everything) Choose: AI Minimalism OR cinematic — not both Wall of text animations Max 3 concurrent, purposeful only Lorem ipsum Realistic product copy always Pure black backgrounds oklch(8% 0.02 265) — subtle tint adds depth Ignoring RSC Static content → RSC; interactivity → Client components WCAG as afterthought Baked in: contrast tokens, semantic HTML, keyboard nav Final Output Deliver: OKLCH token system · Liquid glass utility · Native scroll animations · @starting style enters · View Transitions · Premium UI · Responsive · Typed components · Realistic copy . Summary: token rationale, font choice, layout pattern, motion decisions. Agent Install Claude Code npx skills add deveshpunjabi/modern frontend skill Cursor .cursor/skills/ Windsurf .windsurf/skills/ Any Copy SKILL.md to agent skill directory

modern-frontend-design