Передача дизайна разработчикам-людям была решённой проблемой примерно с 2016 года. Zeplin, InVision Inspect, Avocode, собственный Dev Mode Figma — все они делают одно и то же: дают разработчику веб-интерфейс, где можно кликнуть на узел и прочитать его свойства.

Этот рабочий процесс полностью ломается, когда «разработчик» — это AI-агент.

В этой статье объясняется почему, что агентам на самом деле нужно, и как выстроить рабочий процесс передачи, производящий правильный код, а не приблизительный. Решение — figmascope, браузерный инструмент, экспортирующий структурированный бандл контекста прямо из вашего Figma-файла. Пошаговые рабочие процессы описаны в Figma и Claude Code и Figma и Cursor.

Допущение о передаче дизайна

Каждый инструмент передачи, созданный до 2023 года, исходит из одного неявного допущения: на другом конце находится человек, кликающий, читающий значения, принимающий суждения. Задача инструмента — отображать информацию достаточно наглядно, чтобы квалифицированный разработчик мог работать, не переключаясь постоянно обратно к дизайнеру.

Это допущение встроено в весь UX этих инструментов:

Это не ошибка. Это правильно для рабочего процесса разработчика-человека. Просто это неправильный интерфейс для агента.

Что агентам на самом деле нужно от дизайна

AI-агент, получающий задание по дизайну, нуждается в:

  1. Спецификации, которую он читает до начала работы — ограничения, область применения, соглашения об именовании токенов, примечания к версии. Не подразумеваемые наведением на панель; написанные явно.
  2. Типизированном словаре токенов — не сырые hex-значения и числа в пикселях, а именованные, типизированные токены с их значениями. Агенту нужно знать, что #d96a3a — это color.accent, чтобы генерировать правильные имена классов Tailwind или CSS custom properties.
  3. Полном дереве разметки экрана — иерархия каждого узла, их отношения разметки, размеры, ссылки на токены. Не один узел по запросу; полное дерево в памяти.
  4. Консолидированных строках — весь текстовый контент, нормализованный, с ключами ресурсов. Не разрозненный по отдельным узлам.
  5. Визуальной истине — референсный рендер, с которым агент может сравнивать вывод. Скриншот дизайна в масштабе 2×.
  6. Именах компонентов — канонические идентификаторы, которые должен использовать сгенерированный код, а не выдуманные имена.

Традиционные инструменты передачи не предоставляют ни одного из этого в форме, пригодной для агента. Приложение figmascope производит всё это в одном zip — вставьте URL Figma, получите бандл. Без загрузки, без бэкенда. Формат токенов подробно рассмотрен в Экспорт дизайн-токенов для AI-агентов.

Почему скриншоты не работают

Самое быстрое решение, которое обычно пробуют: экспортируют PNG из Figma и передают агенту с промптом «реализуй этот экран». Агент производит код. Иногда он выглядит близко к нужному. Но:

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

Подробный разбор с примерами читайте в статье why screenshots fail for AI codegen.

Скриншот говорит агенту, как выглядит дизайн. Структурированный контекст говорит ему, чем он является.

Традиционные инструменты передачи: оценка

Zeplin

Основной интерфейс Zeplin — веб-приложение, где разработчики инспектируют дизайны поузлово. В нём есть функция «Styleguide», агрегирующая цвета и типографику из файла — наиболее близкое к экспорту токенов. Он не экспортирует машиночитаемые деревья разметки. Его функция «Connected Components» связывает компоненты Storybook с фреймами Figma, что полезно для документации, но не помогает агенту генерировать новый код.

Figma Dev Mode

Нативный ответ Figma на передачу дизайна. Панель кода генерирует CSS из выбранных узлов и показывает имена Variables, когда они настроены. Хорошо спроектирован для разработчиков-людей. Не поддерживает экспорт на уровне файла, не генерирует деревья разметки, а сниппеты кода — только CSS (не фреймворко-агностичные токены). Требует место Dev Mode.

Avocode

Avocode был приобретён Abstract, а затем прекращён в 2022 году. Упоминается потому, что до сих пор появляется в результатах поиска по запросу «инструменты передачи дизайна» и генерирует некоторый сравнительный трафик. Больше недоступен.

Locofy, Builder.io, Anima

