Frontends com Vibecoding · Capítulo 26 de 33 · 12 min
Supervisionar o modelo que opera o computador
Quando o modelo abre o programa em vez de devolver texto, você já sabe que permissão conceder, que evidência exigir e onde a conta dobra sem aviso.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding.
O GPT-6 Astra leva cerca de 40 minutos para concluir um trabalho no computador, contra 75 minutos do modelo anterior da mesma empresa. São 47% menos tempo de relógio, e é o relógio que fecha ou não a conta de um projeto.
Quem contrata ou constrói tela precisa saber o que essa troca resolve, quanto ela custa por trabalho concluído e qual degrau de preço estoura o orçamento sem avisar.
Uso de computador é a capacidade de o modelo enxergar a tela, clicar e digitar, como um estagiário sentado no seu lugar. Isso mudou o ciclo de produção. Antes você pedia, recebia texto, colava no programa, testava e voltava a pedir. Agora ele abre o programa, executa, confere o resultado na tela e devolve pronto para revisão.
A conferência visual saiu da sua mesa e entrou na execução. Essa é a mudança que altera prazo, e não a nota de nenhum teste.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
No teste OSWorld 2.0, que mede serviços comuns de área de trabalho, o Astra acerta 72,6% contra 65,7% do modelo anterior da mesma empresa. O ganho de acerto é de sete pontos, e sozinho ele não justificaria a troca.
O número que decide o projeto é o tempo por trabalho concluído. Um ganho pequeno de acerto some diante de um serviço que termina pela metade do tempo, porque é o relógio que você paga.
Subiu duas vezes e meia o preço por token, para US$ 10 de entrada e US$ 50 de saída por milhão. O pedido que reaproveita cache, o trecho já enviado antes, paga US$ 1 por milhão, e os modos Batch e Flex cobram metade da tarifa.
A conta por trabalho concluído caiu mesmo assim, porque o Astra gasta cerca de um terço dos tokens do anterior para chegar ao mesmo lugar. Na medição da Artificial Analysis, um serviço de código sai por cerca de US$ 4,72 nele, contra US$ 9,18 no Claude Fable 5.1. Compare trabalho terminado, e o preço de tabela vira ruído.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Acima de 272 mil tokens de entrada a tarifa dobra, e a saída sobe metade, indo a US$ 75 por milhão. O aumento vale para o pedido inteiro, de forma retroativa, e alcança também o que já tinha sido enviado. Numa medição publicada em setembro de 2026, dois mil tokens a mais elevaram a conta em 88%.
Um agente que vai acumulando contexto atravessa essa linha no meio da sessão sem avisar ninguém. Trate 272 mil como teto rígido do seu fluxo, com corte automático antes da borda.
A receita econômica que vários operadores publicaram na mesma semana cabe em uma linha: o modelo caro planeja e revisa, e um modelo barato executa. Guarde o esforço máximo para o passo que decide.
Quem manteve o modelo caro como orquestrador, isto é, como o que distribui os passos, relatou queimar 80% da cota de cinco horas num único trabalho. O que limitou a primeira semana foi a cota, não a capacidade do modelo.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Duas falhas medidas por avaliadores independentes valem o seu tempo. O modelo completa o que não viu: pedidos de reconstrução a partir de foto voltaram com detalhes que o original não tinha.
A segunda é o gosto padrão. Sem direção de arte no pedido, ele repete a mesma paleta em projetos sem relação entre si. Nomeie a paleta e confira contra a fonte antes de publicar.
Trocar de modelo também não conserta segurança. A Veracode comparou dois anos de código gerado e achou melhora na sintaxe e na taxa de compilação, sem melhora na segurança. A revisão do que o modelo escreve continua sendo sua.
Digitação em sistema antigo, sem integração, é o caso típico. Numa clínica que lança convênios à mão, o modelo abre o programa, digita os registros novos e devolve a lista do que ficou pendente. Comece com conta separada, dez registros de teste e limite de tempo, e meça o custo desses dez antes de soltar os duzentos.
Escolha um trabalho que você repete, rode-o cinco vezes no modelo que já usa e anote custo, tempo e número de correções. Repita as mesmas cinco rodadas no modelo mais barato e compare o custo por serviço terminado, não o preço por milhão. Fixe o teto de 272 mil tokens antes de soltar o volume maior.
Guia prático: o agente que navega e grava a tela de verdade
Vídeo de lançamento, demonstração de produto e tutorial pedem a tela real do site, e não uma imitação desenhada. O curso de edição estudado em 07/10/2026 resolve isso com um agente que abre o navegador sem janela, segue um roteiro de ações escrito em JSON (esperar, rolar, mover o cursor, clicar, digitar, aguardar um texto, marcar um instante) e grava. Os padrões medidos no gravador: janela de 1600 por 1000, escala 2, saída com 2400 px de largura, 30 quadros por segundo e um arquivo de marcas com o segundo exato de cada ação.
Três detalhes separam a gravação boa da borrada. Escala 1 sai sem nitidez quando o vídeo é ampliado. O navegador sem janela não desenha o mouse, então o roteiro injeta um cursor que afunda no clique, para quem assiste ver onde a ação acontece. E a gravação contínua de uma página pesada dá pulos de até 1 segundo quando a máquina está ocupada: nesse caso, a saída é tirar um print da página inteira em escala 2 e animar a rolagem depois, na edição.
Quando a tela não pode ser gravada, porque mostra conta, cliente ou valor, o material recria a interface em HTML fiel à real, com e-mail, telefone e valores borrados ou trocados por marcador. A regra que vale para os dois caminhos: o agente grava e recria, mas não faz login, não publica e não mostra dado sensível sem borrar.
Grave a página [ENDEREÇO PÚBLICO] para a demonstração do [PRODUTO].
Janela de 1600 por 1000, escala 2, tema [claro ou escuro].
Roteiro, nesta ordem, com uma marca nomeada em cada passo:
1. Espere 1,5 s com a página parada no topo.
2. Role até a seção [NOME DA SEÇÃO] em 2 s.
3. Leve o cursor até o botão [TEXTO DO BOTÃO] e clique.
4. Espere o texto [TEXTO QUE CONFIRMA] aparecer.
Mostre o cursor. Grave 2 s a mais no fim de cada passo.
Se a gravação pular, faça também o print da página inteira em escala 2.
Proibido: fazer login, preencher dado real, enviar formulário, publicar.
Entregue o vídeo, o arquivo de marcas e o print, sem editar nada.Supervisionar o agente que grava a tela
Cinco passos para a primeira demonstração gravada por agente, sem surpresa na conta nem no vídeo.
Passo 1: Escreva o roteiro antes de soltar o agente
Liste as ações na ordem, com tempo de espera e o texto que confirma cada passo. O roteiro é o que você aprova; o agente só executa.
Deu certo quando: Cada passo tem ação, alvo visível e marca nomeada.
Erro comum: Pedir "grave o site funcionando" e receber dois minutos de cursor perdido.
Passo 2: Escolha a página certa para gravar
Grave só endereço público ou ambiente de teste com dados fictícios. Tela com cliente, conta ou valor vira recriação em HTML com os campos borrados ou trocados por marcador.
Deu certo quando: Nada na gravação identifica cliente, conta ou valor real.
Erro comum: Gravar o painel logado "só para o teste" e esquecer o e-mail de um cliente no canto da tela.
Passo 3: Prefira página inteira em página pesada
Se o site tem vídeo de fundo, 3D ou muitas imagens, peça o print da página inteira em escala 2 e anime a rolagem na edição. O resultado é liso mesmo com a máquina ocupada.
Deu certo quando: A rolagem no vídeo final não tem pulos.
Erro comum: Insistir na gravação contínua e aceitar um vídeo que engasga a cada seção.
Passo 4: Grave mais e corte pelas marcas
Folga de dois segundos no fim de cada passo custa pouco. O arquivo de marcas diz onde cada ação começa, e o corte acontece na edição, sem regravar.
Deu certo quando: Você acha o início de cada passo pelo arquivo de marcas, sem assistir tudo.
Erro comum: Gravar no tempo exato e descobrir que o clique ficou cortado.
Passo 5: Assista antes de usar
Veja a gravação inteira em tamanho real, não em miniatura. Confira cursor visível, texto legível e nenhuma janela, aviso ou dado que não estava no roteiro.
Deu certo quando: A gravação mostra só o que o roteiro pediu.
Erro comum: Aprovar pela primeira imagem e publicar um aviso de cookie cobrindo o botão principal.
No fim você tem: Uma demonstração gravada da página real, com roteiro aprovado, marcas para cortar e nenhum dado sensível na tela.
Analista de marketing de uma software house de gestão para pet shops em Campinas
Software por assinatura, vídeo de demonstração
Dor
O vídeo do produto era gravado à mão no painel de um cliente real, com o cursor tremendo e nomes de tutores à mostra. Cada versão nova do sistema pedia uma regravação inteira.
Solução
Ela criou uma conta de demonstração com dados fictícios e escreveu o roteiro de seis passos com marcas. O agente gravou em escala 2 com cursor visível; a tela de agenda, pesada, saiu como print de página inteira com rolagem animada.
Resultado
O vídeo passou a ser refeito a cada versão rodando o mesmo roteiro, e nenhum dado de cliente apareceu mais na demonstração.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
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
- Setup do Ambiente: Claude Code + Cursor em 15 Minutossugerido pelo grafoApresenta o conceito “Cursor”, usado em “Supervisionar o modelo que opera o computador”.
- 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
- MCP com Chrome: Automação com IAFazer o agente ler a página em texto em vez de fotografarExaminar conexões de Fazer o agente ler a página em texto em vez de fotografar
- 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
- Agentes de código para executivosPromover o piloto a produção com painel e checklistExaminar conexões de Promover o piloto a produção com painel e checklist
- GEO Universal FrameworkEscolha o modelo por tarefa e evite orquestração desnecessáriaExaminar conexões de Escolha o modelo por tarefa e evite orquestração desnecessária
Voltar ao capítulo anterior: Calcular custo por tarefa e definir governança
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
- 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