Kontext se stává úzkým místem ve vývoji s AI asistencí. Nikoli schopnost modelu. Modely se zlepšují dostatečně rychle, že pravidelně nejsou omezením. Co omezuje kvalitu kódu generovaného AI, je kvalita kontextu, který tyto modely dostávají.

Pro pracovní postupy Figma-to-code přichází kontext ve dvou zásadně odlišných formách: pixelový kontext (screenshoty, renderované obrázky) a strukturovaný kontext (typovaný IR, tokeny, sémantické vztahy). To nejsou jen různé formáty pro stejné informace. Jsou to různé kategorie vstupů s různými vlastnostmi, různými charakteristikami ztráty a různými stropy toho, co z nich agent může vyprodukovat.

Průmysl stále z velké části používá pixelový kontext. To je chyba. figmascope exportuje strukturovaný kontext — správný vstup od začátku.

Co je pixelový kontext

Pixelový kontext je jakákoli rastrovaná reprezentace designu: screenshot exportovaný z Figmy, PNG z „Export frame," render z designového nástroje. Je to to, co dostanete, když stisknete Cmd+Shift+4 nad plátnem Figmy.

LLM s podporou vidění mohou zpracovávat pixelový kontext překvapivě dobře. Rozpoznávají vzory UI, identifikují oblasti rozvržení, odvozují typy komponent z vizuálního vzhledu a generují věrohodný kód pouze z obrázků. Pokud jste použili Claude nebo GPT-4V pro screenshot-to-code, viděli jste toto. Výstupy vypadají správně častěji, než byste čekali.

Ale „vypadá správně" a „je správně" nejsou totéž a mezera mezi nimi je místo, kde žijí shoda s designovým systémem, věrnost tokenů, identita komponent a reprodukovatelnost.

Co je strukturovaný kontext

Strukturovaný kontext je typovaná, strojově čitelná reprezentace, která zachovává sémantiku designu: čím každý prvek je, nikoli pouze jak vypadá. Zahrnuje:

IR figmascope je toto. Každý uzel ve screen-specific JSON má kind, name, absoluteBoundingBox, children, výplně rozlišené na reference tokenů kde jsou k dispozici, vlastnosti auto-layoutu pokud jsou aplikovatelné a componentId na instancích. Je to strom designu explicitně vyjádřený.

Pixelový kontext říká agentovi, jak design vypadá. Strukturovaný kontext mu říká, co design znamená. Kodovací agent potřebuje pro psaní kódu smysl, nikoli vzhled. Vzhled je pro vizuální testy.

Co se ztratí přechodem pixel → struktura

Základní vzor selhání pixelového kontextu je nevratná ztráta informací. Když Figma renderuje frame do PNG, zahodí přesně ty informace, které jsou pro generování kódu nejdůležitější:

Strom vrstev se zhroutí. Již neexistuje „skupina tří položek s mezerami 8px." Existuje oblast pixelů, která skupinu naznačuje. Agent musí rekonstruovat strukturu stromu z vizuálních důkazů a rekonstrukce je přibližná. V určitém procentu případů bude špatná. Toto procento roste se složitostí designů.

Vazby tokenů zmizí. Oranžové pozadí, které se mapuje na color/action/primary, se stane #FF6B00. Agent vygeneruje hardcódovaný hex. Pokud se vaše barva někdy změní, nebo pokud podporujete tmavý režim, nebo pokud potřebujete auditovat použití tokenů, tato hardcódovaná hodnota je závazek.

Identita komponent je pryč. Čtyři instance stejné komponenty karty jsou čtyři podobně vypadající obdélníky. Agent může vygenerovat jednu znovu použitelnou komponentu nebo čtyři podobné, ale ne identické bloky, v závislosti na tom, kolik strukturální podobnosti odvodí. Chcete předvídatelný výstup; dostanete pravděpodobnostní výstup.

