Компоненты, вёрстка, отладка интерфейса — Claude Code тянет всё это, если дать ему глаза и образец. Разберём воркфлоу: от компонента в стиле проекта до починки бага по скриншоту.
Фронтенд — это видимая часть проекта: кнопки, формы, экраны, всё, с чем пользователь взаимодействует. Здесь у Claude Code есть суперсила, которой нет на бэкенде: он видит изображения. Можно дать скриншот макета — и он сверстает похоже; показать сломанный экран — и он найдёт причину. Но чтобы код лёг в проект, а не выглядел как чужая заготовка, агенту нужен контекст: ваш стиль, ваши компоненты, ваши правила. Об этом и гайд.
Что узнаешь из гайда
Часть 1 · Контекст
Главное
Без контекста агент верстает «вообще правильно», но не как у вас. Покажи ему готовый компонент-образец, назови дизайн-систему и UI-библиотеку — и он подхватит ваши отступы, токены и примитивы.
Расшифруем. Компонент — это переиспользуемый кусок интерфейса: кнопка, карточка, модалка. Дизайн-система — набор правил и готовых элементов, чтобы всё выглядело единообразно: цвета, шрифты, отступы, состояния. Если просто сказать «сделай кнопку», Claude сделает абстрактную кнопку. Если показать вашу существующую кнопку — он сделает такую же, в вашем стиле.
# Покажи агенту опору, а не проси «с нуля»
Посмотри components/ui/Button.tsx и Card.tsx — это наш стиль.
Мы на Tailwind, токены отступов в tailwind.config.
Сделай новый компонент в ТОЧНО таком же стиле.
# Claude повторит ваши классы, отступы и структуру,
# а не притащит чужие соглашенияЛучшее место для постоянных правил — это CLAUDE.md. Запиши туда стек (React, Tailwind, shadcn/ui), правило «отступы через шкалу, не произвольные значения», путь к примитивам. Тогда не придётся повторять контекст в каждом чате — агент читает его сам.
Часть 2 · Создание
Главное
Описывай не только вид, но и поведение: состояния (загрузка, пусто, ошибка), пропсы, адаптив. Чем полнее ТЗ, тем меньше итераций. Один компонент за раз — не проси «весь экран целиком» одним промтом.
Типичная ошибка новичка — промт «сделай страницу профиля». Агент выдаёт стену кода, в которой половина не то. Лучше дробить: компонент за компонентом, с конкретным ТЗ на каждый. И описывать не только как выглядит в норме, но и крайние состояния — без них интерфейс ломается на проде.
# Плохо: "сделай список заказов"
# Хорошо — с состояниями и пропсами:
Сделай компонент OrderList:
- пропс orders: массив заказов
- состояние загрузки: скелетоны на 3 строки
- пустой список: текст "заказов пока нет" по центру
- ошибка: текст ошибки + кнопка "повторить"
- адаптив: на мобильном карточки в одну колонку
Стиль возьми из components/ui — как Card.tsx.Хороший промт описывает состояния и края, а не только «как выглядит, когда всё хорошо».
Важно
Не давай агенту переписывать чужой компонент «заодно», пока чинишь свой. Фронтенд-баги часто живут в родителе или в общем примитиве — держи правки узкими, иначе диф расползётся на пол-проекта. Как ставить узкие задачи — в гайде про промптинг.
Часть 3 · Скриншот
Главное
Claude видит изображения. Перетащи скриншот макета в чат — и агент сверстает похоже. Картинка плюс контекст кода работает лучше, чем длинное словесное описание дизайна.
Это режим, которого нет на бэкенде. Ты можешь дать Claude картинку: скриншот из Figma, фото с доски, или вообще снимок чужого сайта, который нравится. Агент опишет, что видит, и переведёт это в разметку и стили. Дизайнерскую точность до пикселя он не гарантирует, но каркас экрана собирает быстро — дальше доводишь.
# Перетащи картинку прямо в чат, затем:
Свёрстай этот экран по скриншоту.
Стек — наш (React + Tailwind), примитивы из components/ui.
Где на картинке кнопка — используй наш Button.
Точные цвета бери из tailwind.config, не из картинки на глаз.Важный нюанс — не давать агенту тащить цвета и шрифты «как на картинке». Скажи брать токены из дизайн-системы, а картинку использовать только как раскладку. Иначе получишь хардкод хексов вместо ваших переменных, и интерфейс рассыплется на единый стиль.
Часть 4 · Отладка
Главное
Сильнейший режим отладки — дать Claude браузер по MCP (Playwright). Тогда агент сам открывает страницу, видит ошибки в консоли, кликает и проверяет фикс — а не угадывает по коду.
Обычная отладка вёрстки: ты описываешь баг словами, агент гадает по коду, предлагает фикс, ты проверяешь руками. Долго. С браузером по MCP цикл замыкается на самом агенте. MCP (Model Context Protocol) — это канал к внешним инструментам; сервер Playwright даёт Claude настоящий браузер. Агент открывает страницу, читает консоль, наводит мышь, делает скриншот — и сам видит, починил он баг или нет.
# Подключаем Playwright MCP — браузер для агента
claude mcp add playwright -- npx -y @playwright/mcp@latest
# Теперь в чате можно:
# "открой /checkout, нажми «оплатить»,
# покажи что в консоли и почему кнопка не реагирует"
# Claude сам сходит в браузер и увидит ошибкуДаже без MCP отладка ускоряется скриншотом: показать «вот так выглядит баг» нагляднее любого описания. Дай картинку сломанного экрана плюс relevant-кусок кода — и агент найдёт причину быстрее. Подробнее про поиск корня проблемы — в гайде про отладку.
Часть 5 · Итерации
Главное
Фронтенд доводится итерациями: «сделай отступ больше», «выровняй по центру», «на мобильном в столбик». Маленькие точечные правки надёжнее, чем «переделай всё». Смотри результат глазами после каждой.
Интерфейс — это не «написал и забыл», а цикл доводки. Хороший ритм: получил черновик, открыл в браузере, увидел что не так, дал одну точечную правку. Не копи десять замечаний в один промт — агент часть потеряет. По одному, с проверкой.
Когда НЕ полагаться на агента
Не доверяй агенту итоговое дизайнерское решение и пиксель-перфект: вкус, иерархию, микро-анимации лучше задаёшь ты, он исполняет. Сложную интерактивную логику (drag-and-drop, тяжёлый стейт) проверяй особенно придирчиво. И не принимай вёрстку «на слово» — фронтенд судится глазами в браузере, а не по тексту в чате.
Типичный сценарий
«Свёрстай карточку товара по скриншоту, стиль из components/ui». Агент даёт черновик. Ты смотришь в браузере: цена прижата к краю. «Добавь отступ снизу у цены» — поправил. «На мобильном картинка растягивается» — пофиксил. Три итерации, готово.
Коротко
Вопросы
Да, Claude Code пишет компоненты и вёрстку: ты описываешь, что нужно за интерфейс, а агент создаёт React- или Vue-компонент с разметкой и стилями под твой стек. Чтобы результат лёг в проект, покажи ему пример существующего компонента и дизайн-систему — тогда он повторит ваши соглашения, а не сгенерирует чужой стиль.
Claude Code чинит баги вёрстки по описанию проблемы и скриншоту: ты показываешь, что не так выглядит, а агент находит причину в CSS или разметке и предлагает фикс. Самый сильный режим — подключить браузер по MCP (например, Playwright), чтобы Claude сам открыл страницу, увидел ошибки в консоли и проверил исправление, а не угадывал вслепую.
Да, Claude Code понимает изображения: можно дать скриншот макета или сломанного экрана, и агент опишет, что видит, и сверстает или починит под картинку. Это удобно для повторения дизайна и для отладки — показать «вот так выглядит баг» нагляднее, чем объяснять словами. Точность выше, когда вместе со скриншотом ты даёшь контекст кода.
Чтобы Claude верстал в стиле проекта, дай ему опору: покажи готовый компонент как образец, укажи дизайн-систему и UI-библиотеку, и закрепи правила в CLAUDE.md. Тогда агент берёт ваши токены, отступы и примитивы, а не изобретает свои. Без этого контекста он генерирует абстрактно правильный, но чужой для проекта код.
Читать дальше
Прикладной материал, разборы и рабочие приёмы — то, чем пользуюсь сам, без воды. Залетай, там самое полезное.
Зайти в Telegram