GuiaFreela
Vibe Coding··18 min de leitura

Como criar sites para clientes usando IA e cobrar R$2.000+ por projeto

Tutorial completo: do briefing ao deploy. Use Cursor, v0 e Claude para entregar sites profissionais em 2-3 dias e construir uma carteira de clientes recorrentes.

PX
Phelipe Xavier
Fundador do GuiaFreela

Freelancer que cria sites no Brasil vive um paradoxo: o mercado paga bem, mas a maioria cobra barato demais. R$500 por um site. R$300 por uma landing page. Isso acontece porque o processo demora, o cliente reclama, e no final o lucro por hora fica menor que Uber.

Com IA, o jogo muda. Você entrega em 2-3 dias o que antes levava 2-3 semanas. O custo do seu tempo cai, o valor percebido sobe, e você pode cobrar R$2.000 a R$5.000 por projeto com margem real.

Esse tutorial mostra o processo completo. Sem teoria. Só o que funciona.

O stack que eu uso

  • Cursor (editor com IA integrada) — R$0 no plano free, R$100/mês no Pro
  • v0.dev (gerador de UI da Vercel) — R$0 para começar
  • Claude (raciocínio e copywriting) — R$0 no plano free
  • Next.js — framework React, gratuito
  • Vercel ou Netlify — hospedagem gratuita para sites estáticos
  • Namecheap ou Registro.br — domínio R$40-60/ano

Custo fixo mensal: R$0 a R$100. Receita possível: R$4.000 a R$15.000/mês.

Passo 1: Encontrar clientes que pagam

Esqueça Workana e 99Freelas para sites. A competição de preço lá é insana. Foque em:

Negócios locais no Google Maps

  1. Abra o Google Maps
  2. Pesquise "dentista [sua cidade]", "advogado [sua cidade]", "personal trainer [sua cidade]"
  3. Clique nos resultados que NÃO têm site ou têm site antigo
  4. Anote nome, telefone, Instagram

Faça isso para 20 negócios. Vai levar 30 minutos.

A mensagem que funciona

Mande no Instagram ou WhatsApp:

Oi [nome], tudo bem? Vi que o [nome do negócio] aparece no Google
mas não tem um site profissional ainda. Eu crio sites modernos
pra [dentistas/advogados/etc] aqui em [cidade] — rápido, bonito
e que funciona no celular. Posso te mostrar um exemplo em 24h?

De 20 mensagens, espere 3-5 respostas. De 3-5 respostas, espere 1-2 clientes.

Quanto cobrar

Tipo Preço sugerido Tempo real com IA
Landing page simples (1 página) R$1.200 - R$2.000 4-6 horas
Site institucional (3-5 páginas) R$2.500 - R$4.000 1-2 dias
Site + blog + SEO básico R$3.500 - R$6.000 2-3 dias
E-commerce pequeno (Shopify) R$4.000 - R$8.000 3-5 dias

Nunca cobre por hora. Sempre por projeto. O cliente quer saber quanto vai gastar, não quanto tempo você leva.

Passo 2: Briefing em 15 minutos

Não faça reunião de 1 hora. Mande um formulário com essas perguntas:

  1. Qual o nome do negócio e o que vocês fazem em uma frase?
  2. Quem é o cliente ideal de vocês? (idade, problema que resolve)
  3. Quais serviços/produtos principais? (máximo 5)
  4. Tem logo em alta resolução? (pode ser PNG ou PDF)
  5. Tem fotos profissionais? (se não, vamos usar banco de imagens)
  6. Qual o telefone/WhatsApp para contato no site?
  7. Tem Instagram? Qual o @?
  8. Tem algum site de concorrente que você acha bonito?
  9. Cores preferidas? (se não souber, eu sugiro)
  10. Precisa de formulário de contato, agendamento, ou WhatsApp direto?

Use o Google Forms. Leva 5 minutos para criar, e o cliente responde quando quiser.

Passo 3: Gerar o design com v0

Com o briefing respondido, vá no v0.dev e escreva um prompt detalhado:

