Prompts com screenshots têm um limite. Você cola o design, o modelo faz uma aproximação plausível, você corrige, no próximo turno ele deriva novamente. Nada está ancorado. O modelo não tem uma fonte de verdade para se verificar entre os turnos.

O bundle de contexto do figmascope muda o contrato. Em vez de uma referência de pixels que o modelo precisa interpretar a cada vez, você obtém um conjunto estruturado e referenciável de arquivos — design tokens, IR de layout, inventário de componentes, strings de UI — que permanecem na sessão e se mantêm consistentes. O Claude Code pode lê-los, implementar a partir deles e verificar seu próprio output contra eles sob demanda.

Este guia cobre o pipeline completo, do export do bundle até a implementação revisada e verificada por tokens.

O que torna isso determinístico

Três coisas tornam o bundle referenciável em vez de interpretável:

  1. Os tokens são tipados e mapeados. O tokens.json mapeia nomes semânticos (spacing.16, color.7f5cfe) para valores exatos. O modelo pode verificar seu output contra o arquivo sem reprocessar o design.
  2. A IR é uma árvore, não pixels. O screens/home.json descreve o layout em termos de nós stack/overlay/absolute/leaf — a mesma abstração que o alvo de implementação (Compose, React, etc.) usa. Não há etapa de interpretação visual.
  3. O bundle é estável entre turnos. Uma vez no repositório, cada prompt na sessão pode referenciar os mesmos arquivos. O desvio de tokens é detectável: peça ao modelo para comparar seu output com o tokens.json e ele pode fazê-lo mecanicamente.

Passo 1: Gerar o bundle

Abra o figmascope.dev no seu navegador. Cole o URL do seu arquivo do Figma. O exportador roda no cliente usando a API REST do Figma — seu token de acesso pessoal do Figma é armazenado no localStorage e nunca é enviado aos servidores do figmascope.

Clique em Export Agent Context. A página exporta frames de nível superior, resolve design tokens, constrói a IR e baixa context-bundle.zip.

Passo 2: Descompactar no seu projeto

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

# confirme o que você tem
find design/ -type f | sort
# design/CONTEXT.md
# design/_meta.json
# design/components/inventory.json
# design/screens/home.json
# design/screens/home.png
# design/screens/settings.json
# design/screens/settings.png
# design/strings.json
# design/tokens.json

O nome do diretório não importa — design/ é apenas uma convenção. O que importa é que o Claude Code possa ler os arquivos do diretório de trabalho.

Passo 3: Iniciar o Claude Code no seu repositório

cd my-app
claude

O Claude Code inicia na raiz do seu repositório com acesso total a arquivos. Ele pode ler, escrever e referenciar qualquer arquivo na árvore durante toda a sessão — essa é a capacidade chave que faz o padrão de bundle funcionar.

Passo 4: Orientar o agente

Comece com um prompt de leitura antes de qualquer implementação. Isso carrega a spec no contexto da sessão e permite verificar se o export está correto antes de escrever qualquer código.

Read ./design/CONTEXT.md and tell me:
1. What target framework is this bundle for?
2. What token files does it reference?
3. Are there any warnings I should know about before implementing?

O Claude reportará o alvo (Jetpack Compose por padrão), a fonte de tokens e quaisquer avisos do cabeçalho do CONTEXT.md — preenchimentos de gradiente, mapeamentos de tokens ausentes, efeitos não suportados. Você os detecta agora, não depois de gerar 200 linhas de código.

Prossiga com uma verificação rápida de tokens:

List the top 10 color tokens from ./design/tokens.json.
Then list the spacing tokens.

Isso confirma que o arquivo de tokens foi analisado corretamente e lhe dá um modelo mental da paleta antes da implementação.

Passo 5: Implementar uma tela

Agora o prompt de implementação. Seja explícito sobre quais arquivos são autoritativos para quais decisões:

