Projetar com IA funciona melhor como um loop: você descreve, a IA rascunha, julga e refina e repete. A IA é rápida na produção de opções. Você é responsável por escolher o caminho certo.
Etapa 1: escreva um briefing. Descreva o usuário, a tarefa, o conteúdo e quaisquer restrições. “Uma tela de configurações para um aplicativo de orçamento, para pessoas em telefones, com seções de conta, notificações e privacidade, usando nossos componentes existentes” dará um resultado muito melhor do que “criar uma página de configurações”.
Etapa 2: gerar rascunhos. Ferramentas de prompt de interface do usuário, como Google Stitch ou o assistente de IA do UXPin, transformam uma descrição ou um esboço em telas. Peça diversas variantes e compare-as, em vez de aceitar a primeira.
Etapa 3: refinar em uma ferramenta de design. Traga o melhor rascunho para Figma, Penpot ou outro editor. Corrija hierarquia, espaçamento e cópia, e projete os estados que a IA normalmente ignora: carregando, vazio, erro e desabilitado.
Etapa 4: conecte-se ao código. Ferramentas de codificação de IA como Claude Code e Cursor podem construir a interface. Os resultados são muito melhores quando podem ler seu projeto por meio de um servidor MCP. Figma e Penpot possuem um. Para peças interativas e animadas, o ExodeUI, que criamos, possui um servidor MCP que permite à IA criar e editar animações com estados e física de primavera a partir de prompts em linguagem simples, armazenados em um arquivo .exode aberto que seu aplicativo reproduz.
Etapa 5: revise antes de enviar. Verifique o uso do teclado e do leitor de tela, contraste, movimento reduzido, telas pequenas e grandes e texto longo ou traduzido. Trate os resultados da IA como o trabalho de um colega de equipe rápido, mas novo: útil, mas sempre revisado.