Como um vibe coder aplica mobile first no paywall do celular

No Galaxy S24 FE, o paywall do Fumava pedia scroll. Martin Blume queria a tela de preço inteira no celular, sem rolar, senão preço e CTA ficam abaixo da dobra.

Ele é testador oficial do teste fechado da Play Store, e a atualização chega no celular pelo ar. A série de perguntas do onboarding termina, o título "o primeiro dia começa agora" aparece, e os 2 planos entram na mesma tela. O mensal custa 19,90. Na hora, ele precisava descer para ver a tela de preço completa.

Ele queria o paywall inteiro, sem descer o dedo

Martin abriu a tela no aparelho e falou o critério:

Eu consegui acessar o Paywall aqui, só que eu queria que o Paywall coubesse inteiro na tela, né? que não precisasse rolar para baixo.

Ele mandou o print do Galaxy S24 FE para o agente e julgou a tela no aparelho com o app instalado. O Fumava já estava no celular como teste fechado, então o que ele via era o que o usuário do teste fechado ia ver, depois da atualização pelo ar.

O box cinza saiu para devolver altura

O primeiro alvo foi um bloco que ocupava altura sem mostrar o plano:

Então eu quero que você tire aquele texto naquele box cinza ali. Ah, você gasta cerca de tanto por mês fumando. Tira isso aí. Se eu acredito que se tirar isso aí não vai precisar rolar a tela para ver a tela inteira.

O box saiu. A tela melhorou e ainda rolava. Martin olhou de novo e pediu o próximo corte:

Certo, eu dei uma olhada, ficou muito melhor, mas ainda tá rolando um pouco a página, né? Talvez a gente poderia diminuir um pouco o tamanho da logomarca, reduzir algum espaçamento ou eh diminuir um pouco o texto que está abaixo do título

O copy abaixo do título era: "Você já respondeu o que precisava. Agora é acompanhar de verdade todos os dias." Ele queria esse bloco menor:

Se conseguisse reduzir ele para duas linhas, eu acho que já ia dar.

Ele olhava o celular e mandava o próximo print. O critério continuava o mesmo da abertura: caber inteiro, com o mensal a 19,90 visível na primeira tela, sem descer.

No vibe coding, mobile first se confere no Galaxy

A tela tem que se adaptar. Martin falou o aparelho e a regra no mesmo fôlego:

E essa tela, ela tem que ser adaptável, né? Tipo, eu tô vendo na minha tela que é um celular, um Galaxy S24 FE, mas ela deveria ficar uma tela inteira para todos os dispositivos, né?

No vibe coding desta sessão, Martin conferia no Galaxy depois do print. Ele descrevia o que via no Fumava aberto no celular, e o agente só avançava com o próximo recorte.

O agente obedeceu demais. A tela passou a caber, e os elementos colaram uns nos outros:

Certo, agora tá cabendo numa tela, mas ficou muito junto os elementos ali, tem que melhorar, tá? Aí você exagerou um pouco ali em diminuir os espaçamentos, cara.

Ele tinha pedido uma amontoada. O modelo passou do ponto:

Eu tinha pedido para ele dar uma amontoada. Antes tava assim, ó, tava um pouco grande, né? Agora ele acabou amontoando demais.

O espaçamento voltou a ser problema, agora pelo excesso de corte. A tela inteira ainda precisava ser lida.

Empilhar os cards tirou a página única de novo

Os cards de preço tinham começado lado a lado. Quando foram um para cima do outro, a altura voltou a estourar. Martin olhou e descreveu o recuo:

Eu dei uma olhada, ficou bom, né? Só que agora, obviamente, como empilhou ali, ficou um pouco maior o conteúdo e ele não tá em uma página só, né?

O paywall melhorou quando o box cinza saiu e o texto caiu para 2 linhas. Empilhar os cards aumentou o conteúdo, Martin viu que de novo não estava em uma página só, e a tela não ficou perfeita.

Amanhã, abra o paywall no aparelho real. Se você rolar para ver o preço, corte o que está acima da dobra até caber, e pare antes de colar os elementos. Se mudar o layout dos cards, teste de novo no mesmo celular. O vibe coding neste caso é conferir no Galaxy depois de cada corte.

Dá para assistir à live e ouvir o "não tá em uma página só" depois do empilhamento.