Cursor's Composer kan veel UI-code schrijven. Wat het niet kan is je Figma-bestand lezen. Plak een schermafbeelding en het raadt — verkeerde tussenruimte, verzonnen kleurwaarden, verzonnen componentnamen die nergens in je codebase voorkomen. Het probleem is niet het model. Het zijn de ontbrekende gestructureerde context.

figmascope lost dat op. Het exporteert je Figma-bestand als een zip-bundel: ontwerptokens, per-scherm layoutbomen, 2× referentierenders, een componentinventaris en UI-strings — alles wat de agent van Cursor nodig heeft om nauwkeurige code te genereren in plaats van plausibel ogende code.

Deze walkthrough behandelt de volledige pijplijn: Figma-URL → contextbundel → Cursor-prompt → beoordeelde uitvoer.

Wat er in de bundel zit

Wanneer figmascope je bestand exporteert, bevat de zip:

De bundel blijft op je machine. Deze wordt nergens opnieuw geüpload.

Stap 1: Genereer de bundel

Ga naar figmascope en plak je Figma-bestand-URL in het invoerveld. De exporteur draait in je browser via de Figma REST API — de eerste keer heb je een persoonlijk toegangstoken nodig (opgeslagen in localStorage, nooit verzonden naar figmascope-servers).

Klik op Agentcontext exporteren. De pagina verwerkt elk frame, lost tokens op, bouwt de IR, en downloadt vervolgens context-bundle.zip naar je machine.

Als je bestand veel frames heeft, worden alleen frames op het hoogste niveau opgenomen die geen componenten of miniaturen zijn. Het bestand _meta.json toont precies welke frames zijn geëxporteerd en eventuele waarschuwingen (verloopvullingen, niet-ondersteunde effecten).

Stap 2: Pak uit in je project

Zet de bundel waar Cursor hem kan zien — een map design/ in de root van je repository is het nettste patroon.

# vanuit je projectroot
unzip ~/Downloads/context-bundle.zip -d ./design/

# controleer de structuur
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Voeg design/ toe aan .gitignore als je de bundel niet wilt committen. Of commit hem — het is deterministisch; hetzelfde Figma-bestand in dezelfde toestand produceert altijd dezelfde bundel, dus diffs zijn betekenisvol.

Stap 3: Voeg een .cursorrules-fragment toe

Cursor leest .cursorrules in de repository-root en voegt het toe aan elke chatcontext. Dit is waar je de agent aan de bundel koppelt.

# .cursorrules

Bij het bouwen van UI-schermen:
1. Lees ./design/CONTEXT.md als eerste. Dit specificeert het doelframework en de beperkingen.
2. Gebruik tokens uit ./design/tokens.json voor alle tussenruimte-, kleur-, straalradius- en typografiewaarden.
3. Raadpleeg ./design/screens/<naam>.json voor de layoutstructuur en nodehiërarchie.
4. Vergelijk met ./design/screens/<naam>.png voor visuele bevestiging — gebruik het als sanity check, niet als bron van waarheid.
5. Gebruik stringsleutels uit ./design/strings.json in plaats van UI-tekst hardcoded in te stellen.
6. Verzin geen tokenwaarden. Als een waarde niet in tokens.json staat, markeer het dan.

Dit enkele blok voorkomt de drie meest voorkomende driftbronnen: verzonnen kleuren, hardgecodeerde strings en layoutgokken op basis van de schermafbeelding.

Stap 4: Open Cursor Composer en implementeer een scherm

Open Composer (Cmd+I op macOS). Vastmaak de bestanden voordat je een prompt geeft: klik op het paperclip-icoon en voeg design/CONTEXT.md, design/tokens.json en design/screens/home.json toe. Gebruik dan de volgende prompt:

Implementeer het startscherm vanuit ./design/screens/home.json.

Beperkingen:
- Doelframework en componentconventies staan in ./design/CONTEXT.md
- Alle tussenruimte-, kleur- en straalradiuswaarden moeten uit ./design/tokens.json komen
- UI-strings moeten sleutels uit ./design/strings.json gebruiken
- De rootnode is een stack (verticaal). Kinderen zijn in volgorde gedeclareerd in de JSON.
- Verzin geen waarden die niet aanwezig zijn in de token- of IR-bestanden.

