Design-Handoff ist für menschliche Entwickler seit etwa 2016 ein gelöstes Problem. Zeplin, InVision Inspect, Avocode, Figmas eigener Dev Mode — sie alle tun dasselbe: Sie geben dem Entwickler eine Web-Oberfläche, in der er auf einen Knoten klicken und seine Eigenschaften lesen kann.

Dieser Workflow bricht vollständig zusammen, wenn der „Entwickler" ein KI-Agent ist.

Dieser Artikel erklärt, warum das so ist, was Agenten tatsächlich brauchen und wie man einen Handoff-Workflow strukturiert, der korrekten statt annähernden Code erzeugt. Die Lösung ist figmascope — ein browserbasiertes Tool, das ein strukturiertes Context-Bundle direkt aus Ihrer Figma-Datei exportiert. Den schrittweisen Workflow finden Sie unter Figma zu Claude Code oder Figma zu Cursor.

Die Design-Handoff-Annahme

Jedes vor 2023 entwickelte Handoff-Tool macht dieselbe implizite Annahme: Ein Mensch sitzt am anderen Ende, klickt herum, liest Werte, trifft Ermessensentscheidungen. Die Aufgabe des Tools ist, Informationen so klar darzustellen, dass ein kompetenter Entwickler damit arbeiten kann, ohne ständig zum Designer zurückzuwechseln.

Diese Annahme steckt in der gesamten UX dieser Tools:

All das ist nicht falsch. Es ist korrekt für den Workflow menschlicher Entwickler. Es ist schlicht die falsche Schnittstelle für einen Agenten.

Was Agenten tatsächlich von einem Design brauchen

Ein KI-Agent, der eine Design-Aufgabe erhält, benötigt:

  1. Eine Spezifikation, die er zuerst liest — Einschränkungen, Umfang, Token-Benennungskonventionen, Versionshinweise. Nicht impliziert durch das Hovern über ein Panel; explizit ausformuliert.
  2. Ein typisiertes Token-Wörterbuch — nicht rohe Hex-Werte und Pixelzahlen, sondern benannte, typisierte Tokens mit ihren Werten. Der Agent muss wissen, dass #d96a3a color.accent ist, damit er korrekte Tailwind-Klassennamen oder CSS-Custom-Properties generieren kann.
  3. Einen vollständigen Screen-Layout-Baum — die Hierarchie jedes Knotens, ihre Layout-Beziehungen, Größen und Token-Referenzen. Nicht ein Knoten nach dem anderen auf Anfrage; den gesamten Baum im Speicher.
  4. Konsolidierte Strings — alle Textinhalte, normalisiert, mit Ressourcenschlüsseln. Nicht über einzelne Knoten verstreut.
  5. Visuelle Grundwahrheit — ein Referenz-Render, mit dem der Agent seine Ausgabe vergleichen kann. Ein Screenshot des Designs mit 2× Auflösung.
  6. Komponentennamen — kanonische Bezeichner, die der generierte Code verwenden soll, keine erfundenen Namen.

Traditionelle Handoff-Tools stellen keines davon in einer für einen Agenten nutzbaren Form bereit. Die figmascope-App erzeugt alle sechs in einem einzigen Zip — Figma-URL einfügen, Bundle erhalten. Kein Upload, kein Backend. Das Token-Format wird ausführlich beschrieben unter Design Token Export für KI-Agenten.

Warum Screenshots scheitern

Der schnellste Workaround, den viele ausprobieren: ein PNG aus Figma exportieren und dem Agenten mit einem Prompt wie „Implementiere diesen Screen" übergeben. Der Agent erzeugt Code. Manchmal sieht er annähernd richtig aus. Aber:

Jeder dieser Fehler ist für sich genommen klein. Zusammen ergeben sie eine Komponente, die erhebliche manuelle Korrektur erfordert — was einen Großteil der Zeitersparnis durch den Agenten zunichte macht.

Eine detaillierte Aufschlüsselung mit Beispielen finden Sie unter why screenshots fail for AI codegen.

Ein Screenshot sagt dem Agenten, wie das Design aussieht. Strukturierter Kontext sagt ihm, was das Design ist.

Die traditionellen Handoff-Tools — eine Bewertung

Zeplin

Zeplins primäre Oberfläche ist eine Web-App, in der Entwickler Designs Knoten für Knoten inspizieren. Es gibt eine „Styleguide"-Funktion, die Farben und Typografie aus der Datei aggregiert — das Ähnlichste zu einem Token-Export. Es exportiert keine maschinenlesbaren Layout-Bäume. Seine „Connected Components"-Funktion verknüpft Storybook-Komponenten mit Figma-Frames, was für die Dokumentation nützlich ist, aber einem Agenten beim Generieren neuen Codes nicht hilft.

Figma Dev Mode

Figmas native Antwort auf Handoff. Das Code-Panel generiert CSS aus ausgewählten Knoten und zeigt Variable-Namen an, wenn sie eingerichtet sind. Gut gestaltet für menschliche Entwickler. Unterstützt keinen Datei-Export, generiert keine Layout-Bäume, und seine Code-Snippets sind CSS-spezifisch (keine framework-agnostischen Tokens). Erfordert einen Dev-Mode-Sitz.

Avocode

Avocode wurde von Abstract übernommen und 2022 eingestellt. Wird erwähnt, weil es in Suchergebnissen für „Design-Handoff-Tools" noch auftaucht und Vergleichs-Traffic generiert. Es ist nicht mehr verfügbar.

Locofy, Builder.io, Anima

