Контекст становится узким местом в AI-assisted разработке. Не возможности модели. Модели улучшаются достаточно быстро, чтобы регулярно не быть ограничивающим фактором. Качество AI-сгенерированного кода ограничивается качеством контекста, который получают эти модели.

Для рабочих процессов Figma-to-code контекст существует в двух принципиально разных формах: пиксельный контекст (скриншоты, растровые изображения) и структурированный контекст (типизированный IR, токены, семантические отношения). Это не просто разные форматы для одной и той же информации. Это разные категории ввода, с разными свойствами, разными характеристиками потери информации и разными потолками для того, что агент может из них произвести.

Индустрия всё ещё в основном использует пиксельный контекст. Это ошибка. figmascope экспортирует структурированный контекст — правильный ввод с самого начала.

Что такое пиксельный контекст

Пиксельный контекст — это любое растровое представление дизайна: скриншот, экспортированный из Figma, PNG из «Export frame», рендер из дизайн-инструмента. Это то, что вы получаете, нажав Cmd+Shift+4 над холстом Figma.

Vision-способные LLM могут обрабатывать пиксельный контекст впечатляюще хорошо. Они распознают UI-паттерны, определяют области вёрстки, выводят типы компонентов из визуального вида и генерируют правдоподобный код только из изображений. Если вы использовали Claude или GPT-4V для конвертации скриншотов в код, вы это видели. Результаты выглядят правильно чаще, чем можно ожидать.

Но «выглядит правильно» и «является правильным» — не одно и то же, и в разрыве между ними живут соответствие дизайн-системе, точность токенов, идентичность компонентов и воспроизводимость.

Что такое структурированный контекст

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

IR figmascope — это именно это. Каждый узел в попэкранном JSON имеет kind, name, absoluteBoundingBox, children, заливки, разрешённые в ссылки на токены там, где это возможно, свойства auto-layout при наличии, и componentId на экземплярах. Это дерево дизайна, сделанное явным.

Пиксельный контекст говорит агенту, как дизайн выглядит. Структурированный контекст говорит ему, что дизайн означает. Агент кодирования нуждается в значении для написания кода, а не в внешнем виде. Внешний вид — для визуальных тестов.

Что теряется при растеризации

Основной режим отказа пиксельного контекста — необратимая потеря информации. Когда Figma рендерит фрейм в PNG, она отбрасывает именно ту информацию, которая важнее всего для кодогенерации:

Дерево слоёв схлопывается. Больше нет «группы трёх элементов с отступами 8px». Есть область пикселей, предполагающая группу. Агент должен восстановить структуру дерева по визуальным свидетельствам, а восстановление приблизительно. Оно будет неверным в некотором проценте случаев. Этот процент растёт по мере усложнения дизайнов.

Привязки токенов исчезают. Оранжевый фон, отображённый на color/action/primary, становится #FF6B00. Агент генерирует захардкоженный hex. Если ваш цвет когда-нибудь изменится, или если вы поддерживаете тёмный режим, или если вам нужно проверить использование токенов — это захардкоженное значение является обязательством.

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

Вёрсточное намерение неоднозначно. Это flex-строка или сетка? Отступ между элементами — это gap, margin или padding каждого элемента? Пиксели не говорят. Агент выбирает. Выбор меняется между запусками.

Пайплайн Figma → React с структурой и без

Рассмотрим путь от Figma до продакшн React.

С пиксельным контекстом: Экспортировать PNG. Вставить в Claude. Получить JSX. Проверить JSX на корректность. Заметить захардкоженные значения. Заметить неверную структуру компонента. Промптить для корректировок. Итерировать. В итоге получить что-то правдоподобное. Отредактировать вручную для соответствия дизайн-системе. Отгрузить. Следующий экран: повторить с нуля, потому что выводы предыдущего запуска не компонуются.

С структурированным контекстом: Экспортировать бандл (один клик, работает в браузере). Передать CONTEXT.md + IR экрана в Claude с системным промптом, указывающим фреймворк и конвенции дизайн-системы. Получить JSX, использующий ваши имена токенов, имена компонентов, корректную структуру вёрстки. Проверить корректность. Отгрузить. Следующий экран: тот же бандл, тот же агент, компонуемые выводы, потому что входные данные согласованны.

Экономия работы реальна, но вторична. Основной выигрыш — компонуемость. Структурированный контекст обеспечивает выводы, компонуемые между экранами и агентами. Пиксельный контекст нет — вывод каждого экрана является островом, сгенерированным из нового прохода вывода.

Структура означает: типизированность

Каждый узел в IR имеет kind. Это важно немедленно. Узел TEXT генерирует текстовый элемент. FRAME с auto-layout генерирует контейнер. INSTANCE компонента Button/Primary/Large генерирует вызов компонента кнопки с правильными пропсами. VECTOR генерирует ссылку на иконку.

Агент не угадывает. Он отображает виды на кодовые примитивы. Маппинг задан в CONTEXT.md для целевого фреймворка. «Для узлов INSTANCE используйте имя компонента для определения React-компонента. Для FRAME с layoutMode HORIZONTAL используйте flex row. Для TEXT со стилем typography/heading.lg используйте компонент Heading.» Это правила компилятора, а не задачи вывода.

