Como criar uma calculadora de orçamento com Claude ou ChatGPT

Ilya SpiridonovIlya Spiridonov
16 min de leitura

Você conhece seus preços, mas um potencial cliente não tem uma forma simples de experimentá-los. Ele não consegue escolher um pacote, adicionar algumas páginas e ver o total mudar sem esperar pelo seu orçamento.

Claude e ChatGPT podem criar essa calculadora a partir de uma tabela de preços. Você fornece os valores e as regras, a IA escreve a página e duas tarefas continuam com você: conferir os números e tirar da conversa um arquivo que funcione. Este artigo explica as duas, com um prompt pronto e seis resultados para teste.

Experimente primeiro o exemplo pronto. Escolha um pacote, mude a quantidade de páginas adicionais e ative ou desative os extras.

Seu projeto

Uma landing page e uma rodada de revisões.

$150.00 por página, até 10. Desconto de 5% nas páginas adicionais a partir de 5.

Extras

Estimativa

Preço base
$800.00
Páginas adicionais0 × $150.00
$0.00
Desconto por volumeA partir de 5 páginas adicionais
$0.00
Redação
$0.00
Total único
$800.00
Suporte mensalCobrado todo mês
$0.00
Primeira fatura estimadaTotal único mais o primeiro mês de suporte
$800.00

Estimativa ilustrativa. Impostos excluídos. O escopo e o preço finais são confirmados na proposta. Valores em USD.

Os preços são fictícios, para uma pequena agência de web design, e não incluem impostos. Troque pelos seus depois de entender como tudo se encaixa.

Registre os preços e as regras

Comece pelos números, antes do prompt. A IA constrói o que você descreve; uma tabela vaga produz uma calculadora vaga. Este exemplo tem seis preços e uma única regra de desconto.

ItemPreçoCobrança
Pacote Basic$800Única
Pacote Standard$1,200Única
Pacote Plus$1,800Única
Landing page adicional$150 cada, de 0 a 10Única
Redação de textos$200, opcionalÚnica
Suporte mensal$75, opcionalTodo mês

Três regras complementam os preços:

  • A partir de cinco páginas adicionais, o desconto de 5% vale para toda a linha de páginas adicionais. O pacote e a redação nunca recebem desconto.
  • O suporte mensal fica fora do total único, porque uma mensalidade representa um compromisso diferente do custo de criação.
  • A primeira fatura estimada soma o total único e um mês de suporte.

A calculadora começa em Basic, com zero páginas adicionais e os dois extras desativados. Se a quantidade estiver vazia, negativa, fracionada ou acima de 10, aparece um erro ao lado do campo e os totais ficam ocultos até a correção.

Calcule as respostas por conta própria antes de pedir qualquer coisa. Toda versão precisa passar por estes seis casos:

  • Mínimo. Basic, 0 páginas adicionais, sem extras. Único $800.00, mensal $0.00, primeira fatura $800.00.
  • Quantidade. Standard, 2 páginas adicionais, sem extras. Único $1,500.00, mensal $0.00, primeira fatura $1,500.00.
  • Extra. Standard, 2 páginas adicionais, redação. Único $1,700.00, mensal $0.00, primeira fatura $1,700.00.
  • Abaixo do limite do desconto. Standard, 4 páginas adicionais, redação. Único $2,000.00, mensal $0.00, primeira fatura $2,000.00.
  • No limite do desconto. Standard, 5 páginas adicionais, redação e suporte. Único $2,112.50, mensal $75.00, primeira fatura $2,187.50.
  • Máximo. Plus, 10 páginas adicionais, redação e suporte. Único $3,425.00, mensal $75.00, primeira fatura $3,500.00.

Esses totais foram calculados separadamente, e a calculadora acima coincide com os seis. Cole a tabela de preços, as três regras e os seis resultados no prompt. Guarde os resultados para as verificações posteriores.

Crie a calculadora no Claude

O Claude é o caminho principal porque consegue criar a calculadora como um artefato interativo, uma ferramenta funcional ao lado da conversa. A Anthropic oferece artefatos nos planos Free, Pro, Max, Team e Enterprise, com a execução de código e a criação de arquivos ativadas.

Cole o prompt

Abra uma nova conversa em claude.ai ou no aplicativo para computador. Comece com Crie isto como um artefato interativo independente, completo e sem recursos externos. para receber um artefato duradouro em vez de uma visualização temporária na conversa. Depois cole o prompt abaixo e acrescente no fim a tabela, as três regras e os seis resultados esperados no ponto indicado.

Crie uma calculadora de orçamento interativa e funcional para uma pequena agência de web design.
Vou fornecer a tabela de preços e as regras abaixo. Use exatamente esses valores.
Se faltar uma regra ou houver contradição, pergunte antes de escolher um valor.

