Composer у Cursor може написати багато UI-коду. Але він не може читати ваш файл Figma. Вставте скріншот — він здогадується: неправильні відступи, вигадані значення кольорів, назви компонентів, яких немає у вашій кодовій базі. Проблема не в моделі. В ній немає структурованого контексту.
figmascope вирішує це. Він експортує ваш файл Figma як zip-бандл: дизайн-токени, дерева макетів по кожному екрану, рендери 2×, інвентар компонентів та UI-рядки — все, що потрібно агенту Cursor для генерації точного коду, а не правдоподібно виглядаючого коду.
Цей покроковий огляд охоплює повний пайплайн: URL Figma → контекстний бандл → промпт Cursor → перевірений вивід.
Що в бандлі
Коли figmascope експортує ваш файл, zip містить:
CONTEXT.md— специфікація, яку агент читає першою. Перераховує цільовий фреймворк, джерела токенів, обмеження та відомі прогалини.tokens.json— типізовані дизайн-токени: відступи, радіуси границь, кольори, типографіка.screens/<name>.json— покроковий проміжний репрезентатор: вузли stack/overlay/absolute/leaf зі збереженими просторовими зв'язками.screens/<name>.png— референсні рендери 2× для візуальної перевірки.components/inventory.json— id, ім'я та тип компонента.strings.json— UI-рядки з ключами ресурсів у крапковій нотації._meta.json— маніфест збірки: ім'я вихідного файлу, часова мітка експорту, попередження.
Бандл залишається на вашому комп'ютері. Він ніколи нікуди не завантажується повторно.
Крок 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.Що працює, що ні
Працює добре: плоскі екрани з макетами стеків, відступи та кольори на основі токенів, текст з посиланнями на рядки, прості патерни карток та списків. Cursor добре справляється з цим, як тільки IR у контексті — він припиняє здогадуватися та починає маппінг.
Працює гірше: складні абсолютно позиційовані overlay (Cursor іноді неправильно читає координати зміщення), градієнтні заливки (позначені як попередження в _meta.json — Cursor апроксимуватиме), векторні іконки (IR зберігає лише референсний ID, а не дані шляху).
Лише скріншот проти бандлу: використання лише скріншота швидше на початку, але недетерміновано. Кожна сесія починається знову. Модель може точно вгадати відступи один раз і промахнутися в наступному ході. Бандл придатний для посилань протягом усієї сесії — 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 менш ніж за дві хвилини.