Плагины, навыки и MCP-серверы Claude Code для фронтенда и UI/UX в 2026 году

Экосистема расширений Claude Code для фронтенда за 2026 год выросла до десятков навыков, плагинов и MCP-серверов, и большинство из них дублируют друг друга. Ниже собрана рабочая конфигурация для UI/UX-задач: что ставить, что не совмещать, как удерживать единый стиль между сессиями и чем облачная версия Claude Code отличается от локальной CLI.

Данные актуальны на октябрь 2026 года: версии, число установок и звёзд взяты из репозиториев и каталогов навыков. Экосистема обновляется еженедельно, поэтому перед установкой стоит сверять дату последнего коммита.

Какой набор плагинов Claude Code нужен для фронтенда

Рабочая формула состоит из четырёх слоёв, по одному инструменту в каждом:

1. Генератор вкуса — один из трёх: официальный frontend-design, Impeccable или Taste Skill.
2. Проверяемые правила — web-design-guidelines из набора Vercel agent-skills.
3. Привязка к библиотеке компонентов — shadcn MCP и навык либо daisyUI.
4. Визуальная проверка в браузере — Playwright CLI или Chrome DevTools MCP.

Несколько генераторов вкуса одновременно ставить нельзя: они спорят о типографике и дают менее согласованный результат, чем любой из них по отдельности.

Чем отличаются плагины, навыки и MCP-серверы

Навык (skill) — папка с файлом SKILL.md и, при необходимости, скриптами и справочными файлами. Модель видит только описание навыка, а тело загружается в контекст лишь при использовании.

MCP-сервер даёт агенту инструменты: доступ к браузеру, Figma, реестру компонентов. Определения его инструментов загружаются при старте сессии и занимают контекст постоянно.

Плагин — упаковка навыков, команд, хуков и MCP-серверов, которая ставится из маркетплейса командой /plugin install. Навыки плагинов изолированы пространством имён вида /plugin-name:skill-name.

Из этого следует главное правило экономии контекста: длинные инструкции выгоднее держать в навыках, а число одновременно подключённых MCP-серверов — минимальным. Подробности — в документации по навыкам Claude Code.

Какие типы инструментов для UI/UX существуют

Навыки вкуса: frontend-design, Impeccable и Taste Skill

Рынок консолидировался вокруг трёх «школ вкуса». Остальные варианты с названиями вроде «elite-frontend-design» или «frontend-design-pro» — в основном вариации тех же инструкций с меньшей аудиторией и без независимых тестов.

frontend-design от Anthropic

Официальный навык-«арт-директор»: короткий (около 2300 токенов тела), заставляет выбрать эстетическое направление до написания кода. Доступен в официальном маркетплейсе claude-plugins-official, который подключён в Claude Code по умолчанию. По реестру skills.sh — около 1 млн установок на октябрь 2026 года.

Установка внутри сессии Claude Code:

/plugin install frontend-design@claude-plugins-official

Ограничение: навык отвечает только за вкус. Токены дизайн-системы и доступность он не проверяет, а на зрелом продукте может тянуть к избыточной выразительности.

Impeccable

Вырос из frontend-design в полноценную систему: 24 команды (shape, critique, audit, polish, harden, typeset, layout, live и другие), детектор шаблонных ошибок из 62 детерминированных правил без участия LLM, четыре режима работы (Persuade, Operate, Read, Experience). Умеет генерировать DESIGN.md и PRODUCT.md. Версия 4.7.0 от 19 октября 2026 года, лицензия Apache-2.0, около 85,5 тыс. звёзд на GitHub.

Установка через npx с последующей инициализацией в проекте:

npx impeccable install

/impeccable init

Альтернативный путь — маркетплейс плагинов:

/plugin marketplace add pbakaus/impeccable

Taste Skill v2

Версия 2.0.0 вышла 13 октября 2026 года и представляет собой новый навык-папку, а не правку старого файла: инструкции, девять справочных файлов, библиотека направлений и четыре скрипта без зависимостей, включая самопроверку рендера через CDP. Библиотека построена на разборе 247 сайтов с One Page Love и Awwwards, есть отдельный сценарий для экранов приложений. Около 101 тыс. звёзд на GitHub.

