An open-source design plugin that helps your AI build less generic websites

MickeyAlton33 released an open-source plugin for Claude that injects design patterns from 38 award-winning websites to help the AI generate less generic frontends. The plugin includes 48 battle-tested design patterns, five palette archetypes, and five font pairing formulas, and is available via GitHub or the Claude plugin marketplace.

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 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: 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 /MickeyAlton33/web-designer-plugin/blob/main/CONTRIBUTING.md . The best contributions are patterns extracted from real award-winning websites with production-ready code.