O contexto está se tornando o gargalo no desenvolvimento assistido por IA. Não a capacidade do modelo. Os modelos estão melhorando rápido o suficiente para que frequentemente não sejam a restrição. O que limita a qualidade do código gerado por IA é a qualidade do contexto que esses modelos recebem.

Para fluxos Figma-para-código, o contexto vem em duas formas fundamentalmente diferentes: contexto pixel (screenshots, imagens renderizadas) e contexto estruturado (IR tipado, tokens, relações semânticas). Não são apenas formatos diferentes para a mesma informação. São categorias diferentes de input, com propriedades diferentes, características de perda diferentes e tetos diferentes para o que um agente pode produzir a partir deles.

O setor ainda usa largamente contexto pixel. Isso é um erro. O figmascope exporta contexto estruturado — o input certo desde o início.

O que é contexto pixel

Contexto pixel é qualquer representação rasterizada de um design: um screenshot exportado do Figma, um PNG de "Exportar frame", uma renderização de uma ferramenta de design. É o que você obtém quando aperta Cmd+Shift+4 sobre o seu canvas do Figma.

LLMs com capacidade de visão conseguem processar contexto pixel de forma impressionante. Eles reconhecem padrões de UI, identificam regiões de layout, inferem tipos de componente pela aparência visual e geram código plausível a partir de imagens sozinhas. Se você usou Claude ou GPT-4V para screenshot-para-código, já viu isso. As saídas ficam certas mais frequentemente do que você esperaria.

Mas "parece certo" e "está certo" não são a mesma coisa, e a lacuna entre eles é onde conformidade com design system, fidelidade de token, identidade de componente e reprodutibilidade vivem.

O que é contexto estruturado

Contexto estruturado é uma representação tipada e legível por máquina que preserva a semântica do design: o que cada elemento é, não apenas como ele parece. Inclui:

O IR do figmascope é isso. Cada nó em um JSON por tela tem kind, name, absoluteBoundingBox, children, fills resolvidos para referências de token onde disponíveis, propriedades de auto-layout se aplicável e componentId em instâncias. É a árvore de design tornado explícita.

Contexto pixel diz a um agente como um design parece. Contexto estruturado diz o que um design significa. Um agente de codificação precisa de significado para escrever código, não de aparência. Aparência é para o que são os testes visuais.

O que se perde na direção pixel-para-estruturado

O modo de falha central do contexto pixel é perda irreversível de informação. Quando o Figma renderiza um frame para PNG, ele descarta exatamente a informação que mais importa para geração de código:

A árvore de camadas colapsa. Não há mais "grupo de três itens com gaps de 8px". Há uma região de pixels que sugere um grupo. O agente precisa reconstruir a estrutura de árvore a partir de evidência visual, e a reconstrução é aproximada. Estará errada alguma porcentagem do tempo. Essa porcentagem cresce à medida que os designs ficam mais complexos.

Vínculos de token desaparecem. O fundo laranja que mapeia para color/action/primary se torna #FF6B00. O agente gera um hex hardcoded. Se sua cor mudar algum dia, ou se você suportar modo escuro, ou se precisar auditar uso de tokens, esse valor hardcoded é uma responsabilidade.

Identidade de componente some. Quatro instâncias do mesmo componente de card são quatro retângulos de aparência similar. O agente pode gerar um componente reutilizável ou quatro blocos similares-mas-não-idênticos, dependendo de quanta similaridade estrutural ele inferir. Você quer saída previsível; obtém saída probabilística.

Intenção de layout é ambígua. Isso é uma flex row ou um grid? O espaçamento entre itens é um gap ou uma margin ou padding em cada item? Os pixels não dizem. O agente escolhe. As escolhas diferem entre execuções.

O pipeline Figma → React, com e sem estrutura

Considere o caminho do Figma para React de produção.

Com contexto pixel: Exporte PNG. Cole no Claude. Obtenha JSX. Revise JSX para correção. Note valores hardcoded. Note estrutura de componente errada. Faça prompt para correções. Itere. Eventualmente obtenha algo plausível. Edite à mão para corresponder ao design system. Lance. Próxima tela: repita do zero porque as saídas da execução anterior não se compõem.

Com contexto estruturado: Exporte bundle (um clique, roda no browser). Passe CONTEXT.md + IR de tela para Claude com seu system prompt especificando framework e convenções de design system. Obtenha JSX que usa seus nomes de token, seus nomes de componente, estrutura de layout correta. Revise para correção. Lance. Próxima tela: mesmo bundle, mesmo agente, saídas composáveis porque os inputs são consistentes.

A economia de trabalho é real mas secundária. O ganho primário é composabilidade. Contexto estruturado permite saídas que se compõem entre telas e agentes. Contexto pixel não — a saída de cada tela é uma ilha gerada a partir de um passo de inferência fresco.

Estrutura significa: tipado

Todo nó no IR tem um kind. Isso importa imediatamente. Um nó TEXT gera um elemento de texto. Um FRAME com auto-layout gera um container. Uma INSTANCE de Button/Primary/Large gera uma chamada de componente de botão com os props certos. Um VECTOR gera uma referência a ícone.

