Voltar
Prompts de UI com IA: descreva a interface que você quer

Prompts de UI com IA: descreva a interface com detalhes para obter resultados mais distintos

Aprofundamento CEVIU

Aprofundamento

O texto parte de um problema conhecido: pedir uma interface "limpa e moderna" a um modelo de código deixa muita coisa em aberto. O autor testa o contrário. Usa um visualizador de resultados de testes chamado Test Desk, com doze testes de três módulos de um build de checkout, busca, filtros por resultado e módulo, ordenação por duração e mensagens de erro expansíveis. Dados e comportamento ficam fixos. Só a composição muda.

Cada uma das quatro direções (suíça, editorial, developer workbench e neo-brutalista) é descrita com tipografia, cor, posição do resumo, posição dos filtros e tratamento da tabela. No estilo suíço, o título é grande, com uma régua vermelha e quatro contagens em colunas iguais. No editorial, as contagens ficam numa coluna estreita à esquerda e os resultados na direita. No workbench, os filtros vão para um painel vertical e a tabela ganha a maior parte da largura. No neo-brutalista, blocos com contorno grosso e sombra rígida organizam a página, mas o texto da tabela mantém tamanho normal de leitura. O autor também pede que rótulos, contagens e colunas sejam preservados, para o conteúdo não mudar junto com o visual.

Por que isso importa

Para quem desenha interfaces com ajuda de IA, a leitura é que o nome de um estilo serve de ponto de partida, e o controle real vem de dizer onde cada região fica e quanto espaço ocupa. O feedback sobre a tela renderizada ("o título come espaço dos resultados") funciona melhor que adjetivos vagos. Isso também separa o que é decoração do que é leitura, e protege acessibilidade e usabilidade da tabela, que é a tarefa do usuário.

Perguntas frequentes

Por que "limpo e moderno" gera resultados parecidos?

É uma instrução ampla, que deixa o modelo escolher quase tudo sozinho. Descrever tipografia, layout, hierarquia, densidade, cores e bordas reduz essa margem. O resultado tende a ser mais distinto e mais próximo do que você imaginou.

Como dar bom feedback a um modelo que gera interface?

Avalie a tela renderizada em relação à tarefa do usuário e aponte o problema concreto, como título grande demais, controle mal posicionado ou espaço desperdiçado. Peça uma mudança específica, por exemplo reduzir o título para 48px e compactar o resumo. Se o agente não inspeciona a página, envie uma captura de tela.

Dá para usar essas ideias num projeto com design system?

Sim. O autor sugere informar ao agente a stack e os componentes, como React ou template no servidor. Se já existe um design system, entregue a documentação e os componentes a ele. Um novo run do modelo pode render um resultado diferente.

O que fazer quando não sei nomear o estilo que quero?

Use uma imagem de referência e peça ao modelo que a descreva em tipografia, espaçamento, alinhamento, cor, bordas e densidade. Peça também termos de estilo e que separe o que é visível do que é palpite sobre influências. Confira a descrição contra a imagem antes de usá-la.

Fontes

Avalie este artigo:
Categoria
CEVIU Design
Publicado
27 de outubro de 2026
Editoria
CEVIU Design

Quer receber mais sobre CEVIU Design?

Conteúdo curado diariamente, direto no seu e-mail.

Conteúdo curado diariamenteDiversas categoriasCancele quando quiser