GratuitVidéo
Fenêtre d'application et zoom
- 365365 téléchargements
- 125125 mentions J'aime
- 188188 sauvegardes
Compatible avec
+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Maquette Figma vers site Webflow v1.0.0
Utilisez cette ressource pour transformer une maquette Figma en page Webflow
Nouveau
- 335 téléchargements
- 225 mentions J'aime
- 214 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install figma-to-webflowSans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.
Première fois : connectez la CLI avec
npx --yes palatekit@latest loginL'agent lit votre maquette avec le MCP Figma, puis construit dans votre projet Webflow de vrais éléments, des classes et des variables, en suivant des verrous qualité stricts. Il rattache les images, téléverse les polices, gère le responsive et vérifie le rendu avant de dire que c'est terminé. Il ne publie jamais sans votre accord.
Mise à jour le 2 novembre 2026
Aperçus
Caractéristiques
- Fonctionne dans
- Guides d'installation
- Génère avec
- Webflow
- Utilise
- MCP Figma
- MCP Webflow
- Compte Webflow
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitVidéo
Un seul grand chiffre
- 463463 téléchargements
- 223223 mentions J'aime
- 100100 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
PalateKit Motion, la bibliothèque
- 338338 téléchargements
- 198198 mentions J'aime
- 249249 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Trois barres face à face
- 348348 téléchargements
- 133133 mentions J'aime
- 182182 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Avant / après au curseur
- 322322 téléchargements
- 248248 mentions J'aime
- 238238 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Carrousel de trois cartes
- 418418 téléchargements
- 157157 mentions J'aime
- 101101 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Échange en bulles
- 564564 téléchargements
- 127127 mentions J'aime
- 161161 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Liste qui se coche
- 442442 téléchargements
- 233233 mentions J'aime
- 160160 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- SKILL.md, traduit en français : verrous qualité, questions de préparation, marche à suivre en cinq étapes et liste de contrôle
- Règles CSS à appliquer avant de créer variables et styles
- Guide des ressources, images et SVG
- Guides de la barre de navigation en CSS seul et de la vérification du rendu
Pour qui
- Livrer un site Webflow à partir d'une maquette validée
- Reconstruire une page de lancement conçue dans Figma
- Mettre en place un système de variables Webflow propre
Pas pour qui
- Concevoir la maquette elle-même
- Exporter du code HTML à copier-coller
- Les projets qui n'utilisent pas Webflow
Étiquettes
- webflow
- figma
- maquette
- site web
- no-code
À propos
Vous dites
« Construis dans mon projet Webflow la page d'accueil de cette maquette Figma : https://figma.com/design/... Utilise des variables et des unités en rem. »
Skill publiée par webflow sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Le lien de la maquette Figma et Un site Webflow où construire
- Dépendances
- MCP Figma, MCP Webflow et Compte Webflow
- Coûts externes
- Compte Webflow requis Facturé par le fournisseur, sur votre compte.
Comment l'utiliser
- Connectez les MCP Figma et Webflow à votre agent
- Donnez le lien de la maquette et répondez aux quatre questions de préparation
- Contrôlez le rendu dans l'aperçu Webflow avant de publier
Aperçu du contenu
Fichiers
- LICENSE1 Ko
- NOTICE-PALATEKIT.md0,5 Ko
- references/assets-and-svg.md5,7 Ko
- references/css-rules.md4,6 Ko
- references/navbar.md2,5 Ko
- references/verification.md3,5 Ko
- SKILL.md13,8 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- webflow
- Source
- github.com/webflow/webflow-skills/tree/75af2b737f58ceeb290dfe72703045c312cf0b94/plugins/webflow-skills/skills/figma-to-webflow
- Licence
- MIT
Notice
Version modifiée de « webflow-mcp:figma-to-webflow » (webflow, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Que faut-il installer ?
Les serveurs MCP de Figma et de Webflow, et un compte Webflow avec un site. Le Designer doit rester ouvert au premier plan pendant la construction avec le bridge.
La skill mentionne une convention de nommage FlowKit, est-elle nécessaire ?
Non, c'est un choix par défaut. Vous pouvez demander à la place vos propres noms ou du kebab-case.