{
  "markdown": "# The Design Library\n\n<img src=\"docs/cover.svg\" alt=\"The Design Library — Claude Code plugin\" width=\"100%\"/>\n\n> Global Claude Code plugin — 58 brand design systems + 7 curated design skills + Playwright MCP, always available.\n\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE)\n\n---\n\n## Overview\n\n`design-library-plugin` is a Claude Code plugin that gives you instant access to a full design suite directly inside your coding sessions:\n\n- **58 brand design systems** (Stripe, Linear, Vercel, Figma, Google, Anthropic, and more)\n- **UI/UX Pro Max** — 67 styles, 161 palettes, 57 font pairings, 99 UX guidelines (61k ⭐)\n- **Web Design Guidelines** — 100+ rules for a11y, forms, dark mode, typography, i18n (24k ⭐)\n- **Designer Skills** — 63 skills across the full design lifecycle (505 ⭐)\n- **Motion Design Principles** — animation audits via 3 designer perspectives (256 ⭐)\n- **Accessibility Agents** — 11 WCAG 2.2 AA specialists (214 ⭐)\n- **Taste Skill** — anti-generic visual polish with tunable variance/motion/density dials (~37k ⭐)\n- **Web Quality Skills** — Lighthouse & Core Web Vitals optimization by Addy Osmani\n- **Playwright MCP** — bundled browser automation to verify UI changes in a real browser\n\nThe plugin auto-detects your project type at session start and activates the relevant skills automatically.\n\n---\n\n## Projects powering this plugin\n\n| Project | Used for | Stars |\n|---|---|---|\n| [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) | 58 brand design systems (DESIGN.md files) | — |\n| [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) | `/ui-ux` — complete design system generator | 61k ⭐ |\n| [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) | `/guidelines` — 100+ web interface rules | 24k ⭐ |\n| [Owl-Listener/designer-skills](https://github.com/Owl-Listener/designer-skills) | `/design-process` — 63 design lifecycle skills | 505 ⭐ |\n| [kylezantos/design-motion-principles](https://github.com/kylezantos/design-motion-principles) | `/motion` — animation audit via 3 designers | 256 ⭐ |\n| [Community-Access/accessibility-agents](https://github.com/Community-Access/accessibility-agents) | `/a11y` — 11 WCAG 2.2 AA specialist agents | 214 ⭐ |\n| [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) | `/taste` — anti-generic visual polish | 37k ⭐ |\n| [addyosmani/web-quality-skills](https://github.com/addyosmani/web-quality-skills) | `/web-quality` — Lighthouse / Core Web Vitals audits | — |\n| [microsoft/playwright-mcp](https://github.com/microsoft/playwright-mcp) | Bundled MCP — in-browser UI verification | — |\n\n---\n\n## Installation\n\n### Step 1 — Clone the plugin\n\n```bash\ngit clone https://github.com/zeta92/design-library-plugin.git ~/.claude/plugins/local/design-library\n```\n\n> The plugin must live at `~/.claude/plugins/local/design-library`. Do not change this path.\n\n### Step 2 — Run the setup script\n\n```bash\nbash ~/.claude/plugins/local/design-library/scripts/sync.sh\n```\n\nThis script does everything in one shot:\n\n- Downloads all 58 brand design systems and the 7 external skill repos\n- Creates the local marketplace manifest needed by Claude Code\n- Registers the marketplace: `claude plugin marketplace add`\n- Installs the plugin: `claude plugin install design-library@local`\n- Sets up a daily cron job (6am) to keep design data up to date\n\n### Step 3 — Reload plugins in Claude Code\n\nRun this slash command inside any Claude Code session:\n\n```\n/reload-plugins\n```\n\nYou should see: `Reloaded: 1 plugin · 10 skills · ...`\n\n---\n\n## Usage\n\n### Auto-activation\n\nWhen you start a Claude session, the plugin automatically detects your project type and activates the relevant skills. You'll see a message like:\n\n```\n[DESIGN SUITE ACTIVO] Proyecto detectado: web app\nSkills cargados: design-library · ui-ux-pro-max · web-design-guidelines\n```\n\n### Slash commands\n\n| Command | Description |\n|---|---|\n| `/design <brand>` | Load one brand's design system |\n| `/design A + B` | Mix two brands |\n| `/design A:colors + B:typography` | Granular mix by section |\n| `/design ?` | Re-analyze project and suggest skills + brands |\n| `/design list` | Show all 58 brands |\n| `/design sync` | Update all design data and skills |\n| `/ui-ux` | Generate a complete design system for your project |\n| `/guidelines` | Audit UI code against 100+ web design rules |\n| `/motion` | Audit animations via Emil Kowalski / Jakub Krehel / Jhey Tompkins |\n| `/a11y` | Run a full WCAG 2.2 AA accessibility audit |\n| `/taste` | Anti-generic visual polish — variants: `minimalist`, `brutalist`, `high-end`, `redesign`, `image-to-code` |\n| `/web-quality` | Lighthouse / Core Web Vitals audit — modes: `performance`, `cwv`, `seo`, `best-practices` |\n| `/design-process` | Access 63 design skills across the full lifecycle |\n\n### Natural language\n\nThe plugin also detects brand names in your prompts automatically — no command needed:\n\n- *\"Diseñame esto como Google y Anthropic\"*\n- *\"Build me a page like Stripe\"*\n\n---\n\n## Sections for granular brand mixing\n\n`colors` · `typography` · `components` · `layout` · `elevation`\n\n---\n\n## Playwright MCP (bundled)\n\nThe plugin ships a `.mcp.json` that starts the [Playwright MCP server](https://github.com/microsoft/playwright-mcp) (`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`.\n\n> Requires Node.js. The first run downloads a browser binary, which may take a minute.\n\n---\n\n## Updating\n\nTo pull the latest design data:\n\n```bash\nbash ~/.claude/plugins/local/design-library/scripts/sync.sh\n```\n\nOr use the slash command inside Claude:\n\n```\n/design sync\n```\n\n---\n\n## License\n\nApache License 2.0. See [LICENSE](LICENSE).\n\nCopyright 2026 zeta92\n",
  "bytes": 5938,
  "sha": "d9888c7be6d7d74afe001699dfed3f0647ab4bdca9d24852c09a9e9712c1c7b5",
  "repo_slug": "zeta92/design-library-plugin",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_zeta92_design_library_plugin_the_design__f5a7c1ed/readme"
}