Exportar o Claude Design para um tema WordPress no app html2wp
Você pode transformar um design do Claude Design em WordPress no app html2wp, sem terminal. Para exportar do Claude Design, você salva o design como HTML. Depois adiciona ao app, escolhe Flash ou Full e, no final, baixa um tema WordPress com a cara do seu design.
O que você precisa para converter o Claude Design em WordPress no app
- Um Mac com Apple silicon (M1 ou mais novo) e macOS 12 ou posterior.
- Uma conta do ChatGPT. A IA da sua própria assinatura faz a conversão, então você não nos paga por créditos.
- A exportação do Claude Design: o design salvo como arquivo HTML. Se você tem várias páginas, salve cada uma num arquivo separado.
O HTML do Claude é o caminho mais curto até um tema, porque o app não precisa gerar o build nem abrir num navegador antes. A versão gratuita converte três sites de até cinco páginas cada. Para trabalho com clientes, você precisa de uma licença Pro da página de preços.
Instalação, ambiente e login
Baixe o app para Mac e mova para a pasta Aplicativos. Em Settings (configurações), clique em Prepare environment (preparar o ambiente), e o app baixa o Docker e o ambiente de conversão. Depois, faça login com Connect with ChatGPT (conectar com o ChatGPT). O guia do Lovable para o app cobre cada um desses passos em detalhe, com capturas de tela, e para o Claude eles são iguais.
A exportação do Claude Design no app
Para exportar do Claude Design, baixe o artefato no Claude como arquivo .html. Crie uma pasta e salve o arquivo nela como index.html. Se o design aponta para imagens que não estão dentro do arquivo, coloque-as na mesma pasta, nos lugares que o código espera. Outras páginas, como Sobre ou Contato, ficam ao lado como about.html e contact.html. O app descobre pelo nome do arquivo qual página é qual.
No app, clique em New project (novo projeto, ⌘N), mantenha HTML WordPress theme como saída e escolha Choose a folder (escolher uma pasta). Se você compactou a pasta, use Import a ZIP (importar um ZIP).
Flash ou Full para o tema WordPress
O Flash é o padrão: cada etapa roda uma vez, e leva cerca de meia hora. O Full roda todas as verificações e tenta corrigir os erros, então leva cerca de uma hora. Um design de uma página costuma ficar no lado mais curto, mas as verificações rodam completas mesmo assim.
Durante a conversão, a aba Overview (visão geral) mostra o que o app está fazendo. Para pausar, clique em Stop conversion (parar a conversão) e depois retome com Continue (continuar).
Conferir o design no app
A aba Compare (comparar) mostra o original e a versão WordPress lado a lado, na largura de desktop e de celular. Olhe cada página, porque as verificações automáticas pegam a maioria das diferenças, mas não todas. Se algo não bater, escreva no chat. A mudança acontece na pré-visualização, e depois Make release (criar versão) empacota uma nova versão do tema.
Exportar o tema do Claude Design para o WordPress
Na aba Exports (exportações), clique em Save (salvar) ao lado do tema WordPress e guarde o ZIP. No WordPress, você envia o tema em Aparência → Temas → Adicionar novo tema → Enviar tema. O tema funciona sozinho: páginas, formulários, menus e SEO funcionam sem plugin.
Com o editor Visual Edit, o seu cliente ganha a edição por clique. Se você trabalha no terminal, o guia com o plugin para Claude Code e Codex cobre a mesma conversão.