Cursors Composer kan skriva en hel del UI-kod. Vad den inte kan göra är att läsa din Figma-fil. Klistra in en skärmbild så gissar den — fel avstånd, påhittade färgvärden, uppdiktade komponentnamn som inte stämmer med något i din kodbas. Problemet är inte modellen. Det är den saknade strukturerade kontexten.

figmascope löser det. Det exporterar din Figma-fil som ett zip-paket: design tokens, per-skärm layoutträd, 2×-referensrenderingar, en komponentinventering och UI-strängar — allt Cursors agent behöver för att generera korrekt kod snarare än plausibel-sökande kod.

Den här genomgången täcker hela flödet: Figma URL → kontextpaket → Cursor-prompt → granskad utdata.

Vad som finns i paketet

När figmascope exporterar din fil innehåller zip-filen:

Paketet stannar på din maskin. Det laddas aldrig upp någonstans.

Steg 1: Generera paketet

Gå till figmascope och klistra in din Figma-fil-URL i inmatningsfältet. Exportören körs i din webbläsare mot Figma REST API — du behöver en personlig åtkomsttoken första gången (lagras i localStorage, skickas aldrig till figmascope-servrar).

Klicka på Exportera agentkontext. Sidan bearbetar varje ram, löser upp tokens, bygger IR, och laddar sedan ner context-bundle.zip till din maskin.

Om din fil har många ramar inkluderas bara ramar på toppnivå som inte är komponenter eller miniatyrer. _meta.json visar exakt vilka ramar som exporterades och eventuella varningar (gradientfyllningar, ej stödda effekter).

Steg 2: Packa upp i ditt projekt

Lägg paketet där Cursor kan se det — en design/-katalog i din repots rot är det renaste mönstret.

# från din projektrot
unzip ~/Downloads/context-bundle.zip -d ./design/

# verifiera strukturen
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Lägg till design/ i .gitignore om du inte vill checka in paketet. Eller checka in det — det är deterministiskt; samma Figma-fil i samma tillstånd producerar alltid samma paket, så diffar är meningsfulla.

Steg 3: Lägg till ett .cursorrules-utdrag

Cursor läser .cursorrules i repots rot och lägger till det i varje chattkontext. Det är här du kopplar agenten till paketet.

# .cursorrules

When building UI screens:
1. Read ./design/CONTEXT.md first. It specifies the target framework and constraints.
2. Use tokens from ./design/tokens.json for all spacing, color, radius, and typography values.
3. Reference ./design/screens/<name>.json for layout structure and node hierarchy.
4. Match ./design/screens/<name>.png for visual confirmation — use it as a sanity check, not the source of truth.
5. Use string keys from ./design/strings.json rather than hardcoding UI copy.
6. Do not invent token values. If a value isn't in tokens.json, flag it.

Det här enstaka blocket förhindrar de tre vanligaste driftkällorna: påhittade färger, hårdkodade strängar och layoutgissning från skärmbilden.

Steg 4: Öppna Cursor Composer och implementera en skärm

Öppna Composer (Cmd+I på macOS). Fäst filerna innan du skickar en prompt: klicka på gem-ikonen och lägg till design/CONTEXT.md, design/tokens.json och design/screens/home.json. Skicka sedan:

Implement the home screen from ./design/screens/home.json.

Constraints:
- Target framework and component conventions are in ./design/CONTEXT.md
- All spacing, color, and radius values must come from ./design/tokens.json
- UI strings must use keys from ./design/strings.json
- The root node is a stack (vertical). Children are declared in order in the JSON.
- Do not invent any values not present in the token or IR files.

Cursor läser de fästa filerna, mappar IR-noderna till ditt ramverks primitiver och genererar implementationen. Utdatan är token-refererad — om du inspekterar den genererade koden bör varje avståndsvärde gå att spåra tillbaka till en nyckel i tokens.json.

Steg 5: Granska och iterera

Öppna design/screens/home.png bredvid den renderade utdatan. PNG-filen är en 2×-export från Figma — den visar exakt hur designen ska se ut. Skillnader är meningsfulla: de pekar antingen på IR-mappningsluckor eller token-värden som inte tillämpades.

Vanliga problem och uppföljningspromptar:

Token-drift — agenten använde ett hårdkodat hex istället för en token:

Compare every color value in the generated component against ./design/tokens.json.
List any colors that don't match a token key. Replace them with the correct token reference.

Saknad komponent — IR refererar till ett komponent-ID som agenten inte löste upp:

The IR references componentId "btn-primary-01". Check ./design/components/inventory.json
for its name and type, then implement a placeholder with that name and the correct token values.

Layout fel — avstånd eller justering stämmer inte med PNG:n:

The vertical gap between the header and the card list should be spacing.24 from tokens.json (24dp).
Your output uses 16px. Fix it.

Vad som fungerar, vad som inte gör det

Fungerar bra: platta skärmar med stack-layouter, token-drivet avstånd och färg, text med strängreferenser, enkla kort- och listmönster. Cursor hanterar dessa väl när IR väl finns i kontexten — det slutar gissa och börjar mappa.

Fungerar sämre: komplexa absolutpositionerade överlager (Cursor misslyckas ibland med att läsa offsetkoordinaterna), gradientfyllningar (flaggas som varningar i _meta.json — Cursor approximerar), och vektorikoner (IR lagrar bara ett referens-ID, inte sökvägsdata).

Endast skärmbild vs. paket: att bara använda skärmbilder är snabbare att starta men icke-deterministiskt. Varje session börjar från noll. Modellen kanske träffar rätt avstånd en gång och missar det nästa omgång. Paketet är referensbart genom hela sessionen — Cursor kan kontrollera sin egen utdata mot tokenfilen när som helst utan att ladda upp något igen.

Tips: kontrollera _meta.json-varningar innan du skickar prompten

Innan din första implementationsprompt, läs design/_meta.json. warnings-arrayen listar allt som exportören inte kunde lösa upp fullt ut: gradientfyllningar, saknade tokenmappningar, ramar med inbäddade bilder. Lägg till en anteckning om dessa i din prompt så att agenten inte försöker implementera dem och tyst faller tillbaka till hårdkodade värden.

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

Om utdatan visar "gradientFill: not fully supported" på en specifik nod, säg till Cursor att hoppa över den nodens bakgrund och lämna en // TODO: gradient-kommentar istället.

Sammanfattning

Arbetsflödet är: exportera en gång, referera överallt. Paketet är en stabil, maskinläsbar spec som Cursor kan konsultera över flera omgångar utan att behöva bearbeta designen på nytt. Du får token-korrekt, sträng-refererad, layout-korrekt kod istället för en skärmbildsapproximation — och när något driftar kan du peka agenten tillbaka till sanningskällan på en rad.

Prova detta själv på figmascope.dev — klistra in din Figma URL, klicka på Exportera agentkontext, och packa upp paketet i din Cursor-arbetsyta på under två minuter.