O AI do Cursor consegue escrever muito código de UI. O que ele não consegue fazer é ler seu arquivo do Figma. Você cola uma captura de tela e ele adivinha — espaçamento errado, valores de cor incorretos, nomes de componentes inventados. O problema não é o modelo. É o contexto estruturado que está faltando.

O figmascope preenche essa lacuna. Ele exporta um arquivo do Figma como um bundle zip — tokens de design, árvores de layout por tela, renders de referência, inventário de componentes, strings de UI — tudo que um modelo de linguagem precisa para gerar código preciso em vez de código apenas plausível. O app principal roda inteiramente no seu navegador, sem backend ou upload necessário.

Esta página percorre o workflow completo, do URL do Figma até a geração de código no Cursor. Se você usa Claude Code em vez do Cursor, veja Figma para Claude Code para o workflow específico do Claude. Para uma visão mais ampla do que torna um handoff pronto para agentes, veja AI Design Handoff.

O que está no bundle de contexto

Quando você executa o figmascope em um arquivo do Figma, obtém um .zip contendo:

Nada é enviado para servidores. Seu Personal Access Token fica apenas na memória do navegador e é enviado somente para api.figma.com. O zip é montado no lado do cliente e entregue para download pelo seu navegador.

Passo 1 — Obtenha um Personal Access Token do Figma

Acesse Figma → Configurações da Conta → Personal Access Tokens e crie um token com o escopo File content: read-only. Esse é o mínimo necessário.

O token nunca sai da sua sessão no navegador; o figmascope o envia no cabeçalho X-Figma-Token nas requisições para api.figma.com e em nenhum outro lugar. Veja PAT security and figmascope para o modelo de ameaças completo.

Passo 2 — Exporte o bundle de contexto

  1. Abra figmascope.dev no seu navegador.
  2. Cole o URL do arquivo do Figma (ex.: https://www.figma.com/file/ABC123/MyDesign).
  3. Cole seu Personal Access Token.
  4. Clique em Export Context Bundle.
  5. Um arquivo figmascope-<fileKey>.zip será baixado para sua máquina.

Descompacte-o no seu projeto. Um local recomendado é uma pasta design/ na raiz do repositório:

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

Passo 3 — Abra o projeto no Cursor

Abra sua pasta de projeto no Cursor normalmente. O diretório design/ agora faz parte do workspace e o indexador do Cursor o incluirá.

Antes de enviar o prompt para o modelo, leia design/CONTEXT.md você mesmo uma vez. Ele informa quais frames foram exportados, qual é o esquema de nomenclatura dos tokens e lista quaisquer avisos emitidos durante a exportação (ex.: layout-mode-none-inferred para frames onde o Figma não reportou auto-layout). Esses avisos são os mesmos que seu agente encontrará.

Passo 4 — Escreva um prompt eficaz para o Cursor

O ponto de partida mais simples é um prompt de referência que você pode colar no 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).

O Composer do Cursor seguirá as restrições do CONTEXT.md, consultará a árvore de layout em Home.json, buscará espaçamentos de tokens.json e produzirá código que corresponde ao seu sistema de design — em vez de aproximá-lo.

O modelo não conhece o seu design. Ele conhece o que você fornece. JSON estruturado supera uma captura de tela sempre.

Passo 5 — Mapeie os tokens para a configuração do seu framework

O tokens.json exportado usa uma estrutura aninhada inspirada no 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" }
    }
  }
}

Para Tailwind, peça ao Cursor para gerar um bloco theme.extend no tailwind.config.js diretamente de tokens.json. Veja Design Token Export para Agentes de IA para uma análise aprofundada do formato de tokens e inferência por frequência. A estrutura de tokens é plana o suficiente para percorrer com um único script Node se você quiser automatizar:

// 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 };

Passo 6 — Lide com projetos com múltiplas telas

Cada frame do seu arquivo do Figma se torna um screens/<NomeDoFrame>.json e um .png correspondente. Para um projeto com uma dúzia de telas, trabalhe de forma incremental. O Cursor Composer lida bem com uma tela por sessão; forneça o JSON e o PNG da tela como referências explícitas com @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.

O inventário de componentes (design/components/inventory.json) ajuda a evitar divergência de nomes entre telas — cada componente referenciado em um JSON de tela tem um id e name canônicos no inventário. Se você estiver gerando uma biblioteca de componentes compartilhada, use esses nomes como fonte da verdade.

Como a IR fica na prática

O JSON por tela usa uma estrutura de nós recursiva. Um exemplo simplificado para um componente de card:

{
  "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" }
    }
  ]
}

As referências de tokens usam strings $ref que correspondem a chaves em tokens.json. O modelo pode resolvê-las sem uma etapa de consulta separada. Veja per-screen IR explained para o esquema completo de nós.

Mantendo o contexto atualizado

Arquivos de design mudam. Um bom hábito: execute o figmascope novamente sempre que o design tiver uma revisão significativa, faça commit da pasta design/ atualizada e anote a versão na descrição do seu PR. O _meta.json inclui um timestamp e o campo lastModified do arquivo do Figma, para que você possa verificar quando o bundle foi gerado pela última vez em relação a quando o arquivo foi modificado pela última vez.

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

Se warnings não estiver vazio, trate-os antes de passar o contexto para o agente. Avisos comuns: strings-collision (dois nós com o mesmo slug resolvido para a mesma chave) e layout-mode-none-inferred (um container sem auto-layout explícito, onde o figmascope inferiu o layout a partir das posições dos filhos).

Workflows comuns no Cursor

Atualizações baseadas em diff

Quando o design teve uma revisão pequena — digamos, um valor de espaçamento mudou de spacing.4 para spacing.6 no componente de card — você pode pedir ao Cursor para aplicar apenas o delta em vez de regenerar toda a tela:

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.

Isso funciona porque os componentes gerados referenciam nomes de tokens como classes do Tailwind (gap-spacing-4) em vez de valores de pixel brutos. Uma mudança de token é um localizar-e-substituir, não um redesign.

Adicionando uma nova tela a uma base de código existente

Quando você está adicionando a tela N a uma base de código que já tem as telas 1 a N-1 implementadas, o acréscimo principal no prompt é ancorar o agente na biblioteca de componentes existente:

@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.

O inventário de componentes é a ponte entre o nome do componente no design e o nome do arquivo na base de código. Sem ele, o agente inventará caminhos de importação e criará componentes duplicados.

Gerando uma linha de base do sistema de design

Antes de implementar qualquer tela, use o bundle de contexto para gerar uma linha de base do sistema de design: a configuração de tokens, um componente de paleta de cores e os estilos tipográficos base. Isso ancora todas as implementações de telas subsequentes na mesma fundação:

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).

Quando essa linha de base existir, cada implementação de tela pode referenciá-la. O agente não precisará re-derivar cores do design em cada sessão — ele usará as classes já geradas.

Limitações a conhecer desde o início

O bundle de contexto do figmascope captura estrutura estática. Algumas coisas que ele não consegue representar:

O arquivo CONTEXT.md informa quais frames foram excluídos e por quê, para que o agente não tente implementar algo que estava intencionalmente fora do escopo.