Figma Implement Designvon OpenAI

Figma Implement Design Skill.

Nutzen Sie Figma-Kontext, Screenshots und Assets, um das Design im bestehenden Framework Ihres Projekts umzusetzen.

Figma
Frontend-Design
Developer Handoff

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Figma Implement DesignSKILL.md

Aufgabe Figma Ergebnis • Anwendungskomponenten oder eine Seite, die dem ausgewählten Figma-Design entspricht • Projekteigene Zuordnungen von Tokens und Komponenten • Ein visueller Vergleich mit dokumentierten, notwendigen Abweichungen Bevor Sie beginnen Verbundener Figma MCP, Zugriff auf das ausgewählte Design und das Ziel-Repository sowie eine lauffähige Vorschau zur visuellen Prüfung.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Figma-Designs in Ihrer bestehenden Codebasis umsetzen

Ein Workflow zur Umsetzung von Figma in Code, der Node-Kontext, Screenshots, Assets und die Wiederverwendung repository-eigener Elemente kombiniert.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Figma Implement Design arbeitet von einem ausgewählten Figma-Node hin zu Code im Repository der Nutzer. Er kombiniert strukturierten Designkontext mit einem Screenshot und passt dann Layout, Tokens und Assets an das Framework des Projekts an. Von einem Design-Tool generiertes React und Utility-Klassen gelten als Darstellung, nicht als Anweisung, die Architektur der Anwendung zu ersetzen.

Die Quelle betont Wiederverwendung: Vorhandene Buttons, Eingabefelder, Typografie und Layout-Primitive sollen nach Möglichkeit erweitert werden. Komplexe Frames werden in kleinere Node-Abfragen aufgeteilt, wenn die Antwort abgeschnitten wird. Abgeschlossen ist die Arbeit erst, wenn die tatsächliche Umsetzung mit der Referenz verglichen und responsives Verhalten, Interaktionen und Assets geprüft wurden – nicht schon, wenn der Code kompiliert.

Erwartete Ergebnisse

Anwendungskomponenten oder eine Seite, die dem ausgewählten Figma-Design entspricht
Projekteigene Zuordnungen von Tokens und Komponenten
Ein visueller Vergleich mit dokumentierten, notwendigen Abweichungen

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Das exakte Design erfassen
Den Node-spezifischen Link oder die unterstützte Desktop-Auswahl auflösen und dann sowohl strukturierten Kontext als auch einen Screenshot abrufen.
02
An das Repository anpassen
Vorhandene Komponenten und Tokens wiederverwenden, bereitgestellte Assets abrufen und Konventionen für Routing, State und Datenabruf beibehalten.
03
Die laufende UI vergleichen
Layout, Typografie, interaktive Zustände, responsive Einschränkungen und die Darstellung der Assets mit dem ausgewählten Design abgleichen.

02 Einsatzbereiche

Wann er sich eignet

Verbundener Figma MCP, Zugriff auf das ausgewählte Design und das Ziel-Repository sowie eine lauffähige Vorschau zur visuellen Prüfung.

Gut geeignet

Umsetzung eines freigegebenen DesignsNützlich, wenn eine Komponente oder ein Screen bereits eine konkrete Figma-Referenz hat und der nächste Schritt Repository-Code ist.
Wiederverwendung des Design-SystemsPasst zu einer etablierten Anwendung, in der visuelle Übereinstimmung keine doppelte Komponenten-Infrastruktur erzeugen darf.

Zu prüfende Grenzen

Keine Bearbeitung der CanvasDas Ergebnis dieses Skills ist Code. Das Erstellen oder Ändern von Nodes in Figma gehört zu einem separaten Workflow.
Visuelle Genauigkeit muss geprüft werdenDas in der Quelle genannte Ziel pixelgenauer Übereinstimmung belegt nicht, dass eine generierte Umsetzung bereits übereinstimmt. Rendering und Vergleich bleiben notwendig.

Diese Eingaben mitbringen

Bestimmter Figma-NodeGeben Sie einen Frame- oder Komponenten-Link mit seiner Node-ID an oder eine unterstützte Desktop-Auswahl.
Ziel-RepositoryNennen Sie den Ort der Umsetzung und machen Sie vorhandene Komponenten, Tokens und Konventionen verfügbar.
VerhaltensanforderungenKlären Sie interaktive Zustände und responsive Erwartungen, die ein einzelner statischer Frame möglicherweise nicht vorgibt.

03 Wichtige Entscheidungen

Entscheidende Weichenstellungen

Zwei Arten von Belegen
Strukturierte Eigenschaften erklären Größen und Constraints, während der Screenshot visuelle Beziehungen zeigt, die rohe Werte übersehen können.
Die bestehende Architektur bleibt erhalten
Der Workflow überführt die Design-Ausgabe in die eigenen Konventionen des Projekts, statt einen fremden Implementierungsstil pauschal zu übernehmen.

04 Beispielbriefing

Mit einem fokussierten Briefing testen

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Fügen Sie den kuratierten Skill Ihrer Agent-Umgebung hinzu und verbinden Sie Figma separat. Diese Beta-Materialien unterliegen den Figma Developer Terms. Vergewissern Sie sich, dass die Verbindung den Kontext des ausgewählten Designs liefert, bevor Sie mit der Umsetzung beginnen.

Upstream-Quelldatei

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-implement-design/SKILL.md

Verbundener Figma MCP, Zugriff auf das ausgewählte Design und das Ziel-Repository sowie eine lauffähige Vorschau zur visuellen Prüfung.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Vorgaben in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing

Verwende figma-implement-design, um das ausgewählte Einstellungspanel in unserem bestehenden Vue-Projekt umzusetzen. Rufe den exakten Node-Kontext und den Screenshot ab, nutze unsere Formularkomponenten und Token-Variablen und verwende die bereitgestellten Design-Assets. Behalte die bestehende Datenverarbeitung bei. Vergleiche das gerenderte Panel bei Desktop- und Mobilbreite und dokumentiere jede durch Barrierefreiheit bedingte Abweichung vom Figma-Frame.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Die Umsetzung nutzt vorhandene Komponenten und Tokens, wo sie passen.
Echte Assets werden geladen, und Typografie sowie Abstände des ausgewählten Frames werden visuell verglichen.
Responsive und interaktive Zustände werden getestet, statt sie aus einem statischen Screenshot abzuleiten.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agents. Diese Auflistung bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber: OpenAI
Repository: openai/skills
Skill-Datei: skills/.curated/figma-implement-design/SKILL.md
Lizenz: Figma-Bedingungen
Geprüfter Stand: 2026-10-07 · 49f948faa925

Redaktionelle Quellenzusammenfassung

Ein Workflow zur Umsetzung von Figma in Code, der Node-Kontext, Screenshots, Assets und die Wiederverwendung repository-eigener Elemente kombiniert.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Zwingt er mein Projekt zur Nutzung von React?

Nein. Laut Quelle ist von einem Tool generierter Code eine Darstellung des Designs und soll in das tatsächliche Framework des Repositorys übersetzt werden.

Was passiert, wenn die Figma-Antwort abgeschnitten wird?

Der Workflow nutzt Metadaten, um untergeordnete Nodes zu finden, und ruft die relevanten Abschnitte separat ab, statt Lücken zu erraten.

Sollen exakte Figma-Werte jedes vorhandene Token überschreiben?

Die Quelle priorisiert die Konsistenz des Designsystems des Projekts und verlangt minimale, begründete Anpassungen, wenn Werte abweichen.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Design-Arbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn Ihrem Workflow hinzufügen.

OpenDesign herunterladen Design-Skills durchsuchen