Установка навыка через Vercel skills CLI:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Старые стили вынесены в репозиторий Leonxlnx/taste-skill-classics. Если процесс зависел от поведения первой версии, ставится навык design-taste-frontend-v1 оттуда. История генераций пишется в /home/<user>/.taste-skill/history.json.

Impeccable vs Taste Skill

Независимое сравнение на одном задании дало такие результаты:

Impeccable работает как дотошный дизайн-лид, Taste Skill — как арт-директор, который любит ломать правила.

Что показывают слепые тесты

Независимые слепые тесты явного победителя не выявляют. В сравнении шести навыков на трёх задачах frontend-design, design-taste-frontend и Superdesign разделили первое место с оценкой 8,0 из 10, причём frontend-design выиграл задачу с аналитической панелью.

Собственный слепой тест автора Taste Skill v2 дал 7,7 балла против 7,8 у варианта без навыка. На сильной модели прирост от навыков вкуса скромнее, чем обещает маркетинг, и самая окупаемая добавка — не генератор, а проверка.

Базы стилей: когда нужен UI UX Pro Max

UI UX Pro Max — справочник на 79 стилей, 192 палитры с отраслевыми правилами, 74 шрифтовые пары, 119 UX-правил и 22 стека с локальным поиском на Python. Около 139,6 тыс. звёзд, релиз v2.15.0.

Установка через маркетплейс:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Альтернатива — глобальный CLI:

npm i -g ui-ux-pro-max-cli
uipro init --ai claude

Навык эффективен для старта с нуля: прототипы, проекты без брендбука. При существующей дизайн-системе он навязывает собственные палитры и шрифты, поэтому после выбора направления его рекомендуется отключить. Требует Python, есть платная премиум-версия; в аудите skills.sh прошёл два сканера безопасности из трёх.

Как проверять качество интерфейса: Vercel agent-skills

Набор Vercel agent-skills — основной источник проверяемых правил. web-design-guidelines содержит 100+ правил доступности и UX (около 774 тыс. установок), react-best-practices — 70 правил в 8 категориях с приоритетами, composition-patterns — паттерны композиции компонентов.

Установка навыка аудита для Claude Code:

npx skills add vercel-labs/agent-skills --skill web-design-guidelines -a claude-code

Как привязать агента к библиотеке компонентов

Привязка к реальным компонентам устраняет главную проблему генерации — выдуманную разметку и несуществующие пропсы.

shadcn MCP и навык

Официальный MCP ищет по всем реестрам из components.json и добавляет компоненты, навык следит за правилами композиции (FieldGroup, семантические токены) и поддерживает Base UI. Сторонние «shadcn MCP» от сообщества официальными не являются.

Инициализация MCP-сервера записывает конфигурацию в .mcp.json проекта, вторая команда ставит навык:

npx shadcn@latest mcp init --client claude
npx skills add shadcn/ui

daisyUI

Бесплатный навык для Tailwind-проектов и платный Blueprint MCP с конвертацией Figma в daisyUI и проверкой разметки.

Установка навыка:

npx skills add saadeghi/daisyui --agent claude-code --yes

Подключение Blueprint MCP с лицензионным ключом:

claude mcp add daisyui-blueprint --env LICENSE=<license-key> --env EMAIL=user@example.com -- npx -y daisyui-blueprint@latest

Storybook MCP

Агент читает реальные пропсы и истории компонентов, пишет и проверяет новые истории. Работает только при запущенном storybook dev, а документация прямо называет аддон не готовым к production (версии 0.7.x).

Установка аддона и подключение сервера на уровне проекта:

npx storybook add @storybook/addon-mcp
claude mcp add storybook-mcp --transport http http://localhost:6006/mcp --scope project

21st MCP

Бывший Magic MCP: поиск по 10 000+ компонентам React и Tailwind с генерацией по запросу. Требует ключ API (старые ключи Magic сброшены), работает через внешний сервис, компоненты получаются «общего вида».

