Pour coder avec Gemini 4 Argon dans l'application web Gemini, sélectionnez 4 Argon, activez Canvas, puis décrivez l'application à créer. Canvas réunit un éditeur de code et un aperçu. Vous pouvez examiner l'interface et demander des modifications sans configurer d'abord un projet local.
Cet exemple porte sur Daylight People, un tableau de bord RH en React. Le cahier des charges prévoit une interface crème et jaune, une navigation compacte, un agenda, des graphiques et un tableau des salariés. Il précise aussi ce qui doit se passer lorsqu'on change de période, recherche un salarié ou exporte un CSV. Ces comportements permettent de vérifier davantage que l'apparence du premier écran.
Avant de commencer
Connectez-vous à gemini.google.com dans un navigateur sur ordinateur et vérifiez que le menu propose 4 Argon. L'annonce de Google indique un accès dans l'application Gemini pour les abonnés Google AI Pro et Ultra. Consultez les modèles disponibles pour votre compte : une connexion ne garantit pas l'accès à tous les modèles. Annonce de Google sur Argon
Ce tutoriel utilise l'application Gemini. Les étapes dans Canvas ne nécessitent ni clé API Gemini, ni projet npm, ni terminal. L'intégration par API suit une autre procédure ; l'identifiant du modèle est gemini-4-argon. Documentation du modèle
Préparez un cahier des charges précisant le public visé, les sections, la hiérarchie visuelle et les interactions. Vous pouvez joindre une image de référence que vous avez le droit d'utiliser. Expliquez quels détails vous intéressent, par exemple les espacements compacts ou les graphiques asymétriques, plutôt que de demander simplement un « tableau de bord moderne ».
1. Sélectionner 4 Argon
Démarrez une nouvelle conversation et ouvrez le sélecteur près du champ de saisie. Dans l'interface examinée pour ce guide, le menu affichait 4 Argon avec la description Complex tasks. Sélectionnez-le et vérifiez que la barre de saisie indique Argon.
Le nom affiché dans ce menu est le point à vérifier. Le logo Gemini sur la page d'accueil n'indique pas quel modèle répondra au prochain message.
2. Activer Canvas
Dans l'interface sur ordinateur examinée :
Cliquez sur + près du champ de saisie.
Ouvrez More tools.
Sélectionnez Canvas.
Vérifiez que la pastille Canvas apparaît dans la zone de rédaction.
Saisissez ensuite le prompt. En sélectionnant d'abord l'outil, vous indiquez à Gemini l'espace dans lequel créer l'application React. Une demande dans une conversation classique peut produire un bloc de code au lieu d'une application avec aperçu.
L'emplacement des commandes peut évoluer. L'aide de Google décrit l'ouverture de Canvas depuis le menu d'ajout de fichiers ; la capture et le chemin ci-dessus correspondent à l'interface observée le 17 octobre 2026. Aide Canvas
3. Coller le prompt
Le prompt demande un en-tête intégrant des statistiques compactes, une jauge de satisfaction en arc et des panneaux de tailles différentes. L'agenda occupe la colonne de gauche. Le graphique de performance et les barres des types de contrats occupent les deux suivantes. Une rangée de tuiles de congés et le tableau des salariés complètent l'ensemble.
Ces instructions définissent la composition avant le choix des composants. Elles précisent la densité attendue : le premier écran sur ordinateur doit montrer des données utiles et le début du tableau.
À vous d'essayer
Avec 4 Argon sélectionné et Canvas activé, copiez le prompt complet ci-dessous dans Gemini et envoyez-le. Adaptez si besoin le nom du produit, les couleurs et les valeurs d'exemple. Une version en texte brut est également disponible.
Create a polished, interactive React HR dashboard directly in the active Canvas, with a working Preview. Use React functional components and hooks. Use Tailwind CSS, lucide-react icons and Recharts if available in Canvas. Keep all data local and fictional. Do not call an API, connect a database, deploy anything, or return a standalone HTML page.
Product: Daylight People, a people operations workspace. The visual direction is a dense, carefully composed editorial dashboard: cream and pale butter yellow surfaces, charcoal text, a sunflower yellow accent, subtle gray borders, and compact typography. It should feel like a designed product, with varied panel sizes and useful information visible immediately. Avoid oversized KPI cards, giant headings, heavy shadows, purple gradients, and an evenly spaced wall of identical cards.
Desktop composition at approximately 1440 by 1000: make the application fill the entire preview viewport, edge to edge, with width: 100% and min-height: 100dvh. The application itself must have no outer frame, centered max-width container, gray surround, external padding, shell border or shell corner rounding. Make the left sidebar roughly 210px wide and full height, and let the main content fill the remaining width. Keep the cream-to-pale-yellow wash inside the application. Use 16-20px internal content gutters, 10-12px panel radii, 8-12px grid gaps, and a mostly 12-14px UI type scale with a 28-32px greeting. Use a clean system sans-serif stack with clear contrast. Distinguish the application's full-viewport layout from the smaller rounded panels inside it.
Scrolling architecture: constrain the app root to height: 100dvh with overflow: hidden. Use a roughly 210px sidebar and a flexible main region with min-width: 0 and min-height: 0. The main region must scroll vertically on its own with overflow-y: auto. The sidebar must not move when the main content scrolls. Make it a full-height flex column with the logo/header and bottom profile outside a separate flex: 1; min-height: 0; overflow-y: auto navigation area. Prevent html/body from becoming a shared dashboard scroller. On short screens, only the sidebar's navigation list should scroll, while its logo and bottom profile stay visible. On mobile, use a fixed overlay drawer with independent scrolling and lock the main scroll while it is open.
Sidebar: a small original Daylight People wordmark; a search field; a two-column grid of six navigation tiles with thin line icons (Dashboard, Employees, Time off, Finance, Payroll, Reviews). The selected tile should be charcoal with white text, the rest lightly outlined. Below that, show a compact favorites list, a short workspace menu, and a small profile control anchored at the bottom. Use initials avatars instead of remote photos.
Main area: breadcrumb and two small icon buttons at the top. Below it, a wide greeting band: Good morning, Alex; a date subtitle; four compact inline statistics (432 employees, 24 payrolls, 8% turnover, 24 applicants). At the right of this band, place a large, elegant open-ring gauge showing 80% employee satisfaction, with a sunflower yellow arc and small tick labels. Keep the metric strip integrated into the header rather than four separate cards.
Below the greeting, build an asymmetric three-column grid. Left: a schedule panel with Meetings / Tasks / Events tabs and two or three compact agenda cards; highlight the first meeting with a soft yellow gradient. Center: a team performance panel showing 70.32%, a restrained yellow line/area chart and a 7 days / 30 days / 90 days segmented control. Right: an employment status panel with three chunky rounded vertical bars for Permanent, Contract and Probation, using yellow, charcoal and gray. Below the center and right panels, put five narrow leave-balance tiles in one row: Annual, Monthly, Daily, Hourly, Sick. Use subtle borders to tie this row together.
Finish with a full-width employee table beneath these panels. Include eight fictional employees, initials avatars, employee ID, role, email at example.com, status, department and an actions button. Put search and a department filter in the table toolbar, plus Export CSV. On the desktop, the first few employee rows should be visible within the initial screen rather than below a huge empty chart.
Make the demo work: date ranges change the performance chart and its summary; schedule tabs show different content; search filters by name or email; the department filter combines with search; show a useful empty state with a reset button; Export CSV exports only visible employee rows; an employee action opens a small detail drawer that closes with Escape and returns focus. Navigation tiles should select and navigate to real in-page sections or show a clear compact placeholder, not silently do nothing. The satisfaction gauge must have a text equivalent.
Responsive behavior: at 390px use a working mobile navigation drawer, stack the panels, and keep page-level horizontal scrolling at zero. Let the table scroll inside its own container. Preserve readable text and touch targets. Include semantic headings, associated input labels, visible keyboard focus, aria-expanded on drawer buttons, a sensible focus order, and reduced-motion support.
Before coding, briefly state the layout decisions. Then build and render the complete React app in Canvas. After rendering, list only the checks you actually performed and identify anything that still needs manual testing. Do not claim production readiness or invent test results.
Le prompt demande des composants fonctionnels React et des hooks. L'utilisation de Tailwind CSS, lucide-react et Recharts dépend de leur prise en charge dans la session Canvas. Des données fictives locales permettent d'examiner la disposition et les interactions sans configurer de base de données.
Google présente les aperçus React comme une fonctionnalité de Canvas. Les dépendances doivent néanmoins se charger dans l'aperçu : citer une bibliothèque ne prouve pas que les imports générés fonctionnent. Présentation de Canvas par Google
4. Examiner l'aperçu
Attendez la fin de la génération. Utilisez Code pour lire l'implémentation et Preview pour revenir à l'interface. Si l'aperçu échoue, consultez la console et transmettez l'erreur à Gemini avant de demander d'autres fonctions. Outils de code et de diagnostic de Canvas
Commencez par la composition générale. Le message d'accueil ne doit pas écraser la page. Les quatre statistiques doivent rester compactes ; les panneaux de l'agenda, du graphique et des contrats doivent avoir des largeurs différentes. Vérifiez que le jaune crée une hiérarchie sans nuire au contraste.
Examinez ensuite une fenêtre étroite. Une belle capture sur ordinateur ne prouve pas que la navigation fonctionne sur téléphone ou que le tableau reste dans son conteneur.
L'exemple montre le tableau de bord crème et jaune, l'agenda, le graphique et l'annuaire des salariés. Votre disposition générée peut être différente.
5. Essayer les commandes
Effectuez quelques vérifications reproductibles. Notez l'action et le résultat attendu avant de cliquer, puis consignez ce qui se produit.
Commande | Action à essayer | Résultat attendu |
|---|---|---|
Période | Passer de 7 à 30 puis à 90 jours | Le graphique et son résumé changent de façon cohérente |
Onglets de l'agenda | Ouvrir Meetings, Tasks et Events | Chaque onglet affiche ses éléments et son état sélectionné |
Recherche de salariés | Saisir un nom affiché, puis une adresse e-mail | Les lignes correspondantes restent visibles |
Filtre par service | Combiner un service et une recherche | Les lignes respectent les deux critères |
Aucun résultat | Saisir un nom absent | Un message clair et une commande de réinitialisation apparaissent |
Export CSV | Exporter après filtrage | Le fichier contient les lignes visibles et les en-têtes attendus |
Fiche salarié | Ouvrir une action de ligne, puis appuyer sur Échap | Le volet se ferme et le focus revient à sa commande d'ouverture |
Navigation mobile | Ouvrir et fermer le menu à une largeur de 390px | La navigation reste utilisable sans défilement horizontal de la page |
Demandez à Gemini de distinguer la revue statique du code des vérifications effectuées dans un navigateur. Une liste de contrôle générée ne prouve pas que des tests ont été exécutés avec succès.
6. Relire le code
Lorsque le prototype se comporte comme prévu, examinez le code et les dépendances. Recherchez les appels réseau inattendus, les sources distantes et les identifiants. Connecter un véritable système RH nécessiterait une conception distincte pour l'authentification, les autorisations et le traitement des données.
Gardez le Canvas privé pendant la revue. Exporter le code et créer un lien public sont deux actions distinctes. Google précise qu'un lien public peut rendre l'application et ses données associées accessibles aux personnes qui possèdent ce lien. Partage et export Canvas
Le prototype sert de point de départ à la revue de l'implémentation. Avant de l'intégrer à un produit, testez-le avec le framework, les versions des dépendances, les tailles d'écran et la configuration d'accessibilité de ce produit.
Résoudre les premiers problèmes
Un bloc de code remplace l'aperçu
Vérifiez que Canvas était sélectionné avant l'envoi du prompt. Repérez la pastille Canvas et créez l'application dans cet espace. Ce guide prévoit de construire et d'examiner l'application React directement dans Canvas.
L'aperçu est vide ou signale un import invalide
Copiez l'erreur depuis la console et demandez à Gemini de la corriger en conservant la disposition et les commandes fonctionnelles. Si une dépendance manque, demandez une solution prise en charge. Vérifiez de nouveau l'aperçu après la correction.
Le résultat manque de personnalité
Précisez les proportions, les espacements, les tailles de texte et la densité des informations. Une référence peut indiquer la direction visuelle, mais expliquez ce que vous souhaitez reprendre. Utilisez votre propre nom de produit, vos contenus et vos ressources.
Un bouton ne fait rien
Décrivez le changement attendu : l'action de détail doit ouvrir un volet ; le bouton d'export doit produire un fichier. Recommencez les vérifications après la modification, y compris l'absence de résultats et l'utilisation au clavier si nécessaire.
Argon n'apparaît pas dans le menu
Vérifiez le compte Google et son accès aux modèles. La disponibilité de Canvas et celle d'un modèle sont deux points distincts. Consultez les informations actuelles de Google plutôt que de supposer que votre liste correspond à la capture. Disponibilité d'Argon
