design-library

The Design Library

Global Claude Code plugin — 58 brand design systems + 7 curated design skills + Playwright MCP, always available.

---

Overview

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.

---

Projects powering this plugin

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	—

---

Installation

Step 1 — Clone the plugin

git clone https://github.com/zeta92/design-library-plugin.git ~/.claude/plugins/local/design-library

The plugin must live at ~/.claude/plugins/local/design-library. Do not change this path.

Step 2 — Run the setup script

bash ~/.claude/plugins/local/design-library/scripts/sync.sh

This 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

Step 3 — Reload plugins in Claude Code

Run this slash command inside any Claude Code session:

/reload-plugins

You should see: Reloaded: 1 plugin · 10 skills · ...

---

Usage

Auto-activation

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

Slash commands

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

Natural language

The plugin also detects brand names in your prompts automatically — no command needed: