Per programmare con Gemini 4 Argon nell'app web di Gemini, seleziona 4 Argon, attiva Canvas e descrivi l'app che vuoi creare. Canvas riunisce editor di codice e anteprima nello stesso ambiente: puoi esaminare l'interfaccia e chiedere modifiche senza dover prima configurare un progetto locale.
L'esempio è una dashboard React per le risorse umane chiamata Daylight People. Il brief prevede un'interfaccia color crema e giallo, una navigazione compatta, un'agenda, grafici delle prestazioni e una tabella dei dipendenti. Specifica anche cosa deve accadere quando si cambia l'intervallo di date, si cercano dipendenti o si esporta un CSV. Questi comportamenti permettono di valutare il risultato oltre all'aspetto della prima schermata.
Cosa serve per iniziare
Usa un browser desktop, accedi a gemini.google.com e controlla che il menu dei modelli includa 4 Argon. L'annuncio di Google indica l'accesso nell'app Gemini per gli abbonati Google AI Pro e Ultra. Verifica i modelli disponibili nel tuo account: il semplice accesso non garantisce che tutti gli account possano usare Argon. Annuncio di Google su Argon
Questo tutorial usa l'app Gemini. Per i passaggi in Canvas non servono una chiave API Gemini, un progetto npm o un terminale. L'integrazione tramite API segue una procedura distinta; l'identificatore del modello API è gemini-4-argon. Documentazione del modello
Prepara un brief di design. Un brief utile definisce il pubblico, le sezioni della pagina, la gerarchia visiva e le interazioni. Puoi anche allegare un'immagine di riferimento che hai il diritto di usare. Descrivi gli elementi che ti interessano, come gli spazi compatti o la disposizione asimmetrica dei grafici, invece di chiedere soltanto una «dashboard moderna».
1. Seleziona 4 Argon
Avvia una nuova chat e apri il selettore del modello accanto al campo del prompt. Nell'interfaccia esaminata per questa guida, il menu mostrava 4 Argon con la descrizione Complex tasks. Selezionalo, poi verifica che nella barra del prompt compaia Argon.
L'etichetta del menu è il controllo da fare. La sola presenza del marchio Gemini nella pagina iniziale non indica quale modello risponderà al prossimo messaggio.
2. Attiva Canvas prima di inviare il prompt
Nell'interfaccia desktop che abbiamo esaminato, il percorso era questo:
Fai clic su + accanto al campo del prompt.
Apri More tools.
Seleziona Canvas.
Verifica che nel campo di composizione compaia il pulsante Canvas.
Poi inserisci il prompt. Selezionando prima lo strumento, indichi a Gemini l'ambiente in cui creare l'app React. Una normale chat può invece restituire un blocco di codice.
La posizione dei comandi può cambiare. La guida di Google descrive l'avvio di una chat con Canvas tramite il menu per aggiungere file; lo screenshot e il percorso indicati qui corrispondono all'interfaccia osservata il 17 ottobre 2026. Guida a Canvas
3. Incolla il prompt della dashboard
Il brief richiede un'intestazione con statistiche compatte, un indicatore ad anello aperto per la soddisfazione e pannelli di dimensioni diverse. L'agenda occupa la colonna sinistra. Un grafico delle prestazioni e le barre relative ai contratti occupano le altre due colonne, con una fila di piccoli riquadri per i saldi delle assenze subito sotto. Segue la tabella dei dipendenti.
Queste istruzioni definiscono la composizione prima che Gemini scelga i singoli componenti. Chiariscono anche quante informazioni mostrare: la schermata desktop iniziale deve contenere dati utili e l'inizio della tabella.
Prova tu
Dopo aver selezionato 4 Argon e attivato Canvas, copia l'intero prompt qui sotto in Gemini e invialo. Puoi modificare il nome del prodotto, i colori e i dati di esempio per adattarli al tuo progetto. è disponibile anche una copia in testo semplice.
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.
Il prompt richiede componenti funzionali React e hook. L'uso di Tailwind CSS, lucide-react e Recharts dipende dal supporto offerto da Canvas nella sessione. Richiede inoltre dati fittizi locali, così puoi valutare layout e comportamento senza configurare un database.
Google documenta il supporto alle anteprime React in Canvas. Le dipendenze dell'app devono comunque caricarsi correttamente nell'anteprima: citare una libreria nel prompt non dimostra che le importazioni generate funzionino. Presentazione di Canvas di Google
4. Esamina l'app in Preview
Attendi che la generazione finisca, poi esamina l'anteprima in Canvas. Usa Code per leggere il codice e Preview per tornare all'interfaccia. Se l'anteprima non funziona, controlla la console e segnala l'errore a Gemini prima di chiedere altre funzioni. La guida di Google descrive i comandi per il codice e la console. Strumenti di Canvas per codice ed errori
Valuta prima la composizione generale. Il saluto non dovrebbe occupare troppo spazio. Le quattro statistiche principali devono rimanere compatte, mentre i pannelli di agenda, grafico e contratti devono avere larghezze diverse. Controlla che il giallo dia risalto agli elementi senza ridurre il contrasto del testo.
Dopo la vista desktop, esamina una finestra stretta. Un bello screenshot desktop non dimostra che il menu si apra su un telefono o che la tabella rimanga nel proprio contenitore.
L'anteprima di esempio mostra la dashboard color crema e giallo, l'agenda, il grafico delle prestazioni e l'elenco dei dipendenti. Il layout generato nella tua sessione potrebbe essere diverso.
5. Prova i comandi della dashboard
Esegui alcune verifiche ripetibili. Annota i dati da inserire e il risultato atteso prima di fare clic, poi registra cosa succede.
Comando | Cosa provare | Risultato atteso |
|---|---|---|
Intervallo di date | Passa da 7 a 30 e a 90 giorni | Il grafico delle prestazioni e il riepilogo cambiano in modo coerente |
Schede dell'agenda | Apri Meetings, Tasks ed Events | Ogni scheda mostra gli elementi corrispondenti e lo stato selezionato |
Ricerca dipendenti | Inserisci il nome di un dipendente visibile, poi un indirizzo email | Rimangono visibili le righe corrispondenti |
Filtro per reparto | Combina un reparto con la ricerca | Le righe soddisfano entrambe le condizioni |
Nessun risultato | Inserisci un nome assente | Compare un messaggio chiaro con un comando per azzerare i filtri |
Esportazione CSV | Esporta dopo aver applicato un filtro | Il CSV contiene le righe visibili e le intestazioni previste |
Dettagli del dipendente | Apri l'azione di una riga, poi premi Escape | Il pannello si chiude e il focus torna al comando che lo ha aperto |
Navigazione mobile | Apri e chiudi il menu a 390px | La navigazione resta utilizzabile senza scorrimento orizzontale dell'intera pagina |
Chiedi a Gemini di distinguere la lettura statica del codice dalle verifiche eseguite in un browser. Un elenco di controlli generato può essere utile, ma non dimostra che siano stati superati.
6. Controlla il codice prima di riutilizzarlo
Quando il prototipo si comporta come previsto, esamina il codice e le dipendenze scelte. Cerca chiamate di rete inattese, fonti di dati remote e credenziali. Questo esempio richiede dati fittizi locali; collegare un vero sistema HR richiederebbe una progettazione separata di autenticazione, permessi e gestione dei dati.
Mantieni privato Canvas durante la revisione. Esportare il codice e creare un link pubblico sono azioni distinte. Google spiega che un link pubblico può rendere l'app e i dati associati accessibili a chi lo possiede. Condivisione ed esportazione in Canvas
Il prototipo è una base da esaminare prima dell'implementazione. Prima di usarlo in un prodotto, provalo con il framework, le versioni delle dipendenze, le dimensioni degli schermi e la configurazione di accessibilità effettivamente previsti.
Problemi nella prima versione
Ricevi un blocco di codice invece dell'anteprima
Verifica di aver selezionato Canvas prima di inviare il prompt. Controlla che sia presente il pulsante Canvas e avvia l'app lì. In questa guida, l'obiettivo è creare ed esaminare l'app React all'interno di Canvas.
L'anteprima è vuota o mostra un errore di importazione
Apri la console, copia l'errore pertinente e chiedi a Gemini di correggerlo mantenendo layout e comandi funzionanti. Se una dipendenza non è disponibile, chiedi un'alternativa supportata. Verifica l'anteprima dopo la correzione.
Il risultato è troppo generico
Specifica proporzioni dei pannelli, spaziature, dimensioni dei caratteri e quantità di informazioni da mostrare. Un riferimento può chiarire la direzione visiva, ma spiega quali elementi vuoi riprendere nella tua app. Mantieni originali il nome del prodotto, i contenuti e le risorse grafiche.
Un pulsante sembra completo ma non fa nulla
Descrivi il cambiamento di stato atteso. Per esempio, un'azione per i dettagli di un dipendente dovrebbe aprire un pannello; un pulsante di esportazione dovrebbe produrre un file. Ripeti la verifica dopo la modifica, includendo lo stato senza risultati e l'uso della tastiera quando pertinente.
Argon non compare nel menu dei modelli
Controlla l'account Google selezionato e i modelli a cui può accedere. La disponibilità di Canvas e l'accesso a un modello specifico vanno verificati separatamente. Consulta le informazioni aggiornate di Google, senza dare per scontato che il tuo menu corrisponda allo screenshot. Disponibilità di Argon
