Cursors KI kann sehr viel UI-Code erzeugen. Was sie nicht kann: Ihre Figma-Datei lesen. Sie fügen einen Screenshot ein, und das Modell rät — falsche Abstände, falsche Farbwerte, erfundene Komponentennamen. Das Problem liegt nicht am Modell. Es fehlt der strukturierte Kontext.

figmascope schließt diese Lücke. Es exportiert eine Figma-Datei als Zip-Bundle — design tokens, bildschirmweise Layout-Bäume, Referenz-Renders, Komponenteninventar, UI-Strings — alles, was ein Sprachmodell braucht, um präzisen statt nur plausibel aussehenden Code zu erzeugen. Die Hauptanwendung läuft vollständig im Browser, ohne Backend und ohne Upload.

Diese Seite führt Sie durch den gesamten Workflow von der Figma-URL bis zur Cursor-Codegenerierung. Wenn Sie Claude Code statt Cursor verwenden, finden Sie den Claude-spezifischen Workflow unter Figma zu Claude Code. Einen umfassenderen Überblick, was ein Handoff agentenfähig macht, bietet AI Design Handoff.

Inhalt des Context-Bundles

Wenn Sie figmascope gegen eine Figma-Datei ausführen, erhalten Sie ein .zip mit folgenden Inhalten:

Es wird nichts hochgeladen. Ihr Personal Access Token verbleibt nur im Browser-Speicher und wird ausschließlich an api.figma.com gesendet. Das Zip wird clientseitig zusammengestellt und direkt an den Browser-Download übergeben.

Schritt 1 — Figma Personal Access Token erstellen

Navigieren Sie zu Figma → Kontoeinstellungen → Personal Access Tokens und erstellen Sie ein Token mit dem Bereich File content: read-only. Das ist das erforderliche Minimum.

Der Token verlässt Ihre Browser-Sitzung nicht; figmascope sendet ihn im Header X-Figma-Token an api.figma.com und nirgendwo sonst. Das vollständige Bedrohungsmodell finden Sie unter PAT-Sicherheit und figmascope.

