Workflow IA du webdesigner freelance : de la découverte client à la livraison

Tu as testé Figma Make, lancé un prompt dans Framer, demandé une arborescence à ChatGPT. Chaque outil t'a bluffé cinq minutes. Puis tu es revenu à ta méthode habituelle, parce que rien ne s'enchaînait et que tu passais plus de temps à corriger qu'à produire.

Ce qui manque, c'est un workflow. Un workflow IA de webdesigner freelance, c'est une suite d'étapes où chaque outil a un rôle précis, où ce qui sort d'une étape nourrit la suivante, et où tu sais à quel moment reprendre la main. Voici un workflow en 7 étapes pour un projet client complet, de l'appel de découverte à la livraison, construit sur les fonctionnalités disponibles en septembre 2026.

C'est quoi, un workflow IA pour un webdesigner freelance ?

Un workflow IA, c'est ton process de projet habituel (découverte, cadrage, wireframe, maquette, intégration, livraison) dans lequel l'IA prend en charge la production brute à chaque étape, pendant que toi tu gardes les décisions : ce qu'on dit, pour qui, dans quel ordre, avec quel niveau de finition.

La règle qui fait tenir l'ensemble : l'IA génère, tu tries, tu valides. Si tu inverses (tu génères au hasard et tu espères que ça tombe juste), tu perds le temps que tu pensais gagner.

Étape 1 : préparer la découverte client avec l'IA

Avant un appel de découverte, l'IA sert à analyser le site actuel du prospect pour arriver avec un diagnostic, pas avec des questions génériques. Donne à ton assistant (Claude, ChatGPT) l'URL du site actuel du prospect et demande-lui :

• un résumé de l'activité, des offres et de la cible telle qu'elle apparaît sur le site ;

• les incohérences visibles : promesse floue, appel à l'action absent, pages orphelines ;

• une liste de 10 questions de découverte adaptées à ce business précis.

Pour le hero du site existant, tu peux aussi passer l'URL dans notre Hero Analyzer : tu arrives à l'appel avec un diagnostic concret à montrer, ce qui change ta position dans la négociation.

Pendant l'appel, en revanche, c'est toi qui mènes. L'IA ne sent pas qu'un client hésite sur le budget ou qu'il parle d'un concurrent avec agacement. Enregistre (avec son accord), puis fais transcrire et résumer : tu récupères les objectifs, les contraintes et les mots exacts du client, que tu réutiliseras dans le copy.

Étape 2 : transformer l'appel en brief et en arborescence

À partir de la transcription, demande à l'IA un brief structuré : objectif du site, cible, offres à mettre en avant, preuves disponibles, contraintes techniques, pages nécessaires. Puis une arborescence page par page, avec pour chaque page son objectif et les sections attendues.

C'est là que l'IA te fait gagner le plus de temps pour le moins de risque : un brief se relit en dix minutes, et une erreur à ce stade coûte une ligne à corriger, pas une maquette à refaire. Envoie ce brief au client pour validation avant d'ouvrir Figma. Il servira aussi de base à ta proposition commerciale si le devis n'est pas encore signé.

Étape 3 : générer les wireframes, puis trier sans pitié

Trois options solides existent pour passer du brief au wireframe :

• Relume génère un sitemap puis des wireframes de sections, exportables dans Figma avec de vrais composants.

• Figma : First Draft génère des propositions d'interface directement dans ton fichier, et Figma Make produit des prototypes à partir d'un prompt.

• Framer : le Wireframer génère une structure de page à partir d'une description, directement dans le projet que tu vas livrer.

Quel que soit l'outil, le résultat de départ est générique : hero, trois colonnes de bénéfices, témoignages, FAQ. Ton travail consiste à confronter chaque section au brief. Une section qui ne sert aucun objectif listé à l'étape 2 sort. Une preuve dont le client dispose (étude de cas, chiffres, logos) et que le wireframe ignore entre. Tu ne rattrapes pas un wireframe générique en ajoutant de jolies couleurs.

Étape 4 : la maquette, où l'IA exécute ton système

Pour la maquette, l'IA donne des résultats exploitables quand elle travaille dans ton design system, et des résultats génériques quand elle part de zéro. Tout se joue sur le contexte que tu lui fournis.

Dans Figma, les Make kits (annoncés en avril 2026) permettent d'apporter ta librairie de composants et tes tokens dans Figma Make, avec des consignes d'usage. Les Make attachments acceptent la charte graphique, des captures, des PDF ou des fichiers de données : Make part de vrais éléments du projet au lieu d'inventer. Depuis Config 2026 (24 juin), l'agent Figma accepte aussi des skills personnalisées, la recherche web, des connecteurs MCP et des pièces jointes, en bêta ouverte.

