implement-design
✓Übersetzt Figma-Designs mit 1:1 visueller Wiedergabetreue in produktionsbereiten Code. Wird verwendet, wenn die Benutzeroberfläche aus Figma-Dateien implementiert wird, wenn der Benutzer „Design implementieren“, „Code generieren“, „Komponente implementieren“, „Figma-Design erstellen“ erwähnt, Figma-URLs bereitstellt oder nach dem Erstellen von Komponenten fragt, die den Figma-Spezifikationen entsprechen. Erfordert Figma MCP-Serververbindung.
Installation
SKILL.md
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.
Note: When using the local desktop MCP (figma-desktop), fileKey is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only nodeId is needed.
Übersetzt Figma-Designs mit 1:1 visueller Wiedergabetreue in produktionsbereiten Code. Wird verwendet, wenn die Benutzeroberfläche aus Figma-Dateien implementiert wird, wenn der Benutzer „Design implementieren“, „Code generieren“, „Komponente implementieren“, „Figma-Design erstellen“ erwähnt, Figma-URLs bereitstellt oder nach dem Erstellen von Komponenten fragt, die den Figma-Spezifikationen entsprechen. Erfordert Figma MCP-Serververbindung. Quelle: figma/mcp-server-guide.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/figma/mcp-server-guide --skill implement-design- Quelle
- figma/mcp-server-guide
- Kategorie
- *Kreativität
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-01
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist implement-design?
Übersetzt Figma-Designs mit 1:1 visueller Wiedergabetreue in produktionsbereiten Code. Wird verwendet, wenn die Benutzeroberfläche aus Figma-Dateien implementiert wird, wenn der Benutzer „Design implementieren“, „Code generieren“, „Komponente implementieren“, „Figma-Design erstellen“ erwähnt, Figma-URLs bereitstellt oder nach dem Erstellen von Komponenten fragt, die den Figma-Spezifikationen entsprechen. Erfordert Figma MCP-Serververbindung. Quelle: figma/mcp-server-guide.
Wie installiere ich implement-design?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/figma/mcp-server-guide --skill implement-design Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/figma/mcp-server-guide
Details
- Kategorie
- *Kreativität
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-01