# Frontend Design > Award-winning frontend design skill producing hand-crafted, human-quality interfaces. Generates landing pages, dashboards, web apps, components, and posters with distinctive typography, bold color systems, intentional motion, and spatial compositions that look designed by an expensive agency — NOT generic AI output. Use this skill whenever the user wants a landing page, dashboard, web app, component, poster, or any frontend UI. Also use when user asks for "beautiful", "premium", "award-winning", "stunning", or "polished" frontend; wants HTML/CSS/React/Vue/Svelte UI; mentions "design" with frontend context; wants to build a website; says "make it look good" or "make it pretty"; asks for UI that doesn't look like AI generated it; mentions "anti-slop" or "no AI aesthetic"; wants to "beautify", "style", or "redesign" an existing UI; asks for a "modern", "professional", or "polished" website — even if they don't explicitly mention design quality. Make sure to use this skill for ANY frontend creation task. DO NOT T - Skill: `wjgoarxiv/frontend-design` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add wjgoarxiv/frontend-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/wjgoarxiv/frontend-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: wjgoarxiv (https://skillmd.com/u/wjgoarxiv) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/wjgoarxiv/frontend-design --- # Frontend Design Skill Create distinctive, production-grade frontend interfaces that no human would identify as AI-generated. Every output must look like it was crafted by an expensive design agency — bold, intentional, and memorable. ## Design Thinking Protocol Before writing ANY code, complete this checklist. Do not skip steps. **1. Purpose** — What problem does this interface solve? Who uses it? **2. Tone** — Pick ONE extreme aesthetic direction. This is mandatory — never proceed with an unnamed direction. Choose from (or invent your own with equal specificity): - Brutally minimal | Maximalist chaos | Retro-futuristic | Organic/natural - Luxury editorial | Brutalist/raw | Art deco/geometric | Soft/pastel - Industrial/utilitarian | Neo-Memphis | Swiss modernist | Japanese minimal - Retrofuture terminal | Nordic calm | Tokyo neon | Desert warmth If you cannot name the tone in two words, you have not decided. "Clean modern" is NOT a tone — it is the absence of one, and produces AI slop. **3. Constraints** — Framework (HTML/React/Vue/Svelte), browser support, performance budget, existing brand kit. **4. Differentiation** — What is the ONE thing someone will remember about this page? Name it explicitly before coding. --- ## The Anti-Slop Manifesto These rules exist because LLMs converge on statistically average output — pleasant, inoffensive, and utterly forgettable. The patterns below are blacklisted not because they are inherently bad, but because their indiscriminate use is the #1 signal of AI-generated design. ### Blacklisted Fonts NEVER use these as the primary display font without explicit user request: | Font | Why | Use Instead | |------|-----|-------------| | Inter | #1 AI default (~90% of LLM UIs) | Satoshi, General Sans, or a serif like Fraunces | | Roboto | #2 AI default (Android/Chrome ecosystem) | Outfit, Plus Jakarta Sans (as body only), Karla | | Arial / system-ui | Absence of typographic choice | Any intentional font selection | | Open Sans | Legacy AI default (pre-2022 training data) | Source Sans 3, Nunito (body only) | | Poppins | Figma template saturation | Figtree, Outfit, DM Sans (body only) | | Space Grotesk | Was distinctive, now AI "quirky-safe" default | Syne, Anybody, Chakra Petch | | Montserrat | Overused geometric sans | Josefin Sans, Barlow, Jost | **Rule:** If a font is in the top-20 Google Fonts by popularity, justify it explicitly or reject it. Read `references/typography-pairings.md` for 20+ curated pairings organized by tone. ### Blacklisted Colors NEVER use these as primary accent without explicit intent: | Color | Hex | Why | |-------|-----|-----| | Tailwind indigo-500 | `#6366f1` | The ur-AI-color. Traceable to a single Tailwind docs decision. | | Tailwind violet-500 | `#8b5cf6` | Second most common AI accent. | | Tailwind purple-500 | `#a855f7` | Gradient endpoint for indigo→purple. | | Tailwind blue-500 | `#3b82f6` | The "enterprise" AI alternative to purple. | | The AI gradient | `from-indigo-500 to-purple-600` | The canonical AI gradient and all its variants. | | Flat white backgrounds | `#ffffff`, `#f9fafb`, `#f8fafc` | AI never explores dark themes, earth tones, or atmospheric depth. | **Rule:** If your palette could be reproduced by `npx create-next-app` + Tailwind defaults, start over. Read `references/color-systems.md` for 15+ curated palettes. ### Blacklisted Layouts NEVER produce these structures: - **The 9-section AI template:** Hero → logos bar → 3-col features → "how it works" steps → testimonial carousel → pricing table → FAQ accordion → CTA banner → 4-col footer. This exact sequence is reproduced across every AI-generated SaaS page. - **Symmetric 3-column card grids** as the primary content structure. - **Centered everything** — `text-center` on every section, `mx-auto` on every container, no spatial tension. - **Cards for everything** — `rounded-xl shadow-lg p-6` on every content block regardless of whether it needs card treatment. **Rule:** Every layout must have at least ONE grid-breaking element: asymmetry, overlap, full-bleed, diagonal flow, or unexpected negative space. Read `references/layout-patterns.md` for wireframes. ### Blacklisted Animations - `fade-in-up` on every element via IntersectionObserver (the universal AI scroll reveal) - `hover:-translate-y-1 hover:shadow-xl` on every card - `transition-all duration-300` applied indiscriminately - Gradient color cycling animations - Generic parallax on everything **Rule:** Maximum 2-3 intentional motions per page. Each must serve hierarchy or atmosphere. Read `references/motion-recipes.md` for 12+ distinctive alternatives. ### Blacklisted Copy Never write these phrases: - "Revolutionize your workflow" / "Transform the way you..." - "Unlock the power of..." / "Seamlessly integrate..." - "Built for the modern..." / "Supercharge your..." - "Take your X to the next level" / "Everything you need to..." - "Say goodbye to [pain point]" / "Powered by cutting-edge..." Forbidden words (unless quoting the user): seamless, leverage, cutting-edge, robust, scalable, empower, game-changer, next-level, holistic, innovative, state-of-the-art, delve **Copy rule:** Headlines carry specific meaning. One short supporting sentence per section. "If deleting 30% improves the page, keep deleting." ### Blacklisted Components - Gradient CTA buttons (`bg-gradient-to-r from-indigo-500 to-purple-600`) - Blurred backdrop navbar (`backdrop-blur-md bg-white/80`) as default - Icon + heading + paragraph in 3-column grid (the universal feature block) - Floating badges/pills on hero images - Testimonial carousels with circular avatars and star ratings - "Trusted by" logo clouds in horizontal strips - Generic pricing tables (Free / Pro / Enterprise with "Most Popular" badge) --- ## Typography System Every project must establish a deliberate type system: 1. **Display + Body pairing** — Two distinct typeface families. Display = characterful, Body = readable. Never the same font for both. 2. **CSS variables** — `--font-display`, `--font-body`, `--font-accent` (optional monospace) 3. **Modular scale** — Choose a ratio (1.25 major third, 1.333 perfect fourth, 1.5 augmented fourth) and apply consistently 4. **Weight contrast** — Use minimum 3 weights with intentional contrast (e.g., 300 body, 600 subheads, 900 display) 5. **Size drama** — Display headings should be 3x+ body size. Award winners use 12:1 ratios (180px display / 14px body). AI defaults to timid 4:1 ratios. See `references/typography-pairings.md` for 20+ copy-paste-ready pairings organized by aesthetic tone. ## Color System 1. **Dominant + accent model** — One dominant color family with one sharp contrasting accent. Evenly distributed palettes are timid. 2. **CSS custom properties** — Define at minimum: `--color-surface`, `--color-text`, `--color-accent`, `--color-accent-contrast`, `--color-muted` 3. **Atmospheric backgrounds** — Never flat white. Use subtle gradients, noise textures, or tinted surfaces. Background must have depth. 4. **Dark/light as intentional choice** — Pick one as primary based on the tone. Don't add dark mode as a checkbox feature. See `references/color-systems.md` for 15+ curated palettes with CSS variable blocks. ## Spatial Composition - **Grid-breaking is mandatory** — At least one element per page must break the grid: overlap, bleed, asymmetric placement, diagonal flow - **Asymmetric layouts** — 7/12 + 5/12 column splits, varied gutters (24px vs 64px), non-uniform padding - **Full-bleed heroes** — Edge-to-edge imagery without inherited gutters or shared max-width constraints - **Negative space as design** — Generous whitespace is intentional, not empty. Asymmetric whitespace (120px top, 80px bottom) adds rhythm. - **"Every section has one job"** — One headline, one supporting sentence, one purpose. No section tries to do two things. - **Cards only for interactions** — If content doesn't need a border/shadow to function, it doesn't need a card. See `references/layout-patterns.md` for 6 landing page + 3 dashboard layout wireframes with CSS Grid code. ## Motion & Animation Ship exactly 2-3 intentional motions: 1. **One hero entrance** — Scale + fade, clip-path reveal, text split stagger, or counter-scroll parallax 2. **One scroll-linked effect** — Section reveal, sticky parallax image, progress-driven transformation, or horizontal scroll gallery 3. **One hover/reveal interaction** — Magnetic cursor, card perspective tilt, underline expand, or color field shift **Implementation:** CSS-only for plain HTML. Framer Motion for React. Built-in transitions for Vue/Svelte. Focus on high-impact moments — one well-orchestrated page load beats scattered micro-interactions. See `references/motion-recipes.md` for 12+ copy-paste recipes with CSS and Framer Motion versions. ## Background & Texture Never default to flat solid colors. Create atmosphere: - **SVG noise** — `feTurbulence` filter for organic grain texture over gradients - **Gradient mesh** — 4-6 overlapping radial-gradients for depth (not linear gradients) - **Geometric patterns** — Dot grids, line grids, cross-hatch via CSS `radial-gradient` or `linear-gradient` - **Film grain** — Pseudo-element with noise texture at 3-5% opacity - **Slow-moving ambient animation** — Aurora/blob keyframes at 30s+ duration in background See `references/background-textures.md` for copy-paste SVG and CSS recipes. ## The "Human Touch" — What Expensive Designers Add Include at least 2 of these in every project: - **Custom cursor** — Circular div (20px) following mouse with 150ms lerp delay, expanding on hover - **Asymmetric whitespace** — Non-uniform padding (`120px 8% 80px 12%`), varied section margins - **One rule-breaking element** — A card rotated 2deg, an image bleeding off-viewport, a reversed-color section - **Typography responding to content** — Pull-quotes in gutters, drop caps, margin indices, weight scaling with importance - **Scroll-triggered color shifts** — Section background color changes to match content emotional tone - **Variable font animation** — `font-variation-settings` animating weight on scroll or hover --- ## Output Type Protocols ### Landing Page Structure: **Hero → Support → Detail → Final CTA** (4 sections, not 9) - Hero: Full-bleed, brand + headline + one sentence + CTA + dominant visual. No floating badges, no multiple CTAs. - Support: One concrete feature, offer, or proof point. - Detail: Atmosphere, workflow depth, or story. - Final CTA: Single conversion action. - Viewport budget: Header + hero content must fit in initial viewport. ### Dashboard / App UI Follow **"Linear-style restraint"**: - Calm surface hierarchy with strong typography and spacing - Minimal color palette (2-3 colors max) - Dense but readable information architecture - Sidebar (240px) + main + optional inspector (320px) via CSS Grid `grid-template-areas` - Single clear accent color. No card mosaics, no decorative gradients behind product UI. ### Component Library - Establish design tokens first (CSS custom properties) - Show dark + light variants of every component - Atomic: tokens → elements → components → compositions - Each component must work in isolation and in composition ### Poster / Marketing - Single focal point, dramatic typography scale (100px+ headlines) - High-contrast color, print-quality layout - Design a digital poster, not a web page with poster content ### Web App - Functional elegance: keyboard-first, clear information hierarchy - State management visible in UI (loading, empty, error, success states) - Dense information display, not spacious marketing layout --- ## Verification Litmus Test Before delivering ANY output, self-check against these questions. If more than 2 answers are "no," iterate before showing the user. 1. Is the brand/product unmistakable in the first viewport? 2. Is there ONE strong visual anchor (not multiple competing elements)? 3. Can the page be understood by scanning headlines only? 4. Does each section have exactly ONE job? 5. Are cards actually necessary, or are they a lazy default? 6. Does the design have a nameable aesthetic direction (not "clean modern")? 7. Would this look premium with all decorative shadows removed? 8. Does it have at least one element that would make a designer say "I wouldn't have thought of that"? 9. Does it look like ANY other AI-generated page? If yes, **redesign**. For a detailed 20-point scoring rubric, see `references/anti-slop-checklist.md`. ## Technology Adaptation | Framework | Typography | Motion | Styling | |-----------|-----------|--------|---------| | Plain HTML/CSS | Google Fonts `@import` | CSS `@keyframes` + `animation-timeline` | CSS custom properties + Grid/Flexbox | | React / Next.js | `next/font` or Google Fonts | Framer Motion (`motion` components) | Tailwind (heavily customized config) or CSS Modules | | Vue | Google Fonts in `index.html` | `` components | Tailwind (customized) or scoped styles | | Svelte | Google Fonts in `app.html` | Built-in `transition:` directives | Scoped `