B2B Engineering Insights & Architectural Teardowns

Автоматизация спецификаций дизайн-системы: Uber устранил дрейф документации через AI-агентов

Когда спецификации компонентов отстают от реализации, команда начинает строить систему на предположениях. В Uber это превратилось в системную проблему масштаба и решилось через агентную автоматизацию.

Проблема проявляется не в момент написания спецификаций, а позже — когда система начинает эволюционировать быстрее, чем документация. В Uber Base дизайн-система обслуживает сотни компонентов, каждый из которых реализуется в семи стеках: от UIKit и SwiftUI до React и SDUI. У каждого компонента — вариативность плотности, платформенные особенности и строгие требования доступности. Спецификация становится единственным источником истины, но ручной процесс её создания не масштабируется: он медленный, зависит от автора и начинает устаревать сразу после первого изменения компонента. В результате инженеры опираются на интерпретации, а не на контракт, отсюда и расхождения и накопление техдолга.

Решение, к которому пришла команда, — это не оптимизация процесса, а его устранение как класса задач. Uber внедрил uSpec — агентную систему, которая генерирует спецификации напрямую из Figma. Ключевой выбор здесь — связать AI-агента с реальным источником данных (дизайн-файлом), а не с его проекцией в виде скриншотов или экспортов. Это снижает вероятность ошибок интерпретации. Второй принципиальный трейд-офф — локальное выполнение пайплайна через Figma Console MCP: ни один артефакт дизайна не покидает инфраструктуру компании. Это ограничивает гибкость интеграций, но критично для безопасности и соответствия внутренним требованиям.

Архитектура решения состоит из двух слоёв. Первый — AI-агент (в Cursor), который отвечает за интерпретацию: он понимает структуру компонента, классифицирует состояния, подбирает accessibility-семантику и сопоставляет токены. Второй — MCP (Model Context Protocol) мост к Figma Desktop, который даёт агенту read-write доступ к данным: дереву компонентов, переменным, стилям и связям между слоями. Агент проходит по иерархии, извлекает реальные значения токенов, определяет композицию через слоты и варианты, после чего заполняет шаблон спецификации прямо в Figma. Каждый раздел спецификации инкапсулирован в отдельный «skill» с жёсткими схемами и валидацией. Например, для screen reader-части агент загружает справочники VoiceOver, TalkBack и ARIA и выбирает значения из API, а не генерирует их эвристически — это критично, потому что ошибка в одном свойстве ломает доступность.

Ключевое инженерное решение — разделение ответственности: AI используется там, где нужна интерпретация, а детерминированные операции (рендеринг, вставка, клонирование структур) выполняются через MCP. Плагины Figma могут извлекать данные, но не способны объяснить, что они значат. Чистый AI, наоборот, склонен к галлюцинациям без жёсткой привязки к источнику. uSpec комбинирует оба подхода, что делает систему устойчивой на масштабе.

Результат — сокращение цикла создания спецификаций с недель до минут и возможность пересобирать документацию при каждом изменении компонента. Это не просто ускорение, а устранение дрейфа: спецификация теперь генерируется из актуального состояния системы. Формальных метрик качества Uber не приводит, но косвенный эффект — снижение расхождений между дизайном и реализацией и высвобождение времени дизайнеров от рутинной документации. Отдельно стоит отметить роль open-source слоя: Figma Console MCP стал инфраструктурным элементом, без которого такой подход был бы невозможен. Это редкий случай, когда стандартизация доступа к инструменту напрямую влияет на архитектуру процессов.

Читать подробнее в блоге Uber (EN)

×

🚀 Deploy the Blocks

Controls: ← → to move, ↑ to rotate, ↓ to drop.
Mobile: use buttons below.