Структура означает: пространственность

absoluteBoundingBox на каждом узле даёт позицию и размер в пространстве координат Figma. В сочетании со свойствами auto-layout — layoutMode, itemSpacing, paddingLeft/Right/Top/Bottom, primaryAxisAlignItems, counterAxisAlignItems — у агента есть всё необходимое для генерации корректного кода вёрстки без подсчёта пикселей.

Абсолютные ограничивающие прямоугольники также позволяют агенту верифицировать вывод: если сгенерированный компонент имеет другие размеры, чем указано в IR, что-то пошло не так. Это проверяемое свойство структурированного контекста, у которого нет эквивалента в пиксельном.

Структура означает: осведомлённость об идентичности

Когда четыре узла в IR разделяют componentId, агент знает, что они являются экземплярами одного и того же компонента. Он генерирует определение компонента один раз, выводит пропсы из вариантов в экземплярах и рендерит четыре вызова. Это корректный вывод. Его нельзя достичь из пиксельного контекста без значительного prompt engineering, который по сути просит агента переделать вывод структуры, которую файл дизайна уже имел.

Перекрёстные ссылки строк работают так же. Когда несколько текстовых узлов ссылаются на stringRef.key: "action.continue", агент знает использовать единый i18n-поиск, а не три захардкоженные строки. Информация идентичности есть в IR; агент просто её читает.

Структура означает: пригодность для версионного контроля

Обычные JSON-файлы отлично поддаются diff. Изменённое значение padding появляется как однострочное изменение в попэкранном IR. Переименованный токен появляется как find-replace diff в файле токенов. Новый экземпляр компонента появляется как добавленный объект в массиве дочерних элементов.

Это история версий дизайна, реально полезная для инженеров. Не «дизайн был обновлён во вторник», а «вот три свойства, изменившихся между экспортами v2 и v3 этого экрана». Это можно поместить в описание PR. Можно запускать на это автоматизированные проверки. Можно использовать для аудита того, соответствует ли изменение кода изменению дизайна.

Куда это ведёт: инфраструктура дизайн-контекста

Формирующаяся здесь категория инструментов — не «экспорт Figma, но лучше». Это новый слой в стеке: инфраструктура дизайн-контекста. Задача этого слоя — преобразовывать источник дизайна (файлы Figma, библиотеки компонентов, токенные системы) в структурированные, читаемые агентом, версионируемые артефакты, питающие слой кодогенерации.

Этот слой находится между дизайн-инструментом и агентом кодирования. У него есть обязанности, которые ни одна из сторон сейчас не берёт на себя: управление снимками, семантическое извлечение, разрешение токенов, инвентарь компонентов, межэкранная индексация строк, версионирование бандлов. Это инфраструктурные проблемы, не проблемы дизайн-инструмента и не проблемы LLM.

Отношение к этому как к инфраструктуре означает: автоматизировано, версионировано, работает в CI, имеет определённый формат, инспектируемо. Так же, как система сборки является инфраструктурой для кода — не сам код, не целевой бинарник, а надёжный, воспроизводимый пайплайн, преобразующий одно в другое.

Честно: пиксели всё ещё важны

Бандлы figmascope включают 2x PNG каждого экспортированного экрана. Не потому что PNG управляет кодогенерацией, а потому что визуальное подтверждение важно. Агент должен уметь сверять свой сгенерированный вывод с PNG. Разработчик должен уметь видеть экран без открытия Figma. PNG — это санитарная проверка, а не спецификация.

Это различие — пиксели для подтверждения, структура для спецификации — правильная ментальная модель. Вы не устраняете пиксельный контекст; вы понижаете его до правильной роли. Это QA-артефакт, а не входные данные сборки.

Так же, как вы не давали бы компилятору скриншот вашего исходного кода: вы даёте ему исходник, а скриншоты используете для документации. Файл дизайна — это исходник. Бандл — это артефакт компиляции. PNG — это изображение документации.

Куда это ведёт для многоцелевой кодогенерации

Структурированный контекст позволяет рабочий процесс, который пиксельный контекст не может: один дизайн — несколько целей. Тот же IR может питать генератор React/Tailwind, генератор Jetpack Compose и генератор SwiftUI. Базовый дизайн тот же; специфичный для цели контекст (примитивы фреймворка, конвенции именования, API вёрстки) живёт в CONTEXT.md, который генерируется для каждой цели.

Это многоцелевая кодогенерация, которая реально масштабируется. Вы экспортируете один бандл из дизайна. Запускаете трёх агентов с тремя разными файлами CONTEXT.md. Получаете три реализации, структурно эквивалентные, потому что они были сгенерированы из одного IR, а не из трёх отдельных проходов вывода по трём скриншотам.

Узкое место для этого рабочего процесса — не возможности модели. Это качество контекста. Структурированный контекст — это то, что делает его возможным.

Экспортируйте свой структурированный контекстный бандл из основного приложения figmascope, затем используйте его с Cursor, Claude Code или Aider для многоцелевой, компонуемой генерации UI.