Pricing page com 2 cards e slider de crédito no vibe coding

A pricing page da home fica mais limpa com 2 cartões (solo e agência) e um slider de crédito. O visitante responde 2 coisas e para de comparar 6 preços na mesma dobra: sou eu ou a tua agência; depois, quanto crédito entra na assinatura.

Thiago chegou nisso na live de 158 min de 2026-08-06, desenhando a home do Taurus Hub. Os 2 cartões abrem em 96 e 496. Depois vem o scroll para pagar mais e receber mais crédito. Ele não publicou a página. O que ficou foi a decisão de layout e um arquivo ainda para editar. O texto de visão da mesma home já está em overpromise; aqui o recorte é a página de preços.

2 cartões no lugar de 6 preços

O obstáculo era a grade com 6 preços na frente do visitante. Cada degrau trazia um número e puxava uma comparação lado a lado. Ele corta a grade e deixa 2 cartões na dobra da home:

Na hora de mostrar os preços poderia ter apenas dois cartões. Eh, solo e agência, agência de organização. Não pode ser agente mesmo. tá mais popular a agência com os preços iniciais eh 96 e 496. E depois o scroll para o utilizador arrastar e ver que há forma de ele pagar mais caro e receber mais crédito na assinatura.

Solo abre em 96 e agência abre em 496. Ele troca o rótulo do segundo cartão de agente para agência, o nome que diz estar mais popular, e deixa os preços iniciais nesses 2 números. O gesto seguinte é o slider. O visitante arrasta se quiser mais crédito na assinatura, e a tabela de 6 preços sai da primeira dobra. Foi o mesmo caminho de ideia de saas.

O comentário na sala descreveu o efeito com a fala torta da live:

Tem dois caros. Agency bem bem mais limpo que seis preços. É o melhor dizendo home que discutiste até agora.

2 cartões ficam mais limpos que 6 preços, e foi esse o critério da cena. A home segue no arquivo, com o layout decidido e a página ainda por montar. Vale ver como isso terminou em modelo de negocio saas. O mesmo problema apareceu em vibe coding para escolher modelo com visao nativa para debug de tela.

2 decisões, e o piso da agência sobe para 496

Com 2 cartões na frente, sobram 2 perguntas. Ele formula assim:

duas decisões apenas. Sou eu versus a tua agência. Depois volume de créditos de crédito.

A primeira resposta classifica quem está na tela. A segunda regula quanto crédito aquela assinatura carrega. A faixa de plano muda conforme o perfil:

a pessoa vai escolher entre solo e agência se ele escolher solo, ele tem todas as opções de start a ultra. Se ele escolher agência ele tem do pro ao ultra.

Quem marca solo vê Start até Ultra. Quem marca agência vê só Pro até Ultra. O piso da agência sobe, e o degrau do meio sai da conversa na mesma fala:

Vamos eliminar o 396 e iniciar no 496. Não é mais fácil assim?

Eliminam o 396 e a agência começa em 496. A conversa do 496 é de layout: o cartão da agência precisa de um piso, e o 396 era o degrau que ocupava o meio da tabela. Ele corta o 396 e crava 496 na mesma sessão de vibe coding, com a home ainda aberta e sem ir ao ar. Foi o mesmo caminho de muse spark. Isso aparece também em supabase pricing.

No vibe coding, o slider pede métrica legível

O segundo gesto da página é o arraste. Se a métrica não se lê, o slider entrega um número solto. Ele marca o risco na hora:

Slider precisa de métrica legível. Não mostra 2000 créditos.

2000 créditos na barra não diz o que a pessoa compra. A métrica tem de caber na leitura de quem nunca viu o produto. Os extras também pedem texto: ele ainda precisa achar como explicar os créditos extra com 10% de bônus. Vale ver como isso terminou em como vender no youtube. O mesmo problema apareceu em vibe coding para restaurar memoria do projeto depois de limpar o contexto.

Também tem de verificar como explicar a questão dos créditos extra com 10% de bónus.

O slider já entra na decisão nesta sessão de vibe coding. O texto que torna 2000 créditos legíveis, e o 10% de bônus dos extras, ficam como item aberto no arquivo. Isso aparece também em checkout asaas.

A pricing page amanhã começa em 2 cartões e um slider

A live de 158 min termina sem a pricing page no ar. O resultado é a decisão de layout e um arquivo ainda para editar. Quem for assistir à live vê o instante em que os 2 cartões substituem a grade, não uma página publicada.

Na sua pricing page, o mesmo recorte cabe amanhã: 2 cartões de perfil (quem eu sou) e um slider de volume (quanto eu preciso). O degrau que só completava a tabela (o 396, no caso dele) sai da primeira dobra, e o número do controle só entra se a pessoa conseguir traduzir aquele crédito em uso.