Gerar interface com anexos de imagem

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:

  1. 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.

    Wireframe desenhado à mão de uma interface do usuário de app
    Figura 1: um wireframe da interface do usuário de um app.
  2. Anexe a imagem à consulta clicando no botão Anexar arquivo de imagem Ícone 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.
  3. 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.

    Interface de chat do Gemini mostrando o código do Jetpack Compose gerado com base em uma imagem.
    Figura 2: o Gemini gerando código do Jetpack Compose com base em uma imagem anexada.
  4. 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.

    O Android Studio mostrando uma prévia do Compose com um elemento de interface selecionado e o chat do Gemini.
    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.

Figura 7: corrigir problemas de UI com IA
Figura 8: exemplo de UI após a aplicação de correções.