For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.
Hauptnavigation

Vorschläge
API Dashboard
ChatGPT ausprobieren
Codex

Codex use case

Figma-Designs in Code umsetzen

Aus Figma-Auswahlen mithilfe eines strukturierten Designkontexts und visueller Prüfungen ausgereifte UIs erstellen.

Difficulty Mittelstufe
Time horizon 1 h

Rufe mit Codex Designkontext, Assets und Varianten aus Figma ab und übertrage sie in Code, der zum Designsystem des Repositorys passt. Vergleiche die Implementierung anschließend mithilfe von Playwright mit der Figma-Referenz und optimiere sie, bis die Darstellung der Vorlage entspricht.

Am besten geeignet für

  • Umsetzung bereits entworfener Ansichten oder Abläufe aus Figma in einer vorhandenen Codebasis
  • Teams, die möchten, dass Codex auf Basis eines strukturierten Designkontexts arbeitet

Contents

    ← Alle Anwendungsfälle

    Figma-Designs in Code umsetzen

    Aus Figma-Auswahlen mithilfe eines strukturierten Designkontexts und visueller Prüfungen ausgereifte UIs erstellen.

    Rufe mit Codex Designkontext, Assets und Varianten aus Figma ab und übertrage sie in Code, der zum Designsystem des Repositorys passt. Vergleiche die Implementierung anschließend mithilfe von Playwright mit der Figma-Referenz und optimiere sie, bis die Darstellung der Vorlage entspricht.

    Mittelstufe
    1 h

    Rufe mit Codex Designkontext, Assets und Varianten aus Figma ab und übertrage sie in Code, der zum Designsystem des Repositorys passt. Vergleiche die Implementierung anschließend mithilfe von Playwright mit der Figma-Referenz und optimiere sie, bis die Darstellung der Vorlage entspricht.

    Mittelstufe
    1 h

    Weiterführende Links

    Skills Model Context Protocol

    Am besten geeignet für

    • Umsetzung bereits entworfener Ansichten oder Abläufe aus Figma in einer vorhandenen Codebasis
    • Teams, die möchten, dass Codex auf Basis eines strukturierten Designkontexts arbeitet

    Skills und Plug-ins

    • Figma
      Setze Designs im Code um, erstelle Code Connect-Zuordnungen zwischen veröffentlichten Komponenten und Quelldateien und generiere projektspezifische Designsystemregeln für wiederholbare Figma-zu-Code-Workflows.
    • Playwright
      Teste das responsive Verhalten und überprüfe die implementierte UI in einem echten Browser.
    Skill Why use it
    Figma Setze Designs im Code um, erstelle Code Connect-Zuordnungen zwischen veröffentlichten Komponenten und Quelldateien und generiere projektspezifische Designsystemregeln für wiederholbare Figma-zu-Code-Workflows.
    Playwright Teste das responsive Verhalten und überprüfe die implementierte UI in einem echten Browser.

    Einstiegs-Prompt

    Implementiere dieses Design aus Figma im aktuellen Projekt mit dem Skill Figma. Anforderungen: - Rufe zuerst `get_design_context` für den genauen Node oder Frame auf. - Wenn die Antwort abgeschnitten ist, verwende `get_metadata`, um die Datei abzubilden, und rufe anschließend mit `get_design_context` nur die benötigten Nodes erneut ab. - Rufe `get_screenshot` für die genaue Variante auf, bevor du mit der Implementierung beginnst. - Verwende die vorhandenen Komponenten und Tokens des Designsystems wieder. - Übertrage die Ausgabe von Figma in die Utilities und Komponentenmuster dieses Repositorys, statt ein paralleles System zu erfinden. - Bilde Abstände, Layout, Hierarchie und responsives Verhalten möglichst genau nach. - Halte dich an die Muster des Repositorys für Routing, Zustandsverwaltung und Datenabrufe. - Sorge dafür, dass die Seite auf Desktop- und Mobilgeräten responsiv ist. - Wenn Figma Bild- oder SVG-Quellen auf localhost zurückgibt, verwende sie direkt. Erstelle keine Platzhalter und füge keine neuen Icon-Pakete hinzu. Validierung: - Vergleiche Darstellung und Verhalten der fertigen UI mit der Referenz aus Figma. - Verwende Playwright, um zu prüfen, ob die UI der Referenz entspricht, und passe sie bei Bedarf so lange an, bis das der Fall ist.
    Implementiere dieses Design aus Figma im aktuellen Projekt mit dem Skill Figma. Anforderungen: - Rufe zuerst `get_design_context` für den genauen Node oder Frame auf. - Wenn die Antwort abgeschnitten ist, verwende `get_metadata`, um die Datei abzubilden, und rufe anschließend mit `get_design_context` nur die benötigten Nodes erneut ab. - Rufe `get_screenshot` für die genaue Variante auf, bevor du mit der Implementierung beginnst. - Verwende die vorhandenen Komponenten und Tokens des Designsystems wieder. - Übertrage die Ausgabe von Figma in die Utilities und Komponentenmuster dieses Repositorys, statt ein paralleles System zu erfinden. - Bilde Abstände, Layout, Hierarchie und responsives Verhalten möglichst genau nach. - Halte dich an die Muster des Repositorys für Routing, Zustandsverwaltung und Datenabrufe. - Sorge dafür, dass die Seite auf Desktop- und Mobilgeräten responsiv ist. - Wenn Figma Bild- oder SVG-Quellen auf localhost zurückgibt, verwende sie direkt. Erstelle keine Platzhalter und füge keine neuen Icon-Pakete hinzu. Validierung: - Vergleiche Darstellung und Verhalten der fertigen UI mit der Referenz aus Figma. - Verwende Playwright, um zu prüfen, ob die UI der Referenz entspricht, und passe sie bei Bedarf so lange an, bis das der Fall ist.

    Einführung

    Wenn dir eine genaue Figma-Auswahl vorliegt, kann Codex daraus eine ausgereifte UI erstellen, ohne die bereits in deinem Projekt etablierten Muster außer Acht zu lassen.

    Mit dem Figma-Skill kann Codex über den Figma-MCP-Server strukturierten Designkontext, Variablen, Assets und die genaue Variante abrufen, die umgesetzt werden soll.

    Mit dem interaktiven Playwright-Skill kann Codex die App in einem echten Browser öffnen, die Implementierung mit der Figma-Referenz vergleichen und Layout oder Verhalten iterativ anpassen, bis das Ergebnis der Vorlage näherkommt.

    Bereite dein Figma-Projekt vor

    Je übersichtlicher deine Figma-Datei ist, desto besser wird die erste Implementierung. So verbesserst du die Übergabe:

    • Verwende nach Möglichkeit Variablen oder Design-Tokens, insbesondere für Farben, Typografie und Abstände
    • Erstelle Komponenten für wiederverwendbare UI-Elemente, statt nicht verknüpfte Ebenen zu duplizieren
    • Nutze möglichst Auto-Layout statt manueller Positionierung
    • Benenne Frames und Ebenen so eindeutig, dass Hauptansicht, Zustand und Varianten sofort erkennbar sind
    • Belasse echte Icons und Bilder nach Möglichkeit in der Datei, damit Codex nicht raten muss

    So erhält Codex eine bessere Struktur, die sich in eine robuste, produktionsreife UI umsetzen lässt.

    Sei konkret

    Je konkreter du die erwarteten Interaktionsmuster und deinen gewünschten Stil beschreibst, desto besser wird das Ergebnis.

    Wenn ein Zustand, ein Breakpoint oder eine Interaktion wichtig ist, weise ausdrücklich darauf hin. Enthält die Datei mehrere ähnliche Varianten, teile Codex mit, welche davon als maßgebliche Vorlage dienen soll.

    Je eindeutiger du festlegst, was exakt übereinstimmen muss und wo die Konventionen des Repositorys Vorrang haben sollen, desto leichter kann Codex die richtigen Abwägungen treffen.

    Bereite das Designsystem vor

    Codex arbeitet am besten, wenn das Ziel-Repository bereits eine klar strukturierte Komponentenebene hat. Codex kann deine vorhandenen Komponenten und dein Designsystem automatisch verwenden, statt sie von Grund auf neu zu erstellen.

    Wenn du es für nötig hältst, gib Codex an, welche Primitives wiederverwendet werden sollen, wo deine Tokens definiert sind und was im Repository bei Buttons, Eingabefeldern, Karten, Typografie und Icons als Standard gilt.

    Betrachte die Figma-MCP-Ausgabe, die häufig wie React und Tailwind aussieht, als strukturelle Referenz und nicht als Vorgabe für den endgültigen Codestil. Bitte Codex, die Ausgabe auf die im Projekt tatsächlich verwendeten Utilities, Komponenten-Wrapper, das Farbsystem, die Typografieskala und die Abstands-Tokens sowie auf die dortigen Muster für Routing, Zustandsverwaltung und Datenabrufe zu übertragen.

    Ablauf

    Beginne mit einer Figma-Auswahl

    Kopiere den Link zu genau dem Figma-Frame, der Komponente oder der Variante, die du umsetzen möchtest. Der Figma-MCP-Ablauf basiert auf Links. Deshalb muss der Link auf den gewünschten Node selbst verweisen und nicht auf einen übergeordneten Frame in dessen Nähe.

    Fordere Codex auf, Figma zu verwenden

    Figma sollte als Grundlage für den ersten Durchlauf dienen. Weise Codex an, vor Beginn der Implementierung den Figma-MCP-Ablauf zu befolgen.

    Dein Prompt sollte Folgendes enthalten:

    1. Rufe zuerst `get_design_context` für den genauen Node oder Frame auf. 2. Wenn die Antwort zu groß oder abgeschnitten ist, rufe `get_metadata` auf, um die Datei abzubilden. Rufe danach `get_design_context` nur für die benötigten Nodes erneut auf. 3. Rufe `get_screenshot` für die genaue Variante auf, die umgesetzt wird. 4. Lade erforderliche Assets erst herunter und beginne erst mit der Implementierung, wenn sowohl der Designkontext als auch die genaue Variante vorliegen. 5. Passe das Ergebnis an die Konventionen des Repositorys an: Verwende vorhandene Komponenten wieder, ersetze reine Utility-Klassen nach Möglichkeit durch das System des Projekts und richte Abstände, Hierarchie und responsives Verhalten am Design aus. 6. Wenn Figma eine Bild- oder SVG-Quelle auf localhost zurückgibt, verwende sie direkt. Erstelle keine Platzhalter und füge kein neues Icon-Paket hinzu, wenn das Asset bereits in der Payload enthalten ist.

    Sobald die erste Implementierung steht, überprüft Codex die UI mit Playwright in einem echten Browser und korrigiert verbleibende Abweichungen bei Darstellung oder Interaktion.

    Tech stack

    Need

    Designquelle

    Default options

    Figma

    Why it's needed

    Die Auswahl eines konkreten Frames oder einer konkreten Komponente sorgt dafür, dass die Implementierung auf einer eindeutigen Vorlage basiert.

    Need Default options Why it's needed
    Designquelle Figma Die Auswahl eines konkreten Frames oder einer konkreten Komponente sorgt dafür, dass die Implementierung auf einer eindeutigen Vorlage basiert.

    Verwandte Anwendungsfälle

    Responsive Frontend-Designs entwickeln

    Nutze Codex, um Screenshots und Designvorgaben in Code umzusetzen, der dem Designsystem des...

    Frontend Design

    Von der Idee zum Proof of Concept

    Nutze Codex mit ImageGen, um aus einer groben Idee eine visuelle Richtung zu entwickeln, den...

    Frontend Entwicklung

    Website für ein Studierendenprojekt erstellen

    Verwende Sites, um anhand von Inhalten aus einem Studierendenprojekt, Designvorlieben...

    Frontend Code