Что поставить дизайнеру: агенты, скиллы, MCP-серверы и команды. Для каждого — описание и способ установки. Ссылки и команды проверены 16 сентября 2026 года.
Как это ставится · Агенты · Скиллы для дизайна · Текст и видео · Процессные · MCP-серверы · DESIGN.md · Команды · Что важнее скиллов
Есть три способа установки, которые легко перепутать. Перезапускать Claude Code после установки
обычно не нужно: для нового плагина используйте /reload-plugins, для нового или
изменённого скилла — /reload-skills.
Ставятся из маркетплейсов двумя командами прямо в Claude Code. Или через
/plugin — откроется меню для установки мышкой. Первая команда только
добавляет маркетплейс, сам плагин ставит вторая. Плагин может содержать скиллы,
агенты, команды, хуки и MCP-серверы.
/plugin marketplace add автор/репозиторий /plugin install имя@маркетплейс
Папки с файлом SKILL.md. Поместите их в ~/.claude/skills/
для работы во всех проектах на этом компьютере или в .claude/skills/
внутри проекта.
Многие можно установить через git clone прямо в эту папку.
Внешние инструменты и сервисы, доступные Claude: браузер, Figma, каталог
референсов. Сервер может работать у вас на компьютере или быть удалённым. Официальные
коннекторы подключаются в настройках на claude.ai и появляются в Claude Code, если вы
вошли через аккаунт claude.ai. Статус и авторизация —
через /mcp.
claude mcp add имя --scope user …
Агент — отдельный помощник со своей инструкцией, своим набором инструментов и отдельным контекстом. Его вызывают для конкретной задачи. Переписка из главной сессии в неё не попадает.
Все четыре агента устанавливаются вместе:
/plugin marketplace add ux-vika/design-team-skills /plugin install design-team-skills@design-team-marketplace
Репозиторий: github.com/ux-vika/design-team-skills. Чтобы design-qa и design-reviewer работали с макетами, нужна подключённая по MCP Figma: они читают скриншоты и контекст макета. Свёрстанные страницы design-reviewer, design-advisor и design-qa рендерят в headless-браузере при ширине 1440, 768 и 375 пикселей и оценивают по картинке, а не по коду. Если браузера нет, агент так и пишет, а визуальные выводы помечает как гипотезы. design-researcher в основном ищет в вебе, Figma ему не обязательна.
Агент. UX-советник и информационный архитектор: где разместить элементы, какой контрол выбрать — табы или сайдбар, модалка или drawer, что сгруппировать или убрать. Работает и по описанию задачи, когда экрана ещё нет.
Зовут словами «куда поставить X», «спроектируй структуру экрана», «наведи порядок в раскладке».
Агент. Тестировщик макетов: контраст, alt, семантика, размеры зон нажатия, адаптивность, юзабилити.
Зовут словами «проверь макет», «нормально ли на мобиле», «найди проблемы».
Агент. Критик дизайна: иерархия, типографика, цвет, композиция, общее впечатление.
Зовут словами «отревьюй дизайн», «как сделать солиднее», «раскритикуй».
Агент. Ресёрчер: ищет в интернете референсы, тренды, конкурентов и UX-паттерны.
Зовут словами «найди примеры», «что в тренде», «как делают другие».
Помимо четырёх агентов, в плагине есть общий файл rules/ux-rules.md.
В нём законы UX (Фиттс, Хик, Миллер, Якоб, гештальт, Теслер), привычное размещение
элементов, выбор контрола под задачу, паттерны навигации, иерархия
и типографика, доступность, анти-паттерны. Правила пронумерованы, например §3.4.
Агент ссылается на конкретный пункт, и вы
можете проверить ссылку.
В начале инструкции каждому из четырёх агентов предписано прочитать общий свод правил.
Без такого файла каждый агент судит по-своему, а «сделай иерархично»
остаётся вкусовщиной. Правка общего файла меняет поведение сразу всех четырёх агентов.
Правила записаны в обычном markdown и лежат в отдельной папке rules/ рядом с агентами.
В порядке убывания влияния на внешний вид результата.
Набор скиллов. Для борьбы с шаблонным дизайном: основной taste-skill, minimalist, brutalist, soft, redesign, brandkit, stitch, image-to-code, генерация картинок под веб и мобилки. Три настройки со шкалой от 1 до 10: DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY.
Убирает узнаваемые признаки AI-вёрстки: Inter на все случаи жизни, фиолетово-синий градиент, карточки внутри карточек, серый текст на цветном фоне.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"github.com/Leonxlnx/taste-skill
Набор команд. Команды для правок: /impeccable polish,
audit, critique, distill, animate,
bolder, quieter. Плюс детерминированные детекторы
AI-дизайна, работающие без модели и без ключа. /impeccable init создаёт
PRODUCT.md, /impeccable document собирает DESIGN.md из кода проекта,
и на эти файлы опираются остальные команды. Вырос
из frontend-design
от Anthropic.
Чтобы сделать дизайн спокойнее, достаточно команды «тише».
npx impeccable install /impeccable initgithub.com/pbakaus/impeccable
Скилл. Самый подробный по UX-теории: SKILL.md и объёмная библиотека справочников. Нильсен, гештальт, типографика, формы, мобильный UX, AI-интерфейсы, этичный дизайн. Проверяет WCAG 2.2 AA и ищет тёмные паттерны. Опирается на Nielsen Norman, WCAG, Material Design, Apple HIG, Google PAIR, web.dev. MIT.
Полезнее всего для UX-аудитов и ревью чужих интерфейсов.
git clone https://github.com/szilu/ux-designer-skill ~/.claude/skills/ux-designergithub.com/szilu/ux-designer-skill
Плагин. Справочник: стили, палитры, пары шрифтов, типы продуктов, UX-гайдлайны и типы графиков под популярные стеки. Включает отдельные скиллы: design-system (токены primitive → semantic → component), ui-styling (shadcn/ui на Radix плюс Tailwind), slides (HTML-презентации с Chart.js), banner-design, brand и design.
Помогает уточнить запрос «сделай современно и удобно» конкретными значениями.
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skillgithub.com/nextlevelbuilder/ui-ux-pro-max-skill
Скилл. Тайминги, easing, хореография, принципы Disney, адаптированные для интерфейса. Работает с CSS, Framer Motion, GSAP, Lottie, Spring.
Помогает задать плавность анимации в миллисекундах и кривых.
Скилл. Извлекает дизайн-примитивы с любого сайта и создаёт стартовые файлы токенов.
Для разбора конкурентов: даёт точные значения, включая оттенки цветов.
Скилл. Находит признаки машинной генерации в русском тексте и делает его естественнее. Редкий случай скилла именно под русский.
Можно настроить под себя: в markdown описано, что считать признаком машинного текста.
npx skills add smixs/humanizer-rugithub.com/smixs/humanizer-ru
Скилл. То же для английской прозы: убирает предсказуемые AI-паттерны.
Плагин. Видео в React через Remotion: композиции, анимация, субтитры, рендер.
/plugin marketplace add DojoCodingLabs/remotion-superpowers /plugin install remotion-superpowers@remotion-superpowersПосле установки запустите
/setup: он пропишет ключи API и проверит MCP.
github.com/DojoCodingLabs/remotion-superpowers
Плагин. Скилл /watch: загружает видео по ссылке или с диска,
разбирает на кадры, извлекает транскрипт и отвечает на вопросы по содержимому.
/plugin marketplace add bradautomates/claude-video /plugin install watch@claude-videogithub.com/bradautomates/claude-video
Плагин. Подписи, карусели, хуки, хэштеги, контент-план, профиль.
/plugin marketplace add sergebulaev/instagram-skills /plugin install instagram-skills@instagram-skillsgithub.com/sergebulaev/instagram-skills
Плагин. Лендинги, письма, A/B-тесты, SEO, реклама, цены, онбординг, отток. Полезен, когда дизайн упирается в маркетинговые решения.
/plugin marketplace add coreyhaines31/marketingskills /plugin install marketing-skillsgithub.com/coreyhaines31/marketingskills
Скиллы для организации работы. Влияют на результат сильнее любого набора палитр.
Набор скиллов. brainstorming запрещает писать код, пока замысел не согласован явным «да». systematic-debugging требует найти причину перед исправлением указанного места. test-driven-development и verification-before-completion не дают сказать «готово» без проверки. writing-plans и executing-plans сохраняют план в файл и выполняют его по шагам с контрольными точками.
Brainstorming помогает избежать самой дорогой ошибки: быстро сделать не то. План на диске сохраняется при обрыве контекста, память сессии теряется.
/pluginУстанавливается из официального маркетплейса Anthropic.
Плагин. Сжатие контекста, деградация внимания, файловые черновики, дизайн инструментов, память, оценка качества.
Объясняет, почему в длинной сессии агент теряет нить и как этого избежать.
/plugin marketplace add muratcankoylan/Agent-Skills-for-Context-Engineering /plugin install context-engineering@context-engineering-marketplacegithub.com/muratcankoylan/Agent-Skills-for-Context-Engineering
Плагин. Официальный, от Anthropic. Внутри один скилл — он включается, когда Claude пишет интерфейс: держит планку продакшн-качества и уводит вёрстку от дефолтной AI-эстетики.
Тот самый frontend-design, на который ссылается impeccable, только как плагин: ставится одной командой, клонировать репозиторий не нужно. Самый популярный плагин каталога — больше 1,2 млн установок.
/plugin install frontend-design@claude-plugins-officialgithub.com/anthropics/claude-code — plugins/frontend-design
Через MCP вы подключаете к Claude браузер, Figma и каталоги референсов. Одни серверы только читают, другие умеют вносить изменения — это отмечено в карточках.
Официальный. Работает в обе стороны. Читает макеты для работы с кодом и вносит изменения в Figma: создаёт компоненты, переменные, фреймы и автолейаут с учётом дизайн-системы. Плюс FigJam и Code Connect.
Для дизайнера первый по важности: без него агент судит о макете по коду. Что можно менять в файле, зависит от вашего тарифа Figma и прав на файл.
Подключается в настройках коннекторов на claude.ai.
Официальный. Сотни тысяч экранов и пользовательских потоков реальных приложений, с поиском. Только читает. Нужен платный тариф Mobbin — MCP входит во все платные.
Помогает проверить, как задачу решают в реальных продуктах.
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcpmobbin.com/mcp
Официальный. Управляет открытым Chrome: инспекция, отладка, производительность.
Для доступности есть take_snapshot — снимок страницы по дереву доступности —
и lighthouse_audit: проверка Lighthouse по доступности, SEO и best practices.
Доступность и скорость проверяются на реальной странице, а не по коду.
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestgithub.com/ChromeDevTools/chrome-devtools-mcp
Сервер. Браузер под управлением агента: открыть страницу, кликнуть, снять скриншот, померить на разных размерах экрана, прочитать консоль.
Самый простой способ показать агенту свёрстанную страницу.
claude mcp add playwright --scope user npx @playwright/mcp@latest
Официальный. Сервер Deque на движке axe только для проверки доступности. Нужен ключ API: сервер входит в платный Axe DevTools for Web.
Отраслевой стандарт, на который можно сослаться в отчёте об аудите доступности для клиента.
Официальный, в статусе Preview. Предоставляет агенту компоненты и документацию, создаёт истории, запускает тесты, включая проверки доступности. API ещё может меняться.
Полезен, если у вас есть библиотека компонентов: агент использует их, а не придумывает свои.
Реестры. Готовые React-компоненты, блоки и анимации с командами установки через CLI. Не нужно верстать с нуля.
npx @21st-dev/cli@latest init --client claudeБывший Magic MCP, теперь 21st MCP. Старые ключи Magic больше не работают. 21st.dev/mcp
Официальные. Canva создаёт, редактирует и экспортирует дизайны с учётом Brand Kit и пишет обратно. Gamma делает презентации, документы и веб-страницы по описанию, с аналитикой просмотров.
Оба — коннекторы в настройках на claude.ai.
Adobe Creative Cloud — инструменты Photoshop, Lightroom, Illustrator и Firefly, пишет обратно. Webflow — обновляет CMS, страницы и стили, можно сдать работающий сайт. Framer — правит стили и компоненты, экспортирует React, но официального сервера нет. Penpot — опенсорсная альтернатива Figma. Magic Patterns — двусторонняя синхронизация дизайна и кода. Notion — спеки и исследования. Nicely Done — большая библиотека экранов именно SaaS. Blender — 3D по описанию.
Команды подключения взяты из обзоров, вручную не проверены: toools.design, mcp.directory.
DESIGN.md — формат файла, не скилл. Решает главную проблему AI-вёрстки: без вашей дизайн-системы модель каждый раз придумывает свою.
Открытая спецификация от Google Labs под Apache-2.0. Пока в статусе alpha:
формат и CLI ещё меняются. Положите файл в корень проекта.
В нём две части. YAML-шапка с токенами: colors, typography, rounded, spacing,
components, со ссылками между ними вида {colors.tertiary}. Дальше текст
по разделам: Overview, Colors, Typography, Layout, Elevation, Shapes, Components,
Do's and Don'ts. В токенах агент найдёт точные значения, в тексте — объяснение их назначения.
По моему опыту, точность больше всего повышает раздел Don'ts: явные запреты вроде «не больше двух CTA на экране» или «никаких теней, только границы» работают лучше, чем описания желаемого. Формат задуман общим для разных AI-инструментов, поэтому файл не приходится переписывать под каждый.
npx @google/design.md lint DESIGN.md npx @google/design.md export --format css-tailwind DESIGN.md npx @google/design.md spec
Спецификация: github.com/google-labs-code/design.md. Пакет: npmjs.com/package/@google/design.md. Понятный разбор: designproject.io.
Писать такой файл с нуля не обязательно:
Скилл. Команда /generate-design-md: соберёт файл по вашему
описанию стиля или извлечёт цвета, шрифты и отступы из существующего кода.
Умеет валидировать и экспортировать.
git clone https://github.com/shripunta/generate-design-md.git ~/.claude/skills/generate-design-mdgithub.com/ShriPunta/generate-design-md
Каталог. По брендам: Linear, Notion, Stripe, Vercel, Figma, Apple, Spotify, Tesla. Загрузите файл в Claude Design, чтобы получить CSS-переменные, UI-kit и SKILL.md. Так можно быстро задать ориентир для дизайна.
Плагин. Вытаскивает стили из вашего файла и собирает DESIGN.md.
Каталог. Готовые дизайны и удалённый MCP-сервер, чтобы агент брал дизайн из каталога без копипаста.
/context — что сейчас занимает контекст: системный промпт, правила, MCP,
история. Заодно способ проверить, что файлы правил подхватились.
/compact — сжать историю диалога в краткое резюме и продолжить работу. Можно
с подсказкой: /compact оставь только про вёрстку презентации.
/clear — стереть историю полностью, начать с чистого листа. Правила
из CLAUDE.md останутся.
/rewind — откатить разговор и/или файлы к более раннему состоянию.
Помогает, если агент что-то сломал.
/resume — вернуться в одну из прошлых сессий.
/model — сменить модель, /fast — включить быстрый режим Opus.
Fast mode доступен в Claude Code на платных планах и расходует usage credits.
Он работает быстрее обычного режима, но стоит дороже.
/usage и /cost — сколько лимитов использовано и сколько стоила сессия.
/config — общие настройки: тема, модель и прочее.
/permissions — что агенту разрешено без спроса.
/agents — отдельного редактора больше нет. Субагента создают, попросив
об этом Claude, или правят файлы в .claude/agents/ вручную.
/reload-plugins и /reload-skills — подхватить установленные
или изменённые плагины и скиллы без перезапуска.
/mcp — статус MCP-серверов и авторизация. Здесь же можно войти в коннекторы,
которые требуют авторизации.
/hooks — автодействия «каждый раз, когда…».
/memory — открыть и поправить файлы памяти.
/doctor, /status — диагностика, если что-то ведёт себя странно.
/add-dir — добавить папку в рабочие директории во время сессии.
/export — выгрузить разговор в файл.
/artifacts — список опубликованных артефактов: o открыть, c скопировать ссылку.
/loop — повторять промпт или другую команду с заданным интервалом:
/loop 5m /code-review. Без интервала агент сам выбирает паузы.
/schedule — то же, но в облаке по расписанию (cron), включая разовое
«запусти завтра в 15:00». Нужен вход через аккаунт claude.ai, а в организации
эту функцию могут отключить.
/code-review — ревью текущего диффа или PR. Есть
/code-review ultra — глубокое мультиагентное ревью в облаке; запускает только
человек.
/simplify — упростить изменённый код и выделить части для повторного использования,
без поиска багов.
/run — запустить проект и проверить, работает ли изменение.
/init — собрать CLAUDE.md для нового проекта.
/security-review — проверка изменений на уязвимости.
/config — правки settings.json словами: «разреши npm», «после
остановки покажи X».
/fewer-permission-prompts — просканировать транскрипты и собрать белый список
частых безопасных команд, чтобы агент реже запрашивал разрешение.
CLAUDE.md в корне проекта и файлы в .claude/rules/ читаются в начале
каждой сессии. Они определяют, что агент сделает сам, а что согласует с вами;
что считать законченной задачей; чего нельзя делать без разрешения.
Набор палитр без этих файлов работает заметно хуже, чем средний набор с ними. Отдельно стоит завести список действий, которые агент не делает без явного «да»: всё необратимое, всё, что уходит наружу, всё, что касается секретов.
Папка с фактами и индексом MEMORY.md. Агент читает эти файлы между сессиями.
Без неё новая сессия знает только то, что записано в CLAUDE.md, а остальное приходится объяснять заново.
Пока не подключена Figma или браузер, агент судит о дизайне по коду.
Это главная причина, почему AI-вёрстка выходит «грязной»: агент не видит, что сделал.
«Придумай хороший современный удобный дизайн» — три прилагательных и ни одного факта, на выходе будет усреднённый шаблон. Укажите, кто пользователь, что он делает на экране, какие есть состояния и чего делать нельзя.
В DESIGN.md можно один раз записать ответы и больше их не повторять.
Гайд собран 15 сентября 2026 года, ссылки и команды проверены 16 сентября.