npx @21st-dev/cli@latest init --client claude

Figma MCP и Claude Design: работа с макетами

Figma MCP

Сервер передаёт агенту слои, переменные, автолейаут и Code Connect — благодаря последнему генерируется собственный компонент проекта, а не абстрактная кнопка. С марта 2026 года удалённый сервер поддерживает запись на холст (бета). Подробности — в руководстве Figma по MCP-серверу.

Рекомендуемый Figma способ — официальный плагин; альтернатива — прямое подключение удалённого сервера:

claude plugin install figma@claude-plugins-official
claude mcp add --transport http figma https://mcp.figma.com/mcp

Ограничения: высокая стоимость контекста, запись вне черновиков требует места уровня Full, на бесплатных планах действуют лимиты. При наличии макетов в Figma навыки вкуса не нужны — направление уже задано.

Claude Design

Claude Design запущен Anthropic Labs 17 апреля 2026 года. С 17 июня появились команда /design-sync, синхронизирующая дизайн-систему между кодовой базой и Claude Design, и /design в Claude Code, а лимиты стали общими. В меню экспорта есть передача макета в локальный агент или в Claude Code Web.

С сентября 2026 года Claude Design работает внутри любого чата (бета), а отдельный сайт закрывается 14 декабря 2026 года. На практике это этап согласования макета и источник дизайн-системы, а реализация и проверка остаются за Claude Code.

Визуальная проверка: Playwright или Chrome DevTools MCP

Визуальный цикл со скриншотами даёт более предсказуемый прирост качества, чем смена навыка вкуса. В Claude Code уже встроены /run, /verify и /run-skill-generator: первые две запускают приложение и проверяют изменение вживую, третья записывает рецепт запуска проекта в .claude/skills/run-<name>/. Это бесплатная основа без сторонних плагинов.

Установка Playwright CLI через маркетплейс:

/plugin marketplace add microsoft/playwright-cli

Подключение Playwright MCP и Chrome DevTools MCP на уровне проекта:

claude mcp add playwright --scope project -- npx @playwright/mcp@latest
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest

Ранние замеры давали четырёхкратный разрыв в токенах: около 114 тыс. на тест у MCP против 27 тыс. у CLI. Переизмерение июля 2026 года показало, что новые версии MCP тоже пишут снимок на диск, и расход сравнялся на уровне примерно 3,6 тыс. токенов. Выбор делается по наличию оболочки и файловой системы, а не по токенам. Документация Playwright для агентов-кодеров рекомендует CLI.

Playwright CLI и MCP для одной задачи одновременно не подключаются.

Сравнение плагинов Claude Code для фронтенда

Официальный набор anthropics/skills дополнительно содержит theme-factory, brand-guidelines, canvas-design, web-artifacts-builder и webapp-testing. Пакет example-skills ставит около 12 навыков разом, поэтому выгоднее копировать в проект только нужные папки.

Какой набор выбрать под задачу

Как настроить рабочий процесс в CLI, десктопе и IDE

Один генератор, один валидатор

Лишние навыки вкуса отключаются через skillOverrides или параметр disable-model-invocation: true во фронтматтере навыка и вызываются только явно, например /impeccable critique. Одноимённые обычные навыки разрешаются по приоритету: корпоративный, затем личный, затем проектный.

Как сохранить единый стиль между сессиями

Палитра, типографика, отступы, компоненты и правила «можно/нельзя» хранятся в DESIGN.md, токены — в CSS-переменных или теме Tailwind, всё в репозитории. В CLAUDE.md достаточно короткой ссылки. Impeccable генерирует DESIGN.md командой document.

Минимальный фрагмент CLAUDE.md, закрепляющий дизайн-систему:

## UI
- Весь интерфейс следует DESIGN.md в корне репозитория.
- Используй только компоненты из components/ui; новые компоненты добавляй через shadcn.
- Не вводи новых цветов, шрифтов и отступов вне токенов из styles/tokens.css.
- После изменений UI запускай /verify и проверяй скриншоты на 375, 768 и 1440 px.

