Frontends com Vibecoding · Capítulo 19 de 33 · 25 min
Avaliar busca, conversão e padrões de comércio
Busca, filtro e card de produto passam pelo mesmo critério em Booking, LATAM, Mercado Livre e Temu, e o padrão enganoso é reconhecido antes de ir ao ar.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding.
Uma busca boa reduz dezenas de opções a uma decisão em poucos segundos, e cobra duas disciplinas em troca. A primeira é guardar filtro e página no endereço da tela. A segunda é saber de onde vem o número de cada aviso que aparece.
Booking e LATAM resolvem essa busca por caminhos diferentes e pagam preços diferentes. Quem vende algo com data, vaga ou estoque pelo próprio site carrega a mesma conta a cada tela nova que publica.
A home da Booking é dominada por uma caixa de busca porque quem chega já sabe o destino e quer digitar. A tela pede a intenção primeiro: destino, datas e quantidade de pessoas.
Nos resultados aparecem dezenas de filtros, e cada pessoa usa dois ou três. O valor está na combinação recalculada na hora, sem que o caminho de volta se apague.
A lição para quem tem pousada, clínica ou escola está na ordem. Pergunte primeiro o que a pessoa já sabe, ou seja data e cidade, e só depois ofereça filtro. Filtro antes da intenção obriga o visitante a escolher no escuro.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Já a LATAM vende a própria passagem, sem agregador no meio, então cada tela mal pensada vira venda perdida. O caminho tem seis telas que vão removendo alternativas: busca, calendário de preços, lista de voos, tarifa e assento.
O calendário de preços resolve uma dúvida antes que ela vire hesitação. Cada dia mostra a tarifa estimada, o mais barato vem marcado por texto e por cor, e o dia sem voo vira botão desativado. O rodapé declara a base: tarifa estimada por adulto, atualizada a cada 24 horas.
A mesma passagem sai em quatro níveis, e o mais barato leva só o básico. Cada nível mostra por escrito o que fica de fora: mala de mão, despacho, assento. Comparar é direito de quem compra, e vira armadilha quando a restrição some da tela e reaparece no pagamento.
Um negócio pequeno copia esse desenho sem software caro. Mostre o preço por data antes de pedir cadastro, e escreva o que cada opção inclui na mesma tela em que a pessoa escolhe.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
A primeira disciplina é o estado, que é a memória do que a pessoa escolheu na tela. Filtro, aba e página precisam morar no endereço, como o número da página num livro, porque é isso que faz o link filtrado abrir igual em outra aba.
O teste leva dez segundos. Marque um filtro na tela onde o cliente mais busca e recarregue a página. Se o filtro sumir, o estado ficou preso na peça que desenha o filtro e nunca chegou ao endereço.
Existe biblioteca pronta para isso, o nuqs, que é código de catálogo que o site importa e guarda filtro, aba e paginação no endereço. Use em toda lista com filtro; deixe de fora o que é passageiro, como o menu aberto ou o texto sendo digitado.
Sem a biblioteca, o caminho é ler e escrever os parâmetros do endereço à mão. O que nunca funciona é deixar filtro e página só na tela, porque o primeiro F5 apaga a escolha do cliente.
Numa pousada, o filtro de piscina e de quarto para quatro passa a caber no endereço, e a recepção manda esse link pronto pelo WhatsApp. O mesmo endereço filtrado vira página que o buscador e o assistente de IA conseguem abrir e citar.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
No celular, o filtro abre num modal, a janela que cobre a tela e pede decisão antes de devolver o caminho, como a porta do provador. Ela precisa de um botão de fechar visível e tocável.
O alvo desse botão tem piso de 24 px, medida que vem da WCAG 2.2, a norma internacional de acessibilidade na web. Apple e Android pedem alvos ainda maiores, e seguir o maior nunca prejudica ninguém.
Tocar fora do modal e apertar Esc são atalhos, porque no celular não existe tecla Esc e ninguém descobre o toque fora sozinho. Abrir o filtro e procurar o botão antes de publicar separa fechamento real de atalho escondido.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
A mesma tela da Booking dispara cinco gatilhos ao mesmo tempo: escassez, prova social, atividade ao vivo, aversão à perda e preço de referência. Juntos pesam mais que cada um isolado, e auditar um por um nunca revela o conjunto.
Por isso a revisão acontece na tela montada, do jeito que o visitante a vê. O que separa persuasão de armadilha é o dado por trás do selo: "resta 1" honesto significa que resta um no sistema de reservas.
O contador que reinicia a cada recarga é o caso que a FTC, a agência americana de defesa do consumidor, cita como prova de urgência falsa. Reguladores de três continentes multam esse tipo de tela desde 2019, e o ganho de venda chega meses antes da multa.
A LATAM acrescenta duas linhas à régua, e as duas cabem em qualquer site. A caixa do seguro nasce desmarcada, porque o Senacon, o órgão federal que fiscaliza a defesa do consumidor, já multou companhia aérea pela caixa pré-marcada. E a taxa aparece antes do último passo, já que taxa revelada no fim ninguém teve chance de comparar.
Sete avisos: o que você copia e o que recusa
| Aviso | O que você copia | O que você recusa |
|---|---|---|
| Escassez ("resta 1 quarto") | O número que sai do sistema de reservas ou do estoque | O número fixo no código, de pé mesmo sem estoque |
| Prova social (nota e contagem) | A contagem auditável, com a tabela de origem nomeada | A avaliação inflada ou o depoimento sem nome verificável |
| Atividade ao vivo ("pessoas vendo agora") | A medição real; sem medir, o aviso não entra | O número que ninguém sabe de onde veio |
| Aversão à perda (contador de oferta) | O prazo no servidor, que ao zerar encerra a oferta | O relógio criado no carregamento, que reinicia a cada F5 (FTC, 2022) |
| Ancoragem (preço riscado) | O preço anterior que existiu, com a data em que vigorou | O valor cheio inventado só para o desconto parecer maior |
| Adicional no pagamento (seguro, garantia) | A caixa desmarcada, que o cliente marca se quiser | A caixa pré-marcada, que já rendeu multa do Senacon |
| Taxa e restrição da tarifa | A taxa e a restrição escritas na tela de escolha | A taxa que só aparece no último passo do pagamento |
No pagamento, a mensagem de erro separa produto maduro de protótipo, porque chega no momento mais frágil da compra. "Tente mais tarde", sem dizer o motivo, deixa o cliente sem saída e devolve o carrinho cheio para a concorrência.
O agente (a IA que escreve o site a partir do seu pedido) segue a regra que você der. Dê esta: explicar o que falhou e como resolver, na voz da interface, sem pedir desculpa e sem rodeio.
Resultado vazio também convida a agir: "nenhum quarto livre de 12 a 14 de março; veja 10 a 12 ou tire o filtro de piscina". O botão diz o que acontece ao ser tocado, e "Reservar" produz "Reserva confirmada".
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Na pousada que aplica as duas disciplinas, o aviso "resta 1 quarto" só entra quando o sistema de reservas devolve esse número. A busca vazia sugere o fim de semana seguinte, em vez da tela em branco.
Para cada aviso de escassez, prazo, contagem ou preço riscado que já esteja no ar, escreva de qual campo do sistema o número vem. Sem conseguir apontar o campo, o número foi digitado no código, e o selo sai hoje.
Depois aplique um filtro na tela de busca, aperte F5 e confirme que a lista continua filtrada. Se sumir, peça ao agente que filtro, aba e página passem a viver no endereço. Está pronto quando o link colado no WhatsApp abre a mesma lista.
Aprender cor e card com Mercado Livre e o truque da Temu
Booking e LATAM mostram a busca que reduz dezenas de opções a uma decisão, e o comércio de massa acrescenta cor como token, card por objeção e padrão enganoso.
Cor com cargo, card ordenado pela dúvida do comprador e urgência com origem rastreável separam a vitrine do Mercado Livre da roleta da Temu. As duas vendem, só que uma delas acumula processo de autoridade.
Um card sem ordem de leitura deixa a venda em aberto, porque o olho não sabe onde pousar. Um relógio de oferta que reinicia a cada F5 é a prova de urgência falsa que a FTC, a agência americana de defesa do consumidor, já multou.
Quem monta a vitrine do próprio site decide isso a cada tela. O agente (a IA que escreve o site a partir do seu pedido) entrega card, selo e cronômetro prontos, e quem aprova decide o que vai ao ar.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
O Mercado Livre guarda a cor da loja como token, o valor salvo com um nome, como a etiqueta na lata de tinta. São três camadas encadeadas, e cada uma existe para tornar barata uma mudança futura.
A primeira camada guarda o valor bruto, o código da cor, batizado de azul-500. A segunda é a paleta com cargos: a variável cor de ação aponta para aquele azul e descreve para que ele serve.
Já a terceira camada pertence ao componente, que é a peça da tela, como o botão ou o card. O preenchimento do botão principal aponta para a cor de ação, e o componente só conhece esse nome.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
O ganho aparece no dia da mudança. Trocar a marca inteira vira editar a camada de baixo, e criar o tema escuro vira redefinir a do meio, sem abrir um componente sequer.
Cada cor tem um cargo fixo. O amarelo chama atenção no cabeçalho, o azul assina todo botão e link clicável e o verde marca benefício conquistado, como o frete grátis. Ao pedir cor ao agente, diga o cargo antes do valor.
Para saber se as três camadas existem de fato, busque o símbolo # seguido de seis caracteres no código. Nenhum componente deveria escrever o valor da cor direto, sempre a variável com o cargo.
/* camada 1: valor bruto */
:root {
--azul-500: #3483fa;
}
/* camada 2: paleta semântica, o cargo da cor */
:root {
--cor-acao: var(--azul-500);
}
[data-theme="dark"] {
--cor-acao: #7cb4ff; /* só a camada do meio muda no tema escuro */
}
/* camada 3: token do componente */
.botao-primario {
background: var(--cor-acao);
color: #fff;
}
.link {
color: var(--cor-acao);
}A armadilha mais comum é o atalho. O Tailwind, o catálogo de classes de estilo usado por quase todo gerador, só enxerga a classe escrita por inteiro no código. Se o agente monta o nome da classe colando a cor na hora, ela some na publicação. Por isso o token vive numa variável de estilo.
O card de produto decide a venda na lista, porque boa parte de quem clica compra ali, sem abrir a página do produto. A ordem de leitura do comprador é a ordem de montagem. Imagem grande, marca com selo, nota com estrela, preço cheio riscado ao lado do atual, parcelamento e a linha de entrega.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Cada elemento responde a uma objeção antes de a próxima aparecer. O preço resolve se é caro, o parcelamento resolve se cabe no orçamento e a entrega resolve se demora. Ao descrever o card ao agente, liste os elementos nessa ordem e diga qual dúvida cada um resolve.
Sem essa ordem, o agente devolve um card mudo, com tudo no mesmo peso. Foi por isso que o Mercado Livre construiu a hierarquia com tamanho e peso da letra: o preço grande fala mais alto que qualquer moldura.
Borda, selo, numeração e divisória entram quando dizem algo sobre o conteúdo. Numerar seções como 01, 02 e 03 só cabe quando existe sequência, e o selo de frete grátis só cabe quando o frete é grátis mesmo.
O padrão genérico a recusar é o kit de cartões idênticos: conteúdo picado em cartões arredondados iguais, mesma sombra cinza em cada um e degradê como decoração. Tudo com o mesmo peso significa nada com destaque.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
No card, dois alvos recebem o dedo: o coração de favoritar e o botão de comprar. Vale o mesmo piso da aula anterior, 24 px, e um coração de 16 px colado no preço é toque errado garantido.
A rolagem infinita cobra caro justamente onde parece inofensiva. Sem endereço próprio, a página dois não existe para o buscador nem para o assistente de IA que cita fontes, e o rodapé nunca aparece. A paginação com número no endereço se indexa.
No outro extremo está a Temu. O aplicativo abre numa roleta girando, com cupom que expira em minutos e aviso de gente vendo o mesmo produto agora. O motor do ciclo é a recompensa variável, premiar de forma imprevisível para a pessoa voltar, o mecanismo do caça-níquel.
Construir isso leva uma tarde, e é por ser fácil que a decisão fica difícil. A venda sobe no mês em que o mecanismo entra, e o custo chega depois, espalhado em devolução, reclamação e procedimento de autoridade.
Foi por acumular essas práticas que a Temu passou a responder à Comissão Europeia. A pesquisa Dark Patterns at Scale, que varreu lojas online, contou 157 cronômetros enganosos em 140 delas.
Cada padrão enganoso tem uma gêmea verdadeira, com o mesmo efeito e sem a mentira. O teste tem três perguntas: de onde vem o número, se o selo sobrevive a um F5 e se você explicaria o mecanismo a um regulador. Corrija primeiro a fonte do prazo e do estoque, depois a arte.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Numa distribuidora de bebidas com catálogo para bares, o vermelho da marca vira o token cor de ação. Trocar a identidade passa a ser editar um valor só. O card mostra preço por caixa, quantidade mínima e prazo de entrega, nessa ordem, com o botão "Adicionar 12 unidades" em alvo grande.
Comece recarregando a página de qualquer selo de urgência que já esteja no ar. Se o cronômetro voltar ao início ou o estoque mudar sozinho, o número nasceu no código e sai hoje. Está pronto quando cada número da vitrine tem um campo do sistema por trás.
Guia prático: copiar a ordem das seções do seu setor
A estrutura de uma página de venda muda de setor para setor, e o agente sem instrução entrega a mesma sequência para todos. Nos 51 templates profissionais medidos em 07/10/2026, cada setor tem uma ordem própria, e a chamada para ação muda junto.
| Setor | Ordem típica | Chamada principal |
|---|---|---|
| Advocacia (5 templates) | Topo, empatia, áreas de atuação, como funciona, quem conduz, depoimentos, dúvidas, contato | WhatsApp com mensagem pronta |
| Clínica (5) | Topo, procedimentos, resultados, a clínica, equipe, investimento, depoimentos, dúvidas | Falar com a clínica |
| SaaS (9) | Topo, faixa de logos, recursos, números de caso, tela do produto, depoimentos, chamada final | Teste grátis ou demonstração |
| Restaurante (5) | Início, cardápio, história, galeria, reservas, em páginas separadas | Reservar mesa |
| Imobiliária (3) | Até 18 seções no lançamento, com plantas e cronograma de pagamento | Contato com corretor |
Dois padrões atravessam os setores. A seção de empatia logo depois do topo aparece nos cinco de advocacia: antes de vender o serviço, a página diz que entende a situação. E o canal muda com o público: nos 12 templates em português, o contato vai por WhatsApp e nenhum usa formulário; dos 10 sites com WhatsApp, 8 são esses. Dúvidas frequentes estão em 24 dos 51, depoimentos em 21 e preço ou planos em 32.
Copie a estrutura e adapte o conteúdo. Os 12 templates em português trazem registro profissional fictício, como número de OAB ou CRM de exemplo, e 40 dos 51 têm links que não levam a lugar nenhum. A ordem é aproveitável; o que está dentro de cada seção precisa ser do seu negócio.
Da ordem do setor à página do seu negócio
Cinco passos. A ordem vem do setor; prova, preço e contato vêm de você.
Passo 1: Peça a ordem do setor e o motivo de cada seção
Diga ao agente o setor e peça a sequência de seções com uma linha sobre a dúvida que cada uma responde. Seção sem dúvida associada sai da lista.
Deu certo quando: Cada seção tem uma pergunta do cliente ao lado.
Erro comum: Aceitar a sequência de SaaS, com faixa de logos e tela de produto, num escritório de advocacia.
Passo 2: Escreva a seção de empatia com as palavras do cliente
Logo depois do topo, descreva a situação de quem chega, com frases que ele usaria no WhatsApp. Peça ao atendimento as cinco perguntas que mais ouve.
Deu certo quando: A seção cita uma situação real que o cliente reconhece em três segundos.
Erro comum: Começar pela história do fundador antes de mostrar que entende o problema.
Passo 3: Monte a prova social só com material aprovado
Depoimento entra com autorização de quem falou; nota e contagem entram com a origem anotada. Sem material real, a seção espera em vez de ganhar texto inventado.
Deu certo quando: Cada depoimento tem nome autorizado e cada número tem origem.
Erro comum: Publicar o depoimento de exemplo que veio no template.
Passo 4: Faça as dúvidas frequentes com o elemento nativo
Use details e summary, que abrem e fecham pelo teclado sem JavaScript; com o mesmo atributo name, abrir uma fecha as outras. Responda primeiro preço, prazo e o que acontece depois do contato.
Deu certo quando: As dúvidas abrem por teclado e respondem às três perguntas mais comuns do atendimento.
Erro comum: Escrever dúvidas que ninguém fez só para preencher a seção.
Passo 5: Varra os marcadores antes de publicar
Procure registro profissional de exemplo, telefone fictício, link vazio e e-mail de teste. Cada ocorrência recebe o dado real ou sai.
Deu certo quando: A busca por marcadores volta vazia.
Erro comum: Publicar com um número de registro profissional que não é seu, o que expõe o negócio a problema ético e legal.
No fim você tem: Uma página com a ordem que o seu setor já testou, prova social verificável e nenhum dado de exemplo no ar.
Sócia de uma clínica de fisioterapia em Curitiba que monta a página de pacotes de tratamento
Saúde, agendamento por WhatsApp
Dor
A primeira versão gerada abria com a história da clínica e deixava preço e convênios no fim. As recepcionistas respondiam no WhatsApp as mesmas perguntas que a página não respondia.
Solução
Ela pediu a ordem de clínica: procedimentos, resultados, a clínica, equipe, investimento, depoimentos e dúvidas. As dúvidas vieram da lista das recepcionistas, e cada botão abriu o WhatsApp com uma mensagem diferente por tratamento.
Resultado
A recepção passou a saber de qual tratamento vinha cada conversa, e a página respondeu antes as perguntas que mais se repetiam.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Guia prático: a busca que conversa com quem procura, no /busca deste portal
Booking e Mercado Livre ensinaram a guardar o filtro no endereço e a nunca deixar a busca vazia. Este guia mostra os detalhes miúdos que fazem a busca falar com a pessoa: o anúncio da contagem para quem usa leitor de tela, a tecla Buscar no teclado do celular, a sugestão quando quase nada aparece e o contador do filtro que bate com a lista. Você sai com a busca de campanha pronta para link compartilhado.
Funções, casos de uso e aplicações
Funções
Os recursos de uma busca que ajuda a decidir
| Função ou recurso | O que faz | Quando usar | Referência |
|---|---|---|---|
| Elemento <search> | Marca a região de busca como ponto de referência (landmark), atalho que o leitor de tela oferece para pular direto | Em volta do campo e dos filtros; a lista de resultados fica no conteúdo principal | MDN, disponível em todos os navegadores desde outubro de 2023 |
| role="status" com aria-live="polite" | O leitor de tela anuncia "12 resultados" sem tirar o foco do campo | Só na frase curta da contagem; a lista inteira fica de fora | W3C, WCAG 2.2, critério 4.1.3 |
| inputmode e enterkeyhint iguais a search | O teclado do celular mostra a tecla Buscar no lugar de Enter | Todo campo de busca | Portal, src/app/busca/page.tsx |
| KeyboardEvent.isComposing | Diz se a pessoa ainda está compondo um caractere pelo IME, o sistema de entrada de teclados como o japonês | Antes de tratar Enter, Esc e setas no campo; não é recurso Baseline | MDN |
| Contagem do filtro no mesmo conjunto | O número no botão de categoria sai da mesma consulta que monta a lista | Toda busca com filtros e contadores | Portal, src/app/busca/search-results.ts |
| "Você quis dizer" | Sugere a grafia vizinha quando a busca devolve menos de três resultados | Catálogo com termo técnico ou nome de marca | Portal, src/lib/search/suggestions.ts |
Casos de uso
Gerente de marketing de uma rede de escolas de idiomas em Fortaleza
Educação
Dor
A busca de turmas devolvia tela vazia para "ingles noite", sem acento, e o link enviado por WhatsApp abria a busca em branco.
Solução
Pediu ao agente busca sem acento, sugestão quando houver menos de três turmas, consulta e filtros no endereço e a contagem anunciada por role="status".
Resultado
O que observar: no relatório de pesquisa no site do Analytics, a fatia de buscas sem resultado nas duas semanas seguintes e os cliques em "Você quis dizer".
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Analista de mídia de uma editora de livros paradidáticos em Campinas
Marketing digital
Dor
O anúncio de volta às aulas levava para a busca do catálogo, mas o filtro por série escolar não ia para o link, e cada peça abria a mesma lista genérica.
Solução
Guardou consulta e série no endereço (?q=matematica&serie=6ano) e montou uma URL por anúncio, com o contador de cada série saindo da mesma consulta.
Resultado
O que observar: por anúncio, a taxa de clique em um livro a partir da busca já filtrada, comparada à lista genérica, depois de sete dias de veiculação.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Na prática
A busca deste portal fica em src/app/busca/page.tsx. O formulário tem role="search", o campo traz tipo search, teclado de busca e limite de tamanho, e a contagem mora num parágrafo com role="status". Teclas de navegação esperam o fim da composição de teclado (compondoNoTeclado, em src/lib/educacao/busca-robusta.ts). A consulta entra pelo endereço /busca?q=..., mas área e categoria ainda vivem só na memória da tela: levar as duas ao endereço é o próximo passo que a aula da Booking pede.
<form role="search" aria-label="Buscar no portal" onSubmit={(e) => e.preventDefault()}>
<label htmlFor="portal-search" className="sr-only">Buscar no portal</label>
<input
id="portal-search"
type="search"
aria-controls="portal-search-results"
aria-describedby="portal-search-status"
inputMode="search"
enterKeyHint="search"
autoComplete="off"
spellCheck={false}
maxLength={LIMITE_DO_CATALOGO}
value={query}
onKeyDown={handleKeyDown}
/>
</form>
<p id="portal-search-status" role="status" aria-live="polite" aria-atomic="true">
{allResults.length} resultados para "{query}"
</p><search>
<form id="busca">
<label for="q">Buscar curso</label>
<input id="q" name="q" type="search" inputmode="search" enterkeyhint="search">
<select name="turno"><option value="">Qualquer turno</option><option>noite</option></select>
</form>
</search>
<p id="status" role="status" aria-live="polite"></p>
<ul id="lista"></ul>
<script>
const form = document.getElementById("busca");
// 1. Abre já filtrada pelo link: ?q=ingles&turno=noite
const url = new URL(location.href);
for (const [k, v] of url.searchParams) if (form.elements[k]) form.elements[k].value = v;
function aplicar() {
const dados = new FormData(form);
const params = new URLSearchParams();
for (const [k, v] of dados) if (v) params.set(k, v);
// 2. Grava o estado no endereço sem recarregar
history.replaceState(null, "", "?" + params);
const n = filtrar(params); // sua função de filtro
// 3. Anuncia a contagem sem mover o foco
document.getElementById("status").textContent = n + " cursos encontrados";
}
form.addEventListener("input", aplicar);
form.addEventListener("submit", (e) => { e.preventDefault(); aplicar(); });
aplicar();
</script>Da caixa de texto à busca que conversa
Passo 1: Estado da busca no endereço
Consulta, filtro e página entram na URL. Copie o link, abra em outra aba e compare.
Deu certo quando: O link colado abre a mesma lista, com os mesmos filtros marcados.
Passo 2: Anuncie a contagem
Ligue o leitor de tela do celular (TalkBack ou VoiceOver), digite uma letra e escute.
Erro comum: Pôr aria-live na lista inteira e fazer o leitor ler trinta títulos a cada letra.
Passo 3: Teste o teclado do celular
No celular, a tecla do canto deve dizer Buscar. Com teclado japonês ou chinês, o Enter que confirma o caractere não pode abrir resultado.
Passo 4: Desenhe a busca quase vazia
Digite três termos com erro comum do seu público e veja se a sugestão aparece.
Deu certo quando: Nenhum termo comum termina em tela vazia sem saída.
Passo 5: Contadores que somam o total
A soma dos números dos filtros de categoria bate com o total de "Todos".
No fim você tem: Cada anúncio leva a uma busca já filtrada, e quem usa leitor de tela sabe quantos resultados há sem caçar a lista.
Armadilhas
Busca de campanha: o que evitar e o que pedir
Evitar
Coluna a evitar
- Filtro só na memória da tela, que some ao copiar o link
- Contagem que muda sem aviso para o leitor de tela
- Enter tratado durante a composição do teclado
- Contador do filtro calculado numa consulta e lista em outra
- Tela em branco quando a busca não acha nada
Recomendado
Coluna recomendada
- Consulta, filtros e página no endereço
- Frase curta de contagem com role="status"
- Teclas ignoradas enquanto isComposing for verdadeiro
- Contador e lista saindo do mesmo conjunto
- "Você quis dizer" e um caminho alternativo
Laboratório visual: avaliar busca, conversão e padrões de comércio
Booking, LATAM, Mercado Livre e Temu sob os mesmos critérios
Escolha um horário
Os horários demonstrativos são 14h e 16h. Nenhuma reserva será enviada.
Selecione cada estado acima. A simulação permanece em “Enviando” para permitir a inspeção; escolha “Confirmado” ou “Erro” para examinar as saídas.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- CursoClaude Code CLI: Programação com IA
- Frontend vs Backendsugerido pelo grafoApresenta o conceito “Frontend”, usado em “Avaliar busca, conversão e padrões de comércio”.
- CursoVídeo com IA: Claude Code, Codex e ElevenLabssugerido pelo grafo20 capítulos de “Frontends com Vibecoding” usam conceitos apresentados em “Vídeo com IA: Claude Code, Codex e ElevenLabs”.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo20 capítulos de “Frontends com Vibecoding” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Depois, siga para
- CursoPrompt Engineering para Executivossugerido pelo grafo7 capítulos de “Prompt Engineering para Executivos” usam conceitos apresentados em “Frontends com Vibecoding”.
- CursoLLM FinOps: o custo da IA para quem assina o orçamentosugerido pelo grafo3 capítulos de “LLM FinOps: o custo da IA para quem assina o orçamento” usam conceitos apresentados em “Frontends com Vibecoding”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- CRO: Otimização de Conversão e ExperimentaçãoÉtica e risco: as táticas que viraram processoExaminar conexões de Ética e risco: as táticas que viraram processo
- TikTok Ads e Live Commerce 2027Preparar perfil, página e checkout para o clique que vem do vídeoExaminar conexões de Preparar perfil, página e checkout para o clique que vem do vídeo
- Google Ads 2027Preparar a página de destino para o clique e para a expansão de URLExaminar conexões de Preparar a página de destino para o clique e para a expansão de URL
- GEO Intent MappingO degrau que dá para comprar dentro da respostaExaminar conexões de O degrau que dá para comprar dentro da resposta
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
Laboratórios ao vivo deste curso
Cada laboratório monta a biblioteca real dentro da aula, com controles para você mexer e o código do exemplo para copiar. O texto de reserva descreve a demonstração para quem lê sem JavaScript. O link abre o capítulo já no ponto do laboratório.
Base UI
Prenda o foco num diálogo sem escrever o comportamento
Abra a janela Agendar visita, percorra os campos com Tab, feche com Esc e acompanhe no painel onde o foco está e para onde ele volta.
Pacote
Abrir no capítuloConstruir componentes, usar o registro e publicar o catálogo@base-ui/reactLucide e Iconify
Mantenha uma família de ícones coerente e nomeie cada botão
Mude tamanho, traço e cor da barra, veja o símbolo do Iconify acompanhar o Lucide e rode a auditoria de nomes acessíveis.
Pacote
Abrir no capítuloProjetar uma linguagem de ícones e ilustraçãolucide-react, @iconify/reactMotion
Testar os três sinais que autorizam o terceiro degrau
Reproduza a entrada em sequência, aperte o botão com mola e arraste o cartão; ajuste rigidez e amortecimento e veja o que muda.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagemmotionVidstack
Ver o que separa um player de um vídeo cru
Dê o play, troque a velocidade e ligue a legenda; o painel ao lado mostra o estado que o player publica e que a etiqueta crua esconde.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagem@vidstack/reactcmdk
Achar um destino entre quarenta digitando três letras
Abra a paleta, digite fat e escolha um item só pelo teclado; o painel embaixo conta o que o filtro deixou passar e quanto tempo levou.
Pacote
Abrir no capítuloConstruir formulários e estados de interaçãocmdknumber-flow
Animar indicadores que mudam ao vivo com formato pt-BR
Veja três indicadores fictícios rolarem a cada troca e compare com o número em texto puro. Pause, reinicie e observe o separador de milhar.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisão@number-flow/reactApache ECharts
Medir o custo de desenhar 200 mil pontos com o ECharts
Troque o tipo de gráfico e o volume de pontos, leia o tempo de desenho e alterne o eixo em zero. Mude o tema do site e veja as cores refazerem.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisãoechartssharp e svgo
Escolher a variante certa da imagem e conferir o teto de 150 KB
Arraste a largura da tela simulada, troque a densidade entre 1x e 2x e veja qual arquivo o navegador escolhe, quanto ele pesa e se cabe no orçamento.
Pacote
Abrir no capítuloValidar desempenho, autenticação e segurançasharp, svgoReact Flow (xyflow)
Disparar um pedido e ver o orquestrador distribuir, conferir e responder
Alterne paralelo e sequencial, ligue e desligue a verificação e use a medição real; observe o tempo de parede em cada combinação.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robô@xyflow/reactGSAP, Web Workers e number-flow
Dividir mil tarefas entre trabalhadores reais e correr três ritmos de geração
Execute com um trabalhador, depois com quatro e oito, e compare o tempo; em seguida percorra a corrida e separe a espera inicial do ritmo.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôgsap, @number-flow/reactThree.js com React Three Fiber, drei, Rapier e XR
Carregar o braço robótico, ver a física trabalhar e entrar na cena com o visor
Carregue a cena pelo botão, inicie o ciclo, mostre os ângulos das juntas, troque a câmera e a velocidade; com visor, entre em realidade virtual.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôthree, @react-three/fiber, @react-three/drei, @react-three/rapier, @react-three/xrMotion
Ver quatro agentes em raias trocando mensagens e a revisão devolvendo um trecho
Reproduza os 60 s de modelo, percorra o tempo pelo controle e esconda as mensagens para comparar a leitura; repare no tempo de parede contra a soma.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinamotionMediaRecorder, Canvas 2D e Long Animation Frames (plataforma)
Medir o quadro da cena e gravar seis segundos dela em vídeo
Suba as partículas, force um bloqueio de 300 ms e leia o medidor; depois grave seis segundos, veja o codec escolhido e baixe o arquivo.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinasem pacotesigma.js, graphology com ForceAtlas2 e cosmos.gl
Ver o grafo real do curso e um grafo de milhares de nós se organizarem em aglomerados
Rode o layout no grafo real, passe o mouse pelos nós e busque uma entidade; troque para 20 mil nós e leia o medidor; depois carregue o modo massivo na placa de vídeo.
Pacote
Abrir no capítuloAnimar um grafo de conhecimento amplo em movimentosigma, graphology, graphology-layout-forceatlas2, graphology-generators, @cosmos.gl/graph