You’ve opened a Figma file tagged only to find thirty unnamed frames, a locked background layer, and a button nested ins

Du hast eine Figma-Datei mit dem Tag final_FINAL_v3 geöffnet, nur um dreißig unbenannte Frames, eine gesperrte Hintergrundebene und einen Button zu finden, der in einer Gruppe steckt, die auch einen zufälligen dekorativen Kreis enthält. Das ist häufiger der Fall, als man zugeben möchte. Wenn du dieses Chaos in ein KI-Coding-Tool wie Codex fütterst, spiegelt der Output den Input wider. „Garbage in, garbage out“ gilt auch für Large Language Models.

Die Anatomie eines unordentlichen Handoffs

Designer arbeiten schnell. Sie duplizieren Frames, lassen alte Entwürfe sichtbar und verlassen sich auf das bloße Auge statt auf strukturiertes Auto-Layout. Am Ende hast du Ebenennamen wie „Frame 3827“ direkt neben funktionalen Buttons. Dekorative Farbverlauf-Blobs teilen sich dieselbe Gruppe wie dein primärer Call-to-Action. Device-Mockups hüllen die eigentliche Benutzeroberfläche in UI-Elemente ein, die wie Content aussehen. Versteckte Ebenen bleiben in der Datei sichtbar und warten nur darauf, jeden automatisierten Parser zu verwirren.

Für einen Entwickler, der Codex nutzt, ist das Problem nicht Faulheit auf einer der beiden Seiten. Der KI fehlt die menschliche Mustererkennung. Sie liest den Layer-Tree wörtlich. Wenn ein Designer einen Button, eine Überschrift und einen Hintergrund-Blur in eine einzige flache Gruppe packt, behandelt Codex diese als Geschwister mit gleichem strukturellem Gewicht. Das Ergebnis ist ein Frontend, das strukturell kaputt aussieht, noch bevor du überhaupt die Farben überprüft hast.

Ein Workflow, der ans Ziel führt

Du kannst immer noch sauberen Code aus einer unordentlichen Quelle liefern, wenn du wie ein Editor agierst und nicht wie ein einfacher Konverter. Das Ziel ist es, Codex genügend Kontext zu geben, um fundierte Vermutungen anzustellen, und diese Vermutungen dann so einzuschränken, dass sie innerhalb einer vernünftigen Frontend-Architektur bleiben.

Extrahiere alles, bevor die KI es sieht. Aktiviere den Dev Mode, falls du Zugriff hast. Kopiere rohe CSS-Eigenschaften aus dem Inspect-Panel. Exportiere Farbvariablen und Textstile. Füttere Codex zusammen mit deinem Prompt mit diesen strukturierten Daten. Screenshots zeigen die räumliche Wahrheit; Metadaten liefern dir exakte Hex-Codes, Font-Stacks und Zeilenhöhen. Ohne das eine lässt du das Modell bei der anderen Hälfte der Gleichung raten.

Sei unnachgiebig bei Layout-Systemen in deinen Prompts. Bitte Codex niemals einfach darum, „diese Seite zu coden“. Sag ihm genau, was er verwenden soll: „Erstelle die Navigation mit CSS Flexbox und das Dashboard-Grid mit CSS Grid. Verwende keine absolute Positionierung, es sei denn, du platzierst das Benachrichtigungs-Badge relativ zum Icon.“ KI-Tools verwenden oft standardmäßig die absolute Positionierung, weil sie feste X-Y-Koordinaten direkt aus der Design-Datei auslesen. Explizite Anweisungen überschreiben diese Tendenz.

Nutze Screenshots als Leitplanken. Exportiere Frames in 2x-Auflösung. Lade sie zusammen mit deinem Textkontext hoch. Wenn Codex den ersten Entwurf generiert, öffne das Ergebnis in einem Browser direkt neben dem Screenshot. Achte auf Abweichungen beim Spacing, fehlende Rahmen und falsche Schriftstärken. Die KI erfasst meist die grobe Komposition korrekt, während sie das spezifische Padding falsch berechnet.

