Cursors Composer kann sehr viel UI-Code schreiben. Was er nicht kann: Ihre Figma-Datei lesen. Fügen Sie einen Screenshot ein und er rät — falscher Abstand, erfundene Farbwerte, selbst ausgedachte Komponentennamen, die in Ihrer Codebasis nichts entsprechen. Das Problem liegt nicht am Modell. Es liegt am fehlenden strukturierten Kontext.

figmascope behebt das. Es exportiert Ihre Figma-Datei als ZIP-Bundle: Design-Tokens, per-Screen-Layoutbäume, 2×-Referenzrenderings, ein Komponenteninventar und UI-Strings — alles, was Cursors Agent benötigt, um genauen statt nur plausibel aussehenden Code zu generieren.

Diese Anleitung behandelt die vollständige Pipeline: Figma-URL → Kontext-Bundle → Cursor-Prompt → geprüfte Ausgabe.

Was im Bundle enthalten ist

Wenn figmascope Ihre Datei exportiert, enthält das ZIP:

Das Bundle verbleibt auf Ihrem Rechner. Es wird nirgends erneut hochgeladen.

Schritt 1: Bundle generieren

Gehen Sie zu figmascope und fügen Sie Ihre Figma-Datei-URL in das Eingabefeld ein. Der Exporter läuft in Ihrem Browser gegen die Figma REST API — beim ersten Mal benötigen Sie ein persönliches Zugriffstoken (im localStorage gespeichert, niemals an figmascope-Server gesendet).

Klicken Sie auf Agentenkontext exportieren. Die Seite verarbeitet jeden Frame, löst Tokens auf, erstellt das IR und lädt dann context-bundle.zip auf Ihren Rechner herunter.

Wenn Ihre Datei viele Frames hat, werden nur Top-Level-Frames aufgenommen, die keine Komponenten oder Thumbnails sind. Die _meta.json zeigt genau, welche Frames exportiert wurden und etwaige Warnungen (Verlaufsfüllungen, nicht unterstützte Effekte).

Schritt 2: In Ihr Projekt entpacken

Legen Sie das Bundle dort ab, wo Cursor es sehen kann — ein design/-Verzeichnis im Repo-Stammverzeichnis ist das sauberste Muster.

# vom Projektstamm aus
unzip ~/Downloads/context-bundle.zip -d ./design/

# Struktur überprüfen
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Fügen Sie design/ zu .gitignore hinzu, wenn Sie das Bundle nicht committen möchten. Oder committen Sie es — es ist deterministisch; dieselbe Figma-Datei im selben Zustand produziert immer dasselbe Bundle, daher sind Diffs aussagekräftig.

Schritt 3: Ein .cursorrules-Snippet hinzufügen

Cursor liest .cursorrules im Repo-Stammverzeichnis und stellt es jedem Chat-Kontext voran. Hier verknüpfen Sie den Agenten mit dem Bundle.

# .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.

Dieser einzelne Block verhindert die drei häufigsten Drift-Quellen: erfundene Farben, fest codierte Strings und Layout-Raten aus dem Screenshot.

Schritt 4: Cursor Composer öffnen und einen Screen implementieren

Öffnen Sie Composer (Cmd+I unter macOS). Heften Sie die Dateien vor dem Prompt an: Klicken Sie auf das Büroklammer-Symbol und fügen Sie design/CONTEXT.md, design/tokens.json und design/screens/home.json hinzu. Dann prompten:

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 liest die angehefteten Dateien, ordnet die IR-Knoten den Primitiven Ihres Frameworks zu und generiert die Implementierung. Die Ausgabe ist token-referenziert — wenn Sie den generierten Code prüfen, sollte jeder Abstandswert auf einen Schlüssel in tokens.json zurückführen.

Schritt 5: Reviewen und iterieren

Öffnen Sie design/screens/home.png neben der gerenderten Ausgabe. Das PNG ist ein 2×-Export aus Figma — es zeigt genau, wie das Design aussehen soll. Unterschiede sind aussagekräftig: Sie zeigen entweder auf IR-Zuordnungslücken oder auf Token-Werte, die nicht angewendet wurden.

Häufige Probleme und Follow-up-Prompts:

Token-Drift — der Agent verwendete einen fest codierten Hex-Wert statt eines Tokens:

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.

Fehlende Komponente — das IR referenziert eine Komponenten-ID, die der Agent nicht aufgelöst hat:

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 falsch — Abstände oder Ausrichtung stimmen nicht mit dem PNG überein:

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

Was funktioniert, was nicht

Funktioniert gut: flache Screens mit Stack-Layouts, token-gesteuerte Abstände und Farben, Text mit String-Refs, einfache Karten- und Listen-Muster. Cursor bewältigt diese gut, sobald das IR im Kontext ist — er hört auf zu raten und beginnt zu mappen.

Funktioniert weniger gut: komplexe absolut positionierte Overlays (Cursor liest die Offset-Koordinaten manchmal falsch), Verlaufsfüllungen (als Warnungen in _meta.json gekennzeichnet — Cursor wird approximieren) und Vektor-Icons (das IR speichert nur eine Referenz-ID, keine Pfaddaten).

Nur Screenshot vs. Bundle: Reines Screenshot-Prompting ist schneller zu starten, aber nicht deterministisch. Jede Sitzung beginnt von vorne. Das Modell kann Abstände einmal treffen und beim nächsten Turn daneben liegen. Das Bundle ist über die gesamte Sitzung referenzierbar — Cursor kann seine eigene Ausgabe jederzeit gegen die Token-Datei prüfen, ohne etwas erneut hochzuladen.

Tipp: _meta.json-Warnungen vor dem Prompting prüfen

Lesen Sie vor Ihrem ersten Implementierungs-Prompt design/_meta.json. Das warnings-Array listet alles auf, was der Exporter nicht vollständig auflösen konnte: Verlaufsfüllungen, fehlende Token-Zuordnungen, Frames mit eingebetteten Bildern. Fügen Sie eine Notiz darüber in Ihren Prompt ein, damit der Agent nicht versucht, sie zu implementieren und stillschweigend auf fest codierte Werte zurückfällt.

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

Wenn die Ausgabe "gradientFill: not fully supported" für einen bestimmten Knoten zeigt, weisen Sie Cursor an, den Hintergrund dieses Knotens zu überspringen und stattdessen einen // TODO: gradient-Kommentar zu hinterlassen.

Zusammenfassung

Der Workflow lautet: einmal exportieren, überall referenzieren. Das Bundle ist eine stabile, maschinenlesbare Spezifikation, die Cursor über mehrere Turns hinweg konsultieren kann, ohne das Design erneut zu verarbeiten. Sie erhalten token-genauen, string-referenzierten, layout-korrekten Code statt einer Screenshot-Annäherung — und wenn etwas abdriftet, können Sie den Agenten in einer Zeile zurück zur Quelle der Wahrheit leiten.

Führen Sie das selbst auf figmascope.dev aus — fügen Sie Ihre Figma-URL ein, klicken Sie auf Agentenkontext exportieren und entpacken Sie das Bundle in unter zwei Minuten in Ihren Cursor-Workspace.