
Это не баг конкретного инструмента. Это закономерность: ИИ не понимает макет как таковой — он понимает формализованный контекст. Если контекст неполный, неточный или устаревший, модель заполняет пробелы правдоподобными, но неверными значениями. Качество выхода определяется качеством входа — и это утверждение стоит разобрать как проверяемое, а не как очевидную истину.
Что ИИ на самом деле «читает» в вашей системе
Когда AI-агент получает задачу сгенерировать интерфейс, он не «смотрит» на Figma-макет так, как смотрит дизайнер. Он ищет машиночитаемые сигналы: именованные переменные, структурированные описания компонентов, явные правила использования. Именно поэтому расширение кода часто оказывается эффективнее, чем его генерация из визуального макета — у текстовой спецификации нет двусмысленности пикселей.
Токены дизайна в этой логике — не просто удобство для дизайнеров. Это словарь, из которого модель выбирает, когда нужно указать цвет или отступ. Если токена нет — модель придумает значение сама. Если токен есть, но не актуализирован после последнего обновления системы — модель будет работать с устаревшим словарём. Семантические метаданные при этом решают другую задачу: они помогают выбрать не просто «похожий» компонент, а подходящий по намерению — например, отличить предупреждающий баннер от информационного даже при схожем визуальном весе.
Atlassian описывает эту идею как «контекстный слой» поверх привычного стека токенов и компонентов. Речь идёт о структурированных файлах контента, которые направляют принятие решений: AI-агент читает их до генерации и выбирает из закрытого набора валидных вариантов, а не конструирует решение с нуля. Термин «context engine» — маркетинговый, но за ним стоит вполне конкретная инфраструктура: markdown-спеки с правилами, токен-слой, аудит-скрипты и механизм синхронизации при обновлениях системы.
Три слоя, без которых генерация работает вхолостую
Практика сводится к трём взаимосвязанным уровням:
Спек-файлы — структурированные markdown-документы, в которых зафиксированы правила использования компонентов, приоритеты, принципы, do’s and don’ts. ИИ читает их перед каждой генерацией. Ключевое отличие от обычной документации: спек-файл пишется с расчётом на то, что его потребителем будет не только человек, но и модель. Это заставляет формулировать правила явно, без допущений «это и так понятно».
Токен-слой — актуальный реестр всех именованных переменных системы. Не просто библиотека в Figma, а синхронизированный источник истины, который обновляется вместе с системой. Когда система шипит изменения, синк-рутина флажкует спек-файлы, требующие обновления — иначе ИИ будет генерировать корректные конструкции из устаревших правил.
Аудит — автоматическая проверка того, что вышло из генерации. Скрипт сканирует прототип, находит хардкод-значения и отсоединённые инстансы, возвращает результат как обратную связь для следующей итерации. Это не финальная QA-проверка, а часть цикла — ИИ ждёт вывода аудита, прежде чем двигаться дальше.
Ниже — сводная таблица, позволяющая оценить зрелость системы с точки зрения машиночитаемости:
Что делает дизайн-систему AI-ready, а что нет
| Элемент | Минимальный уровень | AI-ready уровень | Влияние на генерацию |
|---|---|---|---|
| Токены | Цвета и типографика в Figma | Все категории (отступы, анимация, радиусы) синхронизированы с кодом | Модель выбирает из закрытого множества, не придумывает значения |
| Спек-файлы | PDF-документация или wiki | Структурированный markdown с правилами, контекстом и примерами | Меньше галлюцинаций при выборе компонента |
| Доступность | Финальная QA-проверка | Встроена в компоненты: контраст, фокус, семантика по умолчанию | Модель не генерирует нарушения WCAG по умолчанию |
| Аудит | Ручная ревизия | Автоматический скрипт, интегрированный в цикл генерации | Хардкод и дрейф обнаруживаются до финального handoff |
| Актуальность | Обновляется по запросу | Синк-рутина флажкует устаревшие спеки при каждом релизе | ИИ всегда работает с текущей версией правил |
Доступность — не опция, а часть семантики
Один из недооценённых аспектов AI-ready систем — доступность как инфраструктурное решение, а не как контрольный список. Atlassian приводит конкретный пример: их компонент выбора даты и времени в предыдущей версии автоматически открывал календарь при фокусировке, что создавало путаницу для скринридеров. Компонент был оптимизирован под зрячих пользователей с мышью — типичное дизайнерское смещение, которое порождает трение для всех остальных. Переработанная версия ввела семантическую структуру с правильными лейблами, скорректировала цвета рамок и индикаторов фокуса для достижения контрастности не ниже 3:1.
Почему это важно для AI-ready темы? Потому что когда доступность закодирована в компоненте как умолчание, а не как требование к проверке — модель автоматически воспроизводит корректное поведение при генерации. Доступность становится частью того самого машиночитаемого контекста.
Как ИИ проходит путь от спеки к прототипу
flowchart TD A[Спек-файл + токены] --> B[AI-агент читает контекст] B --> C[Генерация прототипа] C --> D[Аудит-скрипт] D -->|Хардкод / дрейф| E[Флаг + итерация] D -->|Чисто| F[Handoff] E --> B
Цепочка показывает, где именно ломается качество при отсутствии каждого звена: без актуального спек-файла агент генерирует правдоподобное, но неточное; без аудита хардкод-значения уходят в handoff незамеченными; без синхронизации при обновлениях система деградирует постепенно.
Как измерять, а не декларировать
Здесь начинается самая неудобная часть разговора об AI-ready системах. Большинство заявлений о зрелости — декларативные: «мы добавили MCP-сервер», «наша система теперь AI-native». Проверить их без измерений невозможно.
Atlassian сообщает о конкретных результатах после внедрения контекстного слоя: 52% прирост точности в AI-вызовах, 34% ускорение по задачам, специфичным для их дизайн-системы, 26% снижение числа вызовов AI-инструментов и 16% снижение потребления AI-токенов. Это конкретные числа из одного кейса — и именно так к ним и стоит относиться. Переносить их на другие команды с другим стеком и другой системой нельзя без собственного измерения.
Практичная рамка для таких измерений — разделить метрики на output-focused (что производит ИИ) и outcome-focused (что достигает команда благодаря ИИ). Первые проще собирать, вторые — важнее для обоснования инвестиций.
Как измерять эффект AI-ready дизайн-системы
| Метрика | Тип | Базовый ориентир | С AI-ready системой | Риск ошибки |
|---|---|---|---|---|
| Время от требований до одобрённого дизайна | Outcome | 3–5 дней | 1–2 дня | Зависит от сложности задачи |
| Точность компонентов при первой генерации | Output | Не измеряется | 70–80% совпадение с системой | Нужен baseline до внедрения |
| Доля UI, построенного на компонентах системы | Output | 60–75% в зрелых системах | Рост после AI-аудита | Требует автоматического трекинга |
| Количество итераций до финального handoff | Outcome | 5–6 раундов | 2–3 раунда | Субъективная оценка без метрикненадёжна |
| Время на создание нового компонента | Output | 2–4 часа | 30–60 минут | Эффект снижается без чистых токенов |
Перед внедрением AI-инструментов стоит зафиксировать базовые показатели — желательно за 4 недели, чтобы исключить случайные выбросы. Цикл измерений должен быть коротким: 2–4 недели, не год. ИИ-инструменты меняются быстро, и длинные циклы приводят к тому, что измеряешь уже другой инструмент.
Где рекламное обещание опережает реальность
FigmaLint как инструмент аудита умеет находить хардкод-значения, детектировать отсоединённые инстансы, проверять доступность по WCAG, предлагать привязку к токенам и генерировать структурированную документацию для handoff. Это полезная автоматизация — но не магия. Плагин покажет, где проблема, и предложит исправление. Принять или отклонить решение по-прежнему должен человек.
Добавление MCP-сервера или любого другого слоя интеграции не делает систему AI-ready автоматически. Инструмент работает ровно настолько хорошо, насколько хорош материал, который он получает на входе. Если токены неполные, спек-файлы устаревшие, а доступность не встроена в компоненты — MCP-сервер просто быстрее доставит эту неполноту до модели.
Тезис можно сформулировать точно: ИИ не устраняет дизайн-системный долг — он либо масштабирует уже существующую ясность, либо тиражирует уже существующий беспорядок. Реальная AI-ready система отличается от обычной библиотеки компонентов не наличием AI-интеграции, а степенью формализации: актуальные токены, явные правила в машиночитаемом формате, доступность как умолчание, аудит как часть цикла. Дисциплина, которая в итоге служит и людям, и моделям — именно потому, что заставляет команду быть точной в своих решениях.
Источники
- How To Make Your Design System AI-Ready — Smashing Magazine
- Atlassian Design System: Building the context engine for the AI era – Inside Atlassian
- Prove Your AI Investment in Product Design
- GitHub – southleft/figmalint: Analyzes your Figma components for design system compliance, accessibility, and developer readiness with AI-powered insights — crafted with ❤️ by the design systems experts at Southleft.


