ИИ-агенты берут на себя всё больше вёрстки: генерируют компоненты и целые экраны, правят отступы по клику, перестраивают сетку под мобильные, выносят цвета в тёмную тему и проверяют доступность. Ниже — чем это делается (Cursor Design Mode, браузерные инструменты агентов, Playwright MCP), примеры промптов и где заканчивается зона ответственности агента.
Вёрстка — первая область, где ИИ-агент выглядит почти «как в рекламе»: исправил по клику, показал скриншот, исправил снова. Но это не магия «напиши сайт целиком» — это конкретные механики: клик по элементу вместо описания селекторов, браузер с глазами вместо догадок, повторение цикла «правка → скриншот → правка». Сборка сайта целиком — отдельная история, у нас есть разбор кейса агентства, которое собрало свой сайт на Claude Code. Здесь — про повседневные задачи вёрстки внутри существующего проекта.
Чем агенты реально помогают во фронтенде
На момент публикации (август 2026) уверенно закрываются пять типов задач.
Генерация компонентов и экранов. Кнопка, карточка, форма, секция лендинга — по описанию или по макету. Агент подхватывает стили проекта, если они описаны: Tailwind-конфиг, CSS-переменные, существующие компоненты. Результат обычно не идеален, но это готовая основа, которую править быстрее, чем писать с нуля.
Фиксы вёрстки по клику и по скриншоту. Это главное отличие агентов от автодополнения: вместо «найди селектор и поправь margin» вы кликаете по элементу прямо в превью, а агент сам находит файл и строку. Работает в Cursor Design Mode (ниже разобрано подробно).
Адаптив. Сломалась сетка на ширине 375 px — агент открывает страницу на этой ширине, смотрит скриншот и перестраивает сетку на media queries. Скучная рутина «подвинь, проверь, снова подвинь» уходит агенту.
Тёмная тема. Массовая задача: прогнать все цвета, вынести их в CSS-переменные, перепроверить контраст. Агент делает это методично, по файлам, а не выборочно — при условии, что проект собран на переменных.
Доступность. Браузерный инструмент Cursor умеет аудитить a11y: отсутствующие alt-тексты, контраст текста, семантику заголовков, состояние фокуса. Выдаёт список проблем и чинит их по очереди.
Как устроен Cursor Design Mode
Design Mode — режим агента в Cursor, который запускается сочетанием Cmd+Shift+D (документация). Разница с обычным агентом — в том, как вы отдаёте правки: не текстом «поправь кнопку», а кликом по конкретному элементу в живом превью приложения.
Цикл выглядит так:
- Агент открывает превью страницы, которую вы редактируете.
- Вы кликаете по элементу, который нужно поправить, и описываете изменение.
- Агент получает identity элемента: xpath, имя компонента, атрибуты, вычисленные стили (computed styles) и пропсы — у React-приложений прямо из fiber tree. Плюс скриншот текущего состояния.
- Агент находит нужный файл и правит код.
- Превью обновляется — вы видите результат и либо повторяете цикл, либо принимаете правку.
Это снимает главную боль текстовых промптов к вёрстке: вам не нужно объяснять, где именно живёт элемент и какой у него класс. Клик — и агент работает с точным адресом в DOM, а не с догадкой.
Как настроить Cursor под себя — три режима, правила и MCP-серверы — разобрано в нашей статье «Как пользоваться Cursor». Design Mode — не отдельный продукт, а режим того же агента, поэтому все настройки контекста и правил работают и в нём.
Браузер в руках агента: Cursor Browser и Playwright MCP
У Design Mode есть ограничение: превью внутри Cursor — это ваше приложение, которое уже открыто. Проверить прод, чужой сайт или многостраничный флоу агент должен уметь сам — для этого есть браузерные инструменты.
Cursor Browser tool — встроенный браузер агента, который вышел из беты (GA) с версии Cursor 1.7. Агент открывает приложение, кликает по нему, видит скриншоты, читает console-логи и сетевые запросы. На нём держатся три фронтенд-сценария:
- тестирование своих изменений — агент сам открывает страницу и проверяет, что не сломалось;
- аудит доступности по реальному интерфейсу, а не по коду;
- «конвертация дизайна в код» — агент смотрит на страницу или макет и воспроизводит её вёрсткой.
Playwright MCP — открытый браузерный сервер для MCP (репозиторий microsoft/playwright-mcp, Apache-2.0). Он подключает настоящий браузер к любому агенту: Claude Code, Cursor, Codex. Агент получает инструменты «открой страницу», «сделай скриншот», «кликни», «прочитай console» — и использует их для проверки вёрстки и её починки. Детальная настройка и примеры — в нашей статье про Playwright MCP, а база про MCP вообще — в «Что такое MCP».
В Cursor свой браузер, в Claude Code и Codex — свой через MCP, но механика одна: агент не представляет страницу, а видит её. Для вёрстки это ключевое — большинство ошибок (съехавшие отступы, перекрытые кнопки, битый адаптив) заметны только на скриншоте реального рендера.
Инструменты для фронтенда: сравнительная таблица
| Инструмент | Чем берёт во фронтенде | Как подключается | Ограничения |
|---|---|---|---|
| Cursor (Design Mode, Browser tool) | клик-фиксы вёрстки по превью, адаптив, тёмная тема, a11y-аудит, дизайн→код | редактор на базе VS Code, Design Mode — Cmd+Shift+D | платная подписка, оплата из РФ сложная (см. ниже) |
| Claude Code | правит код, по скриншотам и браузеру через MCP; силён в многофайловых правках стилей | CLI + расширение для VS Code | РФ нет в списке регионов Anthropic, оплата через посредников |
| Codex CLI | генерация компонентов и правки в репозитории, разбор кодовой базы перед правкой | CLI, работает в терминале и IDE | платный по токенам/подписке |
| Playwright MCP | даёт любому агенту глаза в браузере: скриншоты, клики, console-логи, сетевые запросы | MCP-сервер, ставится поверх агента | сам не генерирует код — только проверяет и отдаёт данные агенту |
Что касается качества на практических задачах — свежее русскоязычное сравнение Codex, Claude Code и Kimi на реальных задачах (включая вёрстку) есть на Хабре (июль 2026): вывод автора — на фронтенд-задачах все трое справляются с рутиной, но результат всегда надо смотреть глазами, потому что «красиво по коду» ≠ «красиво на экране».
В Cursor на момент публикации доступны и Claude-модели (Fable 5, Opus 5, Sonnet 5), и Composer 2.5, Gemini 3.1/3.6, GPT-5.6, Grok 4.5 — выбирать можно под задачу: для точечных клик-фиксов хватает быстрой модели, для сложного рефакторинга стилей — флагмана.
Практика: промпты для вёрстки
1. Клик-фикс в Design Mode. Открываете превью, кликаете по кнопке с кривыми отступами:
Кнопка съехала: внутри паддинг 6px 10px, а нужно 12px 24px.
Выровняй по центру относительно блока-родителя и проверь, что соседняя кнопка не поплыла.
2. Адаптив. Агент открывает страницу на мобильной ширине:
На ширине 375px карточки стоят в один столбец с разными отступами слева.
Сделай единый отступ 16px, заголовки обрезай через text-overflow: ellipsis,
и проверь, что между карточками нет горизонтального скролла.
3. Тёмная тема. Рефакторинг цветов:
Вынеси все хардкод-цвета из компонентов в CSS-переменные в :root
и добавь [data-theme="dark"] с тёмным набором. Проверь контраст текста
на кнопках — он должен остаться не ниже 4.5:1.
4. A11y-аудит браузером. Агент сам открывает страницу и проверяет:
Пройдись по главной странице браузером: найди элементы без alt-текста,
заголовки не по порядку уровней, кнопки без доступного имени.
Составь список и исправь всё, кроме тех, что помечены TODO.
5. Проверка вёрстки через Playwright MCP (для Claude Code / Codex):
Открой страницу http://localhost:3000, сделай скриншот на 1440px и 375px,
сравни сетку карточек и напиши, что разъехалось. Затем исправь в коде
и перепроверь тем же способом.
Общий принцип всех промптов: дать агенту способ увидеть результат (превью, браузер, скриншот) и критерий проверки («не ниже 4.5:1», «без горизонтального скролла»). Без этого агент правит вслепую и вы получаете «починил отступ, сломал соседний блок».
Российские реалии
Главный барьер для фронтенд-агентов в РФ — не качество, а оплата и регионы:
- Cursor — платная подписка, оплата из РФ сложная. Visa и Mastercard российских банков не работают; реальные пути — зарубежная карта, UnionPay или VPN при оформлении. Без оплаты вы упираетесь в лимиты бесплатной версии.
- Claude Code — РФ нет в списке поддерживаемых регионов Anthropic. Для доступа и оплаты нужны зарубежные карта и аккаунт; подробная инструкция по использованию Claude из России (включая обходные пути оплаты) — на Хабре (2026).
- Codex — платный по токенам, оплата из РФ — теми же путями, что и Cursor: зарубежная карта или посредники.
- Локальные модели — бесплатный путь без VPN. Для вёрстки это реально: генерация компонентов, адаптив и даже фиксы по скриншоту работают на локальных моделях через Ollama — без зарубежных карт и утечки кода за пределы машины. Как поднять связку — в нашей статье про Qwen3-Coder через Ollama.
Живой русскоязычный опыт по теме есть: инструкция по Claude в России (Habr, 2026), сравнение Codex, Claude Code и Kimi на практических задачах (Habr, июль 2026) и разбор вайбкодинга на бесплатных моделях без VPN (spryt.ru). Если платить за агентов не готовы — начните с локальных моделей: для точечной вёрстки их хватает, а VPN и карты не нужны вовсе.
Честные ограничения
- Не pixel-perfect. Агент не попадает в макет с точностью до пикселя: мелкие отступы, кернинг, межстрочные интервалы приходится доводить руками. Design Mode ускоряет цикл, но не отменяет его.
- Дизайн-системы — слабое место. Если токены и компоненты не описаны в коде, агент генерирует свои цвета и свои варианты кнопок — проект дрейфует от дизайн-системы. Чем строже переменные и документация, тем лучше результат.
- Регрессии. Исправляя один блок, агент может сломать соседний, особенно в CSS, где всё «плавает». Поэтому и нужен цикл с браузером: после каждой серии правок агент обязан перепроверить страницу.
- Агент видит только то, что ему отдали. Большое приложение он изучает по частям — по контексту из правил, по конкретным файлам. Не передали стили проекта — получите «временный» код, который потом придётся переписывать.
- Версии меняются быстро. Функции, модели и цены Cursor, Claude Code и Codex актуальны на август 2026 года. И заявление «компилятор Cursor» в документации не подтверждено — на момент публикации такой функции нет.
Вывод
ИИ во фронтенде — это не «напиши сайт и уйди», а ускорение рутины: генерация компонентов, клик-фиксы вёрстки, адаптив, тёмная тема, аудит доступности. Ключ к хорошему результату — замкнутый цикл «агент видит → правит → снова видит»: превью в Cursor Design Mode, браузерный инструмент или Playwright MCP. Главные границы — дизайн-системы и регрессии: финальную картинку всё равно проверяют глаза. Из РФ проще всего начать с локальных моделей без VPN, а для Cursor и Claude Code — заложить в бюджет зарубежные способы оплаты.
Дальше по теме: как пользоваться Cursor, Playwright MCP: браузер в руках агента, что такое MCP, ИИ для документации кода и кейс: сайт целиком на Claude Code.