Figma Generate Library
Skill Verifiziert AktivErstellen oder aktualisieren Sie ein professionelles Designsystem in Figma aus einer Codebasis. Verwenden Sie dies, wenn der Benutzer Variablen/Tokens erstellen, Komponentenbibliotheken erstellen, Theming (helle/dunkle Modi) einrichten, Foundations dokumentieren oder Lücken zwischen Code und Figma abgleichen möchte. Diese Fähigkeit lehrt WAS gebaut werden soll und in WELCHER REIHENFOLGE — sie ergänzt die `figma-use`-Fähigkeit, die lehrt WIE die Plugin-API aufgerufen wird. Beide Fähigkeiten sollten zusammen geladen werden.
Benutzern zu ermöglichen, professionelle Figma-Designsysteme systematisch zu erstellen, die mit ihrer Codebasis übereinstimmen, und alles von der Erstellung von Tokens bis zur Generierung von Komponentenvarianten und Dokumentation abzudecken.
Funktionen
- Erstellt Figma-Designsysteme aus Codebasen
- Automatisiert die Erstellung von Variablen und Tokens
- Generiert Komponenten-Sets mit Varianten und Eigenschaften
- Erstellt Dokumentationsseiten für Foundations und Komponenten
- Bietet detaillierte Muster für Fehlerbehebung und Idempotenz
Anwendungsfälle
- Erstellen eines neuen Designsystems in Figma basierend auf den Tokens und Komponenten einer Codebasis
- Aktualisieren eines bestehenden Figma-Designsystems, um Codeänderungen abzugleichen
- Generieren einer visuellen Dokumentation für Design-Tokens (Farben, Abstände, Typografie)
- Standardisieren des Prozesses der Komponentenerstellung mit Variant-Matrizen und Eigenschaftsbindungen
Nicht-Ziele
- Direkte Generierung von Code aus Figma-Designs (das ist die Aufgabe von `figma-use`)
- Verwaltung von Figma-Dateiberechtigungen oder Benutzerzugriff
- Durchführung von Aktionen außerhalb des Figma Plugin API-Sandboxes
Installation
/plugin install mcp-server-guide@figma-mcp-server-guideQualitätspunktzahl
VerifiziertÄhnliche Erweiterungen
Use My Browser
100Verwenden Sie dies, wenn die Arbeit von den Live-Browsersitzungs- oder gerenderten Zustand des Benutzers abhängt und nicht von statischen Abrufen, insbesondere für Browser-Debugging-Kontexte oder von DevTools ausgewählte Elemente oder Anfragen, angemeldeten Dashboards oder CMS-Flows, localhost-Apps, Formularen, Uploads, Downloads, Medieninspektion, DOM- oder iframe-Inspektion, Shadow DOM oder Browserfehlern, die wie Soft-404s, Authentifizierungswände, Anti-Bot-Prüfungen oder Ratenbegrenzungen aussehen.
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Refactor Plan
100Prioritized redesign action plan covering quick wins, medium effort, major rework
Design Intelligence
98Design system bootstrapping and token generation. Takes project context and outputs ready-to-use design tokens, Tailwind config, and CSS variables.
Design System
98Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.
Figma Generate Library
95Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.