# Como o Claude Design 2.0 cria sites que vendem?

> Published 2026-09-27T14:40:30.089Z on https://www.crazystack.com.br/pt/p/como-o-claude-design-2-0-cria-sites-que-vendem/
> Source video: https://www.youtube.com/watch?v=zTk7wNLNbsI

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](https://www.anthropic.com). Na prática, ele combina o assistente [Claude](https://claude.ai), responsável pela copy e pelo HTML, com o [ChatGPT](https://chatgpt.com) para gerar imagens e a [Vercel](https://vercel.com) 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](https://www.anthropic.com/news/skills) 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](https://dribbble.com), 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](https://chatgpt.com), 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](https://code.claude.com/docs), 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](https://code.visualstudio.com), 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](https://vercel.com) é 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](https://www.youtube.com/watch?v=zTk7wNLNbsI)