Záměr rozvržení je nejednoznačný. Je to flex row nebo grid? Je mezera mezi položkami gap nebo margin nebo padding na každé položce? Pixely to neříkají. Agent si vybírá. Výběry se liší mezi různými spuštěními.

Pipeline Figma → React, s a bez struktury

Uvažte cestu od Figmy k produkčnímu Reactu.

S pixelovým kontextem: Exportujte PNG. Vložte do Claude. Získejte JSX. Přezkoumejte JSX pro správnost. Všimněte si hardcódovaných hodnot. Všimněte si špatné struktury komponent. Promptujte pro opravy. Iterujte. Nakonec získejte něco věrohodného. Ručně upravte pro soulad s designovým systémem. Odešlete. Další obrazovka: opakujte od začátku, protože výstupy předchozího spuštění se neskládají.

Se strukturovaným kontextem: Exportujte balíček (jedno kliknutí, běží v prohlížeči). Předejte CONTEXT.md + screen IR Claude se systémovým promptem specifikujícím framework a konvence designového systému. Získejte JSX, který používá vaše názvy tokenů, vaše názvy komponent, správnou strukturu rozvržení. Přezkoumejte pro správnost. Odešlete. Další obrazovka: stejný balíček, stejný agent, skládatelné výstupy, protože vstupy jsou konzistentní.

Úspory práce jsou skutečné, ale sekundární. Primárním ziskem je skládatelnost. Strukturovaný kontext umožňuje výstupy, které se skládají napříč obrazovkami a agenty. Pixelový kontext ne — výstup každé obrazovky je ostrov generovaný z čerstvého inferenčního průchodu.

Struktura znamená: typované

Každý uzel v IR má kind. To je okamžitě důležité. Uzel TEXT generuje textový prvek. FRAME s auto-layoutem generuje kontejner. INSTANCE z Button/Primary/Large generuje volání komponenty tlačítka se správnými props. VECTOR generuje referenci ikony.

Agent neuhádá. Mapuje typy na kódové primitivy. Mapování je specifikováno v CONTEXT.md pro cílový framework. „Pro uzly INSTANCE použijte název komponenty k určení React komponenty. Pro FRAME s layoutMode HORIZONTAL použijte flex row. Pro TEXT se stylem typography/heading.lg použijte komponentu Heading." Toto jsou pravidla kompilátoru, nikoli inferenční úlohy.

Struktura znamená: prostorové

absoluteBoundingBox na každém uzlu dává pozici a velikost v souřadnicovém prostoru Figmy. V kombinaci s vlastnostmi auto-layoutu — layoutMode, itemSpacing, paddingLeft/Right/Top/Bottom, primaryAxisAlignItems, counterAxisAlignItems — agent má vše, co potřebuje k vygenerování správného kódu rozvržení bez počítání pixelů.

Absolutní ohraničující rámečky také umožňují agentovi ověřit svůj výstup: pokud má vygenerovaná komponenta jiné rozměry než specifikoval IR, něco se pokazilo. Toto je testovatelná vlastnost strukturovaného kontextu, která nemá ekvivalent v pixelovém kontextu.

Struktura znamená: aware-of-identity

Když čtyři uzly v IR sdílejí componentId, agent ví, že jsou instancemi stejné komponenty. Vygeneruje definici komponenty jednou, odvodí props z variant v instancích a renderuje čtyři volání. Toto je správný výstup. Není dosažitelný z pixelového kontextu bez výrazného promptovacího inženýrství, které v podstatě žádá agenta, aby znovu odvodil strukturu, kterou soubor designu již měl.

Křížové reference řetězců fungují stejně. Když více textových uzlů odkazuje na stringRef.key: "action.continue", agent ví použít jedno i18n vyhledávání, nikoli tři hardcódované řetězce. Identitní informace jsou v IR; agent je jen čte.

Struktura znamená: verzovatelné