Pose d'abord à la main ce qui fait l'identité du site : typographies, couleurs, espacements, deux ou trois sections clés. Ensuite, laisse l'IA décliner les autres pages dans ce système. Pour les visuels, les outils Weave intégrés à Figma Design (bêta ouverte, plans Professional et au-dessus) gèrent les tâches répétitives : remplacer un fond, changer un format d'image.

Si tu maîtrises déjà Figma mais que l'intégration te freine, c'est le passage que couvre la formation Framer de Frames Académie : transformer une maquette Figma en site Framer propre, responsive et livrable.

Étape 5 : intégrer dans Framer avec l'IA

Pour passer de Figma à Framer, tu as deux chemins complémentaires. Le premier : le plugin officiel « Figma to HTML with Framer ». Tu copies tes calques dans Figma, tu les colles dans Framer, et ils arrivent éditables, avec leurs groupes et leur structure. Reste à reprendre le layout (stacks, breakpoints, composants). L'import donne une base, il ne remplace pas une mise en page responsive pensée correctement.

Le second : travailler avec l'agent IA de Framer ou avec un agent externe. Framer indique que son agent crée des pages, des sections, du texte et des visuels directement dans le projet, et qu'il peut construire un composant de code à partir d'une description. Tu peux aussi connecter Claude à ton projet Framer (Claude Code et Codex sont pris en charge) pour lui confier des tâches en série : créer des variantes, renommer des calques, remplir le CMS.

La limite est la même partout : l'agent exécute bien une consigne précise sur une structure propre. Sur une structure bancale, il reproduit le problème plus vite. Sans base solide en layout Framer (stacks, contraintes, breakpoints), tu ne sauras pas repérer ce qu'il fait de travers.

Étape 6 : CMS, SEO et relecture automatisée

Une fois le site intégré dans Framer, l'IA reprend l'avantage sur trois tâches répétitives : remplir le CMS, écrire les meta et relire le site avant envoi.

• CMS : l'agent Framer crée des collections et y ajoute le contenu. Donne-lui les textes validés par le client, pas un brouillon à inventer.

• SEO : génération des titles et meta descriptions page par page, que tu relis. Si tu ne sais pas où les renseigner, suis notre guide sur les balises title et meta description dans Framer.

• Relecture : Framer indique que son agent repère les problèmes de contraste, les fautes, les textes alternatifs manquants, les manques SEO et les styles incohérents. Lance cette passe avant chaque envoi au client.

Ce que l'IA ne relit pas à ta place : la cohérence entre la promesse du hero et l'offre réelle, et le rendu sur un vrai téléphone. Ces deux vérifications restent manuelles.

Étape 7 : livrer et rendre le client autonome

À la livraison, l'IA sert à produire la documentation qui rend le client autonome. C'est souvent l'étape bâclée, alors que c'est elle qui déclenche les recommandations. Utilise l'IA pour produire à partir du projet une documentation courte : comment ajouter un article au CMS, modifier un texte, changer une image. Enregistre ensuite une vidéo de prise en main de dix minutes et fais-en générer le résumé écrit.

Le client repart avec un site qu'il sait modifier, et toi avec un process reproductible pour le projet suivant.

Récapitulatif : qui fait quoi à chaque étape

Les 4 erreurs qui cassent un workflow IA

1. Sauter le brief. Sans brief validé, chaque génération part dans une direction différente et tu arbitres au feeling.

2. Laisser l'IA fixer l'identité visuelle. Elle produit la moyenne de ce qu'elle a vu. Ton client paie pour l'inverse.

3. Déléguer ce que tu ne sais pas vérifier. Un agent qui intègre à ta place ne t'aide que si tu sais lire ce qu'il a construit.

4. Changer d'outil à chaque projet. Choisis une chaîne (par exemple Figma pour la maquette, Framer pour le site) et garde-la plusieurs projets. Le gain vient de la répétition.

Quelles compétences faut-il pour qu'un workflow IA fonctionne ?

Un workflow IA ne remplace pas les compétences de webdesigner, il les rend plus rentables. Relis les étapes 3 à 6 : à chaque fois, l'IA fait gagner du temps à condition que tu saches juger le résultat. Juger un wireframe, c'est savoir construire une page qui convertit. Juger une intégration, c'est maîtriser le layout Framer. Sans ces bases, l'IA produit vite quelque chose que tu ne sais pas corriger, et tu le livres quand même.

C'est pour ça que la formation Framer de Frames Académie part des fondamentaux : intégrer un design Figma, publier, construire un site complexe puis un e-commerce, avec un module dédié au freelancing et une communauté pour poser tes questions sur tes projets réels. Une fois ces bases posées, chaque outil IA de ce workflow devient un accélérateur au lieu d'une source de corrections.

Pas sûr de ton niveau actuel ? Fais le quiz Framer en deux minutes pour savoir par où commencer.