Plane Korrekturen ein. Vergleiche den gerenderten Output mit deiner visuellen Referenz und korrigiere Fehler manuell. Die KI könnte ein Textlabel in ein Image-Tag verwandeln oder eine Card in ein generisches div statt in ein <article> oder <section> einbetten. Dieser Review-Schritt ist nicht optional. Es ist die Phase, in der du generierten Code in Produktionscode verwandelst.

Wo die KI den Faden verliert

Selbst bei einem sorgfältigen Workflow führen bestimmte unordentliche Muster bei Codex immer wieder zu Problemen.

Dekoratives Rauschen ist die größte Falle. Figma-Dateien enthalten oft Hintergrund-Glows, Statusleisten-Templates und illustrative Icons, die nicht Teil der funktionalen Benutzeroberfläche sind. Ohne klare Beschriftungen codiert die KI diese als permanente DOM-Elemente. Am Ende hast du dedizierte div-Tags für verschwommene Kreise, die eigentlich ein CSS background oder box-shadow hätten sein sollen.

Eine abgeflachte Hierarchie verhindert die Erkennung von Komponenten. In einer sauberen Datei ist eine Card ein Auto-Layout-Frame, der ein Bild, einen Titel und eine Aktion enthält. In einer unordentlichen Datei liegen diese drei Elemente möglicherweise auf der Root-Ebene – visuell ausgerichtet, aber strukturell verwaist. Codex übersieht die Grenze der Card komplett und gibt eine flache Sequenz von Elementen ohne gemeinsames Elternelement aus.

Signal vom Rauschen trennen

Der Entwurf wirft spezifische Fragen auf, mit denen jeder Entwickler konfrontiert wird, wenn er die Brücke zwischen Design und KI-generiertem Code schlägt.

Vertraust du eher Figma-Metadaten oder Screenshots?

Vertraue beiden, aber für unterschiedliche Aufgaben. Nutze Figma-Metadaten für exakte Werte: Farben, Schriftgrößen, Spacing-Tokens und exportierte Assets. Screenshots gewinnen bei der Struktur und der visuellen Hierarchie. Wenn die Metadaten besagen, dass eine Ebene bei x: 120, y: 300 liegt, der Screenshot sie aber zentriert in einer Card zeigt, vertraue dem Screenshot für das Layout und den Metadaten für das Styling. Nutze den Screenshot als deine Ground Truth. Lass das Inspect-Panel die exakten Werte liefern.

Wie trennst du das UI von den Device-Frames?

Bevor du etwas exportierst, blende jede Ebene aus, die nicht zum UI gehört. Wähle das Phone-Mockup oder das Desktop-Chrome aus und schalte die Sichtbarkeit aus. Wenn die Datei zu unübersichtlich ist, um zwischen Template und Inhalt zu unterscheiden, suche nach sich wiederholenden Elementen über mehrere Screens hinweg. Die Statusleiste, der Home-Indicator und das Navigations-Shell befinden sich meist an identischen Positionen. Die eigentlichen Buttons, Formulare und Inhalte liegen im variablen Mittelteil. Blende alles aus, was auf jedem Screen fixiert erscheint. Was übrig bleibt, ist deine eigentliche Benutzeroberfläche.

Wie findest du Komponenten-Grenzen in einer schlecht strukturierten Datei?

Achte auf visuelle Clusterbildung und verifiziere diese anhand des Spacings. Wenn vier Elemente mit konsistenten 16px-Abständen zusammenstehen und dieselbe Hintergrundfüllung teilen, gehören sie wahrscheinlich in einen Container, auch wenn der Designer sie nie gruppiert hat. Überprüfe die Figma-Ebenenliste auf aufeinanderfolgende Stapelung.