Como o Claude Design 2.0 cria sites que vendem?

Seu problema não é escrever código: é criar uma página que converte e colocá-la no ar rápido. O fluxo Claude Design 2.0 resolve isso em três ferramentas gratuitas ou quase: Claude para copy e HTML, ChatGPT para imagens e Vercel para hospedagem com domínio gratuito.

O que é o fluxo Claude Design 2.0 e com quais ferramentas ele funciona

Claude Design 2.0 é o nome que o canal O Rei dos Sites dá a um fluxo de criação de landing pages com inteligência artificial, e não um produto oficial da Anthropic. Na prática, ele combina o assistente Claude, responsável pela copy e pelo HTML, com o ChatGPT para gerar imagens e a Vercel para hospedar o site com domínio gratuito.

O ponto central do vídeo de agosto de 2026 é que a interface do Claude ganhou atualizações voltadas a design, e o criador Herbert relata ter usado essa versão em projetos de clientes reais, como um site para a Carmed. Esses relatos são experiência pessoal do autor do vídeo, não medições independentes.

Cada ferramenta tem um papel claro no fluxo, o que evita depender de um único modelo para tudo.

Qual ferramenta faz o quê no fluxo

O fluxo divide o trabalho entre quatro ferramentas, e confundir esses papéis é o erro mais comum de quem tenta replicar o processo. A tabela abaixo resume o papel, o custo e a etapa de cada uma, conforme descrito no vídeo.

Como criar e instalar a skill de copy no Claude

A skill de copy é um arquivo em Markdown que você anexa ao Claude Code uma habilidade personalizada, e é ela que transforma um pedido genérico em uma copy estruturada para venda. As skills são um recurso oficial do Claude Anthropic documentou o recurso de skills em outubro de 2025 como arquivos que ensinam o modelo a executar tarefas específicas.

O processo mostrado no vídeo tem quatro passos.

1. Baixe o arquivo da skill no link da descrição do vídeo (um arquivo .md).
2. Abra o Claude, entre em Personalizar e depois em Habilidades.
3. Clique em adicionar habilidade e anexe o arquivo baixado.
4. No chat, digite "barra" para confirmar que a skill aparece na lista.

Com a skill instalada, o criador pede algo como: "preciso que você crie a copy de uma página de vendas de um site de finanças, para converter pessoas a investir em uma plataforma chamada Rampay". O modelo responde fazendo perguntas de qualificação sobre o produto antes de escrever, o que segundo ele é o grande ganho de usar skills em vez de prompts soltos.

Vale notar que a eficácia dessa skill específica é relato do autor do vídeo; a Anthropic publica benchmarks de skills de copywriting de terceiros.

Como gerar a landing page com referência visual do Dribbble

Depois de gerar a copy no chat, você a cola no modo de design do Claude junto com uma imagem de referência escolhida no Dribbble, plataforma de portfólios de design. O argumento do criador é direto: "falta de criatividade é falta de referência", ou seja, anexar um exemplo visual reduz muito as idas e vindas com o modelo.

No vídeo, ele escolhe o modelo Opus por considerá-lo o mais potente disponível e responde às perguntas do assistente com "decida por mim" na maioria dos casos: headline no topo, CTA primário como "criar minha conta grátis" e a imagem anexada usada como mockup na seção hero. O resultado inicial, segundo ele, ficou correto na copy, porém visualmente básico e estático.

O ajuste seguinte é um pedido explícito de refinamento: mais animações, mais efeitos, hover nos cards de benefícios e remoção da borda preta atrás da imagem do celular. Esse ciclo de pedir correções específicas, em vez de regenerar tudo, é o que transforma um rascunho aceitável em uma página pronta para apresentar a um cliente.

Por que combinar o Claude Code o ChatGPT para imagens

A maior limitação apontada no fluxo é geração de imagens: o Claude cria a estrutura e o texto, mas o criador prefere gerar os mockups de aplicativo no ChatGPT, que oferece geração de imagens gratuita. No vídeo, ele pede ao ChatGPT uma foto em formato de celular do web app fictício Rampay e devolve o PNG ao Claude para usar na seção hero.

Essa combinação de ferramentas é uma escolha de fluxo de trabalho do criador, não uma exigência técnica: ele mesmo diz que gosta de "combinar tudo" e cita alternativas como vídeos animados. O conselho prático que sobra é simples: use cada ferramenta no que ela performa melhor no seu teste, e mantenha o site aberto em duas abas para iterar rápido.

Como publicar o site na Vercel usando o Claude Code

A publicação usa o Claude Code, a ferramenta de codificação agêntica da Anthropic que roda no terminal. Você exporta o site do Claude Code arquivo HTML standalone, abre a pasta no Visual Studio Code, executa o Claude Code no terminal e pede: "suba o HTML na Vercel".

O truque mostrado no vídeo é configurar antes o conector oficial da Vercel no Claude (em Personalizar > Conectores), o que autoriza o deploy direto pela conta. O criador usa o plano pago Max da Anthropic o plano Pro da Vercel reforça que a Vercel tem camada gratuita com domínio gratuito suficiente para acompanhar o tutorial.

Para apontar o domínio do cliente, o caminho na Vercel é abrir o projeto, entrar em Domains e vincular um domínio existente. O vídeo termina com a página no ar, responsiva para celular e computador, em um endereço gratuito.

Qual é o modelo de negócio por trás do fluxo

O argumento comercial do vídeo parte de dois números que ele atribui ao contexto brasileiro: cerca de 25 milhões de CNPJs abertos no Brasil, segundo ele, precisando de site, software ou loja virtual. Esse número vem do criador e não foi verificado em fonte oficial neste artigo.

O modelo de precificação relatado é de venda mais mensalidade: um site de R$ 3.000 gera uma mensalidade de R$ 300; um aplicativo de R$ 8.000, uma mensalidade de R$ 800. A lógica dele é que o cliente só continua pagando se o site gera resultado, por isso a copy persuasiva importa mais que o visual. O título do vídeo afirma um faturamento de R$ 6.000 em um site criado em 15 minutos, mas esse valor é relato do próprio canal, sem comprovante público.

Trate esses números como experiência de um prestador de serviço específico, não como média de mercado. O que o fluxo comprova de forma reprodutível é apenas o técnico: uma landing page publicada em minutos com ferramentas majoritariamente gratuitas.

Perguntas frequentes

• **Claude Design 2.0 é um produto oficial da Anthropic. É o nome que o canal O Rei dos Sites dá a um fluxo que usa o Claude Code skills personalizadas, o ChatGPT para imagens e a Vercel para hospedagem. A Anthropic documenta o recurso de skills, mas não comercializa um produto chamado Claude Design.

• Preciso pagar para seguir o fluxo? O vídeo usa plano pago do Claude mostra que o essencial é gratuito: a Vercel tem camada gratuita com domínio gratuito, o ChatGPT oferece geração de imagens gratuita e o Visual Studio Code é gratuito. A skill de copy é distribuída pelo próprio canal.

• O site gerado funciona no celular? Sim. No vídeo, a página final aparece responsiva, funcionando em celular e computador. Como o resultado é um HTML standalone, você também pode abrir o arquivo localmente no navegador antes de publicar.

• Dá para usar meu próprio domínio do cliente? Sim. O criador vincula o domínio do cliente na aba Domains do projeto dentro da Vercel, sem precisar conectar um repositório do GitHub para esse caso simples.

• O R$ 6.000 do título é garantia de resultado? Não. O valor é relato do criador sobre um projeto próprio e não há comprovante público. Os números de preço e mensalidade também descrevem o modelo dele, não uma média de mercado.

Source video