Como fazer uma proposta comercial em HTML com IA, em 10 minutos
Fazer uma proposta em HTML significa transformar o texto que você já escreve numa página web, em vez de num arquivo do Word. Com uma ferramenta de IA isso leva cerca de dez minutos na primeira vez e dois minutos nas seguintes. Você não precisa saber programar: descreve o que quer, recebe o arquivo pronto, e publica como link.
Este guia mostra o processo inteiro, incluindo o prompt que funciona e os erros que aparecem na primeira tentativa.
Antes de começar
- O conteúdo da proposta já escrito em qualquer lugar: Word, Google Docs, bloco de notas
- Acesso a uma ferramenta de IA que gere arquivos, como o Claude ou o ChatGPT
- Uma conta numa plataforma de publicação
- Opcional: o logo da empresa e as cores da marca
Você não precisa de: editor de código, conta de desenvolvedor, servidor ou domínio próprio.
Passo 1: organize o conteúdo antes de abrir a IA
A qualidade da página depende do que você entrega. Junte, em texto corrido:
- Nome do cliente e o problema que ele te trouxe
- O que você vai entregar, item por item
- Prazo e etapas
- Valor, forma de pagamento, o que está fora do escopo
- Validade da proposta
Deu certo quando: você consegue ler o texto em voz alta e ele faz sentido sem nenhuma imagem.
Se você ainda não tem essa estrutura pronta, o esqueleto com as nove seções e a ordem que funciona está em modelo de proposta comercial.
Não pule este passo. IA formata bem e inventa conteúdo mal. Se você entregar um esboço vago, ela preenche com genérico comercial, e proposta genérica perde.
Passo 2: peça o HTML com as instruções certas
O prompt abaixo funciona porque especifica justamente o que costuma dar errado: arquivo único, sem dependência externa, e legível no celular.
Transforme o conteúdo abaixo numa proposta comercial em HTML.
Requisitos técnicos:
- Um único arquivo .html, com o CSS embutido na própria página
- Sem bibliotecas externas, sem fontes carregadas de fora, sem CDN
- Responsivo: precisa ficar legível em tela de celular
- Tipografia sóbria, hierarquia clara, bastante espaço em branco
- Tabela de investimento com os valores destacados
- Uma seção de escopo e outra de "não incluído"
Cores da marca: [COR PRIMÁRIA] e [COR SECUNDÁRIA]
Conteúdo:
[COLE AQUI O TEXTO DO PASSO 1]
Deu certo quando: a IA devolve um arquivo, e não um trecho de código solto no meio da conversa.
Por que "sem bibliotecas externas": é a instrução que mais evita retrabalho. Página que carrega fonte ou script de fora quebra quando a rede do cliente bloqueia aquele endereço, e rede corporativa bloqueia muita coisa.
Passo 3: teste o arquivo antes de publicar
Baixe o arquivo e abra com dois cliques no seu computador, com a internet desligada.
Deu certo quando: a proposta aparece formatada, com as cores certas, sem nada faltando.
Se algo sumiu: aquele elemento dependia de um recurso externo. Volte à IA e peça para embutir tudo no arquivo.
Esse teste de trinta segundos é o que separa uma proposta que abre na casa do cliente de uma que chega quebrada.
Passo 4: publique e gere o link
Suba o arquivo na plataforma. Arquivo único, código colado, ou um pacote .zip se você tiver imagens separadas. O passo a passo do envio está em como subir um arquivo.
Configure três coisas antes de enviar:
| Ajuste | Quando usar |
|---|---|
| Endereço personalizado | Sempre. /proposta-acme passa mais confiança que um código aleatório |
| Notificação de abertura | Sempre. Na I LOVE HTML ela chega por e-mail |
| Data de validade | Quando a proposta tem prazo real |
| Senha | Quando o valor daquele cliente não pode circular |
Deu certo quando: você abre o link numa janela anônima. Se abrir ali, abre para o cliente.
Passo 5: envie e acompanhe
Mande o link no corpo do e-mail, não como anexo, com uma frase dizendo o que a pessoa vai encontrar.
Deu certo quando: a notificação de primeira abertura chega no seu e-mail.
O que fazer com a informação: aberta várias vezes em aparelhos diferentes significa que está circulando internamente, então ligue. Nunca aberta depois de três dias, verifique spam e filtro corporativo antes de concluir qualquer coisa.
Os cinco erros da primeira vez
| Erro | O que acontece | Correção |
|---|---|---|
| Não pedir arquivo único | A proposta quebra na rede do cliente | Repetir o prompt com "CSS embutido, sem CDN" |
| Deixar a IA escrever o conteúdo | Proposta genérica, sem o problema do cliente | Você escreve o texto, ela formata |
| Esquecer o "não incluído" | Escopo vira discussão depois de fechado | Seção própria, sempre |
| Publicar sem testar offline | Você descobre o problema pelo cliente | O teste do passo 3 |
| Link sem validade numa proposta com prazo | Proposta velha circulando meses depois | Data de expiração |
Quanto tempo isso realmente leva
| Etapa | Primeira vez | Depois |
|---|---|---|
| Organizar o conteúdo | 15 a 30 min | Igual, é o trabalho de sempre |
| Gerar o HTML | 3 a 5 min | 1 a 2 min |
| Testar | 1 min | 1 min |
| Publicar e configurar | 3 min | 1 min |
| Total, além do conteúdo | cerca de 10 min | cerca de 3 min |
O tempo de escrever a proposta não muda. O que muda é o que vem depois de escrever.
O ganho aparece na terceira proposta: você salva a primeira como modelo e passa a pedir à IA para adaptar, em vez de gerar do zero.
Quando não vale a pena
Orçamento simples de uma linha. Valor único, cliente que responde no mesmo dia. Mande no corpo do e-mail.
Licitação pública. O edital manda no formato, e quase sempre é PDF com assinatura. Não invente.
Cliente que já disse que quer PDF. Mande PDF. Se quiser testar, mande os dois.
Se você faz duas propostas por ano. O ganho está na repetição, e duas vezes por ano não justifica montar processo.
Perguntas frequentes
Posso reaproveitar a mesma proposta para vários clientes?
Pode, e é aqui que o processo compensa. Salve a primeira como modelo e peça à IA para trocar cliente, escopo e valores. Cada cliente vira um arquivo com link próprio, senha própria e registro de abertura próprio.
E se eu quiser editar depois de enviar?
Edite e publique por cima. O endereço continua o mesmo e as versões anteriores ficam guardadas: na I LOVE HTML são 25 por documento.
Dá para publicar direto do Claude, sem plataforma?
Depende do plano. Segundo a central de ajuda da Anthropic, nos planos individuais o botão de publicar gera uma página aberta, enquanto artefatos criados em contas corporativas só circulam dentro da própria organização, o que inviabiliza mandar para cliente externo. A mesma página registra outro detalhe que pega muita gente: depois de despublicar, não é possível publicar aquele mesmo artefato de novo. O caminho completo está em como publicar um artefato do Claude.
Preciso de domínio próprio?
Não para começar. Um endereço personalizado dentro da plataforma já resolve a maior parte da percepção de profissionalismo.
E se o cliente não conseguir abrir?
Quase sempre é filtro corporativo bloqueando o domínio do link. Avise o contato para liberar, ou tenha o PDF como plano B na mesma mensagem.
O porquê do formato, com as situações em que o PDF continua melhor, está em proposta comercial em página.