Frontends com Vibecoding · Capítulo 25 de 30 · 17 min
Calcular custo por tarefa e definir governança
Você sai com uma entrega que integra tentativas, ferramentas, revisão e plano B.
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.
No Grok 4.6, um pedido que cruza 200 mil tokens no meio da tarefa dobra de preço sozinho, sem aviso. O par de US$ 2 e US$ 6 por milhão de tokens vira US$ 4 e US$ 12. Esse gatilho, a data em que o desconto acaba e a cobrança fora da tabela somam as três armadilhas do preço barato.
Quem orça um projeto pelo valor de hoje precisa achar essas três coisas antes de assinar, com a data, o gatilho e as cobranças escondidas anotados por escrito.
O Google lançou o Gemini 3.7 Flash em 13 de agosto de 2026. Ele custa US$ 0,75 de entrada e US$ 3,75 de saída por milhão de tokens (a unidade cobrada, um pedaço de palavra). É preço introdutório (promoção com fim já publicado): a partir de 1º de janeiro de 2027 o preço dobra, para US$ 1,50 e US$ 7,50.
O envio em lote é o modo em que o pedido entra numa fila e a resposta volta horas depois, como a roupa deixada na lavanderia. Ele corta os dois valores pela metade: US$ 0,375 de entrada e US$ 1,875 de saída até o fim de 2026. Serve para relatório noturno e classificação em massa. A descrição de 4 mil produtos de uma papelaria entra na fila à noite e chega pronta pela manhã.
O Grok 4.6, da SpaceXAI, cobra US$ 2,00 de entrada e US$ 6,00 de saída por milhão até 200 mil tokens no pedido. Acima disso, a documentação diz que o pedido inteiro reprecifica, para US$ 4,00 de entrada e US$ 12,00 de saída.
O gatilho dispara sozinho numa tarefa longa. Um agente (o programa que recebe um objetivo e trabalha sozinho até entregar) reenvia o histórico inteiro da conversa a cada turno. O pedido cresce sem ninguém decidir nada. Um alarme no código a 180 mil tokens dá folga para a tarefa terminar antes da marca.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Duas cobranças ficam fora do preço por token. A primeira é a imagem. No Google, o modelo gemini-3.1-flash-image, o Nano Banana 2, cobra US$ 0,50 por milhão de tokens de entrada. A saída em texto custa US$ 3,00 por milhão e a saída em imagem custa US$ 60,00.
A saída em imagem custa 20 vezes a saída em texto, e o envio em lote corta os dois pela metade. A tabela publica o valor por peça: US$ 0,0336 por imagem de 1K no lote, ou 100 imagens de fundo por pouco mais de três dólares. Orce imagem por peça, nunca pela tarifa de token.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
A segunda cobrança escondida é a ferramenta que o próprio agente aciona. Na SpaceXAI, busca na web, busca no X e execução de código custam US$ 5 por mil chamadas cada. A busca em coleções sai a US$ 2,50 por mil.
Quem decide quantas chamadas fazer é o agente, e essa linha só ganha teto se o seu código contar as chamadas e parar num número fixo, como 50. Sem o contador, o teto é o limite do seu cartão.
Sobra um risco que tabela nenhuma mostra: o modelo pode ser desligado em data marcada. O Google encerrou o Imagen 4 em 17 de agosto de 2026 com substituto indicado. O Gemini 2.0 Flash e o Veo saíram em datas parecidas, também com substituto.
Guardar o nome do modelo numa única variável do código separa uma troca de dez minutos de uma migração de emergência. É o telefone do fornecedor gravado num só lugar da agenda, em vez de espalhado em cada bilhete.
Antes de aprovar uma tarefa grande, pergunte se ela pode esperar até amanhã. Se puder, mande pelo envio em lote e pague metade. Ponha um alarme antes do gatilho de preço e um contador que trava as chamadas de ferramenta num teto fixo. Guarde o nome do modelo numa única variável do código.
Custo por tarefa, plano B e cinco exigências da tela com IA
No Claude Opus 5, subir do esforço alto para o máximo leva o custo de uma tarefa de US$ 10,41 para US$ 17,79. São 71% de aumento pelo mesmo modelo. Custo por tarefa concluída, não o preço de tabela, decide o orçamento.
Quem paga a conta de vibecoding ou compra produto com IA precisa de três hábitos por escrito. Meça o custo por tarefa, teste um modelo substituto e exija cinco sinais na tela de qualquer produto com IA.
O preço por token (a fatia de texto cobrada, como o item por unidade na nota) engana. Ele não diz quantos tokens a tarefa gasta nem quantas idas e vindas leva até fechar. Custo por tarefa concluída soma tudo isso numa conta só, e é essa conta que aparece na fatura.
Na medição independente da Artificial Analysis, o Claude Opus 5 no esforço máximo custa US$ 17,79 por tarefa. O Claude Fable 5 custa US$ 22,30 na mesma medição, 25% a mais. Nenhuma tabela de preço por token antecipa essa distância, porque ela não diz quantos tokens a tarefa consome.
Dentro do mesmo modelo, um botão chamado nível de esforço decide quanto ele pensa antes de responder, como o modo econômico do ar-condicionado. No Opus 5, subir do esforço alto para o máximo leva o custo de US$ 10,41 para US$ 17,79, e o tempo de 25,7 para 36,2 minutos.
São 71% de aumento por um único botão, com a tarefa terminando mais devagar. Deixe o esforço alto como padrão do dia a dia e ligue o máximo só na tarefa que já resistiu a uma tentativa.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
O modelo que você usa pode sair do ar por decisão que não é sua. O Claude Fable 5 e o Claude Mythos 5 saíram do ar de 12 de junho a 1º de julho de 2026, por controle de exportação dos EUA. Foram 19 dias sem aviso prévio.
A OpenAI tira o GPT-5.4 do Codex em 31 de agosto de 2026, com substituto indicado, e pede revisão das tarefas agendadas antes do corte. Se um script (um programa agendado) chama um modelo pelo nome, essa data é a sua.
O plano B cabe num arquivo de uma página, o ROTEAMENTO.md, com uma linha por tipo de tarefa. Tarefa em que você espera na tela vai para a camada rápida em esforço baixo. A Artificial Analysis mediu 9,83 segundos até a primeira palavra no Gemini 3.7 Flash, contra 142,43 no GPT-5.6 Sol em configuração máxima.
Tarefa que pode esperar horas vai para o envio em lote, a US$ 0,375 e US$ 1,875 por milhão no 3.7 Flash. Decisão de arquitetura ou migração grande vai para o topo de linha em esforço máximo, com 25,7 a 36,2 minutos reservados. O resto fica na camada intermediária em esforço alto, com substituto testado uma vez por mês.
A terceira frente é a tela do produto com IA, comprado ou construído. O manual de frontend consolida cinco padrões de Agent UX (a interface de um programa que age sozinho, como o painel do piloto automático). São eles: plano visível antes da execução, uso de ferramentas exposto, memória exibida, acompanhamento multietapa e rota clara de recuperação de erro.
Os cinco resolvem o mesmo problema: um agente que age no escuro perde a confiança de quem usa no primeiro erro. Exija os cinco em qualquer produto em que o agente escreve, envia ou apaga algo em seu nome. Um chat que só responde perguntas dispensa o plano e o acompanhamento, e os outros três continuam valendo.
Quando o produto não oferece os cinco, o plano B é o mais simples. O agente escreve o plano em texto antes de agir e pede um "ok" seu, e cada ação vira uma linha de registro visível. A armadilha mais comum é o relógio girando sozinho: ninguém sabe o que está sendo feito, e o cancelamento chega tarde.
Os cinco padrões de Agent UX na tela
| Padrão | Como aparece na tela | Sem ele |
|---|---|---|
| Plano visível antes da execução | Lista numerada do que o agente vai fazer, com botão de aprovar antes do primeiro passo | A ação errada já aconteceu quando você lê |
| Uso de ferramentas exposto | Linha do tipo "consultou o cadastro" ou "abriu a planilha" a cada chamada | Você não sabe de onde saiu a resposta |
| Memória exibida | Painel com o que o agente guardou sobre você, editável e apagável | Ele repete um dado velho e você não descobre |
| Acompanhamento multietapa | Lista com "passo 3 de 7" e o que já foi concluído | Só um relógio girando, sem ideia do tempo |
| Rota clara de recuperação de erro | Mensagem que diz o que falhou e botões de tentar de novo, pular ou desfazer | O erro trava a tarefa inteira |
Fonte: Manual de referência Recursos de frontend moderno, edição setembro de 2026, seção 24
Um agente que responde aos contatos do site mostra na tela o plano antes de enviar ("vou mandar 40 mensagens a estes contatos"), a ferramenta que consultou e o que guardou de cada pessoa. Sem esses sinais, a mensagem errada sai para 40 pessoas antes de você ler a primeira linha.
Meça uma tarefa sua em esforço alto e em máximo antes de fixar o padrão. Escreva o ROTEAMENTO.md com uma linha por tipo de tarefa e teste o substituto uma vez por mês. Abra a tela do seu produto com IA e marque os cinco padrões; o que faltar vira pedido para quem constrói ou pergunta para quem vende.
Laboratório visual: calcular custo por tarefa e definir governança
Tentativas, ferramentas, revisão e plano B
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