DS MCP: как дать AI-агенту знание о вашей дизайн-системе

В сфере искусственного интеллекта произошло заметное событие. HarperJr 1 минуту назад DS MCP: как дать AI-агенту знание о вашей дизайн-системе 14 мин 33 Блог компании X5 Tech Веб-разработка * ReactJS * Искусственный интеллект Интерфейсы * Кейс Привет, Хабр! На связи Николай Сычев. Я старший разработчик в X5 Tech.

Работаю с большими проектами — много фич, много платформ, много кода. В какой-то момент начал активно использовать AI-агентов для генерации верстки и столкнулся с повторяющейся проблемой. Агенты научились писать код, но когда просишь сверстать экран, то получаешь код с компонентами, которых нет в проекте.

Технические детали

Агент знает Material UI, знает Bootstrap, знает что угодно из интернета, но не знает ваш CardList, ваш PrimaryButton и ваши токены темы. Я решил это исправить. Проблема: LLM генерирует вёрстку в вакуумеПопросите любого агента сверстать форму авторизации.

Он справится, но результат будет написан так, будто в вашем проекте нет ни одного готового компонента. Агент не знает вашу дизайн-системуАгент не виноват. У него нет контекста о вашей дизайн-системе.

Проблема усиливается, если платформ несколько: один проект на React, другой на Jetpack Compose, третий на SwiftUI и у каждого своя дизайн-система, свои компоненты, свои соглашения. Давать контекст вручную в каждый промпт долго. Копировать компоненты в чат тоже громоздко и не надёжно.

Отраслевые последствия

В итоге агент действительно экономит время на написание кода, но создаёт дополнительную работу по его адаптации, и нужен дополнительный инструмент. Figma MCP даёт агенту структуру макета, отступы, layout, но не знает, какими компонентами из вашего кода этот макет реализовывать. Поэтому нужен ещё один инструмент, который закроет вопрос «чем это верстать».

Очевидные решения и почему они не работаютПервая реакция была решить проблему в лоб. Дать исходники дизайн-системы агенту. Подход 1 — Агент читает файлы напрямуюСамый очевидный вариант: дать агенту инструменты read_file и list_directory, пусть сам разберётся в структуре проекта.

На практике это выглядит так: агент запрашивает список файлов в папке компонентов и получает 200+ позиций. Дальше пытается угадать нужные позиции по именам файлов и читает их по одному. Иногда угадывает, иногда открывает не тот файл, читает, понимает что не то, ищет дальше.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.