{"slug": "an-open-source-design-plugin-that-helps-your-ai-build-less-generic-websites", "title": "An open-source design plugin that helps your AI build less generic websites", "summary": "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.", "body_md": "**Stop generating generic AI frontends. Start designing award-winning websites.**\n\nThis 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.\n\n\"Would this get featured on Awwwards?\" -- The standard this plugin holds you to.\n\nTriple-stacked giant typography, torn paper SVG dividers, 3D physical buttons, spinning starburst, dual marquee tickers.\n\nCRT screen grain, physical 3D buttons that depress, rotating knob, blinking LEDs, screen content swap with glitch transition.\n\nCursor trail with mix-blend-mode inversion, text scramble cipher effect, horizontal drag scroll, live clock, acid green hover states.\n\nCRT phosphor glow, scanline overlay, terminal typing animation, ASCII art, green-on-black hacker aesthetic.\n\nHand-crafted paper texture, sticky notes, polaroid photos, torn edges, tape strips, organic handmade aesthetic.\n\nAI-generated frontends all look the same: blue-purple gradients, uniform card grids, `border-radius: 12px`\n\non everything, Inter font, centered layouts, generic shadows. This is the **\"AI Look\"** and users can spot it instantly.\n\n48 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.\n\n| File | Content |\n|---|---|\n`SKILL.md` |\nCore design philosophy, decision framework, anti-pattern checklist |\n`design-patterns.md` |\n48 patterns -- layout, cards, navigation, text effects, 3D, advanced techniques |\n`color-and-typography.md` |\n5 palette archetypes, 5 font pairing formulas, fluid type system |\n`animation-playbook.md` |\nMotion design vocabulary -- entrances, hovers, scroll-linked, transitions |\n`anti-patterns.md` |\n10 \"AI Look\" traps identified and how to break each one |\n\n- 3D card tilt following cursor (SVZ Design)\n- Outlined/stroked typography (VOUS Church, Chiara Luzzana)\n- Clip-path image reveals (SVZ Design)\n- Physical 3D buttons with depth (Pierre-Louis Labonne)\n- Two-tone split headings (Superlist)\n- Torn paper dividers (De La Calle)\n- Giant compressed hero text (DONUTS)\n- Frosted glass navigation (Michael Kors, Ready.so)\n- Sticky-scroll cinematic scenes (The Goonies)\n- Staggered menu cascades (207ouest)\n- Infinite logo tickers with fade masks (Superlist)\n- Wide-gamut P3 accent colors (Superlist)\n- Perspective app screenshots (Daylight Computer)\n- Ambient radial glow effects (Superlist)\n- And 34 more...\n\n**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\n\n```\n# Add the marketplace\n/plugin marketplace add MickeyAlton33/web-designer-plugin\n\n# Install the plugin\n/plugin install web-designer\n```\n\nOr install directly:\n\n```\n/install-plugin https://github.com/MickeyAlton33/web-designer-plugin\n```\n\nThe plugin is automatically detected via `.cursor-plugin/plugin.json`\n\n. Clone or add as a submodule in your project.\n\nDetected via `.github/plugin/plugin.json`\n\n.\n\nAfter installing, you should see `web-designer`\n\nin your available skills:\n\n```\n/skills\n```\n\nThis plugin activates **on demand** -- it does not auto-trigger on every frontend task. Invoke it when you want designer-quality output:\n\n```\nUse the web-designer skill to build a landing page for a meditation app\n/web-designer -- Create a portfolio site for a photographer\nUse web-designer to redesign this component with award-winning quality\n```\n\nWhen activated, the skill guides Claude through:\n\n**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\n\nBefore finalizing, the skill verifies the output doesn't fall into these traps:\n\n- No blue-purple gradient backgrounds\n- No uniform card grids with identical spacing\n- No centered-everything heroes\n- No\n`font-family: Inter`\n\non everything - No generic\n`opacity: 0.8`\n\nhover effects - No\n`box-shadow: 0 4px 6px`\n\non every card - No identical section treatments throughout\n- And 3 more...\n\nThe `examples/`\n\ndirectory contains 10 concept sites spanning diverse design archetypes. Download any HTML file and open it in a browser -- they're fully self-contained.\n\nThis plugin's patterns were extracted from deep analysis of these award-winning websites:\n\n**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\n\n**Shopify Blog \"Beautiful E-commerce\":** De La Calle, Magic Spoon, Couplet Coffee, Hardgraft, Haus, Koffiracha, 207ouest, Daylight Computer, Collider, and more\n\nEach site was analyzed for: color palette, typography approach, layout/grid system, animation patterns, visual hierarchy techniques, and specific replicable CSS techniques.\n\nSee [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.", "url": "https://wpnews.pro/news/an-open-source-design-plugin-that-helps-your-ai-build-less-generic-websites", "canonical_source": "https://github.com/MickeyAlton33/web-designer-plugin", "published_at": "2026-09-03 06:52:26+00:00", "updated_at": "2026-09-03 07:22:27.979859+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "generative-ai"], "entities": ["MickeyAlton33", "Claude", "GitHub", "Claude plugin marketplace"], "alternates": {"html": "https://wpnews.pro/news/an-open-source-design-plugin-that-helps-your-ai-build-less-generic-websites", "markdown": "https://wpnews.pro/news/an-open-source-design-plugin-that-helps-your-ai-build-less-generic-websites.md", "text": "https://wpnews.pro/news/an-open-source-design-plugin-that-helps-your-ai-build-less-generic-websites.txt", "jsonld": "https://wpnews.pro/news/an-open-source-design-plugin-that-helps-your-ai-build-less-generic-websites.jsonld"}}