Figma Create Design System Rulesvon OpenAI

Figma Create Design System Rules Skill.

Ersetzen Sie vage Anweisungen wie „Folge dem Designsystem“ durch konkrete Pfade und Konventionen.

Figma
Design-Systeme
Agentenregeln

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Figma Create Design System RulesSKILL.md

Aufgabe Figma Ergebnis • Ein projektspezifischer Abschnitt oder eine projektspezifische Datei mit Figma-Implementierungsregeln • Konkrete Hinweise zu Komponenten, Tokens und Speicherorten von Assets • Eine kleine Implementierungsprüfung zur Verfeinerung der Regeln Vor dem Start Figma MCP-Verbindung und Zugriff auf die Ziel-Codebasis; das Zielformat der Regeln hängt vom Coding-Host ab.

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

01 Funktionen

Repository-Konventionen in Figma-Implementierungsregeln überführen

Ein Workflow zur Repository-Analyse, der konkrete Agentenregeln für die Figma-Implementierung schreibt und testet.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Figma Create Design System Rules erzeugt projektspezifische Anleitungen für künftige Figma-zu-Code-Arbeit. Der Skill analysiert, wo Komponenten liegen, wie Styling gehandhabt wird, wo Tokens definiert sind und welche Architekturkonventionen Implementierungen einhalten müssen. Ergebnis ist eine Regeldatei, keine Figma-Komponentenbibliothek und kein neu gestalteter Screen.

Die Quelle unterstützt Regelformate für Claude Code, Codex und Cursor. Nützliche Regeln nennen echte Komponentenpfade und Token-Quellen, statt jedem Repository ein generisches React- oder Tailwind-Muster aufzuzwingen. Der Workflow endet damit, die Regeln an einer kleinen Komponente auszuprobieren und das Unwirksame zu verfeinern, denn eine geschriebene Anweisung ist kein Beweis, dass ein Agent ihr durchgängig folgt.

Erwartete Ergebnisse

Ein projektspezifischer Abschnitt oder eine projektspezifische Datei mit Figma-Implementierungsregeln
Konkrete Hinweise zu Komponenten, Tokens und Speicherorten von Assets
Eine kleine Implementierungsprüfung zur Verfeinerung der Regeln

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Bestehende Konventionen untersuchen
Beziehen Sie zuerst die Grundvorlage über das Figma-MCP-Tool create_design_system_rules. Lesen Sie dann Komponentenorganisation, Styling, Imports, Routing und vorhandene Agentenregeln, bevor Sie projektspezifische Ergänzungen entwerfen.
02
Umsetzbare Zuordnungen schreiben
Nennen Sie die tatsächlichen Komponenten- und Token-Dateien, beschreiben Sie den nötigen Figma-Kontext und den Screenshot-Ablauf und erhalten Sie das Framework des Projekts.
03
Regeln speichern und testen
Verwenden Sie das passende Regelformat des Hosts, ohne unabhängige Anweisungen zu überschreiben. Testen Sie eine kleine Figma-Implementierung und entfernen Sie widersprüchliche oder nicht hilfreiche Hinweise.

02 Einsatzbereiche

Wann der Skill passt

Figma MCP-Verbindung und Zugriff auf die Ziel-Codebasis; das Zielformat der Regeln hängt vom Coding-Host ab.

Gut geeignet

Onboarding von AgentenNützlich, wenn neue Implementierungssitzungen wiederholt Komponenten duplizieren oder Werte hartcodieren, für die es bereits Tokens gibt.
Teamkonventionen festhaltenPasst für ein Designsystem-Team, das ungeschriebenes Repository-Wissen in prüfbare Anleitungen überführt.

Zu prüfende Grenzen

Regeln sind keine DurchsetzungEine Regeldatei kann einen Agenten leiten, ersetzt aber weder Linting noch Tests oder einen visuellen Vergleich.
Bestehende Anweisungen müssen erhalten bleibenDas Hinzufügen von Figma-Anleitungen sollte keine unabhängigen Repository-Regeln löschen oder widersprüchliche Architekturanforderungen einführen.

Diese Eingaben mitbringen

Repository-ZugriffStellen Sie das tatsächliche Projekt bereit, einschließlich repräsentativer Komponenten und Styling-Dateien.
Agent-HostGeben Sie das vom Team verwendete Regelformat an, etwa AGENTS.md, CLAUDE.md oder Cursor-Regeln.
Bekannte TeamentscheidungenLiefern Sie Konventionen, die sich nicht zuverlässig ableiten lassen, einschließlich Zuständigkeiten und genehmigter Ausnahmen.

03 Wichtige Entscheidungen

Entscheidende Punkte

Konkrete Pfade statt Schlagworte
Eine benannte Button-Komponente und eine Token-Datei sind umsetzbarer als eine allgemeine Bitte um Konsistenz.
An das Repository anpassen
Die Quelle behandelt die generierte Darstellung von Figma als Designkontext, der in das eigene Framework und die eigenen Styles des Repositorys übertragen wird.

04 Beispielbriefing

Ein fokussiertes 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 kuratierten Skill mit dem vorhandenen Anweisungsmechanismus des Projekts. Diese Beta-Materialien unterliegen den Figma-Entwicklerbedingungen. Prüfen Sie Änderungen an Regeldateien auf ihre Wirkung auf künftiges Agentenverhalten.

Upstream-Quelldatei

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

Figma MCP-Verbindung und Zugriff auf die Ziel-Codebasis; das Zielformat der Regeln hängt vom Coding-Host ab.

Mit einem Ergebnis beginnen

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

Beispiel-Briefing

Nutze figma-create-design-system-rules, um unsere bestehenden Figma-zu-Code-Konventionen zu dokumentieren. Untersuche zuerst das Repository, bewahre die vorhandene AGENTS.md und füge einen fokussierten Abschnitt hinzu, der unsere Komponenten-, Token- und Asset-Pfade nennt. Führe kein neues Styling-Framework ein. Validiere die Anleitung an einer kleinen Komponente und markiere jede Konvention, die eine Teamentscheidung erfordert.

Ergebnis prüfen

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

Jeder referenzierte Komponenten- und Token-Pfad existiert.
Die neuen Regeln widersprechen bestehenden Projektanweisungen nicht und ersetzen sie nicht.
Eine kleine Implementierung folgt den vorgesehenen Konventionen zur Wiederverwendung und zum Styling.

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

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

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

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

Redaktionelle Quellenzusammenfassung

Ein Workflow zur Repository-Analyse, der konkrete Agentenregeln für die Figma-Implementierung schreibt und testet.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Erstellt der Skill Tokens in Figma?

Nein. Das Hauptergebnis sind für Agenten lesbare Projektanleitungen. Variablen und Komponentenbibliotheken in Figma aufzubauen, ist ein anderer Skill.

Muss mein Projekt React und Tailwind verwenden?

Nein. Die Quelle weist den Agenten ausdrücklich an, das Framework und den Styling-Ansatz des Repositorys zu erkennen und die Regeln entsprechend anzupassen.

Sollte jede Konvention zur Regel werden?

Die Quelle empfiehlt, mit den wichtigsten wiederkehrenden Problemen zu beginnen und die Anleitung konkret zu halten, statt den Kontext mit selten nützlichen Regeln zu füllen.

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 in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen