Global Claude Code plugin — 58 brand design systems + 7 curated design skills + Playwright MCP, always available.
design-library-plugin is a Claude Code plugin that gives you instant access to a full design suite directly inside your coding sessions:
- 58 brand design systems (Stripe, Linear, Vercel, Figma, Google, Anthropic, and more)
- UI/UX Pro Max — 67 styles, 161 palettes, 57 font pairings, 99 UX guidelines (61k ⭐)
- Web Design Guidelines — 100+ rules for a11y, forms, dark mode, typography, i18n (24k ⭐)
- Designer Skills — 63 skills across the full design lifecycle (505 ⭐)
- Motion Design Principles — animation audits via 3 designer perspectives (256 ⭐)
- Accessibility Agents — 11 WCAG 2.2 AA specialists (214 ⭐)
- Taste Skill — anti-generic visual polish with tunable variance/motion/density dials (~37k ⭐)
- Web Quality Skills — Lighthouse & Core Web Vitals optimization by Addy Osmani
- Playwright MCP — bundled browser automation to verify UI changes in a real browser
The plugin auto-detects your project type at session start and activates the relevant skills automatically.
| Project | Used for | Stars |
|---|---|---|
| VoltAgent/awesome-design-md | 58 brand design systems (DESIGN.md files) | — |
| nextlevelbuilder/ui-ux-pro-max-skill | /ui-ux — complete design system generator |
61k ⭐ |
| vercel-labs/agent-skills | /guidelines — 100+ web interface rules |
24k ⭐ |
| Owl-Listener/designer-skills | /design-process — 63 design lifecycle skills |
505 ⭐ |
| kylezantos/design-motion-principles | /motion — animation audit via 3 designers |
256 ⭐ |
| Community-Access/accessibility-agents | /a11y — 11 WCAG 2.2 AA specialist agents |
214 ⭐ |
| Leonxlnx/taste-skill | /taste — anti-generic visual polish |
37k ⭐ |
| addyosmani/web-quality-skills | /web-quality — Lighthouse / Core Web Vitals audits |
— |
| microsoft/playwright-mcp | Bundled MCP — in-browser UI verification | — |
git clone https://github.com/zeta92/design-library-plugin.git ~/.claude/plugins/local/design-libraryThe plugin must live at
~/.claude/plugins/local/design-library. Do not change this path.
bash ~/.claude/plugins/local/design-library/scripts/sync.shThis script does everything in one shot:
- Downloads all 58 brand design systems and the 7 external skill repos
- Creates the local marketplace manifest needed by Claude Code
- Registers the marketplace:
claude plugin marketplace add - Installs the plugin:
claude plugin install design-library@local - Sets up a daily cron job (6am) to keep design data up to date
Run this slash command inside any Claude Code session:
/reload-plugins
You should see: Reloaded: 1 plugin · 10 skills · ...
When you start a Claude session, the plugin automatically detects your project type and activates the relevant skills. You'll see a message like:
[DESIGN SUITE ACTIVO] Proyecto detectado: web app
Skills cargados: design-library · ui-ux-pro-max · web-design-guidelines
| Command | Description |
|---|---|
/design <brand> |
Load one brand's design system |
/design A + B |
Mix two brands |
/design A:colors + B:typography |
Granular mix by section |
/design ? |
Re-analyze project and suggest skills + brands |
/design list |
Show all 58 brands |
/design sync |
Update all design data and skills |
/ui-ux |
Generate a complete design system for your project |
/guidelines |
Audit UI code against 100+ web design rules |
/motion |
Audit animations via Emil Kowalski / Jakub Krehel / Jhey Tompkins |
/a11y |
Run a full WCAG 2.2 AA accessibility audit |
/taste |
Anti-generic visual polish — variants: minimalist, brutalist, high-end, redesign, image-to-code |
/web-quality |
Lighthouse / Core Web Vitals audit — modes: performance, cwv, seo, best-practices |
/design-process |
Access 63 design skills across the full lifecycle |
The plugin also detects brand names in your prompts automatically — no command needed:
- "Diseñame esto como Google y Anthropic"
- "Build me a page like Stripe"
colors · typography · components · layout · elevation
The plugin ships a .mcp.json that starts the Playwright MCP server (npx @playwright/mcp@latest) whenever the plugin is enabled. Claude can use it to open your app in a real browser, take screenshots, inspect the accessibility tree, and verify design changes visually — closing the loop with /guidelines, /a11y, and /web-quality.
Requires Node.js. The first run downloads a browser binary, which may take a minute.
To pull the latest design data:
bash ~/.claude/plugins/local/design-library/scripts/sync.shOr use the slash command inside Claude:
/design sync
Apache License 2.0. See LICENSE.
Copyright 2026 zeta92