X5 Tech: ИИ-агент с Figma MCP и DS MCP ускорил вёрстку в 3,2 раза в пилоте

Старший разработчик X5 Tech Никита Сычев работает с большими проектами на нескольких платформах и использует ИИ-агентов для генерации вёрстки. Агенты писали код с компонентами, которых нет в проекте: они знают Material UI и Bootstrap, но не знают внутреннюю дизайн-систему, её компоненты и токены темы. Значительная доля времени разработчика уходила на адаптацию сгенерированного кода и замену выдуманных компонентов. Прямые подходы не сработали: при чтении файлов агент находил 60–70% компонентов, а векторный поиск по сырому коду давал 40–60 тысяч токенов в контексте, из которых релевантными были 2–3 компонента.

DS MCP — MCP-сервер на Node.js с векторной базой ChromaDB, который даёт агенту знание о дизайн-системе. Парсер извлекает из исходников компонентов имя, props с типами, JSDoc-комментарии и зависимости; препроцессор по шаблону или с помощью LLM генерирует человекочитаемое описание назначения, сценариев использования и ограничений каждого компонента. Описания переводятся в векторы и хранятся вместе с кодом. Агент получает семь инструментов: контекст проекта, гайдлайны, поиск компонентов по описанию задачи, полное описание компонента, токены темы и иконки. В связке с Figma MCP, которая даёт структуру макета, агент генерирует вёрстку из реальных компонентов проекта.

Сервис поддерживает React, Jetpack Compose и SwiftUI и работает локально как MCP-сервер. В сравнении на одной задаче — вёрстке карточки по Figma-макету — DS MCP показал минимальный расход токенов, около 15–18 тысяч. По данным статьи от июля 2026 года, вёрстка одного экрана сократилась с 8 до 2–3 часов, в среднем примерно на 68%. На команде из трёх разработчиков выработка выросла с 3 до почти 10 экранов в день, ускорение составило 3,2 раза по фактическому замеру. Автор называет решение MVP: для промышленного использования нужны автоматическая переиндексация, оценка качества поиска, аутентификация и наблюдаемость.