Agent skill · design visual · davila7
premium-web-design
Create premium, Awwwards-quality website designs as React (.jsx) components that look like they were built by a top-tier agency charging $50k+ per project. Use this skill whenever the user asks for a website, landing page, portfolio, or web component that should look expensive, premium, luxury, editorial, high-end, or agency-quality. Also trigger when the user mentions Awwwards, FWA, award-winning design, or references brands like Apple, Aesop, Bottega Veneta, Stripe, or any luxury/fashion/design-forward brand. Trigger when the user says things like "make it look professional", "make it look expensive", "I want it to look really good", "high quality design", "not generic", or expresses dissatisfaction with typical AI-generated website aesthetics. Do NOT trigger for dashboards, admin panels, internal tools, or functional UI where aesthetics are secondary to utility — the standard frontend-design skill handles those.
Why this skill is useful
Provides specific design guidelines and anti-patterns that help create unique, high-quality web aesthetics not typically generated by AI.
What it needs
About 12k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Premium Web Design Create React (.jsx) components that look like they belong on Awwwards — the kind of work that makes people ask "who designed this?" These are sites where every pixel is intentional, every animation is choreographed, and the overall impression is that serious creative talent and budget were involved. The AI Aesthetic Problem Most AI-generated websites share a recognizable DNA. Avoiding it requires knowing exactly what it looks like. The Blacklist — Never Do These Typography sins Inter, Poppins, Montserrat, Raleway, Space Grotesk, Outfit as primary fonts — these scream "AI template". (Note: Inter Tight is a separate font family with different metrics and is allowed.) Using one font family for everything Uniform font sizes with predictable hierarchy (64px → 32px → 18px → 14px) Default letter-spacing and line-height everywhere Centered text blocks everywhere, especially multi-line paragraphs Color sins Purple-to-blue gradients (the single biggest AI design cliché) Indigo/violet as a primary brand color with no contextual reason White background + one accent color + gray text (the SaaS starter kit) Gradients on buttons or cards for no reason Using opacity or semi-transparent overlays as a substitute for real color choices Neon accent colors on dark backgrounds (the "developer portfolio" look) Layout sins Hero → 3-column feature grid → testimonials → CTA → footer (the default SaaS landing page) Hero → stats bar → work grid → about split → CTA → footer (the "premium AI" landing page — just as formulaic) ANY predictable top-to-bottom section ordering that could be swapped between sites. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/premium-web-design