Crie seu primeiro site com Claude Code: do briefing do produto ao domínio próprio

Você já escolheu o nome e comprou o domínio. Agora precisa fazer com que qualquer pessoa que abra esse endereço consiga ver o produto, entender para que ele serve e realizar a próxima ação.

Neste guia, vamos usar Claude Code para criar um site de produto pronto para publicação. O exemplo será uma ferramenta de gestão de feedback de clientes que ainda não abriu o cadastro. A função do site é objetiva: apresentar o produto a profissionais autônomos e permitir que pessoas interessadas solicitem acesso antecipado.

Todo o trabalho acontece dentro da ferramenta de programação: criar a página, ajustar o layout, conectar o formulário, verificar o resultado e fazer o deploy. O site em si não precisa de chatbot nem de outra função de IA.

Defina primeiro o fluxo de desenvolvimento

Claude Code consegue ler um projeto, modificar arquivos e executar comandos. Por isso, ele funciona bem para desenvolver e corrigir continuamente um mesmo site. Este guia usa Claude Code em um terminal local.

Crie um diretório exclusivo para o site e coloque nele o nome aprovado do produto, os textos e os materiais disponíveis. Se já existir um projeto, mantenha a estrutura atual. Em um projeto novo, você pode pedir à ferramenta uma implementação simples de página única.

Se Claude Code já estiver funcionando com uma forma de acesso existente, continue usando-a. Configure um provedor de modelos quando optar por acesso via API com cobrança por uso.

Para usar Claude Code com BetterToken, siga o guia de configuração do Claude Code e defina a API Key e a Base URL. Mantenha essas configurações no ambiente local de desenvolvimento para uso da ferramenta; não as inclua no site público. Os modelos disponíveis e as condições de acesso dependem da configuração atual da conta.

Depois da configuração, peça ao Claude Code para examinar o diretório do site e resumir os arquivos existentes, a stack e o comando de inicialização. A compatibilidade de um gateway de terceiros pode variar conforme o cliente e o recurso, então confirme antes se o modelo e as funções necessárias estão disponíveis.

Etapa 1: dê à IA um briefing que possa virar site

“Faça um site sofisticado e tecnológico” não informa para quem é o produto nem qual ação o botão principal deve executar.

Depois de fornecer o nome aprovado e os materiais, envie uma tarefa como esta:

Objetivo: criar a primeira versão do site de uma ferramenta de gestão de feedback de clientes voltada a profissionais autônomos. O produto ajuda a reunir pedidos de alteração dos clientes em um só lugar, reduzindo a necessidade de procurar requisitos em históricos de conversa. O cadastro ainda não está aberto e o botão principal deve dizer “Solicitar acesso antecipado”.

Escopo permitido: nesta tarefa, criar apenas a página inicial. Ela deve conter uma apresentação do produto, um cenário de uso claramente marcado como demonstração, três usos principais, perguntas frequentes e um ponto de entrada para solicitar acesso. Use o nome e os materiais que eu fornecer.

Não fazer: não adicionar login, pagamento nem painel do produto. Não inventar quantidade de clientes, depoimentos ou logotipos de parceiros.

Critérios de conclusão: primeiro entregar uma prévia que abra no navegador e funcione em desktop e celular. Se o acesso antecipado ainda não estiver conectado a um serviço real, identificá-lo claramente como demonstração.

Verificação: confirmar que a página inicia corretamente, revisar o layout no celular e o comportamento do botão principal e relatar os testes realmente realizados.

Esse briefing já delimita a primeira versão. Os detalhes podem ser acrescentados depois que a página estiver visível para revisão.

Na primeira análise, confira se a página explica corretamente o produto. De onde vem o feedback dos clientes? Por que alguém deveria testar a ferramenta? O que acontece depois do clique? Cores e animações podem ser ajustadas depois, mas a página precisa responder primeiro a essas perguntas.

Etapa 2: associe cada alteração a uma parte específica da página

Quando a primeira versão estiver pronta, o feedback mais útil identifica exatamente qual área dificulta o entendimento ou a ação.

Por exemplo, se uma imagem grande ocupa toda a primeira tela no celular e a pessoa precisa rolar antes de entender o produto, continue com uma tarefa como esta:

