SkillAtlasSkill 详情

ui-ux

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

审核状态：已审核Quality 80Security 100

复制安装命令

用 Codex 或 Claude 安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它先审查 Skill 页面再帮你安装。

复制前请先查看来源、License 和安全提示。

项目 README

来源文件：README.md

抓取于 2026年8月1日

The Design Library

The Design Library — Claude Code plugin

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

License

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

ProjectUsed forStars
VoltAgent/awesome-design-md58 brand design systems (DESIGN.md files)—
nextlevelbuilder/ui-ux-pro-max-skill/ui-ux — complete design system generator61k ⭐
vercel-labs/agent-skills/guidelines — 100+ web interface rules24k ⭐
Owl-Listener/designer-skills/design-process — 63 design lifecycle skills505 ⭐
kylezantos/design-motion-principles/motion — animation audit via 3 designers256 ⭐
Community-Access/accessibility-agents/a11y — 11 WCAG 2.2 AA specialist agents214 ⭐
Leonxlnx/taste-skill/taste — anti-generic visual polish37k ⭐
addyosmani/web-quality-skills/web-quality — Lighthouse / Core Web Vitals audits—
microsoft/playwright-mcpBundled 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

CommandDescription
/design <brand>Load one brand's design system
/design A + BMix two brands
/design A:colors + B:typographyGranular mix by section
/design ?Re-analyze project and suggest skills + brands
/design listShow all 58 brands
/design syncUpdate all design data and skills
/ui-uxGenerate a complete design system for your project
/guidelinesAudit UI code against 100+ web design rules
/motionAudit animations via Emil Kowalski / Jakub Krehel / Jhey Tompkins
/a11yRun a full WCAG 2.2 AA accessibility audit
/tasteAnti-generic visual polish — variants: minimalist, brutalist, high-end, redesign, image-to-code
/web-qualityLighthouse / Core Web Vitals audit — modes: performance, cwv, seo, best-practices
/design-processAccess 63 design skills across the full lifecycle

Natural language

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"

Sections for granular brand mixing

colors · typography · components · layout · elevation

Playwright MCP (bundled)

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.

Updating

To pull the latest design data:

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

Or use the slash command inside Claude:

/design sync

License

Apache License 2.0. See LICENSE.

Copyright 2026 zeta92

其他

低风险

  • 来源需自行核对维护者身份。
  • 未检测到明显脚本安装指令。
  • 未检测到明显外部权限要求。
  • 未检测到高风险命令。
  • 扫描发现：0 条。

Codex — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/zeta92/design-library-plugin.git
  3. 将 "skills/ui-ux" 文件夹复制到 Codex 的 skills 目录中。
  4. 重启 Codex 让新的 skill 生效。

Codex — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Codex 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Codex 让新的 skill 生效。

Claude Code — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/zeta92/design-library-plugin.git
  3. 将 "skills/ui-ux" 文件夹复制到 Claude Code 的 skills 目录中。
  4. 重启 Claude Code 让新的 skill 生效。

Claude Code — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Claude Code 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Claude Code 让新的 skill 生效。

Cursor — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/zeta92/design-library-plugin.git
  3. 将 "skills/ui-ux" 文件夹复制到 Cursor 的 skills 目录中。
  4. 重启 Cursor 让新的 skill 生效。

Cursor — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Cursor 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Cursor 让新的 skill 生效。

GitHub Copilot — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/zeta92/design-library-plugin.git
  3. 将 "skills/ui-ux" 文件夹复制到 GitHub Copilot 的 skills 目录中。
  4. 重启 GitHub Copilot 让新的 skill 生效。

GitHub Copilot — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 GitHub Copilot 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 GitHub Copilot 让新的 skill 生效。

Windsurf — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/zeta92/design-library-plugin.git
  3. 将 "skills/ui-ux" 文件夹复制到 Windsurf 的 skills 目录中。
  4. 重启 Windsurf 让新的 skill 生效。

Windsurf — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Windsurf 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Windsurf 让新的 skill 生效。
查看 SKILL.md 原文
name: ui-ux
description: Generate or apply a complete design system using ui-ux-pro-max. Analyzes your project type and outputs matched styles, palettes, font pairings, and UX guidelines.

UI/UX Skill

Steps

  1. Load the ui-ux-pro-max skill by reading its source file: 
    ~/.claude/plugins/local/design-library/skills/ui-ux-pro-max/SKILL.md
    Then load the source SKILL.md it points to.
  2. Identify the product type from project context (SaaS, e-commerce, fintech, dashboard, landing page, etc.)
  3. Run the design system reasoning engine: select the matching style, color palette, font pairing, and top UX guidelines
  4. Output a Design System Summary: 
    Style: [selected style]
Palette: [palette name + 3 key hex values]
Typography: [font pairing — display + body]
Top guidelines: [3 most relevant rules for this product type]
  5. Apply the design system to all UI code produced in this session

If context is insufficient to determine product type, ask: "What type of product are you building? (SaaS / e-commerce / fintech / dashboard / landing page / other)"

发现问题？提交给管理员复核

评分：

评论 (0)

暂无评论，成为第一个评论者吧！