Gemini 3.1 pour le design Web et UI

Pages de destination

Je voulais quelque chose qui ne ressemble pas à toutes les autres pages de startups générées par l'IA. Au lieu de demander une "page de destination moderne et épurée", je me suis concentré sur le style et le ressenti dans le prompt.

Le résultat était vraiment bon. Vous pouvez le voir ici :

La mise en page avait une vraie hiérarchie, les états de survol fonctionnaient, et l'animation dégradée était fluide. Elle ne se contentait pas du fond blanc habituel avec un bouton CTA bleu. J'ai ajusté la combinaison de polices, mais comme point de départ, cela m'a fait gagner au moins une heure de configuration.

Voici un prompt que j'ai écrit :

Page de destination pour un studio d'architecture moderne. Utilisez le même fond blanc cassé sur toutes les sections de la page. Utilisez des titres éditoriaux, concentrez-vous d'abord sur les images et le contenu. Le ressenti global est de retenue froide : un studio qui n'a pas besoin de s'expliquer.

Conceptions SaaS

Pour celui-ci, je voulais voir comment il gérait une interface plus complexe avec des données, une navigation et plusieurs états. C'est là que Gemini 3.1 Pro a vraiment montré de quoi il était capable !

La structure des composants est propre, les cartes ont un espacement correct et les badges de statut utilisent réellement des couleurs différentes pour les différents états. Le graphique linéaire était correctement rendu, et les données avaient l'air réalistes.

Voici mon prompt pour ce test :

Tableau de bord analytique SaaS pour une application web de marketing de contenu. Utilisez un thème clair avec un vert néon comme accent. Faites-le ressembler à Linear ou Notion. La mise en page doit être dense, mais pas surchargée de contenu.

Il devrait y avoir une navigation latérale, une barre supérieure avec un champ de recherche + avatar. La zone de contenu principal avec trois cartes métriques en haut (affichant les publications totales, l'engagement moyen et la portée mensuelle), en dessous un graphique en barres empilées montrant le trafic sur 30 jours, et un tableau des publications récentes avec des badges de statut dans une section distincte en dessous.

Les références de Linear ou Notion ont bien pris. Gemini a évité les bordures épaisses et les ombres lourdes qui font généralement paraître les tableaux de bord IA dépassés.

Conceptions mobiles

En plus de tester les conceptions de bureau, je voulais voir comment Gemini 3.1 pouvait concevoir des designs mobiles et d'applications.

Pour cela, j'ai de nouveau utilisé des références dans mon prompt, mentionnant Uber, cette fois sans entrer dans les détails, pour voir jusqu'où il peut aller avec peu de contexte supplémentaire.

Le prompt utilisé :

Écran d'accueil d'application de commande de trajet en mode clair mais avec une palette de couleurs noirs monochrome inspirée par Uber.

Comme vous pouvez le voir, il a une disposition épurée, avec des zones tactiles très claires et audacieuses. Chaque élément interactif est généreusement dimensionné et facile à toucher. Rien ne rivalise pour attirer l'attention, la hiérarchie fait le travail.

Conceptions de diapositives de présentation

En plus des tests d'interface utilisateur, je voulais savoir comment Gemini 3.1 pouvait gérer les diapositives de présentation.

Le résultat est assez net. Gros titre, espace blanc approprié, la statistique était stylisée avec un grand chiffre et une étiquette atténuée en dessous. Cela ressemblait à quelque chose que vous présenteriez réellement à des parties prenantes ou à des collègues.

Prompt utilisé :

Concevez une diapositive de présentation pour un pitch de produit SaaS. Mise en page minimale, beaucoup d'espace. Pensez à Pitch.com, pas PowerPoint.

La diapositive doit être intitulée "Pourquoi maintenant ?" et faire valoir le moment du marché. Fond sombre, gros titre en gras sur la gauche, une statistique clé sur la droite, quelque chose comme "73 % des équipes utilisent encore des feuilles de calcul pour cela."

Comment utiliser Gemini 3.1 Pro

Bien que vous puissiez l'utiliser dans Google AI Studio ou via l'API, le meilleur moyen de l'exploiter pour le design UI est via des outils dédiés qui ont intégré le modèle.

Banani

Banani est un outil de génération d'interface utilisateur basé sur la toile qui a récemment intégré Gemini 3.1 Pro comme l'un des modèles que vous pouvez utiliser. Il vous permet de générer des conceptions UI à partir de prompts de texte simples et de les organiser.

La plupart des exemples que vous avez vus dans cet article ont été réalisés directement là-bas en utilisant Gemini.

C'est un excellent choix si vous voulez une interface utilisateur semblable à Figma et la possibilité d'interagir avec des modèles d'IA comme Gemini, GPT, Claude.

De plus, il préserve votre flux de travail régulier en vous permettant de copier-coller des conceptions vers Figma, de les exporter en tant que code, ou de connecter d'autres agents de codage via MCP.

Gemini Canvas

Le moyen le plus direct d'accéder à Gemini 3.1 Pro est via l'application Gemini elle-même. L'application dispose d'une fonctionnalité de toile qui vous permet de prévisualiser ce que le modèle a généré.

C'est un bon point de départ si vous voulez explorer ce que le modèle peut faire pour le design avant de vous engager dans un outil plus spécialisé.

Notez qu'il peut être bloqué régionalement (au moment d'écrire cet article), donc si vous êtes en dehors des États-Unis, il y a une chance que vous ne puissiez pas encore utiliser cette fonctionnalité de prévisualisation/toile.