Эти инструменты пытаются генерировать настоящий фреймворковый код (React, Next.js, HTML) напрямую из дизайнов Figma. Они ближе к проблемному пространству — они понимают, что вывод должен быть кодом, а не просто панелью свойств. Но они генерируют код, который вы деплоите, а не контекст, который вы передаёте агенту. Различие важно: нельзя попросить «Реализуй экран Settings, переиспользовав компонент UserAvatar, который я уже создал», когда инструмент сам генерирует код. Можно попросить это у Claude Code или Cursor, когда вы дали им структурированный контекст.

Детальные сравнения читайте в статьях figmascope vs Locofy и figmascope vs Builder.io.

Как выглядит агент-готовая передача дизайна

Агент-готовая передача имеет три свойства, отличающие её от традиционной:

1. Это файловый артефакт, а не UI

Артефакт передачи — это версионированный файл (или набор файлов), живущий в репозитории рядом с кодом. Не общая ссылка, требующая логина. Не панель в веб-приложении. Папка design/ с JSON, PNG и Markdown-файлами.

Это влечёт несколько последствий:

2. Использует типизированные данные, а не отрендеренный текст

Дизайн-токены в tokens.json типизированы — $type: "color", $type: "dimension" — а не просто строки в Markdown-таблице. IR разметки в screens/*.json имеет явные виды узлов (stack, overlay, absolute, leaf) и ссылки на токены через нотацию $ref. Строки в strings.json имеют ключи в точечной нотации, а не просто читаемые людьми метки.

Типизированные данные означают, что агент может рассуждать о них программно: «все узлы с background.$ref == color.surface используют одинаковый фоновый цвет», а не «все узлы, которые выглядят на одном фоне».

3. Включает документ-спецификацию, которую агент читает первой

CONTEXT.md — это контракт между дизайнером и агентом. Он описывает:

В традиционной передаче нет эквивалента. У Dev Mode есть поле «заметки разработчику» для каждого фрейма, но оно заполняется дизайнером произвольно, без структуры. CONTEXT.md генерируется последовательно из фактического содержимого файла.

Рабочий процесс передачи: пошагово

  1. Дизайнер помечает фреймы как готовые — в Figma дизайнер отмечает фреймы, готовые к реализации (соглашение об именовании, метка «ready», что бы ни использовала ваша команда).
  2. Разработчик запускает figmascope — вставьте URL файла и PAT на figmascope.dev, нажмите export, скачайте zip.
  3. Распаковка в design/ — unzip figmascope-<fileKey>.zip -d design/
  4. Коммит design/ в репозиторий — бандл является артефактом передачи. PR включает и бандл дизайна, и реализацию.
  5. Агент реализует — направьте Claude Code или Cursor на design/CONTEXT.md и нужный JSON экрана. Агент генерирует код, использующий значения токенов, имена компонентов и строки из бандла.
  6. Ревью и итерации — разработчик проверяет по screens/*.png, фиксирует пробелы, уточняет промпты.

При изменении дизайна повторяйте с шага 2. Временна́я метка _meta.json показывает, когда бандл был последний раз сгенерирован относительно последнего изменения Figma-файла — простая проверка актуальности.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Что не меняется

Агент-готовая передача не заменяет ревью дизайна. Агент реализует по структурированному контексту; человек по-прежнему проверяет вывод. Интерактивные состояния, анимации, адаптивное поведение, доступность — всё это требует суждений, которые агент может приблизительно реализовать, но не гарантировать по одним лишь статическим данным дизайна.

Структурированный контекст также не заменяет диалог дизайнер-разработчик. Если токен назван неоднозначно, или компонент ведёт себя по-разному на разных контрольных точках по сравнению со статическим фреймом, это требует разговора. CONTEXT.md фиксирует то, что есть в файле; он не выводит, что имел в виду дизайнер для случаев, которые файл не охватывает.

Что меняется: реализация статических экранных макетов из стабильного дизайна переходит от многочасового ручного процесса к рабочему процессу «промпт и ревью». Агент берёт на себя механический перевод; разработчик берёт на себя суждения.

Чеклист: готова ли ваша передача дизайна к работе с AI?

Если большинство из этого отсутствует, агент произведёт код, требующий большей правки, чем если бы начали с нуля при наличии хорошего контекста. Бандл, генерируемый figmascope, удовлетворяет всем пунктам в одном экспорте. Посетите блог figmascope для кейсов и глубоких разборов каждого пункта чеклиста, или смотрите Альтернатива Figma Inspector для прямого сравнения с Dev Mode и плагинами.