Faire un site avec l'IA en 15 minutes

Relume et Webflow : qui fait quoi

Relume est au départ une agence Webflow qui a construit sa propre librairie de composants, puis y a greffé des outils d’IA capables de produire des sitemaps, des wireframes et des style guides. Webflow reste l’outil de design et d’hébergement, et un compte Relume gratuit suffit pour tout ce qui suit.

Le cas d’école est la refonte d’une page existante, celle de l’application Yuka, avec un objectif simple : faire mieux, plus vite.

Générer le sitemap puis le wireframe

Depuis un nouveau projet, l’IA demande un prompt qui décrit l’activité. La génération suit toujours le même enchaînement.

1. Le prompt. Quelques phrases suffisent : ce que fait le produit, ce qui le distingue.
2. Le nombre de pages et la langue. Ce dernier réglage pilote la langue du copywriting généré.
3. Le sitemap. Il sort en moins de deux minutes, avec la structure de la page : navigation, hero, fonctionnalités, fonctionnement, statistiques, témoignages, appel à l’action. Les pages inutiles se suppriment d’un clic.
4. Le wireframe. L’IA remplace chaque bloc du sitemap par une section réelle piochée dans la librairie Relume et rédige le copywriting au passage.

À partir de là, tu reprends la main :

• replace component pour changer une section de design ;
• le changement de style d’une même section, par exemple un formulaire à la place d’un bouton dans le hero ;
• l’ajout ou la suppression de sections au clic droit.

Exporter le wireframe vers Webflow

L’export impose deux préparatifs. D’abord cloner la style guide Relume, construite sur Client First, ce qui crée un site déjà structuré ; sur la page d’accueil, tu retires le page wrapper. Ensuite installer l’application Relume dans le projet Webflow depuis l’onglet des applications, puis t’y connecter. Le projet apparaît avec son sitemap, et Add to page importe la page dans le canvas, style guide comprise.

Designer la page dans Webflow

Réchauffer le fond

Les sections importées arrivent sur du blanc. Plutôt que de le garder, tu retires le background des sections, tu poses la couleur de la marque sur le body via le tag HTML, tu dissocies la variable et tu descends l’opacité très bas, autour de 8 %. Le blanc froid devient une teinte chaude sans toucher aux sections une par une.

La navigation

• largeur maximale ramenée à 80 rem, logo redimensionné, dropdown supprimé au profit de liens d’ancre ;
• fond transparent et backdrop filter blur poussé à 15 pixels ;
• position fixed et z-index à 999 pour qu’elle reste en haut, l’effet de flou se révélant quand le contenu passe dessous.

Les boutons

Sur l’état hover, une translation de -3 pixels sur l’axe Y, et une transition de 200 millisecondes appliquée à transform, à la couleur de fond et à la couleur de bordure. Le bouton secondaire reprend les mêmes transitions en inversant noir et blanc.

Le copywriting

Remplacer un composant fait perdre le texte généré par Relume, ce qui n’est pas grave : le clic droit dans Webflow propose generate copy sur un titre, et accepte une demande précise pour un paragraphe, du type un paragraphe de trois lignes pour telle application. Pense aussi à retirer le ratio et le fit cover que Relume applique par défaut aux images, sinon elles arrivent rognées.

Vérifier le responsive

Les sections importées sont déjà adaptées en tablette, en mobile paysage et en mobile portrait. Restent des ajustements de bon sens sur les petites tailles : supprimer le menu burger si les liens tiennent sans lui, raccourcir le libellé d’un bouton, réduire la taille du titre principal, passer les boutons en pleine largeur pour garder un rendu cohérent.

Conclusion

La méthode repose sur une répartition claire : l’IA de Relume produit la structure et un premier jet de contenu, Webflow apporte les couleurs, les états de survol et les corrections responsive. Le gain de temps se joue sur la structure, pas sur le design.