implement-design

Übersetzt Figma-Designs in produktionsreifen Code mit pixelgenauer visueller Wiedergabetreue. Erfordert eine Figma-MCP-Serververbindung und eine Figma-URL mit Dateischlüssel und Knoten-ID, um Designkontext, Screenshots und Assets zu extrahieren. Siebenstufiger strukturierter Arbeitsablauf: URL parsen, Designkontext abrufen, visuelle Referenz erfassen, Assets herunterladen, in Projektkonventionen übersetzen, 1:1-Parität erreichen und gegen Figma validieren. Priorisiert die Wiederverwendung von Designsystemen gegenüber Duplikation; bildet Figma-Tokens auf das Projekt-Design ab...

npx skills add https://github.com/figma/mcp-server-guide --skill implement-design

ZIP herunterladen GitHub

Mehr Skills von figma

video-interaction-mapper

Diese Fähigkeit sollte verwendet werden, wenn der Benutzer darum bittet, eine UI-Bildschirmaufnahme zu analysieren und Interaktionszustände in Figma zu kartieren. Auslöser für Anfragen wie "Video einfügen…

figma-code-connect

Erstellt und pflegt Figma Code Connect-Vorlagendateien, die Figma-Komponenten Code-Snippets zuordnen. Verwenden Sie dies, wenn der Benutzer Code Connect, Figma-Komponente… erwähnt.

create-design-system-rules

Benutzerdefinierte Design-System-Regeln für eine konsistente Figma-zu-Code-Implementierung in Ihrem Projekt. Generiert projektspezifische Konventionen für Komponentenorganisation, Styling, Design-Tokens und Asset-Handling, die KI-Agenten zu konsistentem Code führen. Unterstützt drei Regeldateiformate: CLAUDE.md für Claude Code, AGENTS.md für Codex CLI und .cursor/rules/figma-design-system.mdc für Cursor. Erfordert Figma-MCP-Serververbindung und Codebase-Analyse, um bestehende Muster vor der Regel... zu entdecken.

figma-implement-motion

Übersetzt Figma-Bewegungen und Animationen in produktionsreifen Anwendungscode. Verwenden Sie dies bei der Implementierung von Animationen/Bewegungen aus einem Figma-Design – der Benutzer erwähnt…

SwiftUI ↔ Figma-Übersetzung. Verwende, wenn der Benutzer Swift, SwiftUI, iOS, iPhone oder iPad erwähnt – in BEIDE Richtungen – und ein Figma-Design in… übersetzt.

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

Diese Fähigkeit hilft Agenten, das Figma-use_figma-MCP-Tool im Slides-Kontext zu verwenden. Kann zusammen mit figma-use verwendet werden, das grundlegendes Wissen zur Nutzung des…

figma-use-figjam

Diese Fähigkeit hilft Agenten, das use_figma MCP-Tool von Figma im FigJam-Kontext zu verwenden. Kann zusammen mit figma-use verwendet werden, das grundlegendes Wissen zur Nutzung des…