Schritt 2 — Context-Bundle exportieren

  1. Öffnen Sie figmascope.dev in Ihrem Browser.
  2. Fügen Sie die Figma-Datei-URL ein (z. B. https://www.figma.com/file/ABC123/MyDesign).
  3. Fügen Sie Ihren Personal Access Token ein.
  4. Klicken Sie auf Agentenkontext exportieren.
  5. Eine Datei figmascope-<fileKey>.zip wird auf Ihrem Rechner gespeichert.

Entpacken Sie die Datei in Ihr Projekt. Ein sinnvoller Ablageort ist ein design/-Ordner im Repository-Stammverzeichnis:

unzip figmascope-ABC123.zip -d design/
# → design/CONTEXT.md
# → design/tokens.json
# → design/screens/Home.json
# → design/screens/Home.png
# → design/components/inventory.json
# → design/strings.json
# → design/_meta.json

Schritt 3 — Projekt in Cursor öffnen

Öffnen Sie Ihren Projektordner wie gewohnt in Cursor. Das Verzeichnis design/ ist nun Teil des Workspaces, und Cursors Indexer nimmt es auf.

Bevor Sie das Modell prompten, lesen Sie design/CONTEXT.md einmal selbst durch. Die Datei gibt an, welche Frames exportiert wurden, wie das Token-Benennungsschema aufgebaut ist, und listet alle beim Export ausgegebenen Warnungen auf (z. B. layout-mode-none-inferred für Frames ohne Auto-Layout in Figma). Diese Warnungen sind dieselben, denen auch Ihr Agent begegnen wird.

Schritt 4 — Effektiven Cursor-Prompt formulieren

Der einfachste Einstieg ist ein Referenz-Prompt, den Sie direkt in Cursor Chat einfügen können:

Read design/CONTEXT.md first, then implement the Home screen.

Use:
- design/tokens.json for all color, spacing, and typography values
- design/screens/Home.json for the layout tree
- design/screens/Home.png as the visual reference
- design/strings.json for all copy (use the resource keys as i18n identifiers)
- design/components/inventory.json to match component names

Target: React + Tailwind CSS. Map token values to Tailwind config entries rather
than hardcoding hex values. Use the component names from inventory.json as
component file names (PascalCase).

Cursors Composer folgt den Einschränkungen aus CONTEXT.md, schlägt den Layout-Baum in Home.json nach, bezieht Abstände aus tokens.json und erzeugt Code, der Ihrem Design-System entspricht — statt es nur anzunähern.

Das Modell kennt Ihr Design nicht. Es kennt nur das, was Sie ihm geben. Strukturiertes JSON schlägt einen Screenshot jedes Mal.

Schritt 5 — Tokens auf Ihr Framework-Konfiguration abbilden

Das exportierte tokens.json verwendet eine W3C-ähnliche verschachtelte Struktur:

{
  "color": {
    "surface": { "$value": "#f6f2ea", "$type": "color" },
    "accent":  { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px",  "$type": "dimension" },
    "md": { "$value": "8px",  "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "fontWeight": { "$value": 400,       "$type": "number" }
    }
  }
}

Für Tailwind bitten Sie Cursor, einen tailwind.config.js-theme.extend-Block direkt aus tokens.json zu erzeugen. Einen tiefen Einblick in das Token-Format und die Häufigkeitsinferenz finden Sie unter Design Token Export für KI-Agenten. Die Token-Struktur ist flach genug, um sie in einem einzigen Node-Skript zu traversieren, wenn Sie den Prozess automatisieren möchten:

// scripts/tokens-to-tailwind.js
const tokens = require('../design/tokens.json');

const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([k, v]) => [k, v.$value])
);
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([k, v]) => [k, v.$value])
);

module.exports = { colors, spacing };

Schritt 6 — Mehrseitige Projekte verwalten

Jeder Frame in Ihrer Figma-Datei wird zu einer screens/<FrameName>.json und einer passenden .png. Bei einem Projekt mit einem Dutzend Screens arbeiten Sie diese inkrementell ab. Cursor Composer verarbeitet einen Screen pro Sitzung zuverlässig; übergeben Sie das Screen-JSON und das PNG als explizite @file-Referenzen:

@design/screens/Settings.json
@design/screens/Settings.png

Implement the Settings screen. Follow the same component structure
as the Home screen already implemented. Use tokens from design/tokens.json.

Das Komponenteninventar (design/components/inventory.json) hilft Ihnen, Namensabweichungen über Screens hinweg zu vermeiden — jede in einem Screen-JSON referenzierte Komponente hat eine kanonische id und einen name im Inventar. Wenn Sie eine gemeinsame Komponentenbibliothek generieren, verwenden Sie diese Namen als Quelle der Wahrheit.

Die IR in der Praxis

Das bildschirmweise JSON verwendet eine rekursive Knotenstruktur. Ein vereinfachtes Beispiel für eine Karten-Komponente:

{
  "kind": "stack",
  "name": "ProductCard",
  "direction": "vertical",
  "gap": { "$ref": "spacing.4" },
  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
  "background": { "$ref": "color.surface" },
  "radius": { "$ref": "radius.md" },
  "children": [
    {
      "kind": "leaf",
      "name": "ProductImage",
      "type": "image",
      "width": 320,
      "height": 200
    },
    {
      "kind": "leaf",
      "name": "ProductTitle",
      "type": "text",
      "text": { "$ref": "strings.product.card.title" },
      "style": { "$ref": "typography.heading.sm" }
    }
  ]
}

Token-Referenzen verwenden $ref-Strings, die den Schlüsseln in tokens.json entsprechen. Das Modell kann sie ohne einen separaten Nachschlageschritt auflösen. Das vollständige Knotenschema finden Sie unter per-screen IR explained.

Kontext aktuell halten

Design-Dateien ändern sich. Eine gute Gewohnheit: figmascope nach jeder größeren Design-Revision erneut ausführen, den aktualisierten design/-Ordner committen und die Version in Ihrer PR-Beschreibung vermerken. _meta.json enthält einen Zeitstempel und das Feld lastModified der Figma-Datei, sodass Sie vergleichen können, wann das Bundle zuletzt regeneriert wurde und wann die Datei zuletzt geändert wurde.

// _meta.json
{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 12,
  "warnings": []
}

Wenn warnings nicht leer ist, beheben Sie die Hinweise, bevor Sie den Kontext an den Agenten übergeben. Häufige Warnungen: strings-collision (zwei Knoten mit demselben Slug wurden auf denselben Schlüssel aufgelöst) und layout-mode-none-inferred (ein Container ohne explizites Auto-Layout, bei dem figmascope das Layout aus den absoluten Kindpositionen inferiert hat).

Typische Cursor-Workflows

Diff-basierte Aktualisierungen

Wenn das Design eine kleinere Überarbeitung erfahren hat — beispielsweise hat sich ein Abstandswert von spacing.4 auf spacing.6 bei der Karten-Komponente geändert — können Sie Cursor bitten, nur das Delta anzuwenden, anstatt den gesamten Screen neu zu generieren:

The design/tokens.json was updated. spacing.4 is now 24px instead of 16px.
Find all components using spacing.4 and update them. Do not touch anything else.

Das funktioniert, weil Ihre generierten Komponenten Token-Namen als Tailwind-Klassen referenzieren (gap-spacing-4) statt rohe Pixelwerte. Eine Token-Änderung ist ein Suchen-und-Ersetzen-Vorgang, kein Redesign.

Einen neuen Screen zu einer bestehenden Codebasis hinzufügen

Wenn Sie Screen N zu einer Codebasis hinzufügen, die bereits die Screens 1 bis N-1 enthält, besteht die entscheidende Prompt-Ergänzung darin, den Agenten in der vorhandenen Komponentenbibliothek zu verankern:

@design/screens/Checkout.json
@design/screens/Checkout.png

Implement the Checkout screen. Reuse existing components from src/components/
wherever the component name matches design/components/inventory.json.
Only create new component files for components not already implemented.
Use design/tokens.json for all token values.

Das Komponenteninventar ist die Brücke zwischen dem Design-Komponentennamen und dem Dateinamen in der Codebasis. Ohne es erfindet der Agent Import-Pfade und erstellt doppelte Komponenten.

Design-System-Baseline generieren

Bevor Sie einzelne Screens implementieren, nutzen Sie das Context-Bundle, um eine Design-System-Baseline zu generieren: die Token-Konfiguration, eine Farbpaletten-Komponente und die Basis-Typografiestile. Das verankert alle nachfolgenden Screen-Implementierungen im selben Fundament:

Read design/tokens.json and design/CONTEXT.md.

Generate:
1. tailwind.config.ts theme.extend block from all tokens
2. src/styles/tokens.css with CSS custom properties for the same tokens
3. src/components/foundations/ColorPalette.tsx showing all color tokens
4. src/styles/typography.css with the typography token classes

Name all classes and variables using the token key paths
(e.g. --color-accent, text-ink, bg-surface).

Sobald diese Baseline vorhanden ist, kann jede Screen-Implementierung darauf zurückgreifen. Der Agent muss Farben nicht in jeder Sitzung neu aus dem Design ableiten — er verwendet die bereits generierten Klassen.

Bekannte Einschränkungen

figmascopes Context-Bundle erfasst statische Strukturen. Einige Dinge kann es nicht abbilden:

Die Datei CONTEXT.md hält fest, welche Frames ausgeschlossen wurden und warum, damit der Agent nicht versucht, etwas zu implementieren, das bewusst außerhalb des Umfangs lag.