Créer un site pro avec les agents IA de Framer

Deux agents IA arrivent dans Framer

Framer 3.0 ouvre deux voies. L’agent interne s’installe dans le panneau de droite, à côté du panneau de style : il a tout le contexte du projet et agit dedans, en langage naturel. L’agent externe se connecte à ton propre compte Claude ou Codex et pilote le projet depuis l’extérieur.

Le point qui change tout : ce que produit l’agent est natif. Titres, dispositions, composants restent modifiables à la main derrière, y compris pendant qu’il travaille. C’était l’angle mort des IA précédentes dans Framer, qui ne généraient que des code components intouchables pour qui ne code pas.

L’agent interne de Framer à l’épreuve

Extraire un style guide

Premier cas : extraire la charte graphique d’une page vers un canvas de style guide, avec création des variables de couleur et des polices. Le prompt cible la page avec une arobase et appelle une compétence qui force l’agent à poser ses questions avant de démarrer. Il en pose quatre : light ou dark, tokens actifs ou tous, quelles sections, nouvelle page ou page existante. Répondre en amont évite de tout reprompter après coup.

Il inventorie cinq polices et dix-huit tokens de couleur, construit la page en direct, signale deux problèmes qu’il corrige, et précise à la fin qu’il n’a pas recréé les variables déjà existantes. Le bilan s’affiche dans les statistiques de la conversation, pour un travail qui prend une bonne demi-heure à la main.

Créer une section FAQ

Deuxième cas, plus révélateur. Le prompt désigne la page, la police du titre, la couleur de l’état ouvert, et appelle une compétence qui transforme le résultat en composant natif. L’agent sort une FAQ complète : variantes ouvert et fermé, propriétés question et réponse, responsive compris.

Pour la style guide

126 crédits

De génération

6 min

Pour la section FAQ

143 crédits

De génération

3 min

Ce qu’il ne fait pas, faute d’avoir été demandé : la rotation à 45 degrés de l’icône plus, la fermeture des autres questions à l’ouverture d’une. C’est là que se joue la ligne de partage : prompter la police, la couleur et le passage en composant natif suppose de connaître Framer.

Ce que coûtent réellement les crédits Framer

Un crédit vaut environ 0,015 €, soit 15 € les 1000 crédits. L’allocation dépend du plan, et le calcul est piégeux.

Le détail par modèle se trouve dans les réglages, onglet usage.

L’agent externe : brancher Claude sur ton projet

L’agent externe revient moins cher pour une raison simple : Framer achète ses crédits aux fournisseurs de modèles et prend sa marge, alors que là tu consommes ton propre abonnement. L’installation passe par des instructions à copier depuis la page dédiée de Framer et à coller dans Claude Code, via l’application de bureau plutôt que dans un terminal si tu n’es pas développeur. Ensuite : nouvelle session, compétence Framer appelée en slash, lien du projet récupéré par clic droit, prompt.

Test : reproduire une landing page trouvée sur Pinterest à partir d’une simple capture, en responsive. L’agent crée la page, la navigation en composant, le hero, la section à propos, un slider, le portfolio. Il prend des captures de son propre travail dans Framer pour les comparer à la référence et se corriger, puis attaque les breakpoints.

Le résultat est propre, mais c’est du statique. Le slider ne fonctionne pas, le menu burger non plus, il manque des liens dans la navigation tablette, les graisses de typo sont un peu lourdes, et l’arrondi absent du prompt est absent du résultat. La suite se finit à la main ou avec l’agent interne.

Interne ou externe, et le système de branches

La comparaison tranche : 281 000 tokens pour cette page presque complète en responsive côté agent externe, contre 2,16 millions pour la seule section FAQ côté agent interne, et 5 millions pour une navigation responsive.

L’interne reste le bon choix pour les petits éléments, les animations natives, le responsive, les variantes et les tâches répétitives, avec l’avantage d’être collaboratif. L’externe prend le relais sur les gros volumes et les workflows personnalisés.

Sortie en même temps, la fonctionnalité de branches est réservée au plan Pro. Une branche est un clone du projet publié : tu y travailles, tu casses ce que tu veux, puis tu fusionnes vers la branche principale, ou tu supprimes sans conséquence.

Conclusion

Les agents de Framer ne suppriment pas le métier, ils creusent l’écart entre celui qui ne fait que prompter, et qui plafonne à une landing page statique, et celui qui connaît l’outil, sait quand faire intervenir un composant, une collection CMS ou du code, et dépense moins de tokens pour un meilleur résultat.