Des fonctionnalités complexes sur Webflow et Framer avec Claude

Pourquoi Claude plutôt qu’une autre IA pour le no-code

ChatGPT vise le grand public, Claude vise les usages professionnels et se place en tête des classements de modèles sur le code. C’est le seul critère qui compte ici : aucune prestation no-code ne se livre sans coder au moins une fonctionnalité, un filtre, une calculatrice, un slider, une animation que l’outil ne produit pas nativement.

Un point de méthode : Claude n’est pas un remplacement de ton cerveau, c’est une extension. Plus tu lui demandes d’expliquer ce qu’il écrit, plus tu deviens capable de le piloter, puis de déboguer seul.

Les limites de Claude, plan par plan

Deux limites coexistent. La limite d’utilisation d’abord : le plan gratuit donne environ 1 million de tokens par mois, soit à peu près 750 000 mots, mais seulement 15 à 30 messages toutes les cinq heures, sans priorité d’accès. Le plan Pro débloque le modèle Opus, le plus performant pour coder, et une consommation bien plus large. Les plans Max, entre 100 et 200 € par mois, ne se justifient qu’au-delà d’un usage humain normal. Pour un freelance no-code, Pro suffit.

La limite de conversation ensuite : au bout de 200 000 tokens, la mémoire de la discussion est pleine. En gratuit, la conversation s’arrête et il faut en ouvrir une autre. À partir du Pro, une compression automatique résume les anciens messages et te laisse continuer sans perdre le fil.

Le plan Pro, par mois

20 €

Messages toutes les cinq heures, en gratuit

15 à 30

De mémoire par conversation

200 000 tokens

Un bandeau de logos qui ralentit au survol dans Webflow

Premier cas concret : un bandeau de logos défilant qui doit ralentir au survol puis reprendre sa vitesse. Impossible nativement dans Webflow, donc direction Claude, dans une conversation simple.

La structure du prompt

1. Le rôle. Développeur expert de l’outil concerné.
2. L’objectif. Le comportement attendu, décrit précisément.
3. Le contexte. Facultatif mais utile, ici la structure HTML récupérée en inspectant le site publié.
4. Les consignes. Celles qui cadrent la réponse.

Itérer sur le résultat

Sortie : le CSS, le JavaScript, et l’endroit exact où les coller dans Webflow. Le premier essai fonctionne mais provoque un sursaut au survol, l’animation repartant de zéro. En décrivant le problème observé, tu obtiens une correction : Claude bascule sur une solution entièrement en JavaScript. C’est la règle, on ne tombe quasiment jamais juste du premier coup.

Gérer une prestation entière dans un projet Claude

Deuxième cas : un calculateur de réduction d’impôts à coder pour un site d’association sur Framer. La conversation simple ne suffit plus, on passe par un projet, qui garde le fil entre toutes les discussions d’un même client.

Instructions et fichiers

Les instructions du projet se placent en tête de chaque prompt : le rôle, l’obligation de poser des questions, et une consigne spécifique, produire chaque composant dans un artefact pour l’avoir en aperçu plutôt qu’en code brut. Côté fichiers, le cahier des charges et le style guide sont déposés en Markdown, format qui aplatit le texte et évite les contenus repliés dans des menus.

Fournir la documentation

Un calculateur ne se fait pas nativement dans Framer, il faut un code component. Pour que Claude tombe juste, on lui donne la documentation officielle des composants Framer, récupérée en Markdown avec Firecrawl et déposée dans le projet. Le prompt se réduit alors à l’objectif, tout le reste étant déjà là.

Claude code le calculateur en suivant le cahier des charges et le style guide, le montre en aperçu, puis, à la demande d’adaptation à Framer, relit la documentation du projet avant de produire un composant TSX de plus de mille lignes.

Dans Framer, il ne reste qu’à créer un nouveau fichier de code, coller, tester, et faire glisser le composant dans la page. Les propriétés générées permettent de modifier les titres, les taux, les montants, d’afficher ou masquer un badge et de changer la couleur principale depuis le panneau de style. Le responsive se reprend en itérant.

Ajouter des compétences à Claude

Dernier levier, dans les paramètres, onglet des capacités : les compétences. Elles se choisissent parmi celles d’Anthropic ou se téléversent depuis des bibliothèques dédiées, en Markdown ou en archive. La compétence de design front-end relève le niveau visuel des interfaces produites et évite les rendus qui sentent l’IA. Tu peux l’invoquer dans une conversation, ou l’imposer dans les instructions d’un projet.

Conclusion

Une conversation simple pour un besoin ponctuel, un projet documenté pour une prestation complète : ce sont les deux modes de travail à retenir. Dans les deux cas, la qualité de la sortie tient au cadrage du prompt et à ta capacité d’itérer.