Il contesto sta diventando il collo di bottiglia nello sviluppo assistito da AI. Non la capacità del modello. I modelli migliorano abbastanza velocemente da non essere regolarmente il fattore limitante. Ciò che limita la qualità del codice generato da AI è la qualità del contesto che quei modelli ricevono.
Per i flussi di lavoro Figma-to-code, il contesto si presenta in due forme fondamentalmente diverse: contesto pixel (screenshot, immagini renderizzate) e contesto strutturato (IR tipizzato, token, relazioni semantiche). Non sono solo formati diversi per la stessa informazione. Sono categorie diverse di input, con proprietà diverse, caratteristiche di perdita diverse e tetti diversi su ciò che un agente può produrre da loro.
Il settore usa ancora principalmente il contesto pixel. Questo è un errore. figmascope esporta contesto strutturato — l'input corretto sin dall'inizio.
Cos'è il contesto pixel
Il contesto pixel è qualsiasi rappresentazione rasterizzata di un design: uno screenshot esportato da Figma, un PNG da "Esporta frame", un render da uno strumento di design. È ciò che ottieni quando premi Cmd+Shift+4 sul canvas di Figma.
Gli LLM con capacità visive possono elaborare il contesto pixel in modo impressionante. Riconoscono i pattern UI, identificano le regioni di layout, inferiscono i tipi di componente dall'aspetto visivo e generano codice plausibile solo dalle immagini. Se hai usato Claude o GPT-4V per screenshot-to-code, l'hai visto. Gli output sembrano corretti più spesso di quanto ti aspetteresti.
Ma "sembra giusto" e "è giusto" non sono la stessa cosa, e il divario tra loro è dove vivono la conformità al design system, la fedeltà ai token, l'identità dei componenti e la riproducibilità.
Cos'è il contesto strutturato
Il contesto strutturato è una rappresentazione tipizzata e leggibile dalla macchina che preserva la semantica del design: cosa è ogni elemento, non solo come appare. Include:
- Nodi tipizzati: ogni elemento ha un kind (
FRAME,TEXT,INSTANCE,VECTOR) che porta un significato semantico sul suo ruolo nel layout - Valori nominati: i colori sono riferimenti a token, non stringhe hex; le spaziature sono chiavi token, non valori pixel
- Relazioni spaziali: direzione del layout, gap, padding, allineamento — preservati come proprietà, non inferiti dalla posizione
- Link di identità: le istanze di componente portano l'ID del componente sorgente; le stringhe portano chiavi di cross-reference
- Gerarchia: l'intero albero dei nodi, con le relazioni padre-figlio intatte
L'IR di figmascope è questo. Ogni nodo in un JSON per-schermata ha kind, name, absoluteBoundingBox, children, fill risolti in riferimenti a token dove disponibili, proprietà auto-layout se applicabile e componentId sulle istanze. È l'albero del design reso esplicito.
Il contesto pixel dice a un agente come appare un design. Il contesto strutturato gli dice cosa significa un design. Un agente di codifica ha bisogno di significato per scrivere codice, non di aspetto. L'aspetto è per i test visivi.
Cosa si perde nella direzione pixel-verso-strutturato
Il fallimento principale del contesto pixel è la perdita irreversibile di informazioni. Quando Figma renderizza un frame in PNG, scarta esattamente le informazioni più importanti per la generazione di codice:
L'albero dei layer collassa. Non esiste più un "gruppo di tre elementi con gap di 8px". C'è una regione di pixel che suggerisce un gruppo. L'agente deve ricostruire la struttura ad albero dall'evidenza visiva, e la ricostruzione è approssimativa. Sarà sbagliata una certa percentuale delle volte. Quella percentuale cresce con la complessità dei design.
I binding ai token scompaiono. Lo sfondo arancione che mappa su color/action/primary diventa #FF6B00. L'agente genera un hex hardcoded. Se il tuo colore cambia mai, o se supporti la dark mode, o se hai bisogno di verificare l'utilizzo dei token, quel valore hardcoded è un problema.
L'identità del componente è persa. Quattro istanze dello stesso componente card sono quattro rettangoli dall'aspetto simile. L'agente potrebbe generare un componente riutilizzabile o quattro blocchi simili-ma-non-identici, a seconda di quanta somiglianza strutturale inferisce. Vuoi output prevedibile; ottieni output probabilistico.
L'intento di layout è ambiguo. È una flex row o una grid? La spaziatura tra gli elementi è un gap o un margin o padding su ciascun elemento? I pixel non lo dicono. L'agente sceglie. Le scelte differiscono tra le esecuzioni.
La pipeline Figma → React, con e senza struttura
Considera il percorso da Figma a React in produzione.
Con contesto pixel: Esporta PNG. Incolla in Claude. Ottieni JSX. Revisiona JSX per correttezza. Nota valori hardcoded. Nota struttura del componente sbagliata. Chiedi correzioni. Itera. Alla fine ottieni qualcosa di plausibile. Modifica manualmente per corrispondere al design system. Spedisci. Schermata successiva: ricomincia da capo perché gli output dell'esecuzione precedente non si compongono.
Con contesto strutturato: Esporta bundle (un clic, gira nel browser). Passa CONTEXT.md + IR schermata a Claude con il tuo system prompt che specifica framework e convenzioni del design system. Ottieni JSX che usa i tuoi nomi di token, i tuoi nomi di componenti, struttura di layout corretta. Revisiona per correttezza. Spedisci. Schermata successiva: stesso bundle, stesso agente, output componibili perché gli input sono coerenti.
Il risparmio di tempo è reale ma secondario. Il guadagno principale è la componibilità. Il contesto strutturato abilita output che si compongono tra schermate e agenti. Il contesto pixel no — l'output di ogni schermata è un'isola generata da un nuovo passaggio di inferenza.
Struttura significa: tipizzato
Ogni nodo nell'IR ha un kind. Questo ha importanza immediata. Un nodo TEXT genera un elemento di testo. Un FRAME con auto-layout genera un container. Un INSTANCE di Button/Primary/Large genera una chiamata al componente button con le prop corrette. Un VECTOR genera un riferimento a icona.
L'agente non indovina. Mappa i kind ai primitivi del codice. La mappatura è specificata in CONTEXT.md per il framework target. "Per i nodi INSTANCE, usa il nome del componente per determinare il componente React. Per FRAME con layoutMode HORIZONTAL, usa una flex row. Per TEXT con stile typography/heading.lg, usa il componente Heading." Queste sono regole stile compilatore, non compiti di inferenza.
Struttura significa: spaziale
L'absoluteBoundingBox su ogni nodo fornisce posizione e dimensione nello spazio delle coordinate Figma. Combinato con le proprietà auto-layout — layoutMode, itemSpacing, paddingLeft/Right/Top/Bottom, primaryAxisAlignItems, counterAxisAlignItems — l'agente ha tutto ciò di cui ha bisogno per generare codice di layout corretto senza contare pixel.
I bounding box assoluti permettono anche all'agente di verificare il proprio output: se un componente generato ha dimensioni diverse da quelle specificate nell'IR, qualcosa è andato storto. Questa è una proprietà testabile del contesto strutturato che non ha equivalenti nel contesto pixel.
Struttura significa: consapevole dell'identità
Quando quattro nodi nell'IR condividono un componentId, l'agente sa che sono istanze dello stesso componente. Genera la definizione del componente una volta, deriva le prop dalle varianti nelle istanze e renderizza quattro chiamate. Questo è l'output corretto. Non è ottenibile dal contesto pixel senza un significativo prompt engineering che essenzialmente chiede all'agente di ri-derivare la struttura che il file di design aveva già.
I cross-reference delle stringhe funzionano allo stesso modo. Quando più nodi di testo fanno riferimento a stringRef.key: "action.continue", l'agente sa di usare una singola lookup i18n, non tre stringhe hardcoded. Le informazioni di identità sono nell'IR; l'agente le legge soltanto.
Struttura significa: versionabile
I file JSON plain diff in modo pulito. Un valore di padding modificato appare come una modifica su una riga nell'IR per-schermata. Un token rinominato appare come un diff find-replace nel file dei token. Una nuova istanza di componente appare come un oggetto aggiunto nell'array children.
Questa è la cronologia delle versioni del design che è effettivamente utile per gli ingegneri. Non "il design è stato aggiornato martedì" ma "ecco le tre proprietà cambiate tra le esportazioni v2 e v3 di questa schermata". Puoi metterlo nella descrizione della tua PR. Puoi eseguire controlli automatizzati su di esso. Puoi usarlo per verificare se la modifica al codice corrisponde alla modifica al design.
Dove questo porta: infrastruttura di contesto design
La categoria di strumenti che si sta formando qui non è "esportazione Figma, ma migliore". È un nuovo livello nello stack: infrastruttura di contesto design. Il compito di questo livello è trasformare la sorgente del design (file Figma, librerie di componenti, sistemi di token) in artefatti strutturati, leggibili dagli agenti e versionati che alimentano il livello di generazione del codice.
Questo livello si trova tra lo strumento di design e l'agente di codifica. Ha responsabilità che nessuno dei due lati possiede attualmente: gestione degli snapshot, estrazione semantica, risoluzione dei token, inventario dei componenti, indicizzazione delle stringhe cross-screen, versioning del bundle. Queste sono preoccupazioni infrastrutturali, non preoccupazioni degli strumenti di design e non preoccupazioni degli LLM.
Trattarlo come infrastruttura significa: è automatizzato, è versionato, gira nella CI, ha un formato definito, è ispezionabile. Nello stesso modo in cui un sistema di build è infrastruttura per il codice — non il codice stesso, non il binario target, ma la pipeline affidabile e riproducibile che converte l'uno nell'altro.
Onestà: i pixel contano ancora
I bundle di figmascope includono PNG 2x di ogni schermata esportata. Non perché il PNG guidi la generazione del codice, ma perché la conferma visiva è importante. Un agente dovrebbe essere in grado di incrociare il suo output generato con il PNG. Uno sviluppatore dovrebbe poter guardare la schermata senza aprire Figma. Il PNG è un controllo di sanità mentale, non una specifica.
Questa distinzione — pixel per conferma, struttura per specifica — è il modello mentale corretto. Non elimini il contesto pixel; lo degradi al suo ruolo corretto. È l'artefatto QA, non l'input della build.
Nello stesso modo in cui non daresti a un compilatore uno screenshot del tuo codice sorgente: gli dai il sorgente, e usi gli screenshot per la documentazione. Il file di design è il sorgente. Il bundle è l'artefatto di compilazione. Il PNG è l'immagine della documentazione.
Dove questo porta per la generazione multi-target
Il contesto strutturato abilita un flusso di lavoro che il contesto pixel non può: un design, più target. Lo stesso IR può alimentare un generatore React/Tailwind, un generatore Jetpack Compose e un generatore SwiftUI. Il design sottostante è lo stesso; il contesto specifico per target (primitivi del framework, convenzioni di naming, API di layout) vive in CONTEXT.md, che viene generato per target.
Questa è la generazione multi-target che scala davvero. Esporti un bundle dal design. Esegui tre agenti con tre diversi file CONTEXT.md. Ottieni tre implementazioni strutturalmente equivalenti perché sono state generate dallo stesso IR, non da tre passaggi di inferenza separati su tre screenshot.
Il collo di bottiglia per questo flusso di lavoro non è la capacità del modello. È la qualità del contesto. Il contesto strutturato è ciò che lo rende possibile.
Esporta il tuo bundle di contesto strutturato dall'app principale di figmascope, poi usalo con Cursor, Claude Code o Aider per la generazione UI multi-target e componibile.