Implement ./design/screens/home.json as a Jetpack Compose screen.

Rules:
- CONTEXT.md constraints apply. Read it if you haven't already.
- All spacing, color, and radius values must come from ./design/tokens.json.
  Map token keys to the appropriate Compose primitives (e.g. spacing.16 → 16.dp).
- UI strings must use keys from ./design/strings.json via stringResource().
  Fall back to the "fallback" field value if no resource ID is available yet.
- The IR node kinds map as follows:
    stack (axis:vertical)   → Column
    stack (axis:horizontal) → Row
    overlay                 → Box
    absolute                → Box with Modifier.offset
    leaf (text)             → Text with TextStyle
    leaf (rectangle)        → Box with Modifier.background
- Do not invent any value not present in the token or IR files.
  If something is missing, leave a TODO comment with the token key you expected.

O Claude Code lerá a IR, percorrerá a árvore de nós, mapeará cada nó para seu primitivo Compose e buscará valores de tokens por chave. O output é rastreável: cada valor .dp deve corresponder a um token de espaçamento, cada Color(0xFF...) deve corresponder a um token de cor.

Passo 6: Detectar e corrigir desvio de tokens

Após o primeiro passo de implementação, execute uma verificação de desvio antes de revisar visualmente. Esta é a vantagem chave do bundle sobre prompts de screenshot — você pode pedir ao modelo para verificar seu próprio output mecanicamente.

Compare every color value in the generated HomeScreen.kt against ./design/tokens.json.
List any hex values in the output that don't correspond to a color token key.
For each one, identify the correct token and replace the hardcoded value.

Faça o mesmo para espaçamento:

Compare every .dp value in HomeScreen.kt against the spacing tokens in ./design/tokens.json.
Flag any value that doesn't match a spacing token. Replace with the correct token reference.

Esse loop — implementar, verificar desvio, corrigir — converge rápido. Após a segunda ou terceira passagem, o output está totalmente referenciado por tokens.

Dica: inclua avisos do _meta.json no seu primeiro prompt

O design/_meta.json contém um array warnings. São coisas que o exportador não conseguiu resolver completamente: preenchimentos de gradiente, imagens embutidas, efeitos sem equivalente em token. Leia-os antes de implementar:

cat design/_meta.json

Se o output incluir algo como:

{
  "warnings": [
    "node 'hero-background': gradientFill not fully supported — background fill omitted",
    "node 'avatar': imageFill — reference only, no pixel data"
  ]
}

Adicione-os explicitamente ao seu prompt de implementação: "Skip the hero background fill and leave a // TODO: gradient. For the avatar node, use a placeholder AsyncImage with a grey background."

Isso evita que o Claude aproxime silenciosamente — ele fará o que você mandou em vez de adivinhar.

Por que isso supera prompts de screenshot

Seguro em múltiplos turnos. O arquivo de tokens e a IR não mudam entre turnos. Você pode perguntar "você usou o espaçamento correto para o padding do card?" no turno 12 e obter uma resposta precisa, porque a fonte de verdade ainda está no disco.

Amigável a diffs. Quando você re-exporta após uma mudança de design, o novo bundle produz um diff em relação ao anterior. Você pode pedir ao Claude para revisar o diff e atualizar apenas os componentes afetados — nenhuma reimplementação completa necessária.

Sem re-upload. O bundle vive no seu repositório. Você não cola screenshots de novo para cada nova tela. Cada nova tela é apenas design/screens/<nome>.json — mais um arquivo para referenciar no próximo prompt.

Honesto sobre lacunas. O CONTEXT.md e o _meta.json listam explicitamente o que o bundle não cobre. Prompts de screenshot não têm equivalente — o modelo simplesmente adivinha pelas lacunas.

O app principal do figmascope cuida do export no seu navegador — cole seu URL do Figma, exporte o bundle e você está pronto para rodar o Claude Code contra uma spec determinística.