Crie uma landing page para uma clínica odontológica chamada
"Sorriso Pleno" em Campinas-SP.

Público: adultos 25-55 anos, classe B/C
Serviços: clareamento dental, implantes, ortodontia invisível,
limpeza e check-up
Cores: azul escuro (#1a365d) e branco
Tom: profissional mas acolhedor
Seções:
1. Hero com headline forte e botão WhatsApp
2. Serviços (cards com ícones)
3. Depoimentos (3 pacientes)
4. Sobre a clínica (foto + texto)
5. Localização (endereço + mapa)
6. Footer com redes sociais e telefone

O botão principal deve abrir WhatsApp com mensagem pré-preenchida.
Mobile first. Design moderno, clean.

O v0 vai gerar um componente React completo. Copie o código.

Passo 4: Montar o projeto no Cursor

Criar o projeto

Abra o terminal no Cursor:

npx create-next-app@latest sorriso-pleno --typescript --tailwind --app
cd sorriso-pleno

Colar e ajustar o código do v0

Cole o componente gerado pelo v0 em app/page.tsx. Agora use o chat do Cursor (Cmd+L) para ajustar:

Ajuste este componente:
1. O botão de WhatsApp deve abrir wa.me/5519999999999 com a mensagem
   "Olá, vim pelo site e gostaria de agendar uma consulta"
2. Troque os textos placeholder por textos reais da clínica
3. Adicione meta tags SEO com title "Dentista em Campinas | Sorriso Pleno"
   e description relevante
4. Adicione Schema.org LocalBusiness markup
5. As imagens devem usar next/image com placeholder blur

O Cursor vai fazer todas as mudanças em segundos.

Adicionar páginas extras

Para um site de 3-5 páginas, peça ao Cursor:

Crie as seguintes páginas seguindo o mesmo design da home:
1. /sobre — história da clínica, equipe, diferenciais
2. /servicos — página detalhada de cada serviço com FAQ
3. /contato — formulário + mapa + horários de funcionamento

Mantenha header e footer consistentes. Use layout.tsx para
componentes compartilhados.

Passo 5: Otimizações que impressionam o cliente

Essas são as coisas que fazem o cliente falar "nossa, ficou profissional":

WhatsApp flutuante

// components/WhatsAppButton.tsx
'use client';

export default function WhatsAppButton({ phone }: { phone: string }) {
  const message = encodeURIComponent(
    'Olá, vim pelo site e gostaria de mais informações!'
  );

  return (
    <a
      href={`https://wa.me/${phone}?text=${message}`}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Falar no WhatsApp"
      style={{
        position: 'fixed',
        bottom: 24,
        right: 24,
        width: 56,
        height: 56,
        borderRadius: '50%',
        background: '#25D366',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
        zIndex: 50,
      }}
    >
      {/* ícone do WhatsApp */}
      <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
      </svg>
    </a>
  );
}

Google Analytics + Meta Pixel em 2 minutos

Peça ao Cursor:

Adicione Google Analytics (ID: G-XXXXXXX) e Meta Pixel (ID: XXXXXXXXXX)
no layout.tsx usando next/script com strategy afterInteractive

O cliente vai adorar ver os números de acesso.

Velocidade perfeita no PageSpeed

Sites em Next.js com Vercel já saem com nota 90+ no PageSpeed. Mas para garantir:

  • Use next/image em todas as imagens (compressão automática)
  • Use next/font para Google Fonts (sem layout shift)
  • Lazy load tudo que fica abaixo da dobra

Passo 6: Deploy e entrega

Deploy na Vercel (grátis)

npm i -g vercel
vercel

Pronto. O site está no ar em 30 segundos com HTTPS, CDN global e preview de cada commit.

Domínio do cliente

  1. O cliente compra o domínio no Registro.br (R$40/ano para .com.br)
  2. Você configura o DNS apontando para a Vercel
  3. Em 5 minutos o site está acessível pelo domínio do cliente

O que entregar

Mande um PDF simples com:

  • Link do site publicado
  • Login do painel (se tiver CMS)
  • Instruções para alterar textos/fotos
  • Contato para suporte

Passo 7: Transformar em recorrente

Aqui é onde o dinheiro de verdade está. Depois de entregar o site, ofereça:

Serviço Preço mensal Trabalho real
Manutenção + pequenas alterações R$200 - R$400 1-2h/mês
SEO local (Google Meu Negócio + blog) R$500 - R$800 3-4h/mês
Gestão de tráfego (Google Ads local) R$800 - R$1.500 4-6h/mês
Pacote completo (site + SEO + ads) R$1.200 - R$2.500 6-8h/mês

10 clientes pagando R$500/mês de manutenção = R$5.000 de receita recorrente. Isso com menos de 20 horas de trabalho por mês.

Nicho por nicho: o que funciona

Dentistas e médicos

  • Foco em agendamento online e WhatsApp
  • Fotos da clínica são essenciais (peça ou use banco de imagens)
  • SEO local é ouro ("dentista em [cidade]" tem busca alta)

Advogados

  • Conteúdo institucional sobre áreas de atuação
  • Blog com artigos sobre direitos (gere com IA, revise)
  • Formulário de consulta gratuita como isca

Personal trainers e nutricionistas

  • Portfólio de transformações (antes/depois com permissão)
  • Integração com Instagram (feed no site)
  • Landing page para aula experimental gratuita

Restaurantes e bares

  • Cardápio digital (link no Google Maps)
  • Fotos bonitas são tudo (invista em fotos reais)
  • Botão de reserva ou delivery (iFood/Rappi)

Imobiliárias e corretores

  • Listagem de imóveis com filtros
  • Integração com portais (ZAP, OLX)
  • WhatsApp por imóvel (mensagem personalizada)

Erros que eu já cometi

  1. Cobrar antes de mostrar algo — Sempre faça um protótipo rápido (1-2h) antes de pedir pagamento. O cliente precisa ver pra acreditar.

  2. Aceitar "depois eu mando o conteúdo" — Se o cliente não mandar textos e fotos, o projeto emperra. Defina prazo: "Preciso do material até sexta, senão o prazo de entrega muda."

  3. Não cobrar hospedagem — A Vercel é grátis, mas cobre R$100-200/mês de "hospedagem e manutenção". O cliente não sabe que é grátis, e você merece ser pago por manter o site no ar.

  4. Fazer revisões infinitas — No contrato: "Inclui 2 rodadas de revisão. Alterações adicionais: R$150/hora." Isso evita que o cliente peça 47 ajustes de cor.

  5. Não pegar depoimento — Depois de entregar, peça um depoimento por escrito ou vídeo. Isso vale ouro para fechar o próximo cliente.

Resumo: seu plano de ação

  1. Hoje: instale Cursor, crie conta no v0.dev
  2. Amanhã: prospecte 20 negócios locais no Google Maps
  3. Essa semana: mande 20 mensagens de prospecção
  4. Quando fechar: briefing, v0, Cursor, deploy em 2-3 dias
  5. Depois de entregar: ofereça manutenção mensal

Com 3-4 projetos por mês a R$2.500, você faz R$7.500 a R$10.000. Trabalhando 4-5 horas por dia. Sem chefe, sem escritório, sem dress code.

#vibe coding#criar sites#freelancer#cursor#v0#landing page
Compartilhar:

Gostou do conteudo? O GuiaFreela vai mais fundo.

10 volumes com prompts prontos e testados. Do primeiro cliente ao R$10k/mes. Garantia de 7 dias.

Quero por R$47 →

Leia tambem

Vibe Coding

O que é Vibe Coding e por que todo freelancer deveria aprender

8 min · 10 de março de 2025
Ferramentas

10 ferramentas de IA gratuitas que todo freelancer deveria usar em 2025

9 min · 6 de março de 2025
Precificação

Precificação por valor: como cobrar pelo resultado e não pela hora

17 min · 15 de março de 2025