O Composer do Cursor consegue escrever muito código de UI. O que ele não consegue fazer é ler seu arquivo do Figma. Cole um screenshot e ele adivinha — espaçamento errado, valores de cor inventados, nomes de componentes criados que não correspondem a nada na sua base de código. O problema não é o modelo. É o contexto estruturado ausente.

O figmascope resolve isso. Ele exporta seu arquivo do Figma como um bundle zip: design tokens, árvores de layout por tela, renders de referência 2×, um inventário de componentes e strings de UI — tudo que o agente do Cursor precisa para gerar código preciso em vez de código que apenas parece plausível.

Este guia cobre o pipeline completo: URL do Figma → bundle de contexto → prompt do Cursor → output revisado.

O que está no bundle

Quando o figmascope exporta seu arquivo, o zip contém:

O bundle fica na sua máquina. Nunca é re-enviado para lugar nenhum.

Passo 1: Gerar o bundle

Acesse o figmascope e cole o URL do seu arquivo do Figma no campo de entrada. O exportador roda no seu navegador contra a API REST do Figma — você precisará de um token de acesso pessoal na primeira vez (armazenado no localStorage, nunca enviado aos servidores do figmascope).

Clique em Export Agent Context. A página processa cada frame, resolve tokens, constrói a IR e depois baixa context-bundle.zip para a sua máquina.

Passo 2: Descompactar no seu projeto

Coloque o bundle onde o Cursor possa vê-lo — um diretório design/ na raiz do seu repositório é o padrão mais limpo.

# da raiz do seu projeto
unzip ~/Downloads/context-bundle.zip -d ./design/

# verifique a estrutura
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Adicione design/ ao .gitignore se não quiser commitar o bundle. Ou commite — é determinístico; o mesmo arquivo do Figma no mesmo estado sempre produz o mesmo bundle, então diffs são significativos.

Passo 3: Adicionar um snippet .cursorrules

O Cursor lê o .cursorrules na raiz do repositório e o prepend a cada contexto de chat. É aqui que você conecta o agente ao bundle.

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

Esse único bloco evita as três fontes de desvio mais comuns: cores inventadas, strings hardcoded e adivinhação de layout a partir do screenshot.

Passo 4: Abrir o Cursor Composer e implementar uma tela

Abra o Composer (Cmd+I no macOS). Fixe os arquivos antes de prompting: clique no ícone de clipe e adicione design/CONTEXT.md, design/tokens.json e design/screens/home.json. Depois faça o prompt:

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.

O Cursor lerá os arquivos fixados, mapeará os nós da IR para os primitivos do seu framework e gerará a implementação. O output é referenciado por tokens — se você inspecionar o código gerado, cada valor de espaçamento deve rastrear de volta a uma chave em tokens.json.

Passo 5: Revisar e iterar

Abra design/screens/home.png ao lado do output renderizado. O PNG é um export 2× do Figma — mostra exatamente como o design deve parecer. Diferenças são significativas: elas apontam para lacunas no mapeamento da IR ou valores de tokens que não foram aplicados.

Problemas comuns e prompts de acompanhamento:

Desvio de tokens — o agente usou um hex hardcoded em vez de um token:

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.

Componente ausente — a IR referencia um ID de componente que o agente não resolveu:

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.

Layout errado — espaçamento ou alinhamento não corresponde ao 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.

O que funciona, o que não funciona

Funciona bem: telas planas com layouts em stack, espaçamento e cor baseados em tokens, texto com refs de string, padrões simples de card e lista. O Cursor lida bem com esses casos quando a IR está no contexto — ele para de adivinhar e começa a mapear.

Funciona menos bem: overlays complexos com posicionamento absoluto (o Cursor às vezes interpreta erroneamente as coordenadas de offset), preenchimentos de gradiente (sinalizados como avisos em _meta.json — o Cursor vai aproximar) e ícones vetoriais (a IR armazena apenas um ID de referência, não dados de caminho).

Somente screenshot vs. bundle: usar apenas screenshot é mais rápido para começar, mas não é determinístico. Cada sessão começa do zero. O modelo pode acertar o espaçamento uma vez e errar no próximo turno. O bundle é referenciável em toda a sessão — o Cursor pode verificar seu próprio output contra o arquivo de tokens a qualquer momento sem re-upload de nada.

Dica: verifique os avisos do _meta.json antes de prompting

Antes do seu primeiro prompt de implementação, leia design/_meta.json. O array warnings lista tudo que o exportador não conseguiu resolver completamente: preenchimentos de gradiente, mapeamentos de tokens ausentes, frames com imagens embutidas. Adicione uma nota sobre eles ao seu prompt para que o agente não tente implementá-los e silenciosamente volte a usar valores hardcoded.

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

Se o output mostrar "gradientFill: not fully supported" em um nó específico, diga ao Cursor para pular o background desse nó e deixar um comentário // TODO: gradient.

Resumo

O fluxo de trabalho é: exporte uma vez, referencie em todo lugar. O bundle é uma spec estável e legível por máquina que o Cursor pode consultar em múltiplos turnos sem reprocessar o design. Você obtém código preciso em tokens, referenciado em strings e correto em layout em vez de uma aproximação de screenshot — e quando algo deriva, você pode apontar o agente de volta à fonte de verdade em uma linha.

Execute isso você mesmo no figmascope.dev — cole seu URL do Figma, clique em Export Agent Context e descompacte o bundle no seu workspace do Cursor em menos de dois minutos.