figma-to-webflow
Ce skill fait partie de la collection officielle de skills Webflow publiée dans le repo webflow/webflow-skills. Son rôle est de guider un agent (Claude Code, Cursor, etc.) dans la traduction complète d'un design Figma en éléments Webflow réels : structure DOM, classes natives, variables de design, assets, typographie, responsive et (optionnellement) code personnalisé et interactions.
Ce que couvre le skill
Le SKILL.md définit un workflow structuré en cinq grandes étapes — Gather & Decide, Build Foundations, Attach Assets, Navbar & Custom Behavior, Responsive & QA — assorti d'un ensemble de gates non négociables (règles d'arrêt strictes) qui empêchent l'agent de prendre des raccourcis silencieux : pas de publication sans confirmation explicite, pas d'assertion sur les limitations d'outils sans test préalable, pas de styles injectés via des blocs <style> embarqués pour du layout normal, etc.
Le skill exploite deux surfaces d'outils du Webflow MCP : la Data API (headless, utilisable sans Designer ouvert) et le Designer Bridge (nécessite l'onglet Designer au premier plan pour les snapshots et l'inspection canvas). Il s'appuie également sur le Figma MCP pour extraire métadonnées, contexte de design, variables (couleurs, typographie, espacement, rayons) et structure des frames.
Prérequis pour l'utiliser
Ce skill requiert que le Webflow MCP Server soit installé et configuré dans l'environnement de l'agent, ainsi qu'un compte Webflow actif avec au moins un site cible. L'accès au Figma MCP est également nécessaire pour lire les fichiers Figma. Le skill s'installe via le plugin marketplace de Claude Code, Cursor, ou la CLI npx skills, comme décrit dans le README du repo parent.
Point de départ pour l'agent
Lors d'un déclenchement (URL figma.com + site Webflow, phrase « Figma to Webflow », etc.), l'agent lit ce skill, pose quatre questions de configuration obligatoires (mode de build, stratégie de variables, convention de nommage des classes, unités CSS), puis suit l'ordre des étapes et vérifie chaque checklist avant de déclarer le build terminé.