O resultado é um artefato independente e completo: uma prévia e um único arquivo
integral para download chamado quote-calculator.html. Coloque HTML, CSS e
JavaScript nesse arquivo, sem carregar fontes, imagens ou scripts externos.
Ele precisa funcionar ao abrir no navegador, sem instalação, bibliotecas
externas, chamadas de IA ou servidor.

Inclua um seletor de pacote, um campo numérico para páginas adicionais e caixas
para redação e suporte mensal. Atualize a estimativa quando os valores mudarem.
Mostre separadamente, com rótulos, preço base, páginas adicionais, desconto,
redação, total único, suporte mensal e primeira fatura estimada.
Formate os valores em USD com duas casas decimais.

Exiba: 'Estimativa ilustrativa. Impostos excluídos. O escopo e o preço finais
são confirmados na proposta.' Inclua um botão Redefinir.

A quantidade de páginas adicionais deve ser um inteiro de 0 a 10. Se estiver
vazia ou inválida, mostre um erro ao lado do campo e oculte os totais até a
correção. Comece em Basic, zero páginas e extras desativados.

Use rótulos claros, foco de teclado visível e controles legíveis no celular.
Use IDs estáveis: package, extra-pages, copywriting, monthly-support, reset.
Agrupe os preços em um bloco de configuração identificado.
Não colete contatos, envie pedidos, salve escolhas nem aceite pagamentos.
Não inclua código de rastreamento; hospedagem e rastreamento são separados.

Antes da entrega, confira a tabela de resultados esperados fornecida.
Informe as correções e entregue o arquivo HTML final.

Tabela de preços, fórmulas e resultados esperados:
[Cole aqui as tabelas fornecidas.]

Vale manter três partes em qualquer versão do prompt. Pedir que a IA pergunte quando falta uma regra revela lacunas antes que o cliente as encontre. Exigir um único arquivo independente, sem recursos externos, torna a calculadora portátil. A comparação final com sua tabela oferece uma primeira conferência, sem substituir a sua.

Prefere um arquivo a colar os dados? Anexe rate-card.csv pelo botão + e Add files or photos ou arraste para a conversa. A Anthropic lista CSV como tipo de documento aceito.

O arquivo contém os preços, as regras e as fórmulas. Substitua as duas últimas linhas do prompt pela instrução abaixo e cole apenas os seis resultados esperados em seguida.

Os preços e regras estão no rate-card.csv anexado. Confirme os valores e regras
que leu e crie a calculadora como um arquivo independente e completo,
sem recursos externos.

Examine a primeira versão

Você deve ver um menu de pacotes, um campo para páginas adicionais, duas caixas de extras, um botão Redefinir e sete valores separados: preço base, páginas adicionais, desconto, redação, total único, suporte mensal e primeira fatura estimada. Ao mudar uma entrada, a estimativa deve atualizar sem apertar botão.

Faça ajustes

Se um total estiver errado, explique à IA como explicaria a uma pessoa: diga qual caso falhou e o resultado esperado.

Cada total incorreto aponta para uma regra. Standard com cinco páginas, redação e suporte deve mostrar $2,112.50. Um total único de $2,042.50 significa que o desconto foi aplicado a tudo, em vez de só às páginas adicionais; $2,150.00 indica que foi esquecido.

Se limpar o campo deixa um total antigo ou mostra NaN, peça diretamente: 'Quando as páginas adicionais estiverem vazias, mostre um erro ao lado do campo e oculte os totais. Mantenha um único arquivo independente sem recursos externos.' Altere uma coisa por mensagem e repita o caso que falhou.

Exporte o arquivo

Quando os números baterem, tire o arquivo da conversa. Se o Claude usou o modelo Design, use Export e escolha HTML independente. A página de artefatos da Anthropic chama o controle de Export para artefatos de modelos; a ajuda do Claude Design lista HTML independente como formato de exportação.

Se não houver opção HTML, peça a calculadora completa em um único arquivo independente chamado quote-calculator.html, sem recursos externos e pronto para baixar.

Use Claude Cowork com uma tabela existente

O Cowork acrescenta um fluxo por pastas à opção de anexar CSV: o Claude lê o arquivo de uma pasta do computador e salva ali a calculadora pronta, sem upload nem download. A Anthropic diz que pode ler e gravar arquivos locais nas pastas conectadas.

Coloque rate-card.csv em uma pasta e conecte-a no aplicativo Claude para computador. Cowork está disponível em planos pagos: Pro, Max, Team e Enterprise.

Use o mesmo prompt e a mesma primeira linha, mas troque as duas últimas linhas sobre colar a tabela pela instrução abaixo. Como o arquivo já contém preços e regras, cole apenas os seis resultados esperados em seguida.