Длинные процедуры из CLAUDE.md выносятся в навыки: тело навыка грузится по требованию, а CLAUDE.md — в каждую сессию.

Цикл «план — сборка — скриншот — критика»

1. План без кода: направление, сетка, состояния компонентов.
2. Сборка.
3. Проверка через /verify или Playwright: скриншоты на 375, 768 и 1440 px, консоль, дерево доступности.
4. Критика по правилам Vercel или Impeccable.
5. Исправления.

Число итераций задаётся явно: открытая самопроверка дорога, о чём прямо сказано в инструкциях Impeccable.

Субагенты для проверки дизайна

Проверка дизайна отдаётся отдельному субагенту с чистым контекстом и браузерными инструментами: автор кода склонен считать собственный результат правильным. Тот же приём изолирует скриншоты и DOM от основного контекста.

Хуки для детектора и линтеров

PostToolUse-хук запускает детектор Impeccable после каждой правки файлов. Конфигурация в общих настройках проекта, которые коммитятся в репозиторий:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "npx impeccable detect"
          }
        ]
      }
    ]
  }
}

Аналогично подключаются ESLint и Stylelint. Медленные хуки показывает команда /doctor.

Контекст и токены

MCP-серверы ставятся на уровне проекта (--scope project, запись в .mcp.json), а не пользователя, и в количестве двух-трёх реально нужных. Команды /doctor и /context показывают стоимость каждого навыка, MCP-сервера и плагина в контексте и подсвечивают неиспользуемые.

Пример .mcp.json с компонентами и браузером:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    },
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Что хранить в проекте, а что у пользователя

Личные навыки вкуса — в /home/<user>/.claude/skills/. Всё, от чего зависит воспроизводимость проекта (DESIGN.md, навыки дизайн-системы, .mcp.json, хуки), — в репозитории. Это же условие работы в облачных сессиях.

Безопасность сторонних навыков

Аудит Snyk ToxicSkills от 5 февраля 2026 года проверил 3984 навыка из ClawHub и skills.sh: у 1467 (36,82%) найдена хотя бы одна уязвимость, у 534 (13,4%) — критическая, 76 содержали подтверждённо вредоносную нагрузку. Реестр skills.sh публикации не модерирует.

Claude Code в вебе: что работает в облачной сессии

Веб-версия — отдельный режим работы, а не та же CLI в браузере. Каждая сессия получает свежую ВМ Ubuntu 24.04 (x86_64), сеть идёт через прокси с белым списком, интерактивной оболочки нет, пользовательские плагины не загружаются. Официальное описание — в документации по облачным окружениям.

Что переносится в облако

Как перенести плагины в облачную сессию

Плагины frontend-design, Impeccable, Figma и аналогичные в облаке разворачиваются только как навыки: папки навыков копируются в .claude/skills/ репозитория либо навык включается в настройках аккаунта claude.ai. MCP-серверы работают только через закоммиченный .mcp.json.

Для Impeccable готовая структура лежит в каталоге сборки, копирование в проект:

cp -r dist/claude-code/.claude /path/to/project/

Для Taste Skill копируется папка skills/taste-skill из репозитория в .claude/skills/ проекта. В облачных тредах внутри Projects навыки из репозитория недоступны — работают только навыки аккаунта.

Сеть и секреты

Уровни сетевого доступа: None, Trusted (по умолчанию: реестры пакетов, GitHub, облачные SDK), Full и Custom. Удалённые MCP вроде mcp.figma.com и навыки, загружающие правила из сети, требуют Custom или Full.

Ключи API (21st, персональный токен Figma) хранятся как сетевые секреты окружения, а не в переменных окружения: переменные видят все пользователи окружения.

Как получить браузер для скриншотов

Облачная ВМ (по сторонней проверке — 4 vCPU, 16 ГБ ОЗУ, 30 ГБ диска) содержит Node 20/21/22, chromedriver и Docker, но первоклассных браузерных инструментов нет, а загрузка бинарников Playwright блокировалась белым списком. Рабочий путь — окружение с уровнем Full или Custom с доменами CDN Playwright и setup-скрипт.

