Figma Design Generator
Skill Verifiziert AktivVerwenden Sie diese Fähigkeit zusammen mit figma-use, wenn die Aufgabe die Übersetzung einer Anwendungsseite, -ansicht oder eines Layouts mit mehreren Abschnitten in Figma beinhaltet. Auslöser: 'in Figma schreiben', 'in Figma aus Code erstellen', 'Seite in Figma einfügen', 'diese App/Seite nehmen und in Figma erstellen', 'einen Bildschirm erstellen', 'eine Landingpage in Figma erstellen', 'den Figma-Bildschirm an den Code anpassen', 'dieses Modal/Dialogfeld/Drawer/Panel in Figma konvertieren'. Dies ist die bevorzugte Workflow-Fähigkeit, wenn der Benutzer eine vollständige Seite, ein Modal, ein Dialogfeld, einen Drawer, eine Seitenleiste, ein Panel oder eine beliebige zusammengesetzte Ansicht mit mehreren Abschnitten in Figma aus Code oder einer Beschreibung erstellen oder aktualisieren möchte. Erkennt Designsystemkomponenten, Variablen und Stile aus Code Connect-Dateien, vorhandenen Bildschirmen und Bibliotheken und importiert sie, dann werden Ansichten abschnittsweise mithilfe von Designsystem-Tokens anstelle von hartcodierten Werten zusammengesetzt.
Zur effizienten Erstellung und Aktualisierung von Figma-Bildschirmen und -Ansichten durch Wiederverwendung vorhandener Designsystem-Assets, um die Konsistenz zwischen Code und Design zu gewährleisten.
Funktionen
- Übersetzt Anwendungs-Code oder Beschreibungen in Figma-Designs
- Entdeckt und wiederverwendet Designsystemkomponenten, Variablen und Stile
- Setzt UI-Ansichten abschnittsweise inkrementell zusammen
- Unterstützt die Erstellung/Aktualisierung von vollständigen Seiten, Modals, Dialogen, Drawern und Panels
- Integriert sich mit Figmas Code Connect zur Komponentenabbildung
Anwendungsfälle
- Übersetzung einer neuen Anwendungsseite oder -ansicht in Figma
- Aktualisierung vorhandener Figma-Bildschirme, um sie an Codeänderungen anzupassen
- Erstellung komplexer UI-Container mit mehreren Abschnitten wie Modals oder Sidebars in Figma
- Sicherstellung der Designgenauigkeit durch Verwendung von Designsystem-Tokens anstelle von hartcodierten Werten
Nicht-Ziele
- Erstellung neuer wiederverwendbarer Komponenten oder Varianten (verwenden Sie figma-use direkt)
- Schreiben von Code Connect-Zuordnungen (verwenden Sie figma-code-connect)
- Generierung von Code aus Figma-Designs (wird von anderen Tools/Fähigkeiten gehandhabt)
- Manuelles Zeichnen von UI-Elementen ohne Nutzung von Designsystem-Tokens
Workflow
- Verstehen Sie das Ergebnis und identifizieren Sie Abschnitte und Komponenten.
- Sammeln Sie Designsystemschlüssel (Komponenten, Variablen, Stile) über Code Connect, vorhandene Ansichten oder Suche.
- Erstellen Sie einen Wrapper-Rahmen in Figma für die Ansicht.
- Erstellen Sie jeden UI-Abschnitt innerhalb des Wrappers und importieren und binden Sie Designsystem-Assets.
- Validieren Sie die vollständige Ansicht und übertragen Sie Bilder, falls zutreffend.
- Aktualisieren Sie vorhandene Ansichten, indem Sie Knoten identifizieren, modifizieren oder ersetzen.
Praktiken
- Nutzung von Designsystem-Tokens
- Wiederverwendung von Komponenteninstanzen
- Abschnittsweiser Aufbau
- Fehlerbehebung und Validierung
Voraussetzungen
- Figma MCP-Server-Verbindung
- Zieldatei in Figma mit einem veröffentlichten Designsystem (oder einer zugänglichen Bibliothek)
- Quellcode oder Beschreibung des Bildschirms/der Ansicht
- Optional, eine Figma-Datein-URL oder ein Schlüssel als Kontext
Installation
/plugin install mcp-server-guide@figma-mcp-server-guideQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Project Session Manager
100Worktree-first dev environment manager for issues, PRs, and features with optional tmux sessions
Public Google Drive
100Erstellen Sie öffentliche Google Docs- oder Google Sheet-Dateien, ohne OAuth zu benötigen. Verwenden Sie diese Fähigkeit, um Google Docs und Sheets zu erstellen und zu bearbeiten, keine Google-Anmeldung erforderlich. Dokumente sind unter teilbaren Links sichtbar. Die Registrierung erfolgt automatisch bei der ersten Verwendung.
Oh My Claudecode
100Process-first advisor routing for Claude, Codex, or Gemini via `omc ask`, with artifact capture and no raw CLI assembly
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.
X Twitter Scraper
100Verwenden Sie dies, wenn der Benutzer X (Twitter)-Daten oder durch Bestätigung gesicherte X-Aktionen über Xquik benötigt: Tweet-Suche, Benutzer-Lookup, Follower-Extraktion, Mediendownload, Überwachung, Webhooks, MCP, SDKs, Posting, Likes, DMs und Profilaktualisierungen. Erfordert einen Xquik API-Schlüssel. Fordern Sie niemals X-Login-Materialien an.
Slack
100Use the Slack tool to react, pin/unpin, send, edit, delete messages, or fetch Slack member info.