Cursor AI умеет писать 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 — Получите Figma Personal Access Token

Перейдите в Figma → Настройки аккаунта → 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 для фреймов без авторазметки). С теми же предупреждениями столкнётся и ваш агент.

Шаг 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 (два узла с одинаковым slug разрешились в один ключ) и layout-mode-none-inferred (контейнер без явной авторазметки, где 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 указывает, какие фреймы были исключены и почему, чтобы агент не пытался реализовать то, что намеренно вынесено за рамки.