Frontends com Vibecoding · Capítulo 24 de 33 · 22 min
Comparar modelos e interpretar benchmarks
Modelos passam a ser comparados na mesma tarefa, e todo percentual de benchmark é conferido em três réguas antes de sustentar uma decisão de contratação.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding.
Uma tela de cadastro custa menos com o modelo certo, e a diferença entre dois modelos chega a várias vezes. Modelo é o programa de IA que recebe o seu pedido em português e devolve o código da tela pronta.
O Claude Sonnet 5 cobra US$ 2 de entrada e US$ 10 de saída por milhão de tokens. O Claude Opus 5, guardado para a tela que decide a venda, custa bem mais. Por isso quem paga a conta precisa saber três coisas: o preço de cada modelo, o tipo de tela e o que a ferramenta confere sozinha.
Os dois fornecedores cobram por token, que é o pedaço de palavra usado como unidade da conta, assim como o minuto na conta de telefone. Você paga um valor pelo que envia e outro, sempre mais caro, pelo que o modelo devolve.
No Claude, o Opus 5 custa US$ 5 de entrada e US$ 25 de saída por milhão de tokens. O Sonnet 5, da mesma casa, custa US$ 2 e US$ 10, e um aumento anunciado para ele foi cancelado antes de entrar em vigor.
Do lado da OpenAI, o GPT-5.6 Sol custa US$ 5 de entrada e US$ 30 de saída. O nível mais barato, o Luna, caiu 80% em três semanas e hoje sai por US$ 0,20 e US$ 1,20. Ele cobra ainda menos, US$ 0,02 por milhão, pelo trecho guardado em cache, a memória curta do pedido já enviado.
Uma queda de 80% de um lado e um aumento cancelado do outro ensinam a mesma regra. Preço de modelo muda em semanas, e por isso não dá para planejar o gasto de seis meses com o valor de hoje. Abra a tabela oficial no dia em que começar um projeto grande.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
A escolha segue o tipo de tela. Cadastro, listagem e formulário se repetem em dezenas de telas parecidas e vão para o Sonnet 5. A vitrine do produto, a tela em que a aparência decide a compra, vai para o Opus 5. Classificar, resumir ou etiquetar texto em massa, sem gerar tela, cabe no GPT-5.6 Luna.
Numa agência que monta páginas de captação, o formulário e o bloco de depoimento se repetem em toda página e ficam no Sonnet 5. Só a abertura de cada cliente sobe para o Opus 5, porque é ela que decide a venda. A conta do mês cai sem que o resultado visível piore.
Quando as três perguntas não resolvem, o teste dura uma tarde. Rode o mesmo pedido dez vezes em dois modelos, some o custo e conte quantas correções você precisou pedir. Ganha o menor dos dois números.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Falta decidir como pagar, e existem dois regimes. A assinatura cobra um valor fixo por mês e limita o uso numa janela de cinco horas, com um teto semanal à parte para os modelos mais caros.
Quem trabalha muitas horas seguidas esbarra nesse teto no meio de um sábado e fica parado. O pagamento por consumo cobra só o que você usar e chega pela API, que é a porta por onde um programa chama o modelo. Se o seu uso é irregular, ele sai mais barato.
Depois de escolher o modelo, confira o que o agente faz antes de devolver a tela. Agente é o programa de IA que recebe o seu pedido em português e escreve o código sozinho. O fluxo abaixo mostra a conferência que ele faz por conta própria, ligada por padrão e desligada só pela chave autoVerify.
O erro de iniciante é aceitar o print do agente como prova. O print mostra a tela no tamanho e no navegador do agente, que não são os do seu cliente. Abra a mesma tela no seu celular, navegue só pelo teclado e confira o contraste com os próprios olhos.
Sem direção no pedido, o modelo devolve a aparência média da web, porque ele copia o centro estatístico do que viu. A Anthropic chama isso de convergência distribucional. A direção completa, em quatro linhas, está na aula sobre a skill frontend-design, que é o manual lido pelo agente antes de desenhar.
- Etapa 1 de 5: Tira um print da tela
a imagem do que o navegador desenhou a partir do código
- Etapa 2 de 5: Lê a estrutura da página
títulos, botões e campos, na ordem em que um leitor de tela os encontra
- Etapa 3 de 5: Clica e preenche o formulário
o caminho que o seu cliente faria, até o envio
- Etapa 4 de 5: Corrige e devolve com o print
ligado por padrão; desliga só pela chave autoVerify
- Etapa 5 de 5: Você abre no seu celular
teclado, contraste e envio conferidos pelos seus olhos
Antes de aprovar qualquer tela, abra a tabela de preços do dia e escolha o modelo pelo tipo de tela: barato nas repetidas, caro só na vitrine. Confira se a checagem automática do agente está ligada. Depois, abra o resultado no celular, navegue só pelo teclado e confirme que o formulário envia antes de liberar o lote seguinte.
Conferir um teste de desempenho em três réguas antes de acreditar
A escolha por tela se apoia em números publicados, e cada um deles precisa aparecer em três réguas antes de sustentar uma decisão de contratação.
Um único teste, no mesmo mês, rendeu 88,8% na tabela do próprio fornecedor e 83,8% no leaderboard oficial independente. A diferença nasce da régua que mediu, não do modelo. Benchmark é um teste padronizado que dá nota a modelos, como a prova do Detran dá nota a motoristas.
Quem contrata uma ferramenta ou um freelancer por um percentual isolado, sem saber quem mediu, paga o preço do exagero do vendedor. Por isso vale separar o número que o vendedor publica do número que um terceiro mediu, e o roteiro para isso é curto.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
O Terminal-Bench 2.1, que mede agentes trabalhando no terminal, é o exemplo mais limpo. Na tabela do próprio anúncio de lançamento, a OpenAI publica 88,8% para o GPT-5.6 Sol e 91,9% para o Sol Ultra.
Já o leaderboard oficial, que é a tabela pública mantida por quem criou o teste e só aceita resultados conferidos, foi lido em 15 de agosto de 2026. Ele não registra nenhuma submissão do Sol. O topo é o Claude Code com Fable 5, a 83,8%, e o melhor registro da OpenAI é o Codex com GPT-5.5, a 83,1%.
A avaliadora independente Artificial Analysis roda o mesmo teste com outro arnês, que é o programa encarregado de dirigir o modelo na prova, como o piloto na pista. Ela usa um computador isolado e descartável e repete cada item três vezes. O resultado muda de lado: 89,5% para o Sol e 89,1% para o Claude Opus 5.
Três números do mesmo teste, com o mesmo nome, no mesmo mês. A diferença vem da régua: o fornecedor mede na própria ferramenta, o leaderboard só aceita o que foi conferido e a avaliadora troca o arnês. O arnês decide quantas tentativas o modelo tem e que ferramentas pode usar; dois arneses honestos produzem dois números honestos e diferentes.
O SWE-Bench Pro mostra o efeito contrário na mesma tabela da OpenAI: o Sol resolve 64,6% dos casos contra 80,3% do Claude Mythos 5. Parar a leitura numa linha esconde que o mesmo modelo perde numa prova e ganha na outra. Leia a tabela inteira e pergunte qual linha se parece com o trabalho que você vai pedir.
Quatro perguntas cabem em qualquer número: qual teste e qual versão, quem submeteu, qual arnês e quando. O leaderboard responde as quatro numa linha só; o slide costuma responder uma. Um número de teste que ninguém mais roda só serve ao marketing do fornecedor. Peça as quatro respostas por escrito antes de qualquer reunião de proposta.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Número que você pode repetir e número que fica no slide
Tem lastro
repita
- Nome e versão exatos do teste, como Terminal-Bench 2.1
- Linha do modelo no leaderboard de quem criou o teste
- Arnês e data de medição declarados ao lado do percentual
- Resultado de um terceiro no mesmo mês, com a mesma régua
Só está no slide
pergunte a fonte
- Nome do teste sem versão, ou com apelido
- Percentual que só aparece na página do fornecedor
- Arnês da própria empresa, sem dizer qual
- Dois números de réguas diferentes somados na mesma frase
A versão seguinte do teste repete a lição. No Terminal-Bench 4.0, o GPT-6 Astra marca 57,9%, e essa fração bonita quer dizer 191 de 330 itens resolvidos. Um ajuste de configuração leva o número a 58,2%, ou 192 de 330, um item a mais.
No DeepSWE v1.1, os 74,1% são autodeclarados pela OpenAI, e o leaderboard público registra cerca de 74% sobre 113 itens. A casa decimal não sobrevive a uma medição independente. Peça sempre o denominador junto do percentual, porque 74% de 113 é bem menos firme do que parece.
Antes de repetir qualquer percentual, copie o nome exato do teste e ache a linha do modelo no leaderboard oficial. Anote também o arnês e a data que produziram esse número publicado, porque réguas diferentes mudam a leitura do mesmo teste.
Se a linha não existir, devolva a pergunta a quem apresentou o número. Se existir, compare com o trabalho que você vai pedir, e ignore o resto do slide.
Guia prático: o que uma biblioteca de prompts diz sobre os modelos de imagem e vídeo
Uma biblioteca grande de prompts parece um ranking de modelos, e não é. A biblioteca estudada em 07/10/2026 tem 648 prompts: 331 de imagem, 309 de vídeo e 8 de página web. A distribuição por modelo:
| Modelo | Prompts | Tipo | Palavras em média |
|---|---|---|---|
| gpt-image-2 | 284 | imagem | 277 |
| seedance 2.5 | 131 | vídeo | 386 |
| seedance 2.0 | 113 | vídeo | 572 |
| grok-imagine | 60 | vídeo | 43 |
| nano-banana-pro | 35 | imagem | 184 |
| gemini-3-pro | 7 | página web | 28 |
O que a distribuição diz: onde a curadoria investiu e quais modelos as pessoas estão usando para publicar. O gpt-image-2 sozinho é 44% da biblioteca. Diz também quanto texto cada modelo costuma receber: de 43 palavras no grok-imagine a 572 no seedance 2.0. Prompt de 572 palavras custa tempo de revisão e de ajuste a cada variação.
O que ela não diz: qual modelo é melhor para a sua marca, quanto cada um custa, que licença vale para o resultado, nem como cada um se sai com texto em português na imagem. E só 8 dos 648 prompts são de página: para construir site, a biblioteca mostra pouco. O curso estudado faz todo o trabalho no Claude Code e afirma que o método funciona também no Codex. Antes de escolher, teste o mesmo pedido nos candidatos.
Escolher o modelo de imagem ou vídeo com teste próprio
Cinco passos. A biblioteca indica candidatos; o seu teste decide.
Passo 1: Escreva a tarefa e o critério antes de abrir a biblioteca
Diga o que precisa: foto de produto para o topo, vídeo vertical de 8 segundos, infográfico com texto em português. Ao lado, o critério de aprovação: fidelidade à marca, texto sem erro, rosto consistente.
Deu certo quando: Você tem a tarefa e três critérios que dá para conferir olhando.
Erro comum: Escolher o modelo pela quantidade de prompts que ele tem na biblioteca.
Passo 2: Escolha dois candidatos por tipo
Para imagem, dois modelos de imagem; para vídeo, dois de vídeo. Confira na página oficial de cada um o preço do dia e a licença de uso comercial.
Deu certo quando: Dois candidatos com preço e licença anotados com a data.
Erro comum: Comparar imagem de um modelo com vídeo de outro.
Passo 3: Rode o mesmo pedido nos dois
Escreva um pedido seu, com objetivo, formato, conteúdo e restrições, e rode igual nos dois. Gere de 5 a 10 variações em cada, não 50.
Deu certo quando: Você tem variações comparáveis lado a lado.
Erro comum: Ajustar o pedido para um dos modelos no meio do teste.
Passo 4: Meça o esforço de revisão
Conte quantas variações passaram nos três critérios e quanto tempo você levou ajustando o pedido. Pedido longo que exige muita correção pesa no custo real.
Deu certo quando: Cada candidato tem taxa de aprovação e minutos de ajuste anotados.
Erro comum: Decidir pela melhor imagem isolada, sem ver quantas tentativas ela custou.
Passo 5: Registre a escolha e a data
Anote no projeto o modelo escolhido para cada tipo de peça, o pedido-base e a data do teste. Modelo muda de versão e de preço; o teste se repete quando isso acontece.
Deu certo quando: O arquivo do projeto diz qual modelo faz qual peça e quando foi testado.
Erro comum: Manter a escolha de seis meses atrás sem refazer o teste.
No fim você tem: Um modelo por tipo de peça, escolhido por teste com os seus critérios, com preço, licença e data anotados.
Analista de mídia de um e-commerce de cosméticos em São Paulo, preparando a campanha de fim de ano
Varejo online, anúncios e página de produto
Dor
A equipe queria usar o modelo de imagem mais popular nas bibliotecas de prompts para todas as peças. As primeiras imagens erravam o nome dos produtos escrito no rótulo.
Solução
Ela testou dois modelos de imagem com o mesmo pedido, sete variações em cada, e mediu quantas acertavam o texto do rótulo. Registrou no projeto qual modelo fazia foto com texto e qual fazia cena sem texto.
Resultado
A equipe passou a gerar cada tipo de peça no modelo que acertava aquele critério, com menos rodadas de correção.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Guia prático: o mapa de modelos de outubro de 2026 e o cache que corta a conta
Entre agosto e outubro de 2026 as três casas trocaram de geração: Claude 5.5, GPT-6 e Gemini 3.8. O guia mostra o que cada modelo e cada ferramenta de uso do computador faz, onde o preço muda de degrau e como o próprio portal reduz a conta do assistente de busca com cache de prompt. Você sai com o pedido pronto para montar o mesmo assistente numa página de campanha.
Funções, casos de uso e aplicações
Funções
Modelos e ferramentas novos, com preço por milhão de tokens
| Função ou recurso | O que faz | Quando usar | Desde |
|---|---|---|---|
| Claude Opus 5.5 (claude-opus-5-5) | Modelo para trabalho longo de código e conhecimento. US$ 4 de entrada, US$ 20 de saída e US$ 0,20 na leitura de cache; esforço padrão médio | Ponto de partida que a Anthropic indica para a maior parte do trabalho; a tela que decide a venda | 22/09/2026 |
| Claude Sonnet 5.5 e Claude Haiku 5.5 | Sonnet: US$ 2 e US$ 10, leitura de cache a US$ 0,10 desde 07/10. Haiku: US$ 0,10 e US$ 0,50 com prompt de até 100 mil tokens; acima disso, US$ 0,50 e US$ 2,50 | Sonnet nas telas que se repetem; Haiku para classificar, extrair e rotear em volume | 28/09/2026 e 07/10/2026 |
| GPT-6.1 Sol e GPT-6 Luna (OpenAI) | Sol: US$ 2 e US$ 10, entrada em cache a US$ 0,10; acima de 272 mil tokens de entrada, o pedido inteiro paga o dobro na entrada e 1,5 vez na saída. Luna: US$ 0,10 e US$ 0,50 | Sol como segundo modelo no teste de dez rodadas; Luna para etiquetar texto em lote | 29/09/2026 e 22/09/2026 |
| Gemini 3.8 Flash (gemini-3.8-flash) | US$ 0,75 e US$ 3,75 até 31/12/2026, o dobro a partir de 2027; envio em lote pela metade. O 3.7 Flash foi descontinuado em 08/10 e passou a ser atendido por ele | Resposta que a pessoa espera na tela e lote noturno barato | 02/09/2026 |
| Uso de computador da Anthropic (computer_toolset_20260801) | Saiu do beta com ações em lote e zoom ligado. Declarar a ferramenta acrescenta cerca de 4.500 tokens de entrada a cada pedido, e cada captura de tela é cobrada como imagem | Tarefa que precisa da área de trabalho inteira, como digitar em sistema antigo sem integração | 19/08/2026 |
| Navegador da Anthropic (browser_toolset_20260801) | O modelo lê a estrutura da página (árvore de acessibilidade, campos e abas) num navegador que a aplicação roda. Cerca de 6.600 tokens fixos por pedido; executar JavaScript e enviar arquivo ficam desligados por padrão | Tarefa que fica dentro de páginas web, como conferir os formulários de uma campanha publicada | 19/08/2026 |
| Uso de computador na Agents API da OpenAI | O agente trabalha num navegador hospedado pela OpenAI; a aplicação aprova o acesso a cada site e cuida do login | Quem não quer manter navegador próprio para o agente | 29/09/2026 |
Preço muda em semanas: o Sonnet 5.5 cortou a leitura de cache pela metade nove dias depois do lançamento. Abra a tabela oficial no dia do orçamento.
Fonte: Anthropic, OpenAI e Google, páginas oficiais de modelos, preços e notas de versão, lidas em 12/10/2026
Casos de uso
Coordenadora de marketing de uma escola de idiomas em Curitiba
Educação, página de matrícula com assistente de dúvidas
Dor
O assistente da página de matrícula reenviava o catálogo inteiro de turmas, horários e preços a cada pergunta, e a conta do mês crescia junto com o tráfego da campanha de volta às aulas.
Solução
Ela trocou o modelo pelo Haiku 5.5, guardou o nome dele numa única constante e pôs o marcador de cache de uma hora no fim da instrução de sistema, onde termina o catálogo. A pergunta do visitante ficou fora do trecho guardado e limitada a 600 caracteres.
Resultado
O que observar: na primeira semana, a linha de tokens lidos do cache no relatório de uso precisa crescer junto com as visitas. Se ela ficar em zero, o marcador está no lugar errado.
Custo apurado: Gravar no cache de uma hora custa o dobro da entrada; ler custa um décimo. A conta fecha a partir da segunda leitura do mesmo catálogo.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Gerente de operações de uma agência de performance em Recife
Marketing digital, conferência de páginas de campanha
Dor
Com 30 páginas de captação no ar, os formulários saíam com campos trocados depois de cada ajuste e o cliente descobria o erro antes da agência.
Solução
A equipe montou um conferente com a ferramenta de navegador da Anthropic, rodando num contêiner sem senha salva, com lista de domínios permitidos e as ferramentas de executar JavaScript e enviar arquivo desligadas. O agente abre cada página, preenche dados fictícios e para antes do botão de enviar.
Resultado
O que observar: em duas semanas, quantos defeitos o conferente apontou antes do cliente e quantos alarmes eram falsos. Mais de um terço de falsos indica roteiro de conferência vago.
Custo apurado: Cerca de 6.600 tokens fixos por pedido, mais as capturas cobradas como imagem.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Na prática
O assistente de busca do portal, em src/app/api/ask/route.ts, aplica três regras desta trilha. O nome do modelo mora numa única constante, MODELO_ASK, então a troca leva um minuto. O índice do site, igual para todo visitante, vai na instrução de sistema com cache de uma hora. E a pergunta tem teto de 600 caracteres, 12 mensagens e oito chamadas por minuto por IP.
O detalhe do cache veio de um erro real. Até 25/09/2026 o marcador ia no nível da chamada, e a API o colocava no fim da conversa: duas conversas nunca reaproveitavam a mesma entrada. O relatório de uso de setembro mostrou o Sonnet 5 com 1,83 milhão de tokens gravados no cache e nenhum lido. A correção, em src/lib/ai/anthropic-cache.ts, põe o marcador no fim da instrução de sistema, o trecho que se repete. Cache de prompt é a cópia que a API guarda do começo do pedido para cobrar menos quando ele chega de novo.
const RL = { limit: 8, windowMs: 60_000 };
const MAX_MESSAGES = 12;
const MAX_QUESTION_CHARS = 600;
const MODELO_ASK = "claude-haiku-4-5-20251001";
// ...
const result = streamText({
model: anthropic(MODELO_ASK),
// O corpus do site é o mesmo para todo visitante: o ponto de corte do cache
// fica no fim dele, com uma hora de vida, para perguntas de visitantes
// diferentes lerem a mesma entrada.
providerOptions: {
anthropic: { cacheControl: { type: "ephemeral" } },
},
messages: [mensagemDeSistema(MODELO_ASK, system, "1h"), ...(await convertToModelMessages(messages))],
temperature: 0.3,
});Do pedido ao cache que se paga
Cinco passos para pôr um assistente de campanha no ar sem a conta subir junto com o tráfego.
Passo 1: Escolha o modelo pela tarefa
Responder dúvidas a partir de um texto fixo é tarefa de modelo rápido. Comece pelo Haiku 5.5 e suba de degrau só se as respostas errarem no teste.
Deu certo quando: Você sabe dizer em uma frase por que aquele modelo atende.
Erro comum: Usar o modelo mais caro porque ele ganhou um teste de programação que não tem nada a ver com a tarefa.
Passo 2: Antes de marcar, confira o piso do cache
Abaixo do mínimo de tokens a API ignora o marcador sem erro. A família 5.5 guarda a partir de 512 tokens; o Haiku 4.5, a partir de 4.096.
Deu certo quando: A instrução de sistema passa do piso do modelo escolhido.
Erro comum: Marcar uma instrução de 300 tokens e achar que está economizando.
Passo 3: Ponha o marcador onde o texto deixa de ser igual
O cache vale para tudo o que vem antes do marcador. Regras e catálogo ficam antes; a pergunta de cada visitante fica depois.
Deu certo quando: Duas conversas diferentes leem a mesma entrada guardada.
Erro comum: Marcar o fim da conversa: cada visitante grava o próprio cache e ninguém lê o do outro.
Passo 4: Corte antes do degrau de preço
No Haiku 5.5 o prompt acima de 100 mil tokens muda de faixa; no GPT-6.1 Sol o degrau fica em 272 mil. Limite o histórico enviado bem antes da borda.
Deu certo quando: O maior pedido do teste fica abaixo do degrau do modelo.
Erro comum: Deixar a conversa crescer sem teto e descobrir a faixa nova na fatura.
Passo 5: Na primeira semana, leia o relatório de uso
Compare tokens gravados e tokens lidos do cache. Leitura perto de zero com muitas visitas indica marcador fora do lugar.
Deu certo quando: A leitura do cache cresce junto com as visitas da campanha.
Erro comum: Olhar só o total em dólar e não saber de onde veio o gasto.
No fim você tem: Um assistente com o modelo numa constante e o cache no trecho que se repete, com limites que impedem a conta de crescer sem aviso.
Armadilhas
O que custa caro na troca de geração
Evitar
evitar
- Nome do modelo repetido em vários arquivos do projeto
- Marcador de cache no fim da conversa, onde cada visitante é diferente
- Reaproveitar código do Haiku 4.5 no 5.5 com prefill ou computer_20250124, que agora voltam erro 400
- Código que ainda chama gemini-3.7-flash porque ele responde
- Ferramenta de navegador num perfil com senha salva e acesso à rede interna
- Ligar executar JavaScript e enviar arquivo sem a tarefa pedir
Recomendado
fazer
- Uma constante por tarefa, trocada em um minuto
- Marcador no fim da instrução de sistema, o trecho igual para todos
- Ler o guia de migração e rodar o teste de dez pedidos antes de trocar
- Apontar para gemini-3.8-flash e anotar a data em que o preço dobra
- Contêiner sem credencial, lista de domínios permitidos e confirmação humana antes de enviar
- Só os membros padrão da ferramenta; o resto entra quando a tarefa exigir
Laboratório visual: comparar modelos e interpretar benchmarks
Mesma tarefa, configuração, evidência e resultado
Com a base em zero, o comprimento das barras é proporcional aos valores. Dados fictícios para estudar escala; não representam desempenho de modelos ou resultados de empresas.
Consultar os dados e o método
| Versão | Unidades |
|---|---|
| A | 80 |
| B | 90 |
| C | 100 |
Altura = (valor − início do eixo) ÷ (100 − início do eixo). A troca muda a escala, preservando os dados.
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
- Configurar o Codex com GPT-6 Astra num sandbox que pede aprovaçãosugerido pelo grafoApresenta o conceito “Codex”, usado em “Comparar modelos e interpretar benchmarks”.
- O que é JavaScriptsugerido pelo grafoApresenta o conceito “JavaScript”, usado em “Comparar modelos e interpretar benchmarks”.
- Frontend vs Backendsugerido pelo grafoApresenta o conceito “Frontend”, usado em “Comparar modelos e interpretar benchmarks”.
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
- Prompt Engineering para ExecutivosEscolher entre Claude e OpenAI para cada tarefaExaminar conexões de Escolher entre Claude e OpenAI para cada tarefa
- Letramento em IA para ExecutivosCompare Claude, OpenAI, Grok e Gemini sem jargãoExaminar conexões de Compare Claude, OpenAI, Grok e Gemini sem jargão
- LLM FinOps: o custo da IA para quem assina o orçamentoModelo caro para tudo é desperdício aprovadoExaminar conexões de Modelo caro para tudo é desperdício aprovado
- Claude Code CLI: Programação com IAEscolher entre Claude e ChatGPT pelo custo do erroExaminar conexões de Escolher entre Claude e ChatGPT pelo custo do erro
Voltar ao capítulo anterior: Construir o projeto final, medir a cara de IA e revisar
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
Capítulos vizinhos em Frontends com Vibecoding
- 22Planejar a modernização e publicar com reversão
- 23Construir o projeto final, medir a cara de IA e revisar
- 24Comparar modelos e interpretar benchmarks
- 25Calcular custo por tarefa e definir governança
- 26Supervisionar o modelo que opera o computador