Cursor leest de vastgemaakte bestanden, brengt de IR-nodes in kaart naar de primitieven van je framework en genereert de implementatie. De uitvoer is tokengerefereerd — als je de gegenereerde code inspecteert, moet elke tussenruimtewaarde traceerbaar zijn naar een sleutel in tokens.json.

Stap 5: Beoordeel en itereer

Open design/screens/home.png naast de gerenderde uitvoer. De PNG is een 2×-export vanuit Figma — het toont precies hoe het ontwerp eruit zou moeten zien. Verschillen zijn betekenisvol: ze wijzen op IR-mapping-hiaten of tokenwaarden die niet zijn toegepast.

Veelvoorkomende problemen en vervolgprompts:

Tokendrift — de agent gebruikte een hardgecodeerde hex in plaats van een token:

Vergelijk elke kleurwaarde in het gegenereerde component met ./design/tokens.json.
Geef een lijst van kleuren die niet overeenkomen met een tokensleutel. Vervang ze door de juiste tokenreferentie.

Ontbrekend component — de IR verwijst naar een component-ID die de agent niet heeft opgelost:

De IR verwijst naar componentId "btn-primary-01". Controleer ./design/components/inventory.json
op naam en type, implementeer dan een tijdelijke aanduiding met die naam en de juiste tokenwaarden.

Layout klopt niet — tussenruimte of uitlijning komt niet overeen met de PNG:

De verticale afstand tussen de header en de kaartlijst moet spacing.24 zijn uit tokens.json (24dp).
Je uitvoer gebruikt 16px. Corrigeer dit.

Wat werkt, wat niet

Werkt goed: platte schermen met stacklayouts, tokengestuurde tussenruimte en kleur, tekst met stringreferenties, eenvoudige kaart- en lijstpatronen. Cursor verwerkt deze goed zodra de IR in de context staat — het stopt met raden en begint met mappen.

Werkt minder goed: complexe absoluut gepositioneerde overlays (Cursor leest de offsetcoördinaten soms verkeerd), verloopvullingen (gemarkeerd als waarschuwingen in _meta.json — Cursor zal approximeren), en vectoriconen (de IR slaat alleen een referentie-ID op, geen paddata).

Alleen schermafbeelding versus bundel: alleen een schermafbeelding gebruiken is sneller om mee te beginnen maar niet-deterministisch. Elke sessie begint opnieuw. Het model kan de tussenruimte één keer goed hebben en het de volgende beurt missen. De bundel is refereerbaar gedurende de hele sessie — Cursor kan zijn eigen uitvoer op elk moment vergelijken met het tokenbestand zonder iets opnieuw te uploaden.

Tip: controleer _meta.json-waarschuwingen voor je prompt geeft

Lees design/_meta.json voordat je je eerste implementatieprompt geeft. De array warnings geeft alles weer wat de exporteur niet volledig kon oplossen: verloopvullingen, ontbrekende tokenmappings, frames met ingesloten afbeeldingen. Voeg een opmerking hierover toe aan je prompt, zodat de agent er niet proberen te implementeren en stilzwijgend terugvalt op hardgecodeerde waarden.

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

Als de uitvoer "gradientFill: not fully supported" toont op een specifieke node, vertel Cursor dan die achtergrond van de node over te slaan en in plaats daarvan een // TODO: gradient-commentaar achter te laten.

Samenvatting

De workflow is: eenmalig exporteren, overal refereren. De bundel is een stabiele, machineleesbare specificatie die Cursor over meerdere beurten kan raadplegen zonder het ontwerp opnieuw te verwerken. Je krijgt tokennauwkeurige, stringgerefereerde, layoutcorrect gegenereerde code in plaats van een schermafbeeldingsbenadering — en wanneer iets driftt, kun je de agent in één regel terugwijzen naar de bron van waarheid.

Probeer dit zelf op figmascope.dev — plak je Figma-URL, klik op Agentcontext exporteren, en pak de bundel uit in je Cursor-werkruimte in minder dan twee minuten.