Se te ocurre una app sencilla mientras estás lejos del escritorio. Dibujas tres casillas y un botón en una hoja, pero al volver abres el editor y pierdes una hora decidiendo colores en vez de probar si la idea sirve. Google mostró el 5 de noviembre de 2026 una ruta más corta: subir una foto del boceto a Gemini, elegir Canvas, pedirle que programe la app y probarla en la vista previa. Lo valioso es reducir el tiempo hasta la primera interacción, no asumir que una foto equivale a un producto terminado.
Voy a usar un rastreador de hábitos de una sola pantalla. La imagen siguiente es un boceto de ejemplo creado por SoyJB para que puedas guardarlo y usarlo como entrada; no es una captura de Gemini ni una prueba de que su salida vaya a coincidir exactamente. Quiero tres hábitos, una casilla por hábito y un botón para añadir otro. Eso da un criterio observable: si marcar una casilla no cambia el progreso, el prototipo todavía no funciona.

Deja claro qué debe hacer la pantalla
Una imagen comunica distribución visual, pero no define por sí sola qué ocurre al tocar cada control. Antes de subirla, anota a un lado la acción, el resultado y el estado que debe conservarse. En nuestro ejemplo: marcar un hábito actualiza el contador, añadir crea una fila nueva y recargar mantiene los datos en ese navegador. Este último requisito pide almacenamiento local del navegador; no solicita una base de datos, una cuenta de usuario ni sincronización entre dispositivos.
Si tu boceto representa un flujo real de negocio, incluye también un estado vacío, un caso de error y la pantalla posterior al envío. Un dibujo de un formulario sin especificar validaciones puede producir una interfaz bonita que acepte datos imposibles. Para un primer prototipo, usa datos ficticios y evita subir fotos de clientes, contraseñas o información privada.
Abre Canvas y usa un encargo comprobable
- Entra en Gemini con tu cuenta y selecciona Canvas. La ayuda oficial indica que puedes añadir una imagen al mensaje.
- Guarda el boceto de esta página, súbelo y pega el prompt siguiente. Si usas tu propio dibujo, reemplaza los nombres de los controles.
- Abre la vista previa del Canvas resultante. Haz las acciones de la lista de prueba de abajo antes de compartir el enlace.
Convierte este boceto en un prototipo web de una sola pantalla.
La pantalla se llama «Hábitos de hoy». Muestra tres hábitos de ejemplo.
Cada casilla alterna completado/no completado y actualiza un contador visible.
«Añadir hábito» pide un nombre; rechaza nombres vacíos y no crea duplicados.
Conserva la lista y el estado en localStorage de este navegador.
No uses autenticación, pagos, API externa ni datos reales de usuarios.
Prioriza diseño móvil, etiquetas accesibles y foco de teclado visible.
Antes de darlo por terminado, explica dónde está el estado,
qué no persiste fuera de este navegador y cómo probar cada acción.
El prompt separa lo que el dibujo muestra de lo que el producto debe hacer. También limita el alcance: un agente podría inventar backend, registro o integración que no pediste. Si Gemini interpreta mal una parte, usa Select & ask sobre la zona relevante o describe el cambio en el chat. Google documenta que Canvas permite ver y editar el código, abrir la consola y revisar cambios recientes. Que el código exista no implica que se ejecutó sin errores; abre la consola si el botón parece no responder.
Prueba cinco cosas antes de llamarlo app
- Inicio: ¿se ven los tres hábitos y un contador coherente?
- Interacción: marca y desmarca una casilla; el contador debe subir y bajar sin crear dos eventos.
- Entrada: intenta añadir un nombre válido, uno vacío y uno repetido. El diseño debe mostrar una respuesta comprensible.
- Persistencia: recarga la vista y comprueba si lista y marcas siguen. Si falla, revisa consola y pide que corrija el almacenamiento.
- Uso móvil y teclado: comprueba ancho estrecho, orden de tabulación, etiquetas y contraste. Una vista previa bonita en escritorio no basta.
Documenta el resultado con una tabla sencilla: paso, esperado, observado y corrección. No afirmo aquí que Gemini pasó estas cinco pruebas: no ejecuté el flujo en una cuenta de Gemini de SoyJB. El boceto y el prompt son insumos reproducibles; tú verificas la salida en tu sesión. Si el prototipo falla en dos o más acciones básicas, reduce el pedido a una función y repite antes de añadir IA o backend.
Cuándo pasar del Canvas a un producto
Canvas es útil para validar una interacción y enseñar la idea a otra persona. Si necesitas usuarios, datos compartidos, pagos o permisos, define después el modelo de datos, autenticación, pruebas de acceso y despliegue. No guardes información sensible en localStorage como sustituto de una arquitectura de producción. Compartir una demo tampoco prueba que resista errores, que las políticas sean correctas o que alguien quiera usarla. La decisión de hoy es pequeña y verificable: ¿la pantalla resuelve el flujo esperado con menos fricción que tu boceto?
Fuentes y alcance
Google, transformar dibujos en apps, 5 de noviembre de 2026; Gemini Apps Help, Canvas y edición de apps. Consultadas el 11 de noviembre de 2026. La disponibilidad y los límites de uso pueden variar por cuenta y región; comprueba los controles que aparecen en la tuya.
