Figma Generate Designvon OpenAI

Figma Generate Design Skill.

Erstellen Sie einen bearbeitbaren Figma-Screen, der mit seinem Design-System verbunden bleibt.

Figma
UI-Design
Design-Systeme

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Figma Generate DesignSKILL.md

Aufgabe Figma Ergebnis • Ein neuer oder aktualisierter Figma-Screen aus Komponenteninstanzen • An Variablen gebundene Farben, Abstände und Radien mit wiederverwendbaren Stilen • Visuelle Prüfungen einzelner Abschnitte und des gesamten Screens gegen die Quelle Vor dem Start Verbundener Figma MCP, Zugriff auf die Zieldatei, ein veröffentlichtes Design-System und der zugehörige Skill figma-use für Canvas-Operationen.

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

01 Funktionen

Figma-Screens aus vorhandenen Design-System-Assets zusammenbauen

Erstellen Sie Figma-Screens aus vorhandenen Bibliothekskomponenten und Variablen und prüfen Sie jeden Abschnitt beim Zusammenbau.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Figma Generate Design arbeitet in Richtung Code-zu-Design: Das Ergebnis ist ein Screen in Figma, kein Anwendungscode. Vor dem Zusammenbau der Seite sucht es vorhandene Komponenteninstanzen, Bibliotheksvariablen sowie Text- und Effektstile. Die Quelle bevorzugt Wiederverwendung gegenüber dem Zeichnen ähnlicher Kästen mit fest codierten Werten.

Die Zusammenstellung erfolgt schrittweise. Zuerst wird ein Wrapper-Frame erstellt, dann wird jeder Abschnitt darin aufgebaut und geprüft. Texteigenschaften der Komponenten und Standardvarianten werden mit dem Quellcode abgeglichen, während Screenshots einzelner Abschnitte abgeschnittenen Text und übrig gebliebene Platzhalter erkennen, die in einer verkleinerten Ganzseitenansicht verschwinden können. Das Ergebnis sollen bearbeitbare Instanzen des Design-Systems sein, nicht nur ein Screenshot der Anwendung.

Erwartete Ergebnisse

Ein neuer oder aktualisierter Figma-Screen aus Komponenteninstanzen
An Variablen gebundene Farben, Abstände und Radien mit wiederverwendbaren Stilen
Visuelle Prüfungen einzelner Abschnitte und des gesamten Screens gegen die Quelle

Beispiel-Brief ansehen

Vom Brief zur Prüfung

01
Quell-Screen erfassen
Lesen Sie Abschnitte, Komponenten und Standardwerte der Props. Bestimmen Sie die Figma-Zieldatei und die vorhandenen Konventionen des Systems.
02
Assets finden und wiederverwenden
Prüfen Sie vorhandene Screens und durchsuchen Sie verknüpfte Bibliotheken nach Komponenten, Variablen und Stilen. Ein leeres Ergebnis bei lokalen Variablen beweist nicht, dass entfernte Tokens fehlen.
03
Abschnitte aufbauen und prüfen
Erstellen Sie zuerst den Wrapper, bauen Sie einen Abschnitt nach dem anderen und prüfen Sie Text, Varianten und Layout, bevor Sie fortfahren.

02 Einsatzbereiche

Wann der Einsatz sinnvoll ist

Verbundener Figma MCP, Zugriff auf die Zieldatei, ein veröffentlichtes Design-System und der zugehörige Skill figma-use für Canvas-Operationen.

Gut geeignet

Code-zu-Figma-ÜbergabeNützlich, wenn ein funktionierender Anwendungs-Screen eine bearbeitbare Design-Entsprechung benötigt, die mit der Komponentenbibliothek verbunden ist.
Bestehende Screens aktualisierenPasst zu gezielten Änderungen an Inhalten oder Varianten, ohne die gesamte Figma-Seite neu aufzubauen.

Zu prüfende Grenzen