Leia rate-card.csv na pasta conectada. Confirme os preços e regras que leu.
Crie a calculadora como um HTML independente e completo, sem recursos externos,
e salve como quote-calculator.html nessa pasta. Não altere a tabela original
e diga onde salvou o resultado.

O Cowork executa tarefas na nuvem e acessa a pasta pelo aplicativo para computador. Mantenha o aplicativo aberto durante o trabalho.

Algumas contas ainda mostram Chat e Cowork separados; nelas, escolha Cowork. A Anthropic está unificando ambos em uma conversa, gradualmente e começando por Pro e Max. Com a experiência unificada, faça o mesmo pedido em uma conversa normal e conecte a pasta no aplicativo como antes.

Use o ChatGPT como alternativa

A tabela, o prompt e os seis testes são os mesmos; só mudam a criação e o download. Cole no ChatGPT o mesmo prompt, preços, regras e resultados esperados. O resultado continua sendo quote-calculator.html, independente, completo, sem recursos externos e disponível para baixar.

A documentação da OpenAI informa que HTMLs gerados podem abrir como prévias interativas onde houver suporte a prévias HTML; as ferramentas de visualização e revisão dependem da interface usada. Para ChatGPT Work na web, orienta revisar o arquivo na conversa e baixar quando necessário.

O ChatGPT também pode apresentar a página como Site, Canvas ou prévia HTML em vez de um arquivo. O guia para compartilhar um site HTML gerado no ChatGPT cobre cada caso. Se não houver prévia, baixe o arquivo e abra no navegador.

Em qualquer caso, teste o arquivo baixado, porque é essa a versão que será compartilhada.

Confira a calculadora exportada

Uma calculadora pode parecer certa e calcular errado. Um total incorreto diante de um cliente custa dinheiro ou credibilidade. Feche a conversa com a IA e faça os testes no arquivo baixado.

  1. Abra com clique duplo. Deve funcionar no navegador sem login, internet ou Claude aberto.
  2. Escolha Standard, digite 2 páginas adicionais e marque redação. O total único deve ser $1,700.00.
  3. Mude para 4 páginas: $2,000.00 sem desconto. Mude para 5 e marque suporte: $2,112.50 únicos, $75.00 mensais e $2,187.50 na primeira fatura, com desconto de -$37.50.
  4. Limpe o campo e tente -1, 2.5 e 11. Cada caso deve exibir erro ao lado do campo e esconder os totais até a correção.
  5. Aperte Redefinir. Deve voltar a Basic, 0 páginas e ambos os extras desativados, mostrando $800.00.
  6. Teste os outros casos da lista de seis. Plus com 10 páginas e os dois extras é um bom último teste: $3,425.00, $75.00 e $3,500.00.
  7. Reduza a janela à largura de um celular ou abra o arquivo no aparelho. Nada deve rolar na horizontal e os controles precisam ser fáceis de tocar.
  8. Deixe o mouse de lado e use o teclado. Tab deve percorrer todos os controles com foco visível, e Espaço deve alternar as caixas. No Safari para Mac, Tab só alcança botões e outros controles com a Navegação por Teclado ativada nos ajustes de Teclado.

Depois abra o arquivo em um editor de texto. Os preços devem aparecer uma única vez, juntos, em um bloco identificado. Você altera esse bloco depois, ou pede à IA.

Não coloque números privados no arquivo

Quem abre o arquivo pode ler o código. Custos internos, margens e limites de aprovação não devem estar ali. Cálculos no navegador também não impõem preços aprovados, pois o destinatário pode editar sua própria cópia.

Compartilhe a calculadora com um cliente

Envie um link em vez do arquivo. Email e armazenamento em nuvem costumam mostrar HTML como código ou bloqueá-lo. O guia para compartilhar HTML com clientes explica os detalhes.

O próprio Claude compartilha artefatos, com opções que dependem do plano e das configurações da organização. Segundo a documentação da Anthropic, é preciso ter conta Claude para abrir um artefato recém-compartilhado, exceto artefatos antigos publicados em uma conversa. Funciona para um colega que já usa Claude e acrescenta uma etapa para um cliente sem conta.

Para ter um link que qualquer cliente possa abrir, envie o arquivo exportado a um host que sirva HTML. Nosso produto HummingDeck faz isso; a página de compartilhamento HTML explica os detalhes.

