# Como criar e publicar um site com Claude: do zero ao site no ar Crie um site com Claude Code usando referências, um briefing claro e revisão. Veja como publicar na Vercel e conferir o resultado no celular. Vinicius Pacheco 15 de outubro de 2026 IA na prática ![Um lápis verde grande dá forma a um objeto geométrico, ilustrando uma ferramenta em ação.](https://vinipace.com/cms/api/media/file/ai-as-a-work-tool-illustration-8da4020ea8.webp) Uma professora de forró quer apresentar suas aulas particulares e em grupo e receber interessados pelo WhatsApp. Esse foi o ponto de partida do site que criei com Claude na demonstração que acompanha este guia. O processo passou por uma pasta de projeto, referências visuais, um pedido com contexto, revisão da primeira versão e publicação na Vercel. Aqui, vou explicar cada etapa para você adaptar ao seu trabalho, mesmo que ainda não saiba programar. O exemplo é um site de apresentação com contato pelo WhatsApp. Agenda, cobrança e área de alunos exigiriam outras decisões e testes. Para começar, a página precisa explicar a oferta e levar a pessoa até uma conversa. ## O que você precisa antes de começar Separe o nome do negócio, uma descrição do serviço, o público que quer atender, imagens que possa usar e o contato correto. Anote também os preços e as condições que devem aparecer. Informação que falta nessa etapa costuma virar texto provisório na primeira versão. Na gravação, uso o Claude Code pelo aplicativo, em uma sessão local. A aba Code permite trabalhar nos arquivos do projeto; uma conversa comum não deve ser tratada como se tivesse os mesmos acessos. Confira a disponibilidade para sua conta e seu computador na [documentação oficial do Claude Code](https://code.claude.com/docs/en/overview). Você também precisará de uma conta no serviço escolhido para hospedar a página. Custos de assinatura, hospedagem e domínio são coisas diferentes. Antes de contratar, confira quais recursos e limites se aplicam ao seu caso. ## 1. Abra o Claude Code e escolha uma pasta Crie uma pasta só para o site e selecione essa pasta ao iniciar a sessão de código. No exemplo, ela guarda o projeto da página de dança. Essa pasta será o lugar dos arquivos que o Claude vai criar e modificar. Escolha uma pasta nova, sem documentos pessoais misturados. Quando houver um pedido de permissão, leia a ação proposta antes de autorizar. Você pode começar com este pedido: > Vamos criar um site nesta pasta. Primeiro, confirme qual pasta está aberta e me explique como vou visualizar a primeira versão no meu computador. Antes de publicar ou contratar qualquer serviço, me mostre o resultado para revisão. A [documentação do aplicativo](https://code.claude.com/docs/en/desktop) diferencia sessões locais e na nuvem. Neste guia, seguimos o caminho local mostrado na gravação. Os nomes dos menus podem mudar conforme a versão. ## 2. Prepare a orientação visual Na demonstração, uso uma skill de frontend, ou seja, um conjunto de instruções para orientar o trabalho na parte visual do site. Ela ajuda a explicar como construir a página, mas você continua responsável por avaliar se o resultado atende ao seu objetivo. Se quiser seguir esse caminho, escolha uma skill de origem conhecida e confirme sua instalação na interface que estiver usando. Consulte a [documentação de skills do Claude](https://code.claude.com/docs/en/skills) para o procedimento atual. Não é necessário começar por uma coleção de extensões: uma referência clara já ajuda a dar direção ao primeiro pedido. Em seguida, escolha uma ou duas referências de sites. Na gravação, procuro exemplos em galerias de design e envio uma imagem de referência. Para o seu projeto, explique o que chamou sua atenção: a disposição das seções, o tamanho dos títulos, as cores ou o espaço entre os elementos. Use a referência para comunicar o estilo. Textos, fotos e identidade do seu negócio precisam ser próprios ou ter autorização de uso. ## 3. Dê um briefing que explique o trabalho do site O pedido precisa dizer quem oferece o serviço, para quem ele existe e o que a pessoa deve fazer depois de ler a página. No site de forró, a ação principal é entrar em contato pelo WhatsApp. Este é um exemplo de briefing adaptado da demonstração. Os campos entre colchetes são informações que você deve preencher: > Crie um site de apresentação para [nome da professora], que oferece aulas de forró [na cidade ou região]. O público inclui pessoas que nunca dançaram e pessoas que querem praticar mais. Apresente as aulas individuais e em grupo. A principal ação é conversar pelo WhatsApp: [número real com código do país e DDD]. Use a referência visual anexada como orientação para a composição e explique suas escolhas. A aula experimental custa [valor confirmado]. Use as fotos que enviei. Se faltar alguma informação, pergunte ou sinalize o que preciso completar. Não invente depoimentos, experiência profissional, preços ou resultados. Quero revisar a primeira versão antes da publicação. Você pode escrever ou ditar esse contexto. O que faz diferença é fornecer as informações necessárias e deixar claro o que ainda não foi decidido. ## 4. Abra a primeira versão e peça mudanças concretas Quando o Claude terminar, peça para abrir a prévia no computador. Leia o site como alguém que acabou de conhecer o serviço: é possível entender o que está sendo oferecido, para quem e como entrar em contato? Na minha primeira versão, precisei corrigir duas coisas bem específicas: a aula experimental custava R$ 50 e o botão principal de WhatsApp deveria ficar verde. Esse tipo de observação dá à ferramenta um alvo claro para a mudança. Você pode pedir: > Mantenha a composição da página. Corrija a aula experimental para R$ 50 e deixe o botão principal de WhatsApp verde. Confira se todos os botões de contato abrem o mesmo número e me mostre a versão atualizada. Depois de cada ajuste, abra o resultado outra vez. Uma confirmação na conversa não substitui clicar no botão e ler a página. ## 5. Troque os dados provisórios antes de divulgar A demonstração usa um site de teste e mostra o problema dos conteúdos provisórios: aparecem imagens, contato e depoimentos que ainda precisam ser substituídos. Em um site real, essa revisão deve acontecer antes da divulgação. Use fotos autorizadas, confirme o número de WhatsApp e mantenha somente depoimentos reais. Se ainda não tem depoimentos, remova a seção. Confira também os preços, os locais das aulas e as condições para participar. Um botão pode parecer pronto e abrir o contato errado. Faça o teste completo: clique, confira o destinatário e leia a mensagem que será preenchida. Não envie uma mensagem de teste para um número que você não conhece. ## 6. Conecte a hospedagem e peça a publicação A prévia local funciona no seu computador. Um endereço como localhost não é o link que você deve mandar para clientes. Para compartilhar o site, é preciso publicá-lo em um serviço de hospedagem. Na gravação, encontro a integração da Vercel na área de personalização do Claude, conecto a conta e autorizo o acesso. Com a integração disponível, peço para colocar o site no ar. Confira a conta e o projeto escolhidos antes de aprovar essa etapa. Um pedido útil é: > Prepare a publicação deste site na minha conta da Vercel. Confirme o projeto e o plano, avise se houver custo ou recurso incompatível e peça minha autorização antes de publicar. Ao terminar, entregue o endereço público e informe se a publicação foi concluída. A Vercel fornece endereços para os projetos publicados; seu guia diferencia os ambientes de prévia e produção. Você pode consultar o [processo oficial de publicação](https://vercel.com/docs/deployments) para conferir o caminho usado na sua conta. Há uma ressalva sobre custo: o plano Hobby tem uso gratuito com limites, mas é destinado a uso pessoal e não comercial. Um site que vende aulas precisa de um plano compatível com esse uso. Confira as [condições do Hobby](https://vercel.com/docs/plans/hobby) antes de seguir a demonstração como se qualquer site pudesse ser hospedado gratuitamente. ## 7. Confira o endereço público no celular Depois da publicação, abro o site no navegador e digito o endereço no celular. Faça o mesmo com a sua página, de preferência usando também uma conexão diferente da do computador. Confira se o texto cabe na tela, se as imagens carregam e se os botões ficam fáceis de tocar. Abra o WhatsApp pelo botão da página. Uma página que carrega sem erro ainda pode ter um formulário ou um contato que não funciona. Publicar também não garante que alguém encontrará o site em uma busca ou pedirá uma aula. A divulgação e o acompanhamento dos contatos vêm depois. ## E se eu quiser um domínio próprio? Hospedagem guarda e entrega o site; domínio é o endereço que você escolhe para acessá-lo. Você pode publicar primeiro e decidir sobre um domínio próprio depois. Na gravação, pesquiso um domínio e mostro a possibilidade de compra, mas não concluo essa compra. Em outro trecho, faço uma demonstração com um domínio que já estava conectado à minha conta. São situações diferentes. Para o seu projeto, confirme a disponibilidade, o valor de registro e o de renovação. Depois, siga as instruções do provedor para apontar o domínio ao projeto correto e teste o endereço. O preço mostrado em uma gravação não é uma cotação atual. ## Checklist antes de compartilhar seu site - O serviço, o público e a região de atendimento estão claros. - Nome, preços e condições foram conferidos. - Fotos e depoimentos têm autorização e correspondem ao serviço. - Os textos e dados provisórios foram removidos. - Todos os botões de WhatsApp abrem o contato correto. - O site foi aberto pelo endereço público no computador e no celular. - O plano de hospedagem é adequado ao uso pretendido. - Você sabe onde estão os arquivos e como pedir a próxima alteração. ## Continue com um projeto seu Você pode [assistir à demonstração de criação do site](https://vinipace.com/v/2026-10-14-criando-site-com-claude-youtube-r02) e acompanhar as etapas com a sua própria ideia. Comece por uma página com um serviço e uma ação principal; depois de testar esse caminho, decida o que vale acrescentar. Para continuar estudando, veja a proposta do curso [Sites e Sistemas com Claude](https://vinipace.com/pt-br/cursos/sites-e-apps-com-claude). Se o seu caso já envolve processos de trabalho, integrações ou várias pessoas, [conte o que você precisa fazer](https://vinipace.com/pt-br/start).