Composer в Cursor умеет писать много UI-кода. Вот чего он не умеет — читать ваш Figma-файл. Вставьте скриншот, и он угадывает: неверные отступы, придуманные значения цветов, выдуманные имена компонентов, которые ни с чем в вашей кодовой базе не совпадают. Проблема не в модели. Проблема в отсутствии структурированного контекста.

figmascope решает это. Он экспортирует ваш Figma-файл в виде zip-бандла: токены дизайна, деревья макетов для каждого экрана, референсные рендеры в 2×, инвентарь компонентов и UI-строки — всё, что нужно агенту Cursor для генерации точного кода, а не правдоподобно выглядящего кода.

Это руководство охватывает полный пайплайн: URL Figma → контекстный бандл → промпт Cursor → проверенный вывод.

Что в бандле

Когда figmascope экспортирует ваш файл, zip содержит:

Бандл остаётся на вашей машине. Он никуда не загружается повторно.

Шаг 1: Генерация бандла

Зайдите на figmascope и вставьте URL вашего Figma-файла в поле ввода. Экспортёр работает в браузере через Figma REST API — вам понадобится личный токен доступа в первый раз (хранится в localStorage, никогда не отправляется на серверы figmascope).

Нажмите Export Agent Context. Страница обрабатывает каждый фрейм, разрешает токены, строит IR, затем скачивает context-bundle.zip на ваш компьютер.

Если в вашем файле много фреймов, включаются только фреймы верхнего уровня, которые не являются компонентами или миниатюрами. _meta.json показывает точно, какие фреймы были экспортированы и все предупреждения (градиентные заливки, неподдерживаемые эффекты).

Шаг 2: Распаковка в ваш проект

Поместите бандл туда, где Cursor сможет его видеть — директория design/ в корне репозитория — наиболее чистый паттерн.

# из корня проекта
unzip ~/Downloads/context-bundle.zip -d ./design/

# проверьте структуру
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Добавьте design/ в .gitignore, если не хотите коммитить бандл. Или закоммитьте его — он детерминирован; один и тот же Figma-файл в одном и том же состоянии всегда производит одинаковый бандл, так что диффы осмысленны.

Шаг 3: Добавление сниппета .cursorrules

Cursor читает .cursorrules в корне репозитория и добавляет его в начало каждого контекста чата. Здесь вы подключаете агента к бандлу.

# .cursorrules

When building UI screens:
1. Read ./design/CONTEXT.md first. It specifies the target framework and constraints.
2. Use tokens from ./design/tokens.json for all spacing, color, radius, and typography values.
3. Reference ./design/screens/<name>.json for layout structure and node hierarchy.
4. Match ./design/screens/<name>.png for visual confirmation — use it as a sanity check, not the source of truth.
5. Use string keys from ./design/strings.json rather than hardcoding UI copy.
6. Do not invent token values. If a value isn't in tokens.json, flag it.

Этот единственный блок предотвращает три наиболее распространённых источника дрейфа: придуманные цвета, хардкодные строки и угадывание макета по скриншоту.

Шаг 4: Открытие Cursor Composer и реализация экрана

Откройте Composer (Cmd+I на macOS). Закрепите файлы перед промптом: нажмите значок скрепки и добавьте design/CONTEXT.md, design/tokens.json и design/screens/home.json. Затем промпт:

Implement the home screen from ./design/screens/home.json.

Constraints:
- Target framework and component conventions are in ./design/CONTEXT.md
- All spacing, color, and radius values must come from ./design/tokens.json
- UI strings must use keys from ./design/strings.json
- The root node is a stack (vertical). Children are declared in order in the JSON.
- Do not invent any values not present in the token or IR files.

Cursor прочитает закреплённые файлы, сопоставит IR-узлы с примитивами вашего фреймворка и сгенерирует реализацию. Вывод ссылается на токены — если вы проверяете сгенерированный код, каждое значение отступа должно прослеживаться до ключа в tokens.json.

Шаг 5: Проверка и итерация

Откройте design/screens/home.png рядом с отрендеренным выводом. PNG — это экспорт в 2× из Figma — он показывает точно, как должен выглядеть дизайн. Различия осмысленны: они указывают на пробелы в маппинге IR или токены, которые не были применены.

Распространённые проблемы и последующие промпты:

Дрейф токенов — агент использовал хардкодный hex вместо токена:

Compare every color value in the generated component against ./design/tokens.json.
List any colors that don't match a token key. Replace them with the correct token reference.

Отсутствующий компонент — IR ссылается на ID компонента, который агент не разрешил:

The IR references componentId "btn-primary-01". Check ./design/components/inventory.json
for its name and type, then implement a placeholder with that name and the correct token values.

Неверный макет — отступы или выравнивание не совпадают с PNG:

The vertical gap between the header and the card list should be spacing.24 from tokens.json (24dp).
Your output uses 16px. Fix it.

Что работает, что нет

Работает хорошо: плоские экраны со stack-макетами, отступы и цвета на основе токенов, текст со ссылками на строки, простые паттерны карточек и списков. Cursor справляется с этим хорошо, как только IR находится в контексте — он перестаёт угадывать и начинает маппировать.

Работает хуже: сложные overlay с абсолютным позиционированием (Cursor иногда неверно читает координаты смещений), градиентные заливки (отмечены как предупреждения в _meta.json — Cursor будет аппроксимировать) и векторные иконки (IR хранит только ID ссылки, не данные пути).

Только скриншоты vs. бандл: подход только со скриншотами быстрее в старте, но недетерминирован. Каждая сессия начинается заново. Модель может попасть в отступы один раз и промахнуться в следующем ходу. Бандл ссылаем на протяжении всей сессии — Cursor может в любой момент проверять собственный вывод против файла токенов без повторной загрузки чего-либо.

Совет: проверьте предупреждения _meta.json перед промптом

Перед первым промптом реализации прочитайте design/_meta.json. Массив warnings перечисляет всё, что экспортёр не смог полностью разрешить: градиентные заливки, отсутствующие маппинги токенов, фреймы со встроенными изображениями. Добавьте примечание об этом в промпт, чтобы агент не пытался их реализовать и молча не откатывался к хардкодным значениям.

cat design/_meta.json | python3 -m json.tool | grep -A 20 '"warnings"'

Если вывод показывает "gradientFill: not fully supported" для конкретного узла, скажите Cursor пропустить фон этого узла и оставить вместо этого комментарий // TODO: gradient.

Итог

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

Запустите это самостоятельно на figmascope.dev — вставьте ваш URL Figma, нажмите Export Agent Context и распакуйте бандл в рабочее пространство Cursor за две минуты.