O mesmo design, com menos para preencher
Cada app abaixo foi escrito do jeito que um gerador de código costuma escrever. O Phyll revisou a primeira versão, e a segunda aplica a revisão sem trocar cores, degradês nem componentes. Cada imagem mostra o mesmo momento nas duas versões: antes à esquerda, depois à direita.
O Replyloop é o único em inglês, então as imagens dele dizem Before e After.
Os números da primeira tarefa
| App | Campos | Cliques | Índice de cara de IA | Estilo mantido |
|---|---|---|---|---|
| Replyloop | 9 → 2 | 9 → 3 | 75 → 7 | 10 de 10 traços |
| Navalha Barbearia | 20 → 4 | 18 → 4 | 54 → 6 | 9 de 9 traços |
| Orça Já | 41 → 4 | 10 → 2 | 66 → 6 | 9 de 10 traços |
| Brasa Burger | 33 → 4 | 15 → 5 | 53 → 6 | 8 de 8 traços |
Campos e cliques contam o que alguém de primeira viagem precisou fazer na primeira tarefa, e nenhuma versão antes levou essa pessoa até o resultado. O índice vem da varredura do código, e quanto menor, melhor. Estilo mantido conta os traços visuais da versão antes, como degradês, vidro e emoji, que continuam na versão depois. O único traço que o Orça Já perdeu foi um selo que prometia uma inteligência artificial que o app não tinha.
Replyloop
DMs automáticas para quem comenta uma palavra-chave no Instagram.
Mandar uma DM para quem comenta uma palavra-chave
Primeira tela
O título prometia “Supercharge your Instagram with AI-powered automation”. Agora diz o que o app faz: mandar uma DM para quem comenta uma palavra-chave. O selo de IA passou a anunciar um recurso que existe, o teste da DM no seu próprio perfil, e os avatares de banco de imagens saíram.
- P01A primeira tela não diz o que é nem o que fazer
- C01Frases genéricas de proposta de valor
- C03Prova social e números inventados
- C04Pessoas e dados de exemplo esquecidos
Criar uma automação
Nove campos, com códigos como COMMENT_KEYWORD e page_1784140, viraram dois: a palavra e a mensagem, com a prévia da DM ao lado. Gatilho, conta, atraso e status ganharam um padrão, o nome foi para “mais opções”, e descrição e tags saíram.
- F02Tudo pedido de uma vez
- F09Opções que o sistema poderia decidir
- C05Códigos na tela
Logo depois de criar
Antes, um “Success!” pulando e a automação marcada como ACTIVE sem nenhum Instagram conectado. Depois, a tela diz que a automação está pronta e oferece o próximo passo: um teste no seu próprio perfil e a conexão com o Instagram.
- S04Sucesso que não deixa rastro
- F04Beco sem saída depois do sucesso
Lista vazia
“No data” virou uma frase que explica o que é uma automação, com o botão para criar a primeira. Os cinco itens “Coming soon” saíram do menu.
- S01Tela vazia que só diz que não há dados
- P05Recursos que ainda não existem
Conectar o Instagram
Quatro campos de credenciais de desenvolvedor da Meta, como token de acesso e segredo do app, viraram um botão para entrar com o Instagram. Quem cria conteúdo não tem essas credenciais.
- F05Cadastro ou configuração antes do primeiro resultado
No celular
A versão antes encolhia a tela inteira do computador. A depois troca a barra lateral por abas no topo, que quebram em duas linhas para as quatro aparecerem.
- S05Quebra no celular
Navalha Barbearia
Site de uma barbearia para marcar corte e barba. Fundo escuro, degradê âmbar e vidro, mantidos na versão depois.
Marcar um corte
O primeiro clique
“Agende agora” abria um cadastro de 12 campos, com CPF, gênero e a senha duas vezes. Agora abre o agendamento inteiro numa página: serviço, dia e hora, nome e WhatsApp.
- F05Cadastro ou configuração antes do primeiro resultado
- F11Dados pessoais que a tarefa não usa
- F12Pedir a mesma coisa duas vezes
Depois de marcar
O cliente marcou Corte Masculino no dia 24 com o Rafael, e a conta mostrou outro horário, dia 15/10 com o Bruno. A confirmação nova mostra o que foi marcado e oferece adicionar à agenda, remarcar e falar com a barbearia.
- S04Sucesso que não deixa rastro
- P03Painel de zeros ou números inventados para quem acabou de chegar
Quando falta um campo
Com nome e telefone preenchidos, “Cadastrar” ficava apagado e ninguém dizia por quê. O botão novo funciona, cada campo diz o que falta e a tela rola até o primeiro problema.
- A07Botão desativado que não diz por quê
Primeira tela
“Transforme seu visual com a melhor experiência premium da cidade” virou “Corte e barba no Centro, com horário marcado”. A nota 4.9 sem fonte deu lugar ao endereço e ao horário de funcionamento.
- C01Frases genéricas de proposta de valor
- C03Prova social e números inventados
No celular
No celular, o cadastro vinha antes de tudo. Agora o primeiro toque mostra os serviços com preço, e o dia já vem marcado no primeiro que tem horário livre.
- F05Cadastro ou configuração antes do primeiro resultado
- F09Opções que o sistema poderia decidir
Orça Já
Orçamentos para prestadores de serviço e pequenos comércios. Branco, degradê índigo e violeta e cards com sombra, mantidos na versão depois.
Fazer um orçamento e mandar para o cliente
Fazer o orçamento
A etapa 1 de 6 pedia razão social, CNPJ, endereço completo e logo da sua empresa, em todo orçamento. Agora uma página pede seu nome, o cliente e os itens, e o documento se monta ao lado enquanto você escreve.
- F02Tudo pedido de uma vez
- F07Assistente para uma tarefa de uma tela só
- F11Dados pessoais que a tarefa não usa
Depois de gerar
O orçamento pronto virava um DRAFT numa lista, sem botão de enviar. Agora o WhatsApp abre com a mensagem pronta, e a tela diz o próximo passo: marcar quando o cliente aprovar.
- F04Beco sem saída depois do sucesso
- C05Códigos na tela
A lista
A lista começava com João da Silva, Maria Oliveira e Empresa XYZ, com a situação em inglês, como PENDING. A lista nova mostra só os orçamentos da pessoa, com a situação em português e as ações sempre à vista.
- C04Pessoas e dados de exemplo esquecidos
- C08Dois idiomas na mesma interface
- A05Ações que só aparecem com o mouse em cima
Primeira tela
“Revolucione a forma como você cria orçamentos” virou “Faça o orçamento e mande pelo WhatsApp em um minuto”. O selo prometia inteligência artificial, que o app não tem, e passou a dizer “Grátis e sem cadastro”.
- C01Frases genéricas de proposta de valor
- C03Prova social e números inventados
No celular
O menu lateral ocupava metade do celular, e os campos do assistente ficavam com poucos pixels. Na versão depois, o formulário empilha, e quantidade e valor ganham rótulo.
- S05Quebra no celular
Brasa Burger
Cardápio de uma hamburgueria com entrega. Laranja, vermelho e emoji, mantidos na versão depois, com o começo do degradê dos botões num laranja mais fundo para o texto branco ficar legível.
Pedir um hambúrguer para entrega
Adicionar um refrigerante
O mesmo modal de opções abria para qualquer item e perguntava o ponto da carne para uma lata de refrigerante. Agora a bebida entra direto na sacola, que fica sempre à vista.
- F03Um modal para tudo
- F09Opções que o sistema poderia decidir
Adicionar um lanche
“Adicionar” abria um modal com ponto e pão obrigatórios, sem nenhum escolhido. Agora o lanche vai para a sacola ao ponto, no brioche, e quem quer mudar usa “Personalizar”.
- F09Opções que o sistema poderia decidir
- A07Botão desativado que não diz por quê
Finalizar o pedido
O checkout tinha 20 campos, com o endereço em sete partes e número do cartão com CVV, embora o site não cobre nada. O novo pede endereço, nome, WhatsApp e a forma de pagamento na entrega.
- F02Tudo pedido de uma vez
- F11Dados pessoais que a tarefa não usa
- F12Pedir a mesma coisa duas vezes
Depois de pedir
Depois de finalizar, o site voltava para a página inicial com um aviso de sucesso. A versão depois mostra o número do pedido, a previsão de entrega e o WhatsApp da loja.
- F04Beco sem saída depois do sucesso
- S04Sucesso que não deixa rastro
No celular
Três colunas espremiam os cards, com uma palavra por linha e preços saindo da borda. Agora há uma coluna, e a sacola fica numa barra fixa embaixo.
- S05Quebra no celular
Teste no seu app
O scanner acha esses sinais no seu código, sem conta. A revisão completa roda no Codex ou no Claude Code e corrige os fluxos sem mexer no seu design.
npx phyll scan