Frontends com Vibecoding · Capítulo 24 de 30 · 14 min
Comparar modelos e interpretar benchmarks
Você sai com uma entrega que integra mesma tarefa, configuração, evidência e resultado.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding. Para marcar como concluído e salvar o progresso, abra este capítulo na página do curso.
Uma tela de cadastro custa menos com o modelo certo. O Claude Sonnet 5 cobra US$ 2 de entrada e US$ 10 de saída por milhão de tokens. O Claude Opus 5, reservado para a tela que decide a venda, custa bem mais.
Quem paga a conta de vibecoding precisa de três informações antes do primeiro pedido. São elas: o preço de cada modelo, o tipo de tela e o que a ferramenta confere sozinha antes de devolver o trabalho pronto.
Os dois fornecedores cobram por token (a unidade de cobrança do modelo, um pedaço de palavra, como o minuto na conta de telefone). Você paga um valor pelo que envia e outro, sempre mais caro, pelo que o modelo devolve.
A Anthropic lançou o Claude Opus 5 em 24 de julho de 2026. O preço, US$ 5 de entrada e US$ 25 de saída por milhão de tokens, repete o do antecessor. O Claude Sonnet 5 custa US$ 2 e US$ 10, e um aumento marcado para 1º de setembro de 2026 foi cancelado.
A OpenAI abriu a família GPT-5.6 em 9 de julho de 2026, com o Sol a US$ 5 de entrada e US$ 30 de saída. Três semanas depois o nível Terra caiu 20% e o Luna caiu 80%, para US$ 0,20 e US$ 1,20. A documentação do modelo, de 26 de agosto de 2026, confirma esses valores e cobra US$ 0,02 por milhão no cache (o trecho já enviado e guardado pelo modelo).
Uma queda de 80% em três semanas de um lado e um aumento cancelado do outro ensinam a mesma regra. Nunca planeje o gasto de seis meses com o preço de hoje. Abra a tabela oficial no dia em que começar um projeto grande.
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 de páginas de captação, formulário e 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.
Quando nenhuma das três perguntas responde, o teste dura uma tarde: rode a mesma tarefa dez vezes em dois modelos, some o custo e conte as correções pedidas. 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. 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 pode esbarrar nesse teto no meio de um sábado. O pagamento por consumo, pela API (a porta que um programa usa para chamar o modelo), cobra só o que você usar e serve para uso irregular.
Depois de escolher o modelo, confira o que o agente (o programa de IA que escreve código a partir do seu pedido) faz antes de devolver a tela. A documentação oficial do Claude Code descreve o agente conferindo sozinho o que produziu, no fluxo abaixo. Essa verificação vem ligada por padrão e só desliga 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. 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. A Anthropic chama isso de convergência distribucional (o modelo copia o centro estatístico do que viu) e publicou a explicação em 12 de novembro de 2025. A direção completa, em quatro linhas, está na aula sobre a skill frontend-design (o manual que o agente lê 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.
Como conferir um benchmark antes de acreditar nele
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 decide uma contratação de ferramenta ou de freelancer por um percentual isolado, sem saber quem mediu, paga o preço do exagero do vendedor. Separar o número do vendedor do número medido por um terceiro evita esse erro, com um roteiro curto.
O Terminal-Bench 2.1 é o exemplo mais limpo. A OpenAI publica, na tabela do próprio anúncio de 9 de julho de 2026, 88,8% para o GPT-5.6 Sol e 91,9% para o Sol Ultra.
O leaderboard oficial (a tabela pública mantida por quem criou o teste, só com submissões conferidas) 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 (o programa que dirige o modelo na tarefa, como o motorista na pista de teste). Ela usa o arnês Terminus 2 num sandbox (um computador isolado e descartável) e faz três repetições por tarefa. O resultado é 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 a sua tarefa.
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
O teste mais recente repete a lição. No Terminal-Bench 4.0, o GPT-6 Astra marca 57,9% nas configurações high e xhigh, o que corresponde a 191 de 330 tarefas. Na configuração max sobe para 58,2%, ou 192 de 330, no resultado de leaderboard publicado em 3 de setembro de 2026.
No DeepSWE v1.1, os 74,1% são autodeclarados pela OpenAI. O leaderboard público da DataCurve registra cerca de 74% sobre 113 tarefas, com intervalo de cerca de três pontos percentuais. A casa decimal não sobrevive a uma medição independente, e o denominador precisa vir junto do percentual.
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 a tarefa que você vai pedir, e ignore o resto do slide.
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.
Todos os capítulos de Frontends com Vibecoding
- 01Projetar o briefing, o repertório da marca e o custo de manter
- 02Dirigir o prompt e avaliar a entrega do agente
- 03Escolher a stack e projetar suas dependências
- 04Investigar uma stack e priorizar atualizações
- 05Construir a identidade com tokens, CSS moderno e DESIGN.md
- 06Construir componentes, usar o registro e publicar o catálogo
- 07Projetar uma linguagem de ícones e ilustração
- 08Projetar menus, popovers e modais acessíveis
- 09Adaptar o layout ao celular e ao contêiner
- 10Projetar movimento, assinatura e narrativas por rolagem
- 11Preparar imagens, ícones e vídeo para a web
- 12Construir profundidade e dirigir a montagem de vídeo
- 13Construir formulários e estados de interação
- 14Publicar conteúdo encontrável em vários idiomas
- 15Projetar gráficos e painéis pela decisão
- 16Dimensionar tabelas e organizar o cálculo das métricas
- 17Escolher mapas, diagramas e cenas espaciais
- 18Comparar direção visual em Stripe e Apple
- 19Avaliar busca, conversão e padrões de comércio
- 20Auditar acessibilidade e contraste nos dois temas
- 21Validar desempenho, autenticação e segurança
- 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
- 27Configurar ambiente, skills e o contêiner de contexto
- 28Aplicar direção de arte, UX writing e padrões de código
- 29Construir um aplicativo instalável e resiliente
- 30Produzir apresentações e PDF com critérios de entrega