Para programar con Gemini 4 Argon en la aplicación web de Gemini, selecciona 4 Argon, activa Canvas y describe la aplicación que quieres crear. Canvas reúne el editor de código y la vista previa en un mismo espacio. Así puedes revisar la interfaz y pedir cambios sin preparar primero un proyecto local.
En este ejemplo crearemos un panel de recursos humanos en React llamado Daylight People. Las instrucciones definen una interfaz en tonos crema y amarillo, navegación compacta, una agenda, gráficos de rendimiento y una tabla de empleados. También indican qué debe ocurrir al cambiar el intervalo de fechas, buscar empleados o exportar un CSV. Estas funciones permiten comprobar algo más que el aspecto de la primera pantalla.
Qué necesitas antes de empezar
Usa un navegador de escritorio, inicia sesión en gemini.google.com y comprueba que el selector de modelos incluye 4 Argon. El anuncio de Google indica que el acceso en la aplicación Gemini está disponible para suscriptores de Google AI Pro y Ultra. Revisa los modelos de tu cuenta: iniciar sesión no garantiza el acceso en todas las cuentas. Anuncio de Argon de Google
Este tutorial utiliza la aplicación Gemini. Para seguir los pasos de Canvas no necesitas una clave de la API de Gemini, un proyecto npm ni un terminal. La integración mediante API sigue otro proceso; el identificador del modelo en la API es gemini-4-argon. Documentación del modelo de Google
Prepara unas instrucciones de diseño. Conviene definir a quién va dirigida la aplicación, las secciones, la jerarquía visual y las interacciones. También puedes adjuntar una imagen de referencia que tengas permiso para utilizar. Explica qué elementos te interesan, como el espaciado compacto o la distribución asimétrica de los gráficos, en lugar de pedir simplemente un «dashboard moderno».
1. Selecciona 4 Argon
Abre un chat nuevo y despliega el selector de modelos junto al campo del prompt. En la interfaz revisada para esta guía, el menú mostraba 4 Argon con la descripción Complex tasks. Selecciónalo y comprueba que la barra del prompt indica Argon.
La etiqueta del menú permite comprobar qué modelo está activo. La marca Gemini en la página de inicio no indica por sí sola qué modelo responderá al siguiente mensaje.
2. Activa Canvas antes de enviar el prompt
En la interfaz de escritorio que revisamos, la ruta era:
Pulsa + junto al campo del prompt.
Abre More tools.
Selecciona Canvas.
Comprueba que aparece la etiqueta Canvas en el cuadro de redacción.
Después introduce el prompt. Al seleccionar primero la herramienta, Gemini dispone del espacio donde crear la aplicación React. Si pides código en un chat normal, puede responder con un bloque de código en lugar de una aplicación.
La ubicación de los controles puede cambiar. La ayuda de Google explica cómo iniciar un chat con Canvas desde el menú para añadir archivos; la captura y la ruta anteriores corresponden a la interfaz observada el 17 de octubre de 2026. Ayuda de Canvas
3. Pega el prompt del dashboard
Las instrucciones piden una cabecera con estadísticas compactas integradas, un indicador de satisfacción en forma de arco y paneles de tamaños distintos. La agenda ocupa la columna izquierda. El gráfico de rendimiento y las barras de situación laboral ocupan las otras dos columnas, con una fila de pequeños indicadores de permisos debajo. La tabla de empleados aparece a continuación.
Estas indicaciones fijan la composición antes de que Gemini elija los componentes. También definen la densidad de información: la primera pantalla de escritorio debe mostrar datos útiles y el comienzo de la tabla.
Pruébalo tú mismo
Con 4 Argon seleccionado y Canvas activado, copia el prompt completo que aparece a continuación, pégalo en Gemini y envíalo. Puedes cambiar el nombre del producto, los colores y las métricas de ejemplo para adaptarlos a tu proyecto. También tienes una copia en texto plano.
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.
El prompt pide componentes funcionales y hooks de React. El uso de Tailwind CSS, lucide-react y Recharts depende de lo que admita Canvas en esa sesión. También solicita datos ficticios locales, para poder evaluar el diseño y el funcionamiento sin configurar una base de datos.
Google incluye las vistas previas de React entre las funciones de Canvas. Aun así, las dependencias deben cargarse correctamente: mencionar una biblioteca no demuestra que las importaciones generadas funcionen. Presentación de Canvas de Google
4. Revisa la aplicación en Preview
Espera a que termine la generación y revisa la vista previa de Canvas. Usa Code para consultar el código y Preview para volver a la interfaz. Si la vista previa falla, consulta la consola e informa a Gemini del error antes de pedir más funciones. La ayuda de Canvas describe los controles del código y la consola. Herramientas de código y errores de Canvas
Empieza por la composición general. El saludo no debería dominar la página. Las cuatro estadísticas principales deben ser compactas, y los paneles de agenda, gráficos y situación laboral deben tener anchuras distintas. Comprueba que el amarillo establece una jerarquía visual sin perjudicar el contraste del texto.
Después de revisar el escritorio, comprueba una ventana estrecha. Una captura atractiva en escritorio no demuestra que la navegación se abra en el móvil ni que la tabla permanezca dentro de su contenedor.
La vista previa de ejemplo muestra el panel en crema y amarillo, la agenda, el gráfico de rendimiento y el directorio de empleados. El diseño que genere tu sesión puede ser distinto.
5. Prueba los controles del dashboard
Realiza una serie breve de comprobaciones que puedas repetir. Anota la entrada y el resultado esperado antes de pulsar cada control; después registra lo que ocurre.
Control | Qué probar | Resultado esperado |
|---|---|---|
Intervalo de fechas | Alterna entre 7, 30 y 90 días | El gráfico de rendimiento y su resumen cambian de forma coherente |
Pestañas de la agenda | Abre Meetings, Tasks y Events | Cada pestaña muestra sus elementos y su estado de selección |
Búsqueda de empleados | Escribe el nombre de un empleado de la tabla y después un correo | Permanecen las filas que coinciden |
Filtro por departamento | Combina un departamento con la búsqueda | Las filas cumplen ambas condiciones |
Sin resultados | Introduce un nombre que no exista | Aparecen un mensaje claro y un control para restablecer la búsqueda |
Exportación CSV | Exporta después de filtrar | El CSV contiene las filas visibles y las cabeceras previstas |
Detalles del empleado | Abre la acción de una fila y pulsa Escape | El panel se cierra y el foco del teclado vuelve al botón que lo abrió |
Navegación móvil | Abre y cierra el menú lateral con una anchura de 390px | La navegación funciona sin desplazamiento horizontal en la página |
Pide a Gemini que distinga entre la revisión estática del código y las comprobaciones realizadas en un navegador en ejecución. Una lista de pruebas puede ser útil, pero no demuestra que se hayan superado.
6. Revisa el código antes de reutilizarlo
Cuando el prototipo funcione como esperabas, revisa el código y las dependencias. Busca llamadas de red inesperadas, fuentes de datos externas y credenciales. Este ejemplo utiliza datos ficticios locales; conectar un sistema real de recursos humanos requiere diseñar por separado la autenticación, los permisos y el tratamiento de datos.
Mantén Canvas privado durante la revisión. Exportar el código y crear un enlace público son acciones distintas. Google explica que un enlace público puede dar acceso a la aplicación y sus datos asociados a quienes dispongan de él. Compartir y exportar desde Canvas
El prototipo sirve como punto de partida para revisar la implementación. Antes de utilizarlo en un producto, pruébalo con el framework, las versiones de dependencias, los tamaños de pantalla y la configuración de accesibilidad de ese producto.
Soluciones a los primeros problemas
Recibes un bloque de código en lugar de una vista previa
Comprueba que habías seleccionado Canvas antes de enviar el prompt. Confirma que aparece su etiqueta y crea allí la aplicación. En esta guía, el objetivo es construir y revisar la aplicación React dentro de Canvas.
La vista previa está en blanco o muestra un error de importación
Abre la consola, copia el error relevante y pide a Gemini que lo corrija conservando el diseño y los controles que funcionan. Si una dependencia no está disponible, pide una alternativa compatible. Comprueba de nuevo la vista previa tras la corrección.
El diseño parece genérico
Especifica las proporciones de los paneles, el espaciado, el tamaño del texto y la densidad de información. Una referencia puede mostrar la dirección visual, pero explica qué quieres trasladar a tu aplicación. Utiliza un nombre de producto, contenidos y recursos propios.
Un botón parece terminado, pero no hace nada
Describe el cambio de estado esperado. Por ejemplo, la acción de detalles de un empleado debe abrir un panel lateral y el botón de exportación debe generar un archivo. Repite las pruebas tras el cambio, incluido el estado sin resultados y la interacción mediante teclado cuando corresponda.
Argon no aparece en el menú de modelos
Comprueba la cuenta de Google seleccionada y su acceso a los modelos. La disponibilidad de Canvas y el acceso a un modelo concreto deben verificarse por separado. Consulta la información actual de Google en lugar de asumir que tu lista coincide con la captura. Disponibilidad de Argon
