Lokalisierter Leseleitfaden
figma-implement-designZweck, Verwendung und Quelle
Übersetzt Figma-Designs in produktionsreifen Anwendungscode mit1:1Visuelle Genauigkeit. Verwenden Sie diese Option bei der Implementierung von UI-Code aus Figma-Dateien, wenn der Benutzer „Design implementieren“, „Code generieren“ oder „Komponente implementieren“ angibt, Figma-URLs bereitstellt oder Komponenten gemäß den Figma-Spezifikationen erstellen möchte. Für Figma-Canvas-Schreibvorgänge überuse_figma, verwendenfigma-useDie
Quelle abgerufen:
- Quell-Repository
- openai/skills
- SKILL.md
skills/.curated/figma-implement-design/SKILL.md- Repository-Sterne
- 28,420
- Repository zuletzt aktualisiert
- 2026-10-29
- Fähigkeitskategorien
- Design
- Letzte Datenerfassung
Lizenz: Lizenzdatei: Prüfung ausstehend
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
Übersetzt Figma-Designs in produktionsreifen Anwendungscode mit1:1Visuelle Genauigkeit. Verwenden Sie diese Option bei der Implementierung von UI-Code aus Figma-Dateien, wenn der Benutzer „Design implementieren“, „Code generieren“ oder „Komponente implementieren“ angibt, Figma-URLs bereitstellt oder Komponenten gemäß den Figma-Spezifikationen erstellen möchte. Für Figma-Canvas-Schreibvorgänge überuse_figma, verwendenfigma-useDie
Wie der vorgelagerte Workflow funktioniert
Erforderlicher Arbeitsablauf
Befolgen Sie diese Schritte in der angegebenen Reihenfolge. Überspringen Sie keine Schritte.
Aufwärtspassage · L29 ↗Überblick
Diese Funktion bietet einen strukturierten Workflow für die pixelgenaue Übersetzung von Figma-Designs in produktionsreifen Code. Sie gewährleistet die konsistente Integration mit dem Figma MCP-Server, die korrekte Verwendung von Design-Tokens und1:1Visuelle Übereinstimmung mit den Entwürfen.
Aufwärtspassage · L8 ↗Schritt2: Fetch Design Context
Laufenget_design_contextmit dem extrahierten Dateischlüssel und der Knoten-ID. Dies liefert die strukturierten Daten, einschließlich: Layout-Eigenschaften (Auto Layout, Einschränkungen, Größe), Farbwerte und Design-Tokens.
get_design_context(fileKey=":fileKey", nodeId="1-2")Anforderungen und Einrichtung
Voraussetzungen
Der Figma MCP-Server muss verbunden und erreichbar sein. Der Benutzer muss eine Figma-URL im folgenden Format angeben:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Grenzwerte und Qualitätskontrollen
Codequalität
Vermeiden Sie fest codierte Werte – extrahieren Sie diese in Konstanten oder Design-Tokens. Sorgen Sie dafür, dass Komponenten zusammensetzbar und wiederverwendbar sind.
Aufwärtspassage · L156 ↗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
- Kompetenzgrenzen
- Voraussetzungen
- Erforderlicher Arbeitsablauf
- Option A: Aus Figma-URL parsen
- Option B: Aktuelle Auswahl aus der Figma Desktop-App verwenden (nur Figma-Desktop MCP)
- Schritt2: Fetch Design Context
- Schritt3: Visuelle Referenz erfassen
- Schritt4: Erforderliche Assets herunterladen
- Schritt5: In Projektkonventionen übersetzen
- Schritt6: Erreichen1:1Visuelle Parität
- Schritt7: Gegen Figma validieren
- Komponentenorganisation
- Design-Systemintegration
- Codequalität
- Beispiel1: Implementierung einer Schaltflächenkomponente
- Beispiel2: Erstellen eines Dashboard-Layouts
- Beginnen Sie immer mit dem Kontext.
- Inkrementelle Validierung
- Dokumentabweichungen
- Wiederverwendung statt Neugestaltung
- Designsystem zuerst
- Problem: Figma-Ausgabe wird abgeschnitten
- Problem: Das Design stimmt nach der Implementierung nicht überein.
- Problem: Assets werden nicht geladen
- Problem: Die Werte der Design-Tokens weichen von Figma ab.
- Designumsetzung 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
63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad