Frontends com Vibecoding · Capítulo 25 de 33 · 20 min
Calcular custo por tarefa e definir governança
Você mede o custo por tarefa concluída, guarda um plano B testado e cobra da tela com IA os cinco sinais que ela precisa mostrar a quem usa.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding.
No Grok 4.6, um pedido que cruza 200 mil tokens no meio do trabalho 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 as três antes de assinar. Anote por escrito a data do fim do desconto, o gatilho que recobra o pedido e as cobranças que não aparecem na tarifa por token.
O Gemini 3.7 Flash, do Google, custa US$ 0,75 de entrada e US$ 3,75 de saída por milhão de tokens. Token é o pedaço de palavra que serve de unidade na conta. É preço introdutório, uma promoção com fim já publicado: a partir de 1º de janeiro de 2027 ele dobra, para US$ 1,50 e US$ 7,50.
Existe ainda 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, para US$ 0,375 e US$ 1,875, enquanto durar o preço introdutório.
Ele serve para o que pode esperar, como 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ã, pela metade do preço.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
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.
Esse gatilho dispara sozinho num trabalho longo, porque um agente reenvia o histórico inteiro da conversa a cada turno. Agente, aqui, é o programa que recebe um objetivo e segue sozinho até entregar. O pedido cresce sem ninguém decidir nada, e por isso um alarme no código a 180 mil tokens dá folga para 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.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Antes de aprovar um lote grande, pergunte se ele 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, para trocá-lo em dez minutos quando o fornecedor desligar o atual.
Medir quanto custa cada entrega e o que sua tela precisa mostrar
A tabela de preço revela desconto com prazo e cobrança fora do token, e a conta que decide é o custo por tarefa concluída, com plano B testado.
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.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
O preço por token, que é a fatia de texto cobrada como item de nota fiscal, engana sozinho. Ele não diz quantos tokens o serviço gasta nem quantas idas e vindas leva até fechar. Custo por tarefa concluída soma as duas coisas numa conta só, e é ela que chega 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 nenhuma delas conta idas e vindas.
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. Se um script, que é um programa disparado sozinho na hora marcada, 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 trabalho. O que você espera na tela vai para o modelo mais rápido e mais barato, em esforço baixo. A diferença aqui é grande: 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.
Já o que pode esperar horas vai para o envio em lote, que custa metade. Decisão de arquitetura ou migração grande vai para o modelo mais caro em esforço máximo, com 36,2 minutos reservados. O resto fica no modelo do meio em esforço alto, e você testa o substituto uma vez por mês.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
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 precisa mostrar o plano antes de enviar, numa frase do tipo "vou mandar 40 mensagens a estes contatos". Precisa mostrar também a ferramenta que consultou e o que guardou sobre 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.
Guia prático: montar o custo de uma entrega de vídeo antes de prometer volume
Vídeo editado por agente parece custar só a assinatura, e a conta real tem quatro parcelas. O curso de edição estudado em 07/10/2026 mostra cada uma com número.
A primeira é a transcrição, paga por tempo de áudio num serviço externo; no teste do material, 85 segundos de fala saíram transcritos em 3 segundos. O preço muda, então confira na página pública de preços da ElevenLabs no dia em que montar a conta. A segunda é o tempo de máquina. O vídeo de 25 minutos do autor levou cerca de 5 horas de computador ligado. O render 4K de um vídeo de 11 minutos levou 13 minutos num notebook de 16 GB, e cada processo de render em 4K ocupa cerca de 5 GB de memória: três ao mesmo tempo esgotaram a memória da máquina. O material pede também 30 GB livres em disco.
A terceira é a assinatura do agente, com a janela de uso que ela permite. A quarta, que quase ninguém soma, são as suas horas de revisão: assistir inteiro, anotar e conferir o checklist. Com essas quatro parcelas na mesa, você sabe quantos vídeos por semana uma máquina entrega antes de prometer volume a um cliente.
Conta de uma entrega de vídeo: [nome do vídeo]
Duração do bruto: [minutos]
Transcrição: [minutos de áudio] x [preço por hora da página do dia] / 60 = [valor]
Máquina: [horas de computador ocupado], [GB de memória por render] x [renders ao mesmo tempo]
Assinatura: [valor mensal] / [entregas no mês] = [valor por entrega]
Imagens geradas: [quantidade] x [preço por imagem do dia] = [valor]
Revisão humana: [horas] x [valor da sua hora] = [valor]
Custo por entrega: [soma]
Entregas por semana nesta máquina: [horas disponíveis] / [horas de máquina por vídeo]Da primeira entrega à promessa de volume
Cinco passos. A conta vem da sua entrega medida, não da média de outra pessoa.
Passo 1: Meça uma entrega inteira
Anote a hora de início e de fim de cada etapa num vídeo real: transcrição, edição, render e revisão. Use a mesma duração de bruto que você vai vender.
Deu certo quando: Você tem as horas de máquina e as suas horas de uma entrega real.
Erro comum: Medir com um teste de 40 segundos e projetar para vídeo de 25 minutos.
Passo 2: Confira os preços na página do dia
Abra a página pública de preços do serviço de transcrição e a do gerador de imagens, se usar. Anote o valor e a data no modelo de conta.
Deu certo quando: Cada preço da conta tem fonte e data.
Erro comum: Usar o preço que alguém citou num vídeo de meses atrás.
Passo 3: Descubra o teto da sua máquina
Veja quanta memória livre sobra com um render rodando. Com cerca de 5 GB por render 4K, uma máquina de 16 GB comporta poucos ao mesmo tempo. Rode um de cada vez até medir.
Deu certo quando: Você sabe quantos renders cabem juntos sem esgotar a memória nem o disco.
Erro comum: Abrir vários renders em paralelo para ganhar tempo e perder todos.
Passo 4: Preencha a conta do bloco acima
Some as parcelas e divida as horas disponíveis da semana pelas horas de máquina por vídeo. Esse é o volume que uma máquina entrega.
Deu certo quando: Você tem custo por entrega e entregas por semana, os dois com número.
Erro comum: Deixar a sua revisão fora da conta, como se fosse de graça.
Passo 5: Prometa com folga
Ofereça ao cliente um volume abaixo do teto calculado e um prazo que inclui uma rodada de ajuste. Refaça a conta quando mudar a duração do vídeo ou o preço de um serviço.
Deu certo quando: O volume prometido cabe na semana mesmo com uma entrega refeita.
Erro comum: Vender o teto da máquina e descobrir que um ajuste atrasa todos os outros.
No fim você tem: Um custo por entrega e um volume semanal medidos na sua máquina, com preços datados, antes de qualquer promessa.
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.
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 “Calcular custo por tarefa e definir governança”.
- 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
- Escolher o modelo de cada etapa e calcular o custo por tarefasugerido pelo grafoApresenta o conceito “Custo por tarefa”, usado em “Escolher o modelo de cada etapa e calcular o custo por tarefa”.
- Escrever o relatório de uma página para a diretoriasugerido pelo grafoApresenta o conceito “Custo por tarefa”, usado em “Escrever o relatório de uma página para a diretoria”.
- Escolher entre Claude e OpenAI para cada tarefasugerido pelo grafoApresenta o conceito “Custo por tarefa”, usado em “Escolher entre Claude e OpenAI para cada tarefa”.
- Montar o plano de 90 dias com dono e prazosugerido pelo grafoApresenta o conceito “Custo por tarefa”, usado em “Montar o plano de 90 dias com dono e prazo”.
O mesmo assunto em outros cursos
- Prompt Engineering para ExecutivosCalcular o custo de uma iniciativa pela tabela públicaExaminar conexões de Calcular o custo de uma iniciativa pela tabela pública
- LLM FinOps: o custo da IA para quem assina o orçamentoOs custos que não são tokenExaminar conexões de Os custos que não são token
- MCP para quem decideMedir a fatura invisível do contextoExaminar conexões de Medir a fatura invisível do contexto
- Software e IA para executivosEscolher entre buscar, treinar ou rotear antes de pagar a contaExaminar conexões de Escolher entre buscar, treinar ou rotear antes de pagar a conta
Voltar ao capítulo anterior: Comparar modelos e interpretar benchmarks
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
- 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