| name | frontend-design |
| description | 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 TRIGGER when: backend logic only; data processing; CLI tools; pure API with no UI;
CSS bug fixes without design intent.
|
| allowed-tools | ["Read","Write","Edit","Bash","WebFetch","WebSearch"] |
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 cardtransition-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:
- Display + Body pairing — Two distinct typeface families. Display = characterful, Body = readable. Never the same font for both.
- CSS variables —
--font-display, --font-body, --font-accent (optional monospace)
- Modular scale — Choose a ratio (1.25 major third, 1.333 perfect fourth, 1.5 augmented fourth) and apply consistently
- Weight contrast — Use minimum 3 weights with intentional contrast (e.g., 300 body, 600 subheads, 900 display)
- 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
- Dominant + accent model — One dominant color family with one sharp contrasting accent. Evenly distributed palettes are timid.
- CSS custom properties — Define at minimum:
--color-surface, --color-text, --color-accent, --color-accent-contrast, --color-muted
- Atmospheric backgrounds — Never flat white. Use subtle gradients, noise textures, or tinted surfaces. Background must have depth.
- 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:
- One hero entrance — Scale + fade, clip-path reveal, text split stagger, or counter-scroll parallax
- One scroll-linked effect — Section reveal, sticky parallax image, progress-driven transformation, or horizontal scroll gallery
- 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.
- Is the brand/product unmistakable in the first viewport?
- Is there ONE strong visual anchor (not multiple competing elements)?
- Can the page be understood by scanning headlines only?
- Does each section have exactly ONE job?
- Are cards actually necessary, or are they a lazy default?
- Does the design have a nameable aesthetic direction (not "clean modern")?
- Would this look premium with all decorative shadows removed?
- Does it have at least one element that would make a designer say "I wouldn't have thought of that"?
- 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 | <Transition> components | Tailwind (customized) or scoped styles |
| Svelte | Google Fonts in app.html | Built-in transition: directives | Scoped <style> with CSS custom properties |
Tailwind rule: If using Tailwind, you MUST customize tailwind.config — override colors, fonts, border-radius, and shadows. Default Tailwind config produces AI slop. Extend, don't default.
Edge Cases
| Scenario | Response |
|---|
| User provides no design direction | Pick a bold tone, explain your choice, proceed |
| User says "clean and simple" | Interpret as Swiss modernist minimalism, not generic |
| User provides brand guidelines | Honor them, but elevate — add atmospheric depth, intentional motion |
| User says "like Apple/Linear" | Study the SPECIFIC principles (restraint, density, typography) — don't copy surface aesthetics |
| Vague "make it look good" | Treat as landing page with luxury editorial tone unless context suggests otherwise |
| Very quick request | Use scripts/init_frontend.py to scaffold, then customize |
Dependencies
- No runtime dependencies required
- Google Fonts (free, loaded via CDN)
- Optional: Framer Motion (React projects), GSAP (advanced scroll animations)
scripts/slop_checker.py for automated post-generation verification (Python 3.8+, stdlib only)
Relationship to Other Skills
| Skill | Relationship |
|---|
brainstorming | Use before this skill when the user hasn't decided what to build |
web-artifacts-builder | Complementary — use for interactive prototypes after design |
canvas-design | Alternative for Claude.ai canvas-based design |