O agente não adivinha. Ele mapeia tipos para primitivos de código. O mapeamento é especificado no CONTEXT.md para o framework alvo. "Para nós INSTANCE, use o nome do componente para determinar o componente React. Para FRAME com layoutMode HORIZONTAL, use uma flex row. Para TEXT com estilo typography/heading.lg, use o componente Heading." Essas são regras estilo compilador, não tarefas de inferência.

Estrutura significa: espacial

O absoluteBoundingBox em cada nó dá posição e tamanho no espaço de coordenadas do Figma. Combinado com propriedades de auto-layout — layoutMode, itemSpacing, paddingLeft/Right/Top/Bottom, primaryAxisAlignItems, counterAxisAlignItems — o agente tem tudo que precisa para gerar código de layout correto sem contar pixels.

Os bounding boxes absolutos também permitem ao agente verificar sua saída: se um componente gerado tem dimensões diferentes do que o IR especificou, algo deu errado. Esta é uma propriedade testável do contexto estruturado que não tem equivalente no contexto pixel.

Estrutura significa: ciente de identidade

Quando quatro nós no IR compartilham um componentId, o agente sabe que são instâncias do mesmo componente. Ele gera a definição do componente uma vez, deriva props das variantes nas instâncias e renderiza quatro chamadas. Essa é a saída correta. Não é alcançável a partir de contexto pixel sem engenharia de prompt significativa que essencialmente pede ao agente para re-derivar estrutura que o arquivo de design já tinha.

Referências cruzadas de string funcionam da mesma forma. Quando múltiplos nós de texto referenciam stringRef.key: "action.continue", o agente sabe usar um único lookup de i18n, não três strings hardcoded. A informação de identidade está no IR; o agente apenas a lê.

Estrutura significa: versionável

Arquivos JSON simples são diferençados de forma limpa. Um valor de padding alterado aparece como uma mudança de uma linha no IR por tela. Um token renomeado aparece como um diff de find-replace pelo arquivo de tokens. Uma nova instância de componente aparece como um objeto adicionado no array de children.

Este é o histórico de versão de design que é realmente útil para engenheiros. Não "o design foi atualizado na terça" mas "aqui estão as três propriedades que mudaram entre os exports v2 e v3 desta tela". Você pode colocar isso na descrição do seu PR. Pode rodar verificações automatizadas nisso. Pode usá-lo para auditar se a mudança de código corresponde à mudança de design.

Para onde isso leva: infraestrutura de contexto de design

A categoria de tooling que está se formando aqui não é "export do Figma, mas melhor". É uma nova camada na stack: infraestrutura de contexto de design. O trabalho dessa camada é transformar fontes de design (arquivos Figma, bibliotecas de componentes, sistemas de token) em artefatos estruturados, legíveis por agente e versionados que alimentam a camada de geração de código.

Essa camada fica entre a ferramenta de design e o agente de codificação. Tem responsabilidades que nenhum dos dois lados atualmente possui: gerenciamento de snapshot, extração semântica, resolução de tokens, inventário de componentes, indexação de strings entre telas, versionamento de bundle. Essas são preocupações de infraestrutura, não preocupações da ferramenta de design e não preocupações de LLM.

Tratar isso como infraestrutura significa: é automatizado, é versionado, roda em CI, tem um formato definido, é inspecionável. Da mesma forma que um sistema de build é infraestrutura para código — não o código em si, não o binário alvo, mas o pipeline confiável e reproduzível que converte um no outro.

Honesto: pixels ainda importam

Bundles do figmascope incluem PNGs 2x de cada tela exportada. Não porque o PNG conduz a geração de código, mas porque confirmação visual importa. Um agente deve ser capaz de fazer referência cruzada de sua saída gerada com o PNG. Um desenvolvedor deve ser capaz de olhar a tela sem abrir o Figma. O PNG é uma verificação de sanidade, não uma especificação.

Essa distinção — pixels para confirmação, estrutura para especificação — é o modelo mental certo. Você não elimina o contexto pixel; o rebaixa ao seu papel correto. É o artefato de QA, não o input de build.

Da mesma forma que você não daria a um compilador um screenshot do seu código-fonte: você dá o código-fonte, e usa screenshots para documentação. O arquivo de design é o código-fonte. O bundle é o artefato de compilação. O PNG é a imagem de documentação.

Para onde isso leva para codegen multi-alvo

Contexto estruturado permite um fluxo que o contexto pixel não consegue: um design, múltiplos alvos. O mesmo IR pode alimentar um gerador React/Tailwind, um gerador Jetpack Compose e um gerador SwiftUI. O design subjacente é o mesmo; o contexto específico do alvo (primitivos de framework, convenções de nomenclatura, APIs de layout) vive no CONTEXT.md, que é gerado por alvo.

Esse é codegen multi-alvo que realmente escala. Você exporta um bundle do design. Roda três agentes com três arquivos CONTEXT.md diferentes. Obtém três implementações que são estruturalmente equivalentes porque foram geradas a partir do mesmo IR, não de três passes de inferência separados sobre três screenshots.

O gargalo para esse fluxo não é capacidade do modelo. É qualidade do contexto. Contexto estruturado é o que o torna possível.

Exporte seu bundle de contexto estruturado no app principal do figmascope, depois use-o com Cursor, Claude Code ou Aider para geração de UI multi-alvo e composável.