Zugriff auf das Design-System nötigDer dokumentierte Workflow setzt Zugriff auf veröffentlichte Komponenten oder eine Team-Bibliothek und eine verfügbare Figma-MCP-Verbindung voraus.
Nicht Figma-zu-CodeDie Erzeugung einer Anwendungsimplementierung aus einem Design liegt ausdrücklich außerhalb der primären Ausrichtung dieses Skills.

Diese Eingaben mitbringen

Figma-ZieldateiGeben Sie die Datei oder Seite an, in der der Screen erstellt oder aktualisiert werden soll.
Screen-QuelleLiefern Sie Anwendungscode oder einen konkreten Brief Abschnitt für Abschnitt mit echtem Text.
BibliothekskontextNennen Sie vorhandene Screens oder veröffentlichte Bibliotheken, deren Komponenten und Tokens wiederverwendet werden sollen.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

Entfernte Tokens sind auffindbar
Die Quelle unterscheidet lokale Variablen von Variablen verknüpfter Bibliotheken und vermeidet so unnötige doppelte Token-Systeme.
Prüfung auf Abschnittsebene
Durch die Prüfung einzelner Abschnitte lassen sich falsche Varianten und abgeschnittener Text leichter erkennen als in einer einzigen Miniatur der ganzen Seite.

04 Beispielbriefing

Einen fokussierten Brief ausprobieren

Der folgende Beispiel-Brief wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn verwenden.

Einrichtung prüfen

Halten Sie figma-use und die zugehörigen API-Referenzen neben diesem Workflow bereit. Diese Beta-Materialien unterliegen den Figma-Entwicklerbedingungen. Die Installation des Skills allein verbindet oder autorisiert keine Figma-Datei.

Upstream-Quelldatei

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

Verbundener Figma MCP, Zugriff auf die Zieldatei, ein veröffentlichtes Design-System und der zugehörige Skill figma-use für Canvas-Operationen.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Vorgaben dieses Briefs an, bevor Sie den Skill ausführen.

Beispiel-Brief

Verwende figma-generate-design, um unseren Screen für die Kontoeinstellungen in der angegebenen Figma-Datei nachzubauen. Verwende die veröffentlichten Komponenten und Variablen wieder, prüfe die Standard-Props im Code und behalte die tatsächlichen Beschriftungen bei. Erstelle zuerst den Wrapper, dann einen Abschnitt nach dem anderen. Zeige Screenshots der Abschnitte und behebe abgeschnittenen Text oder Platzhalterinhalte, bevor du den Screen für fertig erklärst.

Ergebnis prüfen

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

Steuerelemente sind verknüpfte Komponenteninstanzen und keine von Hand gezeichneten Ersatzelemente.
Text und Varianten entsprechen dem gelieferten Screen, einschließlich der Standard-Props.
Abschnitts-Screenshots zeigen keine abgeschnittenen Beschriftungen, Überlappungen oder übrig gebliebenen Platzhalter.

OpenDesign bietet Coding-Agenten einen lokalen Design-Arbeitsbereich. Dieser Eintrag 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.

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

Redaktionelle Quellenzusammenfassung

Erstellen Sie Figma-Screens aus vorhandenen Bibliothekskomponenten und Variablen und prüfen Sie jeden Abschnitt beim Zusammenbau.

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

06 Fragen vor dem Start

Fragen vor dem Start

Ist das Ergebnis ein Screenshot?

Der Hauptworkflow erstellt bearbeitbare Figma-Knoten und -Instanzen. Eine erfasste Webseite kann als Referenz dienen, ist aber nicht die vorgesehene endgültige Struktur des Screens.

Was, wenn keine lokalen Variablen gefunden werden?

Laut Quelle sind auch verknüpfte Bibliotheken zu prüfen. Entfernte veröffentlichte Variablen werden von der API für lokale Variablen nicht zurückgegeben.

Kann nur ein Teil eines Screens aktualisiert werden?

Ja. Der Skill kann vorhandene Abschnitte finden und deren Text, Varianten oder Layout ändern, während nicht betroffene Bereiche erhalten bleiben.

OpenDesign

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

Halten Sie Brief, Quellmaterial und Design-Arbeit gemeinsam in einem lokalen Arbeitsbereich. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen