Claude Code pode gerar um site impressionante a partir de uma referência de design, mas o primeiro resultado pode não corresponder totalmente ao objetivo de negócio pretendido. Neste exemplo, Claude recriou com precisão o estilo visual, incluindo fontes, cores, cartões interativos, depoimentos, formulário e rodapé. No entanto, construiu um site para um consultório odontológico em vez de uma agência web que cria sites para dentistas.

Isso ocorreu porque o pedido inicial não forneceu contexto suficiente. Em vez de começar novamente, o design existente pode ser aprimorado por meio de um fluxo de trabalho iterativo. Claude foi solicitado a manter o layout, mas reescrever o conteúdo para a Outbound, uma agência web voltada para consultórios odontológicos em Austin. A principal chamada para ação foi alterada para uma auditoria gratuita de site.

Refinando o site com entrada de voz

Instruções longas de projeto nem sempre precisam ser digitadas manualmente. O recurso de microfone do Claude pode ser utilizado para descrever alterações de forma natural, incluindo:

• O que o negócio faz
• Quem é o público-alvo
• Quais conteúdos precisam ser alterados
• Quais partes do design existente devem permanecer
• Qual deve ser a principal chamada para ação

Claude pode então fazer perguntas adicionais quando informações importantes estiverem faltando e atualizar o site com base nas respostas.

Conectando o Claude ao Vercel

Quando o site estiver pronto, ele precisa ser implantado em uma plataforma de hospedagem. Em vez de configurar manualmente o Git, GitHub e as definições de implantação, o Claude Code pode se conectar diretamente ao Vercel por meio de um conector MCP.

Para conectar ao Vercel:

1. Clique no ícone de mais próximo ao campo de entrada do chat do Claude.
2. Abra Conectores e selecione Gerenciar conectores.
3. Clique em Procurar conectores.
4. Pesquise por Vercel e clique em Conectar.
5. Autorize o Claude a acessar a equipe e os projetos apropriados no Vercel.

Após a conexão ser estabelecida, o Claude pode implantar o projeto, monitorar a implantação, identificar erros e retornar a URL do site ao vivo.

Revisão de Problemas de Implantação

A primeira implantação pode falhar se Claude ainda estiver modificando o projeto em outra sessão ou se os arquivos atuais não corresponderem aos arquivos usados durante a build. Claude pode inspecionar a implantação com falha, aguardar a finalização das alterações no site, reconstruir o projeto e implantá-lo novamente.

Antes da publicação, Claude também pode identificar elementos inacabados, como:

• Um formulário que não está conectado ao backend
• Conteúdo de espaço reservado
• Um domínio personalizado ausente
• Uma política de privacidade incompleta

Esses problemas devem ser revisados antes do lançamento de um site em produção. No entanto, uma versão temporária ainda pode ser implantada para fins de teste ou demonstração.

Da Referência de Design ao Site Publicado

Após a implantação bem-sucedida, o Vercel fornece uma URL pública que pode ser aberta em dispositivos desktop ou móveis. O site resultante é responsivo e pode posteriormente ser conectado a um domínio personalizado.

Esse fluxo de trabalho demonstra como o Claude Code pode lidar com muito mais do que apenas escrever código. Ele pode refinar conteúdo, modificar arquivos do projeto, conectar-se a serviços externos, solucionar erros de build e implantar um site funcional por meio de instruções em linguagem natural.

O erro inicial também destaca uma lição importante: Claude tem o melhor desempenho quando recebe o contexto completo do projeto desde o início. Definir o negócio, o público, os objetivos e o resultado desejado ajuda a manter o projeto alinhado e reduz revisões desnecessárias.