Figma Generate Libraryvon OpenAI

Figma Generate Library Skill.

Beginnen Sie mit dem Token-Modell und bauen Sie danach wiederverwendbare Komponenten in kontrollierter Reihenfolge auf.

Figma
Designsysteme
Komponentenbibliotheken

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Figma Generate LibrarySKILL.md

Aufgabe Figma Ergebnis • Figma-Variablensammlungen, semantische Aliasse sowie Text- oder Effektstile • Dokumentierte wiederverwendbare Komponenten mit kontrollierten Variantensets • Ein Statusprotokoll sowie eine abschließende Prüfung von Bindungen, Benennung und Optik Vor dem Start Figma MCP mit Zugriff auf bearbeitbare Dateien, Zugriff auf das Repository sowie dem begleitenden figma-use-Skill samt Hilfsreferenzen.

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

01 Funktionen

Eine Figma-Bibliothek auf Basis von Code-Grundlagen aufbauen

Figma-Variablen und -Stile vor den Komponenten aufbauen, mit gespeichertem Statusprotokoll und Freigabe in jeder Phase.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Figma Generate Library ist ein mehrphasiger Designsystem-Workflow und kein Generator, der einen Screen in einem Schritt erzeugt. Er vergleicht Code, die vorhandene Figma-Datei und abonnierte Bibliotheken und legt dann einen definierten Umfang für Tokens und Komponenten fest, bevor geschrieben wird. Variablen und Stile kommen vor den Komponenten, damit visuelle Eigenschaften an eine konsistente Grundlage gebunden werden können.

Die Quelle legt besonderen Wert auf langlaufenden Status: erzeugte IDs, deterministische Namen und ein gespeichertes Protokoll ermöglichen die Wiederaufnahme, ohne Knoten zu duplizieren. Die Komponentenarbeit umfasst Variantenlayout, Text- und Boolean-Eigenschaften, Icon-Austausch und Dokumentation. Menschliche Prüfpunkte gehören zum Workflow, besonders wenn Code und Figma voneinander abweichen; der Skill entscheidet nicht stillschweigend, welches System maßgeblich werden soll.

Erwartete Ergebnisse

Figma-Variablensammlungen, semantische Aliasse sowie Text- oder Effektstile
Dokumentierte wiederverwendbare Komponenten mit kontrollierten Variantensets
Ein Statusprotokoll sowie eine abschließende Prüfung von Bindungen, Benennung und Optik

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Umfang erfassen und festlegen
Code und Figma-Assets inventarisieren, Bibliotheken durchsuchen und vor der Erstellung den genauen anfänglichen Satz an Tokens und Komponenten vereinbaren.
02
Grundlagen erstellen
Primitive und semantische Variablen, Modi, Geltungsbereiche und Code-Syntax aufbauen, danach Typografie und Effekte. Die Grundlagen freigeben lassen, dann Seitenstruktur und Dokumentation der Grundlagen erstellen und vor Beginn der Komponenten eine separate Freigabe einholen.
03
Komponenten schrittweise aufbauen
Jeweils eine Komponente mit Variablenbindungen, Eigenschaften und Dokumentation erstellen. Struktur und Erscheinungsbild validieren, den Screenshot zeigen und vor der nächsten Komponente die Freigabe einholen.
04
Abgleichen und prüfen
Benennung, ungelöste Bindungen und optionale Code-Connect-Zuordnungen prüfen, und zwar anhand protokollierter IDs statt durch Raten oder breit angelegte Bereinigung.

02 Einsatzbereiche

Wann der Einsatz sinnvoll ist

Figma MCP mit Zugriff auf bearbeitbare Dateien, Zugriff auf das Repository sowie dem begleitenden figma-use-Skill samt Hilfsreferenzen.

Gut geeignet

Abgleich von Code und BibliothekNützlich, wenn implementierte Tokens und Komponenten ein wartbares Figma-Pendant brauchen.
Kontrollierte Reparatur der BibliothekPasst zu einer Lückenanalyse, bei der manche Assets wiederverwendet, andere umhüllt und einige neu aufgebaut werden.

Zu prüfende Grenzen

