Web Designer Plugin
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.
See It In Action
FUEGO -- Bold E-commerce
Triple-stacked giant typography, torn paper SVG dividers, 3D physical buttons, spinning starburst, dual marquee tickers.
PL-5000 -- Retro Device Portfolio
CRT screen grain, physical 3D buttons that depress, rotating knob, blinking LEDs, screen content swap with glitch transition.
WRECK -- Brutalist Agency
Cursor trail with mix-blend-mode inversion, text scramble cipher effect, horizontal drag scroll, live clock, acid green hover states.
Retro Terminal -- KATREDUX
CRT phosphor glow, scanline overlay, terminal typing animation, ASCII art, green-on-black hacker aesthetic.
Paper Collage -- Jules Atelier
Hand-crafted paper texture, sticky notes, polaroid photos, torn edges, tape strips, organic handmade aesthetic.
The Problem
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.
The Solution
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.
What's Inside
| 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 |
Design Patterns Include
- 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...
Palette Archetypes
- 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
Installation
Claude Code
# Add the marketplace
/plugin marketplace add MickeyAlton33/web-designer-plugin
# Install the plugin
/plugin install web-designer
Or install directly:
/install-plugin https://github.com/MickeyAlton33/web-designer-plugin
Cursor
The plugin is automatically detected via .cursor-plugin/plugin.json. Clone or add as a submodule in your project.
GitHub Copilot
Detected via .github/plugin/plugin.json.
Verify Installation
After installing, you should see web-designer in your available skills:
/skills
Usage
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
The Decision Framework
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