Lokalisierter Leseleitfaden
figma-create-design-system-rulesZweck, Verwendung und Quelle
Erzeugt benutzerdefinierte Designsystemregeln für die Codebasis des Benutzers. Verwenden Sie diese Funktion, wenn der Benutzer beispielsweise „Designsystemregeln erstellen“, „Regeln für mein Projekt generieren“, „Designregeln einrichten“ oder „Designsystemrichtlinien anpassen“ angibt oder projektspezifische Konventionen für Figma-zu-Code-Workflows festlegen möchte. Eine Verbindung zum Figma MCP-Server ist erforderlich.
Quelle abgerufen:
- Quell-Repository
- openai/skills
- SKILL.md
skills/.curated/figma-create-design-system-rules/SKILL.md- Repository-Sterne
- 28,420
- Repository zuletzt aktualisiert
- 2026-10-29
- Fähigkeitskategorien
- Design
- Letzte Datenerfassung
Lizenz: Nicht angegeben
Die Workflow-Auszüge dienen als Lesehilfe und sind keine ausführbaren Anweisungen von Codez. Für die Erstellung dieser Seite wurde keine Drittanbieter-Skill verwendet.
Die folgenden Abschnitte zu Zweck und Arbeitsablauf sind vorgelagertes Material, das zur besseren Lesbarkeit aufbereitet und übersetzt wurde. Sie unterscheiden sich von der separat gekennzeichneten redaktionellen Analyse von Codez.
Was diese Fähigkeit bewirkt
Erzeugt benutzerdefinierte Designsystemregeln für die Codebasis des Benutzers. Verwenden Sie diese Funktion, wenn der Benutzer beispielsweise „Designsystemregeln erstellen“, „Regeln für mein Projekt generieren“, „Designregeln einrichten“ oder „Designsystemrichtlinien anpassen“ angibt oder projektspezifische Konventionen für Figma-zu-Code-Workflows festlegen möchte. Eine Verbindung zum Figma MCP-Server ist erforderlich.
Wie der vorgelagerte Workflow funktioniert
Erforderlicher Arbeitsablauf
Befolgen Sie diese Schritte in der angegebenen Reihenfolge. Überspringen Sie keine Schritte.
Aufwärtspassage · L49 ↗Überblick
Diese Funktion hilft Ihnen, benutzerdefinierte Designsystemregeln zu erstellen, die auf die spezifischen Bedürfnisse Ihres Projekts zugeschnitten sind. Diese Regeln leiten KI-Codierungsagenten an, beim Umsetzen von Figma-Designs konsistenten und qualitativ hochwertigen Code zu erzeugen und stellen sicher, dass die Konventionen, Komponentenmuster und Architekturentscheidungen Ihres Teams automatisch eingehalten werden.
Aufwärtspassage · L8 ↗Wann man diese Fähigkeit einsetzen sollte
Nutzen Sie diese Fähigkeit, wenn: Sie ein neues Projekt starten, das Figma-Designs verwendet; Sie einen KI-Codierungsagenten in ein bestehendes Projekt mit etablierten Mustern integrieren; Sie Figma-zu-Code-Workflows in Ihrem Team standardisieren.
Aufwärtspassage · L39 ↗- IMPORTANT: Always use components from `[YOUR_PATH]` when possible
- Place new UI components in `[COMPONENT_DIRECTORY]`
- Follow `[NAMING_CONVENTION]` for component names
- Components must export as `[EXPORT_PATTERN]`Anforderungen und Einrichtung
Voraussetzungen
Der Figma MCP-Server muss verbunden und erreichbar sein. Zugriff auf den Projektcode für die Analyse erforderlich.
Aufwärtspassage · L33 ↗Grenzwerte und Qualitätskontrollen
WICHTIG für kritische Regeln verwenden
Regeln, die unter keinen Umständen verletzt werden dürfen, werden mit „WICHTIG:“ gekennzeichnet, um sicherzustellen, dass der Agent sie priorisiert.
Aufwärtspassage · L452 ↗Beginnen Sie mit einem sicheren Testlauf
- Prüfen Sie den unterstützten Host und die Installationsanweisungen für das Repository. Halten Sie das Skill-Verzeichnis und die darin enthaltenen Skripte, Assets und Dokumentationen zusammen;SKILL.mdEine Einzelperson kann Abhängigkeiten außer Acht lassen.
- Geben Sie dem Agenten Ihre tatsächlichen Eingaben, die gewünschten Ausgaben und die Akzeptanzkriterien an. Aufrufsyntax und verfügbare Tools hängen vom Hostsystem ab; diese Website geht nicht von einem universellen Installationsbefehl aus.
- Testen Sie den Quellworkflow in einem temporären Projekt oder auf einer Kopie. Überprüfen Sie Vorgänge, die Dateien, Remote-Dienste oder abrechnungsfähige Ressourcen ändern, bevor Sie diese zulassen.
- Überprüfen Sie die Ausgabe anhand der Quellqualitätsprüfungen und Ihrer eigenen Anforderungen. Ein erfolgreicher Trigger oder eine hohe Anzahl von Sternen im Repository garantiert kein korrektes Ergebnis.
Lesen Sie mehr dazu in der Quelle.
- Überblick
- Was sind Designsystemregeln?
- Voraussetzungen
- Wann man diese Fähigkeit einsetzen sollte
- Erforderlicher Arbeitsablauf
- Schritt1: Führen Sie das Tool „Designsystemregeln erstellen“ aus.
- Schritt2Analysiere die Codebasis
- Schritt3: Projektspezifische Regeln generieren
- Schritt4Regeln in der entsprechenden Regeldatei speichern
- Schritt5: Validieren und Iterieren
- Wichtige Regeln (immer einbeziehen)
- Empfohlene Regeln (Sehr wertvoll)
- Optionale Regeln (projektspezifisch)
- Beispiel1React + Tailwind Projekt
- Beispiel2Vue + Benutzerdefiniertes CSS-Projekt
- Beispiel3: Designsystem-Team
- Einfach anfangen, iterieren
- Seien Sie präzise.
- Regeln umsetzbar machen
- WICHTIG für kritische Regeln verwenden
- Dokumentieren Sie das Warum
- Problem: Der Agent hält sich nicht an die Regeln.
- Problem: Die Regeln widersprechen sich.
- Problem: Zu viele Regeln erhöhen die Latenz.
- Problem: Regeln veralten im Laufe der Projektentwicklung.
- Regeln des Designsystems verstehen
- Zusätzliche Ressourcen
Verwandte Fähigkeiten
Übersetzung und Umfang
Dieser Leseleitfaden wählt Passagen aus dem markierten stromaufwärts gelegenen Abschnitt aus.SKILL.mdDie Übersetzung wurde unterstützt. Es handelt sich weder um ein vollständiges Handbuch noch um eine Garantie für geprüfte Kompatibilität. Lesen Sie vor der Verwendung das Original und die darin referenzierten Dateien.
Diese Einleitung bezieht sich auf die unten angepinnte Version; die aktuelle Repository-Aktivität und der Erfassungszeitpunkt werden separat angezeigt.
- Angeheftete Quelle
- Lesen Sie das Original ↗
- Quelle abgerufen
- Source-Commit
49f948faa9258a0c61caceaf225e179651397431- Quelle SHA-256
1f4d7e16ba5325a80da32e2e6bde0ea850ba9287f35f4675d51d55d2f0dc6e2a