Kein Generator für einen einzigen AufrufDie Quelle verlangt ausdrücklich gestaffelte Arbeit und Freigabepunkte. Eine große Komponentenbibliothek sollte nicht als sicher in einem Vorgang erstellbar dargestellt werden.
Konflikte erfordern Entscheidungen der VerantwortlichenWenn Code und Figma voneinander abweichen, müssen Produkt- oder Design-Verantwortliche entscheiden, welcher Wert oder welcher Komponentenvertrag gelten soll.

Diese Eingaben mitbringen

Inventare von Code und FigmaStellen Sie das Repository und die bearbeitbare Zieldatei bereit, einschließlich bestehender Token-Konventionen.
Anfänglicher UmfangNennen Sie die Token-Sammlungen, Modi und Komponentenfamilien, die für die erste nutzbare Version nötig sind.
Zuständigkeit für die PrüfungLegen Sie fest, wer Grundlagen, Komponenten und Konflikte zwischen bestehenden Systemen freigeben darf.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

Semantische Aliasse
Die Quelle trennt rohe Primitive von modusabhängigen semantischen Tokens, statt Rohwerte in allen Komponenten zu duplizieren.
Wiederaufnehmbare Erstellung
Ein gespeichertes Knotenprotokoll und deterministische Benennung erleichtern es, unterbrochene Bibliotheksarbeit ohne Duplikate fortzusetzen.

04 Beispielbriefing

Mit einem fokussierten Briefing ausprobieren

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

Einrichtung prüfen

Verwenden Sie den vollständigen kuratierten Ordner einschließlich Hilfsskripten und Phasenreferenzen. Diese Beta-Materialien unterliegen den Figma-Entwicklerbedingungen. Behandeln Sie Figma-Schreibzugriffe und die Veröffentlichung von Bibliotheken als jeweils gesondert zu autorisierende Vorgänge.

Upstream-Quelldatei

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

Figma MCP mit Zugriff auf bearbeitbare Dateien, Zugriff auf das Repository sowie dem begleitenden figma-use-Skill samt Hilfsreferenzen.

Mit einem Ergebnis beginnen

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

Beispiel-Briefing

Nutze figma-generate-library, um eine kleine Bibliothek passend zu unserer Codebasis zu planen: Farb-Tokens mit hellem und dunklem Modus, Abstände, Typografie, Button und Input. Beginne mit einer rein lesenden Erfassung und zeige Konflikte zwischen Code und Figma. Warte vor Schreibvorgängen auf die Freigabe des Umfangs, baue zuerst die Grundlagen auf und führe ein Statusprotokoll, damit jede Komponente einzeln geprüft und wiederaufgenommen werden kann.

Ergebnis prüfen

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

Semantische Variablen verweisen per Alias auf Primitive und tragen die vorgesehenen Modi und Geltungsbereiche.
Komponentenvarianten und Icon-Austausch entsprechen dem vereinbarten Vertrag, ohne unnötige Kombinationen.
Protokollierte IDs, Screenshots und Bindungsprüfungen belegen jede abgeschlossene Phase.

OpenDesign bietet Coding-Agenten einen lokalen Design-Arbeitsbereich. Dieser Eintrag bedeutet nicht, dass der Skill gebündelt ist oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt den unten verlinkten, festgelegten Quellstand. Verhalten und Anforderungen im Upstream können sich ändern.

Quelleninhaber: OpenAI
Repository: openai/skills
Skill-Datei: skills/.curated/figma-generate-library/SKILL.md
Lizenz: Figma-Bedingungen
Geprüfter Snapshot: 2026-10-07 · 49f948faa925

Redaktionelle Quellenzusammenfassung

Figma-Variablen und -Stile vor den Komponenten aufbauen, mit gespeichertem Statusprotokoll und Freigabe in jeder Phase.

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

Wie unterscheidet sich das vom Generieren eines Screens?

Es baut die wiederverwendbaren Grundlagen und Komponenten auf, die Screens nutzen, darunter Token-Sammlungen, Varianten und Dokumentation.

Können Schreibvorgänge auf der Canvas parallel laufen?

Die Quelle verlangt ausdrücklich sequenzielle Figma-Änderungen, damit Status und zurückgegebene Knoten-IDs zuverlässig bleiben.

Ersetzt es eine bestehende Bibliothek automatisch?

Nein. Erfassung und Freigabe des Umfangs gehen der Erstellung voraus, und die Wiederverwendungsstrategie bevorzugt vorhandene lokale Assets vor Importen oder neuen Komponenten.

OpenDesign

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

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen