Stop generating generic AI frontends. Start designing award-winning websites.
This plugin transforms Claude from a code generator into a world-class web designer. It injects real design thinking -- typography systems, color theory, animation vocabulary, layout patterns, and 3D techniques -- extracted from 38 of the best-designed websites of 2025-2026.
"Would this get featured on Awwwards?" -- The standard this plugin holds you to.
Triple-stacked giant typography, torn paper SVG dividers, 3D physical buttons, spinning starburst, dual marquee tickers.
CRT screen grain, physical 3D buttons that depress, rotating knob, blinking LEDs, screen content swap with glitch transition.
Cursor trail with mix-blend-mode inversion, text scramble cipher effect, horizontal drag scroll, live clock, acid green hover states.
CRT phosphor glow, scanline overlay, terminal typing animation, ASCII art, green-on-black hacker aesthetic.
Hand-crafted paper texture, sticky notes, polaroid photos, torn edges, tape strips, organic handmade aesthetic.
AI-generated frontends all look the same: blue-purple gradients, uniform card grids, border-radius: 12px
on everything, Inter font, centered layouts, generic shadows. This is the "AI Look" and users can spot it instantly.
48 battle-tested design patterns extracted from real award-winning sites, organized into a skill that activates on demand and guides Claude to produce distinctive, creative, production-quality frontend code.
| File | Content |
|---|---|
SKILL.md |
|
| Core design philosophy, decision framework, anti-pattern checklist | |
design-patterns.md |
|
| 48 patterns -- layout, cards, navigation, text effects, 3D, advanced techniques | |
color-and-typography.md |
|
| 5 palette archetypes, 5 font pairing formulas, fluid type system | |
animation-playbook.md |
|
| Motion design vocabulary -- entrances, hovers, scroll-linked, transitions | |
anti-patterns.md |
|
| 10 "AI Look" traps identified and how to break each one |
- 3D card tilt following cursor (SVZ Design)
- Outlined/stroked typography (VOUS Church, Chiara Luzzana)
- Clip-path image reveals (SVZ Design)
- Physical 3D buttons with depth (Pierre-Louis Labonne)
- Two-tone split headings (Superlist)
- Torn paper dividers (De La Calle)
- Giant compressed hero text (DONUTS)
- Frosted glass navigation (Michael Kors, Ready.so)
- Sticky-scroll cinematic scenes (The Goonies)
- Staggered menu cascades (207ouest)
- Infinite logo tickers with fade masks (Superlist)
- Wide-gamut P3 accent colors (Superlist)
- Perspective app screenshots (Daylight Computer)
- Ambient radial glow effects (Superlist)
- And 34 more...
Monochrome + Single Accent-- SVZ, April Ford, Chiara Luzzana** Warm Neutrals**-- VOUS Church, Hardgraft, Everlane** Bold Brand**-- De La Calle, Magic Spoon, Couplet Coffee** Dark Luxury**-- SVZ, Chiara Luzzana, The Goonies** Sophisticated Minimal**-- Ready.so, Slite, Calm
/plugin marketplace add MickeyAlton33/web-designer-plugin
/plugin install web-designer
Or install directly:
/install-plugin https://github.com/MickeyAlton33/web-designer-plugin
The plugin is automatically detected via .cursor-plugin/plugin.json
. Clone or add as a submodule in your project.
Detected via .github/plugin/plugin.json
.
After installing, you should see web-designer
in your available skills:
/skills
This plugin activates on demand -- it does not auto-trigger on every frontend task. Invoke it when you want designer-quality output:
Use the web-designer skill to build a landing page for a meditation app
/web-designer -- Create a portfolio site for a photographer
Use web-designer to redesign this component with award-winning quality
When activated, the skill guides Claude through:
MOOD-- What emotional register? (calm/energetic/luxurious/playful/authoritative)** PALETTE**-- Derived from mood, committed to constraint** TYPE**-- Font strategy that carries the mood** LAYOUT**-- Rhythm that serves the content** MOTION**-- What needs to move and why** SIGNATURE**-- The ONE thing that makes this design memorable
Before finalizing, the skill verifies the output doesn't fall into these traps:
- No blue-purple gradient backgrounds
- No uniform card grids with identical spacing
- No centered-everything heroes
- No
font-family: Inter
on everything - No generic
opacity: 0.8
hover effects - No
box-shadow: 0 4px 6px
on every card - No identical section treatments throughout
- And 3 more...
The examples/
directory contains 10 concept sites spanning diverse design archetypes. Download any HTML file and open it in a browser -- they're fully self-contained.
This plugin's patterns were extracted from deep analysis of these award-winning websites:
Webflow Blog "Best Websites": SVZ Design, Wayside Studio, VOUS Church, Ready.so, April Ford, Chiara Luzzana, Pierre-Louis Labonne, Superlist, Michael Kors Collection, Slite, The Goonies, DONUTS
Shopify Blog "Beautiful E-commerce": De La Calle, Magic Spoon, Couplet Coffee, Hardgraft, Haus, Koffiracha, 207ouest, Daylight Computer, Collider, and more
Each site was analyzed for: color palette, typography approach, layout/grid system, animation patterns, visual hierarchy techniques, and specific replicable CSS techniques.
See CONTRIBUTING.md. The best contributions are patterns extracted from real award-winning websites with production-ready code.