Objetivo: ajustar a área inicial da página no celular para que o visitante veja primeiro a finalidade do produto e o botão “Solicitar acesso antecipado”.

Escopo permitido: alterar apenas o layout e os estilos da área inicial da página.

Alterações específicas: no celular, mover a imagem de demonstração para baixo do botão e manter o texto atual. No desktop, preservar o layout lado a lado existente.

Critérios de conclusão: não deve haver rolagem horizontal no celular, a imagem não pode cobrir o título nem o botão, e o layout do desktop deve permanecer inalterado.

Verificação: testar uma largura de celular e uma de desktop. Corrigir somente os problemas causados por esta alteração.

Abra a página novamente depois de cada mudança e confirme que o resultado real corresponde ao pedido. Quando houver ferramentas de navegador, peça à IA para visualizar a página diretamente. Caso contrário, abra você mesmo e forneça capturas de tela junto com problemas reproduzíveis.

Quando uma versão estiver aprovada, guarde um ponto de restauração antes de iniciar a próxima rodada. Assim, será fácil voltar a uma versão estável caso a nova direção não funcione.

Etapa 3: faça as solicitações de acesso chegarem de verdade

Para este site, a função mais importante não é uma interação complexa, mas receber as solicitações.

A primeira versão pode abrir um formulário hospedado que já esteja configurado. Assim, não é necessário criar um sistema de contas apenas para coletar e-mails. O formulário pode pedir o e-mail e incluir uma pergunta opcional: “Como você gerencia atualmente o feedback dos clientes?”. Explique que as informações serão usadas para contato sobre o acesso antecipado e para pesquisa de produto.

Forneça ao Claude Code a URL real do formulário e peça para substituir o acesso de demonstração. Em seguida, abra o site, envie uma solicitação de teste e confirme que o registro aparece no sistema receptor.

Se o formulário estiver incorporado ao site, conecte o serviço real de envio e implemente os estados de envio, sucesso e erro. Exiba a mensagem de sucesso somente depois que o sistema receptor confirmar que os dados foram gravados.

As mensagens da página devem corresponder ao que realmente aconteceu. Isso é mais importante do que adicionar novos blocos visuais.

Etapa 4: verifique a prévia pública antes de conectar seu domínio

Depois de validar a prévia local, publique o projeto em uma plataforma compatível com a stack. Comece com uma URL pública de teste e abra-a em outro dispositivo para verificar imagens, links e formulário.

No Vercel, por exemplo, você adiciona o domínio comprado ao projeto e depois configura o DNS usando os valores mostrados para aquele projeto. Use os registros fornecidos pelo projeto atual. Se o domínio também for usado para e-mail, mantenha os registros MX e os demais registros de correio existentes. O processo completo está na documentação de domínio personalizado do Vercel.

Depois de conectar o domínio, repita todo o fluxo pelo seu próprio endereço: abrir o site, entender o produto e concluir a solicitação.

Uma página informativa fixa como esta não chama um modelo a cada visita. O modelo participa somente do desenvolvimento; depois do deploy, o site funciona como um projeto web comum. Caso você adicione geração de conteúdo, análise ou chat para visitantes no futuro, projete essa integração de modelo em tempo de execução como uma função separada.

Etapa 5: lance o produto com um site que já funciona

Ao começar a divulgar, use capturas reais, uma descrição clara e um acesso funcional. Se o produto ainda estiver recrutando usuários de teste, escreva “Solicitar acesso antecipado” tanto no site quanto nos materiais de lançamento.

Quando o site estiver pronto, consulte o diretório de startups do NewName.ai para ver como produtos semelhantes apresentam sua utilidade e envie também o seu projeto. Concentre a publicação em funções reais, capturas atuais e uma URL que funcione.

Depois, leve de volta ao projeto o feedback concreto das visitas e solicitações. Se as pessoas não entenderem a diferença entre o produto e um aplicativo de chat, melhore a explicação. Se clicarem no botão, mas não concluírem a solicitação, revise o formulário e o fluxo. Resolva um problema claro por vez e continue aprimorando o site.

O nome dá identidade ao projeto e o domínio fornece um endereço. O resultado real de construir com IA é transformar a ideia do produto em um site que as pessoas conseguem abrir, entender e usar para dar o próximo passo.