Prosté soubory JSON se čistě porovnávají pomocí diff. Změněná hodnota padding se zobrazí jako jednořádková změna v per-screen IR. Přejmenovaný token se zobrazí jako find-replace diff napříč souborem tokenů. Nová instance komponenty se zobrazí jako přidaný objekt v poli children.

Toto je historie verzí designu, která je skutečně užitečná pro inženýry. Nikoli „design byl aktualizován v úterý," ale „zde jsou tři vlastnosti, které se změnily mezi exporty v2 a v3 této obrazovky." Toto můžete vložit do popisu PR. Můžete na to spouštět automatizované kontroly. Můžete to použít k auditování, zda změna kódu odpovídá změně designu.

Kam toto vede: infrastruktura designového kontextu

Kategorie nástrojů, která se zde tvoří, není „export Figmy, ale lepší." Je to nová vrstva v zásobníku: infrastruktura designového kontextu. Úkolem této vrstvy je transformovat designový zdroj (soubory Figmy, knihovny komponent, systémy tokenů) do strukturovaných, agenty čitelných, verzovaných artefaktů, které napájejí vrstvu generování kódu.

Tato vrstva sedí mezi designovým nástrojem a kodovacím agentem. Má odpovědnosti, které v současnosti nevlastní ani jedna strana: správa snímků, sémantická extrakce, rozlišení tokenů, inventář komponent, indexování řetězců napříč obrazovkami, verzování balíčků. Jsou to infrastrukturní obavy, nikoli obavy designového nástroje ani obavy LLM.

Zacházení s tím jako s infrastrukturou znamená: je to automatizované, verzované, běží v CI, má definovaný formát, je inspektovatelné. Stejně jako build systém je infrastruktura pro kód — nikoli samotný kód, nikoli cílový binární soubor, ale spolehlivý, reprodukovatelný pipeline, který konvertuje jedno na druhé.

Upřímně: pixely stále záleží

Balíčky figmascope zahrnují PNG 2x každé exportované obrazovky. Nikoli proto, že PNG řídí generování kódu, ale protože vizuální potvrzení záleží. Agent by měl být schopen křížově porovnat svůj vygenerovaný výstup s PNG. Vývojář by měl být schopen se na obrazovku podívat bez otevření Figmy. PNG je kontrola zdravého rozumu, nikoli specifikace.

Toto rozlišení — pixely pro potvrzení, struktura pro specifikaci — je správný mentální model. Pixelový kontext neeliminujete; degradujete ho na jeho správnou roli. Je to QA artefakt, nikoli vstup buildu.

Stejně jako byste kompilátoru nedali screenshot svého zdrojového kódu: dáte mu zdroj a screenshoty použijete pro dokumentaci. Soubor designu je zdroj. Balíček je kompilační artefakt. PNG je dokumentační obrázek.

Kam toto vede pro multi-target generování kódu

Strukturovaný kontext umožňuje pracovní postup, který pixelový kontext neumožní: jeden design, více cílů. Stejný IR může napájet generátor React/Tailwind, generátor Jetpack Compose a generátor SwiftUI. Základní design je stejný; kontext specifický pro cíl (frameworková primitiva, konvence pojmenování, layoutová API) žije v CONTEXT.md, který je generován per-cíl.

Toto je multi-target generování kódu, které skutečně škáluje. Exportujete jeden balíček z designu. Spustíte tři agenty se třemi různými soubory CONTEXT.md. Získáte tři implementace, které jsou strukturálně ekvivalentní, protože byly vygenerovány ze stejného IR, nikoli ze tří samostatných inferenčních průchodů nad třemi screenshoty.

Úzkým místem pro tento pracovní postup není schopnost modelu. Je to kvalita kontextu. Strukturovaný kontext je to, co to umožňuje.

Exportujte svůj strukturovaný kontextový balíček z hlavní aplikace figmascope, pak ho použijte s Cursor, Claude Code nebo Aider pro multi-target, skládatelné generování UI.