·figma-design-to-code
*

figma-design-to-code

Implémentez le code d'interface utilisateur prêt à l'intégration à partir d'une sélection Figma ou d'un nodeId fourni en utilisant TemPad Dev MCP comme seule source de preuves de conception (instantané de code, structure, actifs, jetons, configuration codegen). Détectez d'abord la pile de dépôt cible et les conventions, puis traduisez le JSX/Vue IR de type Tailwind de TemPad Dev en code natif du projet sans ajouter de nouvelles dépendances. Ne devinez jamais les styles ou les mesures clés. Si les preuves requises sont manquantes/contradictoires ou si les actifs ne peuvent pas être traités dans le cadre de la politique de pension, arrêtez ou expédiez une base sûre avec des avertissements et des omissions explicites.

34Installations·1Tendance·@ecomfe

Installation

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

Comment installer figma-design-to-code

Installez rapidement le skill IA figma-design-to-code dans votre environnement de développement via la ligne de commande

  1. Ouvrir le Terminal: Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.)
  2. Exécuter la commande d'installation: Copiez et exécutez cette commande : npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code
  3. Vérifier l'installation: Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Source : ecomfe/tempad-dev.

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.

Implémentez le code d'interface utilisateur prêt à l'intégration à partir d'une sélection Figma ou d'un nodeId fourni en utilisant TemPad Dev MCP comme seule source de preuves de conception (instantané de code, structure, actifs, jetons, configuration codegen). Détectez d'abord la pile de dépôt cible et les conventions, puis traduisez le JSX/Vue IR de type Tailwind de TemPad Dev en code natif du projet sans ajouter de nouvelles dépendances. Ne devinez jamais les styles ou les mesures clés. Si les preuves requises sont manquantes/contradictoires ou si les actifs ne peuvent pas être traités dans le cadre de la politique de pension, arrêtez ou expédiez une base sûre avec des avertissements et des omissions explicites. Source : ecomfe/tempad-dev.

Faits (prêts à citer)

Champs et commandes stables pour les citations IA/recherche.

Commande d'installation
npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code
Catégorie
*Créativité
Vérifié
Première apparition
2026-03-03
Mis à jour
2026-03-10

Browse more skills from ecomfe/tempad-dev

Réponses rapides

Qu'est-ce que figma-design-to-code ?

Implémentez le code d'interface utilisateur prêt à l'intégration à partir d'une sélection Figma ou d'un nodeId fourni en utilisant TemPad Dev MCP comme seule source de preuves de conception (instantané de code, structure, actifs, jetons, configuration codegen). Détectez d'abord la pile de dépôt cible et les conventions, puis traduisez le JSX/Vue IR de type Tailwind de TemPad Dev en code natif du projet sans ajouter de nouvelles dépendances. Ne devinez jamais les styles ou les mesures clés. Si les preuves requises sont manquantes/contradictoires ou si les actifs ne peuvent pas être traités dans le cadre de la politique de pension, arrêtez ou expédiez une base sûre avec des avertissements et des omissions explicites. Source : ecomfe/tempad-dev.

Comment installer figma-design-to-code ?

Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Où se trouve le dépôt source ?

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

Détails

Catégorie
*Créativité
Source
skills.sh
Première apparition
2026-03-03

Skills Connexes

Aucun