Разбор функции
Субагенты Claude Code: собираем UI-ревьюера
Субагенты — это маленькие специалисты со своим контекстом, инструментами и системным промптом. Полная настройка, по одному скриншоту за раз.
Иллюстрированный разбор из 14 шагов — чтение займет около 5 минут. Каждый шаг ссылается на точный момент исходного видео.
Коротко
Введите /agents, создайте нового агента в области проекта и позвольте Claude набросать его по описанию вроде «expert UI/UX engineer who reviews React components in a browser using Playwright». Урежьте инструменты — ревьюеру не нужны права на редактирование, — выберите модель и цвет, и Claude напишет markdown-файл. Встройте его в кастомную слэш-команду, чтобы каждый компонент проходил ревью автоматически. А потом все равно читайте код сами.
Об исходном видео
Эта страница следует уроку про субагентов из курса Net Ninja по Claude Code и шаг за шагом воссоздает его UI-ревьюера.
Скриншоты — кадры из видео с указанием авторства создателя; текст наш собственный. Шаги сверены с видео в сентябре 2026 года.
Создайте субагента
Одна команда, пять экранов — и ваш специалист готов.
- 1
Откройте меню агентов через /agents
Внутри сессии Claude Code введите /agents — подсказка под вводом описывает это как управление конфигурациями агентов. Именно в этом меню создаются, просматриваются и редактируются все субагенты.
Одна слэш-команда открывает весь цех субагентов.Видео на 2:30 - 2
Начните с пустого списка
При первом запуске меню показывает no agents found, вариант Create new agent и встроенных агентов, доступных всегда: general-purpose, statusline-setup, output-style-setup. Ваши субагенты появятся рядом с ними.
Встроенные — глобальные; ваши агенты попадут в тот же список.Видео на 2:34 - 3
Пусть Claude набросает агента
Два пути: сгенерировать с Claude (рекомендуется) или написать markdown вручную. Черновик — лучший старт: вы описываете работу, Claude делает файл, а несогласные места правите сами.
Сначала генерация, потом правки — файл всего лишь markdown.Видео на 2:58 - 4
Опишите работу точно
Промпт из видео: «Expert UI & UX engineer who reviews the UI & UX of React components in a browser using Playwright, takes screenshots, then offers feedback...» Роль, инструмент и формат результата — одним предложением.
Роль + инструмент + формат результата — все в одном предложении описания.Видео на 3:10 - 5
Намеренно урежьте набор инструментов
Claude спрашивает, какие инструменты может использовать агент: все, только чтение, редактирование, исполнение, MCP. Ревьюеру отключите инструменты редактирования — вам нужен отзыв, а не переписывание. Это разница между советником и агентом, который тихо рефакторит ваши компоненты.
Ревьюер с правами редактирования — ревьюер, которому нельзя верить.Видео на 3:38 - 6
Подтвердите и познакомьтесь с агентом
Приходит подтверждение: ui-ux-reviewer создан как проектный агент на Sonnet и стоит в списке рядом со встроенными. С этого момента Claude Code может делегировать ему задачи, совпадающие с описанием.
Создан, область задана, готов к делегированию.Видео на 4:18
Встройте его в свой процесс
Файл агента — это markdown, а триггером служит кастомная команда.
- 7
Прочтите сгенерированный markdown
Агент — один файл: .claude/agents/ui-ux-reviewer.md с именем, описанием, списком инструментов (включая запрошенные вами MCP-инструменты Playwright) и полным системным промптом. Правьте что угодно — это просто промпт в файле.
Сверху метаданные, ниже — длинный системный промпт.Видео на 5:22 - 8
Добавьте его в кастомную слэш-команду
Команда /ui-component из курса создает компоненты по имени и краткому описанию. В уроке в конец добавляется решающая инструкция: после сборки вызвать агента ui-ux-reviewer, внедрить его отзывы и повторять цикл, пока тот не останется доволен.
Секция задач команды теперь заканчивается циклом ревью.Видео на 5:38 - 9
Перезапустите сессию
Claude Code подхватывает новые и измененные команды при старте сессии, так что выйдите и запустите заново. Лог /agents подтверждает созданного агента, прежде чем вы двинетесь дальше.
Новые агенты и команды загружаются в следующей сессии.Видео на 6:10 - 10
Запустите свою команду
Введите /ui-component Modal — сделай чистое современное модальное окно с полупрозрачной подложкой. В todo-списке, который составит Claude, последним пунктом стоит «Review with ui-ux-reviewer agent» — делегирование уже в графике.
Имя плюс краткое описание — вот и все, что нужно команде.Видео на 6:18
Автоматизированный цикл ревью
Собери, проверь в браузере, исправь, повтори — а потом все равно прочитай diff.
- 11
Смотрите, как ревью входит в план
Todo-список: создать Modal с подложкой, добавить варианты и размеры, тестовый файл, запись на странице превью, прогнать тесты — и «review with ui-ux-reviewer agent» последним пунктом. Главный поток готовит делегирование.
Семь пунктов, и последний — забота специалиста.Видео на 6:50 - 12
Ревьюер просит браузер
Агент ui-ux-reviewer перехватывает работу: он читает компонент и просит запустить npm run dev, чтобы открыть страницу. Одобрения по-прежнему идут через вас — делегирование не обходит разрешения.
Работает субагент, но одобрения по-прежнему проводите вы.Видео на 7:14 - 13
Прочтите вердикт
Ревьюер возвращает структурированный результат: сделанные скриншоты, уменьшенный вьюпорт для маленьких экранов, затем вердикт — 5 из 5 звезд, production ready, со списком всех созданных файлов. Главный поток вносит запрошенные исправления.
Скриншоты, заметки по доступности и вердикт со звездами.Видео на 9:04 - 14
Проверьте в браузере сами
Доказательство: сгенерированное окно открывается с полупрозрачной подложкой, закрывается по Escape, крестику или клику мимо, и идет в вариантах primary, secondary, success, warning, danger и трех размерах. Попробуйте сами — а потом прочитайте код.
Клавиатура, клик по подложке и кнопки закрытия — все работает.Видео на 9:22