Gerar interface com anexos de imagem

O agente de IA pode te ajudar a concretizar sua ideia de interface de app Android. Para isso, use o Jetpack Compose e siga 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 para anexar arquivo de imagem Ícone para anexar arquivo de imagem. Você também pode clicar em Generate Code From Screenshot (Gerar código da captura de tela) no painel Preview (Prévia) 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 conversa, 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 conversa 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 correspondente, clique nela 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 AI Actions (Ações de IA) > Match UI to Target Image (Deixar interface igual à imagem de destino).

    O Android Studio mostrando uma prévia do Compose com um elemento de interface selecionado e a conversa no Gemini.
    Figura 5: uso do Gemini para transformar elementos da interface diretamente da prévia do Compose.
    Figura 6: exemplo de uso da opção para deixar a interface igual à 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 AI Actions (Ações de IA) > Fix all UI check issues (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 interface com IA.
Figura 8: exemplo de interface após a aplicação de correções.