AI у Cursor вміє генерувати чималий обсяг UI-коду. Але читати ваш Figma-файл він не може. Ви вставляєте скриншот — і модель вгадує: неправильні відступи, неправильні значення кольорів, вигадані назви компонентів. Проблема не в моделі. Проблема — у відсутності структурованого контексту.

figmascope усуває цей розрив. Він експортує Figma-файл як zip-бандл — дизайн-токени, дерева розмітки для кожного екрану, референсні рендери, інвентар компонентів, UI-рядки — все, що потрібно мовній моделі для генерації точного коду, а не коду «який виглядає правдоподібно». Основний застосунок повністю працює у вашому браузері — без бекенду та завантаження файлів.

Ця стаття описує повний процес від URL у Figma до генерації коду в Cursor. Якщо ви використовуєте Claude Code замість Cursor — дивіться Figma до Claude Code для відповідного процесу. Загальний погляд на те, що робить передання макетів агентам ефективним, є у статті AI Design Handoff.

Що входить до контекстного бандлу

Коли ви запускаєте figmascope для Figma-файлу, ви отримуєте .zip, що містить:

Нічого не завантажується. Ваш Personal Access Token зберігається лише в пам'яті браузера і передається виключно на api.figma.com. Zip збирається на стороні клієнта і передається завантажувачу браузера.

Крок 1 — Отримайте Personal Access Token для Figma

Перейдіть до Figma → Account Settings → Personal Access Tokens і створіть токен з дозволом File content: read-only. Це мінімально необхідний рівень доступу.

Токен ніколи не виходить за межі сесії браузера: figmascope передає його у заголовку X-Figma-Token у запитах до api.figma.com і більше нікуди. Детальна модель загроз — у статті PAT security and figmascope.

Крок 2 — Експортуйте контекстний бандл

  1. Відкрийте figmascope.dev у браузері.
  2. Вставте URL Figma-файлу (наприклад, https://www.figma.com/file/ABC123/MyDesign).
  3. Вставте ваш Personal Access Token.
  4. Натисніть Export Context Bundle.
  5. На вашу машину завантажиться figmascope-<fileKey>.zip.

Розпакуйте його в проєкт. Зручне місце — папка design/ у корені репозиторію:

unzip figmascope-ABC123.zip -d design/
# → design/CONTEXT.md
# → design/tokens.json
# → design/screens/Home.json
# → design/screens/Home.png
# → design/components/inventory.json
# → design/strings.json
# → design/_meta.json

Крок 3 — Відкрийте проєкт у Cursor

Відкрийте папку проєкту в Cursor як зазвичай. Директорія design/ тепер є частиною робочого простору, і індексатор Cursor її включить.

Перед тим як давати запит моделі, прочитайте design/CONTEXT.md самостійно один раз. Там зазначено, які фрейми були експортовані, яка схема іменування токенів використовується, і перелічені попередження, що виникли під час експорту (наприклад, layout-mode-none-inferred для фреймів без auto-layout). Ці ж попередження зустріне і ваш агент.

Крок 4 — Складіть ефективний запит для Cursor

Найпростіша відправна точка — референсний запит, який можна вставити в Cursor Chat:

Read design/CONTEXT.md first, then implement the Home screen.

Use:
- design/tokens.json for all color, spacing, and typography values
- design/screens/Home.json for the layout tree
- design/screens/Home.png as the visual reference
- design/strings.json for all copy (use the resource keys as i18n identifiers)
- design/components/inventory.json to match component names

Target: React + Tailwind CSS. Map token values to Tailwind config entries rather
than hardcoding hex values. Use the component names from inventory.json as
component file names (PascalCase).

Cursor Composer дотримуватиметься обмежень із CONTEXT.md, звертатиметься до дерева розмітки в Home.json, братиме відступи з tokens.json і генеруватиме код, який відповідає вашій дизайн-системі, а не наближено відтворює її.

Модель не знає вашого дизайну. Вона знає те, що ви їй надаєте. Структурований JSON перевершує скриншот кожного разу.

Крок 5 — Зв'яжіть токени з конфігурацією фреймворку

Експортований tokens.json використовує вкладену структуру у стилі W3C:

{
  "color": {
    "surface": { "$value": "#f6f2ea", "$type": "color" },
    "accent":  { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px",  "$type": "dimension" },
    "md": { "$value": "8px",  "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "fontWeight": { "$value": 400,       "$type": "number" }
    }
  }
}

Для Tailwind попросіть Cursor згенерувати блок theme.extend у tailwind.config.js безпосередньо з tokens.json. Детальний огляд формату токенів і виведення за частотою — у статті Експорт дизайн-токенів для AI-агентів. Структура токенів достатньо плоска для обходу одним Node-скриптом, якщо ви хочете автоматизувати цей процес:

// scripts/tokens-to-tailwind.js
const tokens = require('../design/tokens.json');

const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([k, v]) => [k, v.$value])
);
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([k, v]) => [k, v.$value])
);

module.exports = { colors, spacing };

Крок 6 — Робота з багатоекранними проєктами