Diese Tools versuchen, direkt aus Figma-Designs echten Framework-Code (React, Next.js, HTML) zu generieren. Sie sind dem Problemraum näher — sie verstehen, dass die Ausgabe Code sein muss, kein Eigenschaften-Panel. Aber sie generieren Code, den Sie deployen, keinen Kontext, den Sie an einen Agenten übergeben. Der Unterschied ist entscheidend: Sie können nicht fragen „Implementiere den Settings-Screen und verwende dabei die UserAvatar-Komponente, die ich bereits gebaut habe", wenn das Tool den Code selbst generiert. Das können Sie Claude Code oder Cursor fragen, wenn Sie ihnen den strukturierten Kontext gegeben haben.

Detaillierte Vergleiche finden Sie unter figmascope vs Locofy und figmascope vs Builder.io.

Wie agentenfähiger Handoff aussieht

Agentenfähiger Handoff hat drei Eigenschaften, die ihn von traditionellem Handoff unterscheiden:

1. Es ist ein Datei-Artefakt, keine UI

Das Handoff-Artefakt ist eine versionierte Datei (oder ein Satz von Dateien), die im Repository neben dem Code liegt. Kein geteilter Link, der einen Login erfordert. Kein Panel in einer Web-App. Ein design/-Verzeichnis mit JSON-, PNG- und Markdown-Dateien.

Das hat mehrere Konsequenzen:

2. Es verwendet typisierte Daten, keinen gerenderten Text

Design tokens in tokens.json sind typisiert — $type: "color", $type: "dimension" — nicht nur Strings in einer Markdown-Tabelle. Die Layout-IR in screens/*.json hat explizite Knotenarten (stack, overlay, absolute, leaf) und Token-Referenzen in $ref-Notation. Strings in strings.json haben Punkt-Notation-Schlüssel, keine menschenlesbaren Labels.

Typisierte Daten bedeuten, dass der Agent programmatisch darüber nachdenken kann: „Alle Knoten mit background.$ref == color.surface verwenden dieselbe Hintergrundfarbe" — statt „Alle Knoten, die aussehen, als wären sie auf demselben Hintergrund."

3. Es enthält ein Spezifikationsdokument, das der Agent zuerst liest

CONTEXT.md ist der Vertrag zwischen Designer und Agent. Es beschreibt:

Traditioneller Handoff hat kein Äquivalent. Dev Mode hat ein „Entwicklerhinweise"-Feld pro Frame, das jedoch ad hoc von einem Designer ohne Struktur geschrieben wird. CONTEXT.md wird konsistent aus dem tatsächlichen Inhalt der Datei generiert.

Der Handoff-Workflow Schritt für Schritt

  1. Designer markiert Frames als bereit — in Figma kennzeichnet der Designer die Frames, die zur Implementierung bereit sind (per Namenskonvention, einem „ready"-Label oder was auch immer das Team nutzt).
  2. Entwickler führt figmascope aus — Datei-URL und PAT auf figmascope.dev einfügen, auf „Exportieren" klicken, Zip herunterladen.
  3. In design/ entpacken — unzip figmascope-<fileKey>.zip -d design/
  4. design/ ins Repository committen — das Bundle ist das Handoff-Artefakt. Der PR enthält sowohl das Design-Bundle als auch die Implementierung.
  5. Agent implementiert — Claude Code oder Cursor auf design/CONTEXT.md und das relevante Screen-JSON verweisen. Der Agent generiert Code, der die Token-Werte, Komponentennamen und Strings aus dem Bundle verwendet.
  6. Review und Iteration — Entwickler prüft gegen screens/*.png, notiert Lücken, verfeinert Prompts.

Wenn das Design sich ändert, wiederholen Sie ab Schritt 2. Der Zeitstempel in _meta.json zeigt Ihnen, wann das Bundle zuletzt generiert wurde und wann die Figma-Datei zuletzt geändert wurde — eine einfache Aktualitätsprüfung.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Was sich nicht ändert

Agentenfähiger Handoff ersetzt nicht das Design-Review. Der Agent implementiert aus dem strukturierten Kontext; ein Mensch überprüft die Ausgabe. Interaktionszustände, Animationen, responsives Verhalten, Barrierefreiheit — diese erfordern Urteilsvermögen, das der Agent aus statischen Designdaten nur annähern, nicht garantieren kann.

Der strukturierte Kontext ersetzt auch nicht das Designer-Entwickler-Gespräch. Wenn ein Token mehrdeutig benannt ist oder eine Komponente sich über Breakpoints hinweg anders verhält als der statische Frame vermuten lässt, braucht es ein Gespräch. CONTEXT.md erfasst, was in der Datei steht; es inferiert nicht, was der Designer für Fälle beabsichtigt hat, die die Datei nicht adressiert.

Was sich ändert: Die Implementierung statischer Screen-Layouts aus einem stabilen Design geht von einem stundenlangen manuellen Prozess zu einem Prompt-und-Review-Workflow über. Der Agent übernimmt die mechanische Übersetzung; der Entwickler übernimmt die Ermessensentscheidungen.

Checkliste: Ist Ihr Design-Handoff agentenfähig?

Fehlen die meisten dieser Punkte, erzeugt der Agent Code, der mehr Korrektur erfordert als ein Neustart mit gutem Kontext. Das Bundle, das figmascope generiert, erfüllt alle Punkte in einem einzigen Export. Besuchen Sie den figmascope-Blog für Fallstudien und Vertiefungen zu jedem Checklistenpunkt, oder lesen Sie Figma Inspector Alternative für einen direkten Vergleich mit Dev Mode und Plugins.