Um único arquivo HTML funciona no plano gratuito. Siga estes passos:

  1. Na Biblioteca de documentos, selecione Adicionar documento e escolha quote-calculator.html. O arquivo precisa cumprir os requisitos de upload HTML.
  2. Após o processamento, selecione Novo link, escolha um link pessoal e crie primeiro um para você, identificado como teste.
  3. Abra o link em janela privada, como o cliente fará, e repita os testes. O visualizador executa o arquivo em um quadro isolado; passar no seu computador não comprova que o link do destinatário funciona.
  4. Crie da mesma forma o link pessoal do cliente e envie. Sua visita fica no link de teste e o do cliente começa sem registros. Depois que ele abrir, veja em Links do documento a visita registrada naquele link.

Se houver mais documentos na negociação, coloque a calculadora em uma Room ao lado de uma proposta fixa e um estudo de caso. O cliente abre um link só. O plano gratuito permite uma Room com até três documentos; o modelo de proposta de web design serve como proposta fixa.

O que a estimativa e a atividade indicam

A calculadora e a proposta cumprem papéis diferentes. A calculadora permite explorar opções e estimativas; o valor que você assume vai em uma proposta fixa emitida por você.

Para receber uma resposta sobre a proposta, um link de proposta registra aceitação, pedido de alterações ou recusa nos planos Pro e Business. É uma resposta do fluxo de trabalho associada ao documento, sem capturar assinatura nem o valor exibido na calculadora.

No plano gratuito, a página do documento mostra aberturas totais, visitantes únicos, tempo gasto e conclusão média. Starter e superiores acrescentam análise por página e cliques compatíveis. O guia para adicionar análises a uma página HTML compara isso com scripts analíticos. Clicar em botões, caixas, menu ou campo numérico conta como clique em link; você vê a quantidade por visitante e sessão.

O que a atividade mostra

  • Uma visualização significa que o link foi solicitado e uma sessão começou. Não verifica quem abriu, e o link pode ser encaminhado.
  • A contagem de cliques reflete o uso dos controles. O HummingDeck não mostra as opções escolhidas nem o total na tela. Digitar um número ou mudar o menu pelo teclado não conta como clique.
  • Nenhum sinal comprova intenção de compra. Use-os para decidir quando um acompanhamento seria útil.

CPQ, abreviação de configure, price, quote, é outra ferramenta. A Salesforce o descreve como software para configurar produtos, aplicar regras de preço, gerenciar descontos e aprovações e gerar orçamentos, com integração a CRM e ERP.

Esta calculadora cuida da configuração e dos preços de uma lista simples. Para orçamentos salvos, catálogo privado ou aprovação de descontos, é necessário um sistema de orçamentos.

Perguntas frequentes

Preciso do Claude Cowork para criar uma calculadora de orçamento?

Uma conversa normal no Claude basta: cole a tabela de preços ou anexe rate-card.csv. Cowork acrescenta um fluxo por pastas, em que o Claude lê o arquivo de uma pasta conectada e salva ali a calculadora. O acesso exige um plano Claude pago e o aplicativo para computador aberto.

Posso usar uma lista de preços do Excel ou Google Sheets?

Exporte a lista em CSV e anexe à conversa, ou cole a tabela no prompt. Antes de criar qualquer coisa, peça à IA que repita cada preço e regra lidos. Compare com a planilha e teste a calculadora com totais calculados na própria planilha.

Como envio uma calculadora interativa para um cliente?

Envie um link em vez do arquivo. Suba o HTML em um host que o sirva, como um link HummingDeck no plano gratuito, ou compartilhe o artefato do Claude se o cliente tiver conta. Teste antes em um link próprio e separado para sua visita não aparecer no link do cliente.

Uma calculadora de orçamento equivale a um software CPQ?

Uma calculadora mostra uma estimativa a partir de uma lista fixa. O CPQ também aplica regras de preço e aprovações de descontos, gera orçamentos e integra CRM e ERP. Deixe o comprador explorar opções na calculadora e depois envie uma proposta fixa com o preço que você assume.

Como altero os preços depois?

Edite os números no bloco de preços identificado ou peça à IA que os altere no mesmo arquivo independente e repita os seis testes. Depois use Substituir no documento HummingDeck para manter os links existentes. A substituição fica indisponível enquanto houver um link de proposta ativo; revogue esse link primeiro.

A calculadora pode enviar o orçamento por email ou salvar as escolhas?

A versão deste artigo só calcula no navegador. Enviar orçamentos, guardar escolhas ou receber pagamentos exige um serviço de formulários, banco de dados ou sistema de orçamentos por trás da página. Mantenha isso fora da calculadora e envie uma proposta fixa com o preço que você assume.

Sobre o autor

Ilya Spiridonov é fundador do HummingDeck, uma plataforma de compartilhamento de documentos que serve arquivos HTML independentes a destinatários externos por links rastreáveis.

Fontes

Compartilhe sua calculadora de orçamento por um link

Artigos relacionados: