Award-winning web design skill for Claude Code
npx claudepluginhub mickeyalton33/web-designer-pluginTransforms AI code generation into award-winning web design. Injects real design thinking, creative patterns, and anti-AI-aesthetic techniques extracted from 38 of the world's best-designed websites.
MickeyAlton33Stop 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 |
# 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
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: