O agente de IA está equipado de maneira exclusiva para ajudar você a transformar sua visão de interface do app Android em realidade, usando o Jetpack Compose e seguindo as práticas recomendadas do Android. Esta página descreve como criar e iterar uma interface de app com IA.
Para gerar uma interface com IA, siga estas etapas gerais:
Crie um modelo da interface do app que você quer. Você pode exportar um PNG de uma ferramenta de design ou até mesmo usar uma imagem desenhada à mão.
Figura 1: um wireframe da interface do usuário de um app. Anexe a imagem à consulta clicando no botão Anexar arquivo de imagem
. Você também pode clicar em
Gerar código da captura de tela diretamente no painel Visualização
em um arquivo sem uma visualização.
Figura 2: gere código de uma captura de tela em um painel de prévia vazio. No campo de chat, peça ao agente de IA para gerar o código da interface, por exemplo, "Gere código do Jetpack Compose para a imagem fornecida". Quando você envia a consulta e a imagem, o agente de IA sugere um código para criar a interface proposta. O agente de IA geralmente fornece o código para a prévia do Compose também. Assim, você pode visualizar rapidamente a interface depois de importá-la para o projeto. Se isso não acontecer, peça para gerar as prévias do Compose.
Figura 2: o Gemini gerando código do Jetpack Compose com base em uma imagem anexada. Depois de importar o código e ver a prévia do Compose no painel de prévia, clique diretamente na prévia e peça para o Gemini transformar a interface. Se você tiver uma imagem do que quer, clique com o botão direito do mouse na prévia e selecione Ações de IA > Corresponder a interface à imagem de destino.
Figura 5: uso do Gemini para transformar elementos da interface diretamente da prévia do Compose.
Figura 6: exemplo de uso de "Corresponder interface à imagem de destino"
Encontrar e corrigir problemas de qualidade da interface
O agente de IA também pode ajudar você a garantir que sua interface seja de alta qualidade e acessível. Clique com o botão direito do mouse na prévia do Compose e selecione Ações de IA > Corrigir todos os problemas de verificação da interface. O agente audita sua interface do usuário em busca de problemas comuns, como questões de acessibilidade, e propõe correções de código para resolvê-los.