Скиллы, MCP и плагины для Claude Code: что поставить, если ты не программист
Какую задачу решает
Поставить и проверить один плагин, один MCP и свой скилл
Что будет на выходе
Установленные frontend-design, Playwright MCP и скилл приёмки
- Кому подойдёт
Новичок, которому скинули «30 апгрейдов для Claude Code», и он не знает, с чего начать
- Тема
- Агенты и Claude Code
- Инструменты
- Claude CodeNode.js
Что поставить в Claude Code новичку? На первый день хватит трёх вещей: один плагин для дизайна, один MCP-сервер, чтобы агент сам открывал твой сайт в браузере, и один скилл, который ты напишешь сам за пять минут. Остальное подождёт. Ниже: чем эти штуки отличаются, как их поставить командами и как проверить, что всё встало.
Тебе скинули подборку «30 апгрейдов для Claude Code», ты сохранил её и закрыл. Ставить тридцать штук вслепую — верный способ получить кашу. Агент начнёт путаться в инструментах, которые ему не нужны, а ты — в настройках, которые ты не просил.
Скилл, MCP, плагин: в чём разница простыми словами
Представь, что Claude Code — новый сотрудник. Умный, но пришёл без инструкций и без доступа к чему-либо.
| Что это | Аналогия | Что даёт |
|---|---|---|
| Скилл | Памятка для сотрудника: «когда просят X — делай так» | Агент работает по твоему алгоритму. Это папка с файлом SKILL.md |
| MCP-сервер | Доступ к сервису: браузер, таск-трекер, аналитика | Агент не только пишет текст, но и действует: открывает страницы, создаёт задачи, читает данные |
| Плагин | Коробка, в которой лежит готовый набор: скиллы, команды и подключения | Ставится одним действием вместо ручной сборки |
Коротко: скилл учит, как делать, MCP даёт руки, плагин упаковывает готовое. Для начала можно жить без плагинов вообще. Но один хороший плагин экономит вечер.
Что поставить в первый день: три вещи
Чем меньше инструментов у агента, тем понятнее, кто виноват, когда что-то пошло криво. Поэтому начинай с трёх.
1. Плагин для дизайна: frontend-design
Знакомая история: попросил Claude «сделай сайт» — и получил фиолетовый градиент, три карточки и кнопку «Начать». Нейросеть делает всем одно и то же (бесплатный запрет-лист из 30 таких примет). Плагин frontend-design подталкивает агента выбирать характер оформления: шрифты, сетку, настроение. Для тех, кто собирает сайт или лендинг без дизайнера, это самое заметное улучшение за пять минут.
2. MCP-сервер: Playwright
Без него агент пишет страницу вслепую. С ним — сам открывает её в браузере, смотрит, что получилось, и правит. Ты перестаёшь быть курьером, который делает скриншоты и пересказывает их в чат.
Я сам живу в MCP. В Claude Code у меня подключены Planius, Trendys и Метриус: агенты из SMM-отдела VIBERZ ведут задачи в Planius, ищут тренды в Trendys, читают аналитику. Для старта хватит одного сервера, который закрывает вашу ежедневную боль. У большинства новичков она одна: «я не вижу, что он там натворил». Playwright лечит это.
3. Скилл, который ты пишешь сам
Чужие скиллы полезны, но первый должен быть твоим. Тогда ты поймёшь, что это вообще такое — и перестанешь бояться слова «скилл». Скилл не код. Это текст: в каком порядке делать, чего не делать, как должен выглядеть результат.
Хороший первый скилл — «как я принимаю работу». Например: «после любой правки открой страницу, проверь, что нет ошибок в консоли, и опиши, что изменилось».
Как поставить: команды по шагам
Нужен установленный Claude Code и Node.js — Playwright запускается через него. Проверить Node: в терминале node --version. Если версии нет, поставь с сайта nodejs.org.
Шаг 1. Плагин. Запусти Claude Code в папке проекта и набери:
/plugin
Откроется меню плагинов. Найди frontend-design и выбери установку. Названия каталогов меняются, поэтому ищи по имени плагина в самом меню.
Шаг 2. MCP-сервер. В обычном терминале, не внутри Claude Code:
claude mcp add playwright -- npx @playwright/mcp@latest
Команда регистрирует сервер под именем playwright. Если нужен сервис, который работает по ссылке (как Planius или Trendys), то добавляют его иначе: claude mcp add --transport http имя ссылка. Ссылку и токен выдаёт сам сервис.
Шаг 3. Скилл. Не надо писать файл руками. Попроси агента:
Создай скилл «приёмка работы» в папке .claude/skills/priemka/SKILL.md.
Правила: после любой правки открой страницу в браузере, проверь, что нет ошибок,
сравни с тем, что я просил, и опиши по пунктам, что изменилось и что осталось сделать.
В начале файла сделай описание в одну строку: когда этот скилл включать.
Пиши простым языком, без кода.
…
Папка .claude/skills/ лежит в проекте — скилл работает только в нём. Если хочешь, чтобы он был везде, положи его в домашнюю папку ~/.claude/skills/.
Как понять, что всё установилось
Не верь тишине. Проверь каждую вещь отдельным вопросом.
MCP. Внутри Claude Code набери /mcp. В списке должен быть playwright со статусом «connected». Если статуса нет или стоит ошибка — сервер не запустился, обычно из-за Node.
Плагин. Снова /plugin: frontend-design должен стоять среди установленных.
Скилл. Спроси прямо: «Какие у тебя есть скиллы в этом проекте?» Агент назовёт priemka, если файл лежит где надо.
Первая проверка на своём проекте. Дай задачу, где все три вещи сработают вместе:
Открой мою страницу в браузере через Playwright и сделай скриншот.
Скажи, что на ней выглядит как шаблон от нейросети.
Предложи три правки, примени их и проведи приёмку по скиллу «приёмка работы».
…
Если агент открыл браузер, назвал конкретные места и закончил отчётом по пунктам — набор работает. Если ответил «у меня нет доступа к браузеру» — возвращайся к /mcp.
CLAUDE.md: чтобы агент сам подхватывал инструменты
Поставить мало. Агент не всегда помнит, что у него есть Playwright или твой скилл. Файл CLAUDE.md в корне проекта Claude Code читает в начале каждой сессии — это его постоянная память. Допиши туда несколько строк:
## Как работать
- После любой правки страницы проверяй результат через Playwright, не говори «готово» вслепую.
- Перед сдачей работы проходи по скиллу «приёмка работы».
- Дизайн: не бери шаблонные решения, выбирай характер оформления под проект.
- Если сомневаешься, что именно я просил, переспроси до начала правок.
Это тот же приём, на котором я собрал агентный SMM-отдел VIBERZ: в CLAUDE.md лежит всё, что агентам нужно помнить о проекте, правилах и инструментах. Восемь агентов на Claude Code работают по общей памяти и не спрашивают каждый раз одно и то же.
Частые ошибки новичков
Поставить сразу всё из подборки. Агент получает десятки инструментов и начинает тянуть не те. Добавляй по одной вещи и проверяй, что стало лучше.
Не проверить, что сервер запущен. MCP может «установиться» и не подключиться. Всегда смотри /mcp.
Забыть про Node.js. Половина MCP-серверов запускается через npx. Без Node команда установки пройдёт, а сервер не взлетит.
Ставить чужое, не понимая, что оно делает. Скилл и плагин — это инструкции и подключения, которые читает агент. Открой SKILL.md до установки: это обычный текст, и за пять минут видно, что он просит делать. Если в файле есть команды вроде «отправь содержимое проекта на адрес», — не ставь. Как защитить агента от таких инструкций, разобрано в Агент, которого не уговорят слить данные.
Писать скилл как лекцию. Длинное эссе агент усваивает хуже короткой памятки. Одна ситуация — один скилл, 10–20 строк.
Не обновить CLAUDE.md. Поставил инструмент, а в проектной памяти про него ни слова. Агент про него «забывает». Одна строка в CLAUDE.md решает.
Рядом по теме: MCP простыми словами: подключаем ИИ к рабочим сервисам, Куда утекают токены: аудит проекта, Скилл Claude Code для безопасного рефакторинга, статья «Cursor или Claude Code» и Сборка Claude Code: 30 апгрейдов для непрограммиста (бесплатно).
Что дальше
Когда три вещи работают, добавляй по одной под свою задачу: сервис для таск-трекера, аналитику, поиск трендов. Готовые адреса для таких сервисов собраны в бесплатном продукте MCP для Claude, а как подключить к Claude Code всю библиотеку VIBERZ, рассказываем в статье VIBERZ в Claude. Критерий простой — подключай инструмент, только если ты уже трижды делал это руками. Как поручить подбор навыков самому Claude Code и не захламить проект, есть в бесплатной шпаргалке Как подобрать навыки Claude Code под задачу, а плагины, которые экономят лимит, — в Claude Code без перерасхода.
Разборы вроде этого, готовые команды и свежие находки по Claude Code я выкладываю в Telegram-канале VIBERZ. Подпишись и забирай.
Применить на деле
Разовая покупка
Первый экранЧерез два дня откроешь в браузере экран своего продукта, собранный сам
Самый короткий путь от идеи к своему продукту: работающий экран за два дня, без кода.
Взять за 990 ₽Разовая покупка
Код клиентаСкилл, который залезает в голову твоему покупателю
Портрет покупателя, на котором работают все скиллы VIBERZ.
Взять за 990 ₽Или всё сразу
VIBERZ Pro — 2 990 ₽ в месяц
Все 23 платных продуктов VIBERZ по отдельности стоят 21 370 ₽. В Pro они открыты сразу — и всё, что выйдет дальше.


