·figma-design-to-code
*

figma-design-to-code

✓
ecomfe/tempad-devGitHub: ecomfe/tempad-devQuelle: ecomfe/tempad-dev

Implementieren Sie integrationsbereiten UI-Code aus einer Figma-Auswahl oder einer bereitgestellten NodeId mit TempPad Dev MCP als einziger Quelle für Designnachweise (Code-Snapshot, Struktur, Assets, Token, Codegen-Konfiguration). Erkennen Sie zuerst den Ziel-Repo-Stack und die Konventionen und übersetzen Sie dann das Tailwind-ähnliche JSX/Vue IR von TemPad Dev in projektnativen Code, ohne neue Abhängigkeiten hinzuzufügen. Erraten Sie niemals wichtige Stile oder Maße. Wenn erforderliche Beweise fehlen/widersprüchlich sind oder Vermögenswerte nicht im Rahmen der Repo-Richtlinie gehandhabt werden können, stoppen oder versenden Sie eine sichere Basis mit ausdrücklichen Warnungen und Auslassungen.

ecomfe·figma·design·to·code
34Installationen·1Trend·@ecomfe

Installation

GitHub: ecomfe/tempad-dev
$npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code

So installieren Sie figma-design-to-code

Installieren Sie den KI-Skill figma-design-to-code schnell in Ihrer Entwicklungsumgebung über die Kommandozeile

  1. Terminal öffnen: Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Installationsbefehl ausführen: Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code
  3. Installation überprüfen: Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw

Quelle: ecomfe/tempad-dev.

SKILL.md

Original anzeigen

This skill requires TemPad Dev MCP. If tempad-dev: tools are unavailable/inactive/unauthorized, stop and tell the user to install TemPad Dev MCP and ensure it is activated in the TemPad Dev panel in the Figma design file.

TemPad Dev outputs Tailwind-like IR in either JSX or Vue. Treat MCP outputs as design facts. Never guess key styles.

Never invent: colors, typography (size/weight/line-height/letter-spacing), spacing, radius, borders, shadows, gradients, opacity/overlays, blur.

Implementieren Sie integrationsbereiten UI-Code aus einer Figma-Auswahl oder einer bereitgestellten NodeId mit TempPad Dev MCP als einziger Quelle für Designnachweise (Code-Snapshot, Struktur, Assets, Token, Codegen-Konfiguration). Erkennen Sie zuerst den Ziel-Repo-Stack und die Konventionen und übersetzen Sie dann das Tailwind-ähnliche JSX/Vue IR von TemPad Dev in projektnativen Code, ohne neue Abhängigkeiten hinzuzufügen. Erraten Sie niemals wichtige Stile oder Maße. Wenn erforderliche Beweise fehlen/widersprüchlich sind oder Vermögenswerte nicht im Rahmen der Repo-Richtlinie gehandhabt werden können, stoppen oder versenden Sie eine sichere Basis mit ausdrücklichen Warnungen und Auslassungen. Quelle: ecomfe/tempad-dev.

Fakten (zitierbereit)

Stabile Felder und Befehle für KI/Such-Zitate.

Installationsbefehl
npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code
Quelle
ecomfe/tempad-dev
Kategorie
*Kreativität
Verifiziert
✓
Erstes Auftreten
2026-03-03
Aktualisiert
2026-03-10
URL
https://www.learn-skills.dev/de/skills/ecomfe/tempad-dev/figma-design-to-code

Browse more skills from ecomfe/tempad-dev

Schnelle Antworten

Was ist figma-design-to-code?

Implementieren Sie integrationsbereiten UI-Code aus einer Figma-Auswahl oder einer bereitgestellten NodeId mit TempPad Dev MCP als einziger Quelle für Designnachweise (Code-Snapshot, Struktur, Assets, Token, Codegen-Konfiguration). Erkennen Sie zuerst den Ziel-Repo-Stack und die Konventionen und übersetzen Sie dann das Tailwind-ähnliche JSX/Vue IR von TemPad Dev in projektnativen Code, ohne neue Abhängigkeiten hinzuzufügen. Erraten Sie niemals wichtige Stile oder Maße. Wenn erforderliche Beweise fehlen/widersprüchlich sind oder Vermögenswerte nicht im Rahmen der Repo-Richtlinie gehandhabt werden können, stoppen oder versenden Sie eine sichere Basis mit ausdrücklichen Warnungen und Auslassungen. Quelle: ecomfe/tempad-dev.

Wie installiere ich figma-design-to-code?

Ö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/ecomfe/tempad-dev --skill figma-design-to-code Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw

Wo ist das Quell-Repository?

https://github.com/ecomfe/tempad-dev

Details

Kategorie
*Kreativität
Quelle
skills.sh
Erstes Auftreten
2026-03-03

Verwandte Skills

Keine