Кожен фрейм у вашому Figma-файлі перетворюється на screens/<FrameName>.json і відповідний .png. У проєкті з десятком екранів опрацьовуйте їх поступово. Cursor Composer добре справляється з одним екраном за сесію; передавайте JSON та PNG екрану як явні посилання @file:

@design/screens/Settings.json
@design/screens/Settings.png

Implement the Settings screen. Follow the same component structure
as the Home screen already implemented. Use tokens from design/tokens.json.

Інвентар компонентів (design/components/inventory.json) допомагає уникнути розбіжностей у назвах між екранами — кожен компонент, на який є посилання в JSON екрану, має канонічні id та name в інвентарі. Якщо ви генеруєте спільну бібліотеку компонентів, використовуйте ці назви як першоджерело.

Як виглядає IR на практиці

JSON кожного екрану використовує рекурсивну структуру вузлів. Спрощений приклад для компонента картки:

{
  "kind": "stack",
  "name": "ProductCard",
  "direction": "vertical",
  "gap": { "$ref": "spacing.4" },
  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
  "background": { "$ref": "color.surface" },
  "radius": { "$ref": "radius.md" },
  "children": [
    {
      "kind": "leaf",
      "name": "ProductImage",
      "type": "image",
      "width": 320,
      "height": 200
    },
    {
      "kind": "leaf",
      "name": "ProductTitle",
      "type": "text",
      "text": { "$ref": "strings.product.card.title" },
      "style": { "$ref": "typography.heading.sm" }
    }
  ]
}

Посилання на токени використовують рядки $ref, що відповідають ключам у tokens.json. Модель може їх розв'язати без окремого кроку пошуку. Повна схема вузлів — у статті per-screen IR explained.

Підтримання контексту актуальним

Дизайн-файли змінюються. Хороша звичка: повторно запускайте figmascope після кожної значної ревізії дизайну, комітьте оновлену папку design/ та зазначайте версію в описі PR. Файл _meta.json містить мітку часу та поле lastModified Figma-файлу, тож ви можете порівняти, коли бандл було останній раз перегенеровано і коли файл востаннє змінювався.

// _meta.json
{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 12,
  "warnings": []
}

Якщо масив warnings не порожній — усуньте попередження перед передаванням контексту агенту. Найпоширеніші попередження: strings-collision (два вузли з однаковим слагом мають однаковий ключ) та layout-mode-none-inferred (контейнер без явного auto-layout, де figmascope вивів розмітку з позицій дочірніх вузлів).

Типові сценарії роботи з Cursor

Оновлення на основі diff

Коли дизайн зазнав незначної ревізії — наприклад, значення відступу змінилося з spacing.4 на spacing.6 у компоненті картки — ви можете попросити Cursor застосувати лише дельту, а не перегенеровувати весь екран:

The design/tokens.json was updated. spacing.4 is now 24px instead of 16px.
Find all components using spacing.4 and update them. Do not touch anything else.

Це працює тому, що згенеровані компоненти посилаються на назви токенів як на класи Tailwind (gap-spacing-4), а не на «сирі» значення у пікселях. Зміна токена — це пошук-та-заміна, а не переробка дизайну.

Додавання нового екрану до наявної кодової бази

Коли ви додаєте екран N до кодової бази, де вже реалізовані екрани з 1 по N-1, ключовим доповненням до запиту є прив'язка агента до наявної бібліотеки компонентів:

@design/screens/Checkout.json
@design/screens/Checkout.png

Implement the Checkout screen. Reuse existing components from src/components/
wherever the component name matches design/components/inventory.json.
Only create new component files for components not already implemented.
Use design/tokens.json for all token values.

Інвентар компонентів — це міст між назвою компонента в дизайні та іменем файлу в кодовій базі. Без нього агент вигадуватиме шляхи імпорту і створюватиме дублікати компонентів.

Генерація базової дизайн-системи

Перш ніж реалізовувати будь-які екрани, використайте контекстний бандл для генерації базової дизайн-системи: конфігурацію токенів, компонент кольорової палітри та базові стилі типографіки. Це прив'яже всі наступні реалізації екранів до одного фундаменту:

Read design/tokens.json and design/CONTEXT.md.

Generate:
1. tailwind.config.ts theme.extend block from all tokens
2. src/styles/tokens.css with CSS custom properties for the same tokens
3. src/components/foundations/ColorPalette.tsx showing all color tokens
4. src/styles/typography.css with the typography token classes

Name all classes and variables using the token key paths
(e.g. --color-accent, text-ink, bg-surface).

Коли ця база існує, кожна реалізація екрану може на неї посилатися. Агент не буде заново визначати кольори з дизайну в кожній сесії — він використовуватиме вже згенеровані класи.

Обмеження, які варто знати заздалегідь

Контекстний бандл figmascope фіксує статичну структуру. Кілька речей він не може представити:

У файлі CONTEXT.md вказано, які фрейми були виключені і чому, тож агент не намагатиметься реалізувати те, що свідомо виходить за межі охоплення.