Setup-скрипт окружения, устанавливающий Chromium с системными зависимостями:

npx playwright install --with-deps chromium

Кеш окружения строится, если скрипт укладывается примерно в пять минут, и пересобирается примерно раз в семь дней. Скриншоты сохраняются файлами в ВМ и в интерфейсе просматриваются менее удобно, чем локально.

Установка зависимостей проекта

Setup-скрипт предназначен для инструментов ВМ и кешируется, а npm install проекта выполняется SessionStart-хуком с проверкой переменной CLAUDE_CODE_REMOTE, чтобы не срабатывать локально:

{
  "hooks": {
    "SessionStart": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "if [ \"$CLAUDE_CODE_REMOTE\" = \"true\" ]; then npm install; fi"
          }
        ]
      }
    ]
  }
}

Если в проекте уже есть PostToolUse-хук, оба блока объединяются в одном объекте hooks. У Bun известны проблемы с работой через прокси.

Управление облачными сессиями

Команды по умолчанию ждут 2 минуты (максимум 10), долгие сборки уходят в фон. Окружение настраивается из локальной CLI:

/web-setup
/remote-env

/web-setup создаёт окружение Default, /remote-env выбирает окружение по умолчанию. Отправка задачи в облако из терминала:

claude --cloud "Сгенерировать страницы каталога по шаблону из DESIGN.md"

Когда использовать облако, а когда локальную машину

Облако подходит для массовых, хорошо специфицированных задач: генерация страниц по шаблону, рефакторинг компонентов, правки по аудиту. Стиль задают DESIGN.md и навыки в репозитории, проверку — линтеры, детектор Impeccable и тесты.

Визуальная критика и итерации «на глаз» выполняются локально или через Remote Control: он подключает веб- или мобильный интерфейс к сессии на локальной машине с её браузером и файлами. Передача макета из Claude Design в Claude Code Web возможна, но дальше действуют те же облачные ограничения.

Частые вопросы

Можно ли ставить frontend-design и Impeccable одновременно?

Не рекомендуется: два навыка вкуса спорят о типографике и цвете, и согласованность падает. Если оба нужны, один отключается через disable-model-invocation: true и вызывается только явно командой.

Почему плагины Claude Code не работают в веб-версии?

Облачная сессия не загружает плагины и маркетплейсы, даже объявленные в enabledPlugins репозитория. Решение — скопировать папки навыков в .claude/skills/ и закоммитить, а MCP-серверы описать в .mcp.json проекта.

Что выбрать для скриншотов: Playwright CLI или Chrome DevTools MCP?

Для цикла «сборка — скриншот — критика» достаточно Playwright CLI: документация Playwright рекомендует его агентам-кодерам. Chrome DevTools MCP нужен для анализа производительности: трассировок, Lighthouse, LCP. Из-за расхода токенов его лучше держать в отдельном субагенте.

Сколько MCP-серверов подключать к проекту?

Два-три реально используемых, на уровне проекта. Определения инструментов каждого сервера занимают контекст с первой минуты сессии, поэтому избыточные серверы снижают качество ответов и ускоряют расход лимитов. Команда /doctor показывает неиспользуемые серверы.

Безопасно ли ставить навыки из skills.sh?

Реестр не модерирует публикации, а по аудиту 2026 года более трети проверенных навыков содержали уязвимости. Перед установкой читается SKILL.md и все скрипты, предпочтение отдаётся вендорским репозиториям, версии закрепляются.

Заключение

Качество фронтенда в Claude Code определяет не выбор «самого умного» навыка вкуса, а связка из четырёх слоёв: один генератор направления, проверяемые правила, привязка к реальной библиотеке компонентов и визуальная проверка в браузере, закреплённые в DESIGN.md, CLAUDE.md и .mcp.json репозитория — такая конфигурация воспроизводима между сессиями, экономит контекст и одинаково работает локально и в облаке.