Stitch

Stitch est un outil de design expérimental alimenté par l'IA de Google Labs. Il prend des prompts de texte ou des images téléchargées et génère des conceptions d'interface utilisateur complètes avec un code exportable. Vous pouvez utiliser à la fois 3.0 et 3.1 Thinking de là.

J'ai écrit une critique approfondie de Stitch ainsi qu'une critique des alternatives que vous pouvez utiliser pour la génération d'interface utilisateur.

Meilleurs prompts pour Gemini 3.1 Pro

Pour obtenir les meilleurs résultats de conception UI de Gemini 3.1 Pro, vous devez changer la façon dont vous utilisez les prompts. Concentrez-vous sur l'ambiance, les détails de la mise en page et les références.

Ajoutez beaucoup de détails

La qualité de la conception finale générée par Gemini dépend fortement du nombre de détails que vous fournissez.

Soyez très spécifique si vous avez déjà certains éléments que vous souhaitez concevoir et avoir à l'écran. Écrivez ces détails. Le modèle ne peut pas lire dans vos pensées.

Décrivez le ressenti

Ne demandez pas simplement un "en-tête bleu". Gemini est un modèle multimodal qui peut comprendre le code et les aspects visuels.

Vous pouvez décrire un thème abstrait ou une ambiance que vous souhaitez explorer pour le design. Par exemple : "Créez une page de destination pour un portfolio personnel. L'ambiance doit être mystérieuse, victorienne, mais moderne : utilisez des polices sérif, une palette de couleurs charbon profond."

Donnez un contexte supplémentaire

Tout comme le premier point, plus vous en donnez, meilleurs seront les résultats. Joignez des références d'images, des interfaces que vous aimez de Mobbin, des captures d'écran de votre interface actuelle, ou même des croquis sur serviette.

Vous pouvez dire à Gemini : "Reproduisez ces écrans aussi fidèlement que possible. Correspondre à la mise en page, aux éléments et aux styles." Il traite les annotations visuelles comme des instructions de haute priorité.

Utilisez Thinking

Si vous utilisez l'application Gemini, vous pouvez régler le niveau de réflexion sur Élevé pour des mises en page complexes. Cela prendra plus de temps pour générer, mais le modèle passera plus de temps à réfléchir aux visuels et à la structure de la mise en page.

Cela donne lieu à des mises en page et des visuels bien meilleurs dans la conception.

Ce que Reddit dit

Les communautés de programmation et de design sur Reddit ont testé en profondeur le modèle depuis sa récente pré-lancement, et le consensus est mitigé.

Le Bon

De nombreux utilisateurs rapportent que Gemini 3.1 Pro obtient de meilleurs résultats que tous les autres modèles de pointe, en particulier pour l'interface et le design.

• Un utilisateur a généré 50 sites différents à travers 10 catégories et a noté que "la logique SVG et la cohérence de l'espacement sont bien meilleures maintenant", et qu'il "comprend enfin les instructions 'esthétiques' sans avoir besoin de 10 révisions de prompts."

• Un autre utilisateur l'a comparé directement à Claude Opus 4.6 pour le design web, notant que le résultat de Gemini semblait "un niveau moins conçu par l'IA" et avait un meilleur contraste et équilibre.

Le Mauvais

Cependant, ce n'est pas parfait.

• La principale plainte est la "boucle de réflexion sans fin." Sur des tâches complexes, il peut rester bloqué à planifier indéfiniment, en écrivant un long raisonnement répétitif avant de produire un code réel.

• Certains utilisateurs ont également noté que bien qu'il soit génial pour le raisonnement en une seule prise, il a du mal lorsqu'il est utilisé comme agent de codage autonome pour des applications complexes, où Claude Opus 4.6 est encore préféré pour sa fiabilité et son absence de "fluff de planification".

Conclusions

Je l'ai utilisé comme mon outil principal pour la plupart des tâches liées au design, et je commence généralement par lui lorsqu'il s'agit de générer des interfaces utilisateur via l'IA.

Gemini 3.1 Pro vaut vraiment votre temps si vous avez été frustré par les générateurs d'UI génériques avec des dégradés violets d'autres modèles.

Il a une forte "compréhension spatiale", ce qui en fait un modèle de design IA puissant pour le prototypage et l'idéation rapide de mise en page.