El agente de IA está equipado de forma única para ayudarte a hacer realidad tu visión de la IU de la app para Android con Jetpack Compose y siguiendo las prácticas recomendadas de Android. En esta página, se describe cómo crear una IU de app y realizar iteraciones en ella con IA.
Para generar una IU con IA, sigue estos pasos generales:
Crea un modelo de la IU de la app que deseas. Puedes exportar un PNG desde una herramienta de diseño o incluso usar una imagen dibujada a mano.
Figura 1: Un esquema de la interfaz de usuario de una app. Para adjuntar la imagen a tu consulta, haz clic en el botón Adjuntar archivo de imagen
. También puedes hacer clic en Generar código a partir de la captura de pantalla directamente desde el panel Versión preliminar en un archivo sin una vista previa existente.
Figura 2: Genera código a partir de una captura de pantalla en un panel Versión preliminar vacío. En el campo de chat, pídele al agente de IA que genere el código de la IU, por ejemplo, "Genera código de Jetpack Compose para la imagen proporcionada". Cuando envías la consulta y la imagen, el agente de IA sugiere código para crear la IU propuesta. Por lo general, el agente de IA también proporciona el código para la vista previa de Compose, de modo que puedas visualizar rápidamente la IU una vez que la importes a tu proyecto. Si no lo hace, pídele que genere las vistas previas de Compose.
Figura 2: Gemini genera código de Jetpack Compose a partir de una imagen adjunta. Una vez que importes el código y puedas ver la vista previa de Compose en el panel de vista previa, puedes iterar en la IU haciendo clic directamente en la vista previa y pidiéndole a Gemini que la transforme. Si tienes una imagen de lo que deseas, también puedes iterar en la IU haciendo clic con el botón derecho en la vista previa y seleccionando Acciones de IA > Hacer coincidir la IU con la imagen de destino.
Figura 5: Usa Gemini para transformar elementos de la IU directamente desde la vista previa de Compose.
Figura 6: Ejemplo de uso de "Hacer coincidir la IU con la imagen de destino"
Detecta y soluciona problemas de calidad de la IU
El agente de IA también puede ayudarte a garantizar que tu IU sea de alta calidad y accesible. Haz clic con el botón derecho en la vista previa de Compose y selecciona Acciones de IA > Corregir todos los problemas de verificación de la IU. El agente audita tu IU en busca de problemas comunes, como problemas de accesibilidad, y propone correcciones de código para resolverlos.