При росте количества маркетинговых лендингов в DentLink столкнулся с проблемой скорости разработки: рутинная верстка отнимала слишком много времени и тормозила выкатку новых страниц.
Проблема Маркетинг хочет новые лендинги быстро - показать фичу, запустить акцию, протестировать гипотезу.
Каждый лендинг - это один и тот же цикл: открыл Figma, перенёс токены, написал разметку, проверил руками.
Чем больше становилось запросов от маркетинга, тем сильнее проявлялась проблема: • долгий перенос дизайн-токенов из Figma в код • ручная проверка каждой страницы после верстки • разработчик становился узким местом между идеей и релизом
На одном из созвонов поднял эту тему и предложил решение. В итоге подход прижился и им стали пользоваться все разработчики, которые верстали лендинги.
Решение Перешли на концепцию AI-assisted разработки и настроили инфраструктуру на базе Model Context Protocol.
Идея достаточно простая: разработчик занимается архитектурой и нетривиальными решениями рутинную верстку делегирует AI-агенту Интегрировали два инструмента: Figma MCP - запускается локально при открытии дев-режима в Figma, токены и стили подтягиваются из макета напрямую в среду разработки без ручного переноса Playwright MCP - автоматическая e2e-верификация сверстанных страниц и поиск багов нейросетью
Чтобы AI лучше понимал задачу, выработали подход с декомпозицией макета: большой экран разбивался на маленькие группы прямо в Figma, агенту кидалась ссылка на группу - он сам разбивал её на подзадачи и верстал последовательно. После каждой сверстанной подгруппы автоматически запускалась проверка через Playwright MCP - агент сам смотрел на результат, находил расхождения с макетом и фиксил их.
Дополнительно разработал систему кастомных системных инструкций под стек и соглашения проекта, чтобы агент генерировал предсказуемый и консистентный код.
Нюансы При реализации пришлось учитывать несколько моментов:
1. Качество инструкций Без чётких системных инструкций агент генерирует непоследовательный код. Пришлось плотно поработать над промптами под конкретный проект. 2. Декомпозиция макета Чем крупнее секция - тем хуже агент справляется. Разбивка на маленькие группы сильно повышает качество результата. 3. Контроль результата AI не заменяет ревью - финальную проверку всё равно делает разработчик. 4. Подходит не для всего Рутинная верстка делегируется отлично, сложная интерактивная логика - всё равно на разработчике.
Результат После внедрения MCP-инфраструктуры и AI-агентов: • перенос токенов из Figma стал автоматическим • агент сам декомпозирует задачу, верстает и проверяет себя через Playwright MCP • e2e-проверка каждой подгруппы происходит без участия разработчика • Time-to-Market маркетинговых лендингов сократился в 2-2,5 раза • лендинги стали выкатываться чаще, маркетинг получил возможность быстрее тестировать гипотезы • подход подхватила вся команда - решение стало стандартом для всех кто верстал лендинги • бизнес остался доволен - скорость реакции на запросы выросла заметно
Вывод AI-assisted разработка - рабочий инструмент для ускорения рутины. Но агент хорош ровно настолько, насколько хороши инструкции которые ты ему дал, и контроль результата никуда не уходит.
