Claude Design para WordPress: do artefato ao tema

PrimeiroO que você tem de fato

Que resultado o Claude Design entregou?

O Claude cria dois tipos de resultado, e cada um segue um caminho diferente. Confira qual você tem antes de começar, porque isso decide quanto tempo a conversão leva.

O que o Claude entregou	O que é	Caminho
Artefato HTML	Um arquivo `.html` autossuficiente: o código, os estilos e os scripts estão todos dentro dele.	Este artigo. Já é HTML puro, exatamente a entrada de que o conversor precisa.
Artefato React	Um componente. A página só aparece depois que o JavaScript roda, e o HTML em volta é um elemento vazio onde o app se monta.	O passo a passo do Lovable: o mesmo tipo de entrada, o mesmo passo extra.

Se não tiver certeza, abra o arquivo e olhe dentro do <body>. Se os seus títulos e parágrafos estiverem ali, você tem um artefato HTML e está no lugar certo. Quando o body é um <div> vazio e uma tag de script, você tem o outro tipo.

Por que o HTML é o caso mais fácil

Um projeto React precisa primeiro passar pelo build e depois ser aberto num navegador de verdade antes de haver algo para converter. Um artefato HTML pula esse passo. O código já está escrito no arquivo, e todos os passos seguintes leem dele.

Exporte do Claude Design para uma pasta, com as imagens

A entrada é sempre uma pasta no seu disco. O endereço de um site no ar não é uma entrada aceita, e isso é de propósito. Uma cópia de uma página publicada guarda só o resultado renderizado e perde o que o arquivo-fonte sabe.

Então exporte o design do Claude (baixe o artefato), 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 ao lado dele, nos mesmos caminhos relativos que o código espera.

terminal

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

Uma página ou mais?

Um artefato é uma página, e um site de uma página converte sem problema nenhum. Ele vira a página inicial do tema. Se você quer um site com páginas Sobre e Contato, peça essas também ao Claude e salve cada uma como um arquivo .html próprio na mesma pasta. Os nomes dos arquivos importam: a análise os lê e entende um arquivo chamado blog.html ou about.html pelo nome.

Se você ficar em cinco arquivos ou menos, a conversão inteira cabe na versão gratuita.

O que o seu computador precisa para converter um Claude Design para WordPress

Mesmo o caminho mais curto roda na sua máquina, e os requisitos não diminuem. O navegador e o WordPress temporário estão ali para conferir o resultado, não para produzi-lo:

Node 20 ou mais novo e Python 3 com os pacotes Playwright e Pillow.
Docker com o comando docker compose. Ele inicia um WordPress temporário no seu computador, e o conversor instala o tema ali antes de você ver.
php-cli, porque cada arquivo PHP passa por uma verificação de sintaxe antes de entrar no ZIP.
jq, curl, bash e tar. O WordPress de destino precisa ser a versão 6.6 ou mais nova.

O primeiro passo confere tudo isso. Ele separa o que pode instalar sozinho dentro das suas próprias pastas do que você precisa decidir. Ele não instala o Docker por você, a menos que você peça.

O Docker não é opcional, e é o que mais surpreende

Um conversor no navegador não precisa dele, porque pula esta etapa. Aqui, o tema gerado vai para um WordPress de verdade, e o conversor testa ali antes de você ver. É para isso que serve o contêiner. Se o Docker não estiver rodando, a conversão para logo no primeiro passo e avisa na hora, não no final.

A conversãoDo artefato ao tema

Rode a conversão do Claude Design para WordPress

Claude Code

claude

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

terminal, uma vez

python3 -m playwright install chromium

Codex

terminal

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

Depois, de qualquer lugar, digite:

claude

/html2wp:html2wp

convert ./my-site

O caminho da pasta é a instrução inteira. Você não escreve arquivo de configuração e não escolhe comando de build. No Codex, digite convert ./my-site with html2wp. Se você prefere não trabalhar no terminal, pode abrir a mesma pasta no app html2wp para desktop (um guia com capturas de tela).

O Flash leva cerca de 30 minutos e o Full cerca de uma hora, dependendo do número de páginas e da velocidade do seu computador. Um artefato de uma página fica no lado mais curto, mas as verificações sempre rodam completas, por menor que seja a entrada.

O que ele decide por você, e o que ele pergunta

Antes de gerar qualquer coisa, ele mede os seus arquivos. Ele lista as páginas e descobre quais partes do código são compartilhadas e quais são únicas. Também encontra os design tokens, qualquer coisa com cara de blog e quais páginas são independentes. Depois, registra o que pretende fazer e converte segundo esse plano.

Um design gerado costuma esbarrar em duas coisas:

Toda variante do design é mantida. Se as suas páginas não compartilham o mesmo cabeçalho, ele não escolhe um vencedor nem nivela o resto. Em vez disso, cria uma parte de modelo para cada variante e liga cada página à que ela de fato usava. Artefatos de chats diferentes do Claude costumam diferir mais do que você lembra.
As chaves no seu texto sobrevivem. A etapa intermediária usa um formato parecido com JSX. Sem esse cuidado, um exemplo de JSON ou CSS no seu texto quebraria o build ou apareceria na página como {. O conversor trata disso, e as chaves continuam chaves na página.

Grupos repetidos, por exemplo cards, depoimentos ou um FAQ, são salvos como coleções, e não como markup fixo. Por isso, depois você consegue editá-los de verdade.

A revisão que você não pode pular

O conversor coloca cada página numa imagem ao lado da original, e você lê cada uma de cima a baixo.

Numa conversão, faltava uma seção mais abaixo na página, e a comparação de pixels mostrou só 0,4% de diferença, então ela passou na verificação. Pela própria natureza, as verificações numéricas não enxergam três tipos de defeito. Primeiro, um controle que parece perfeito, mas não faz nada. Segundo, um valor fixado no código a partir da única página de onde veio um modelo. Terceiro, qualquer coisa que só aparece depois de rolar, clicar ou enviar um formulário.

Confira também se dá para editar o conteúdo. Uma página pode bater no pixel e, mesmo assim, ninguém conseguir editar o FAQ ou a grade de recursos dela pelo wp-admin. Isso já aconteceu, e quem pegou foi esta revisão, não uma verificação automática.

DepoisA vida com o tema

Edição depois da conversão do Claude Design para WordPress: tema, Visual Edit ou construtor de páginas

Dois arquivos chegam na sua pasta: o ZIP do tema e, ao lado dele, o CONVERSION-REPORT.md. O relatório lista o que a conversão cobriu, o que a revisão encontrou e o que ainda está pendente. Você instala o tema como qualquer tema WordPress (Aparência → Temas → Adicionar novo tema → Enviar tema).

O tema funciona sozinho. Páginas, blog, formulários, menus, SEO e redirecionamentos são todos código dele. Ele não precisa de plugin para rodar e nunca se comunica com o nosso servidor. Os posts do blog são escritos no editor de blocos, e o texto das páginas fica no HTML. Para editar as páginas sem código, há duas opções: o Visual Edit e um construtor de páginas.

Caminho	O que você ganha	O que isso custa
Só o tema	O seu código, sem mudanças, sem nada instalado por cima. Nada para renovar, nada que quebre com a atualização de outra pessoa.	Sem plugin, o texto das páginas muda no HTML. Se o cliente quiser editar sozinho, o Visual Edit resolve (o Lite é gratuito).
Visual Edit, o nosso plugin	Clique num título na página, digite por cima e salve. Você edita textos, imagens, links, formulários e menus onde eles estão, e o código fica como estava. O Lite é gratuito e não precisa de chave de licença.	Mais um plugin instalado. O Lite guarda 10 passos de histórico e não tem chat com IA. O Pro acrescenta os dois e custa € 59 por ano.
Elementor ou outro construtor de páginas	Um ambiente conhecido para quem já o usa, e um cliente que consegue refazer uma página sem você.	O código é refeito como widgets do construtor. Ele deixa de ser o design que o Claude fez. Aí o site não é exibido sem o Elementor, e você herda a estrutura, o CSS e as atualizações dele.

Um construtor de páginas é uma boa escolha quando o design é só um ponto de partida. É uma má escolha quando o design é o que você entrega. Se você converte para que o design gerado sobreviva no WordPress, refazê-lo como widgets anula o motivo da conversão. Mas se outra pessoa vai refazer o layout no próximo trimestre, a experiência dela com o Elementor pode valer mais do que um design fiel.

Lite ou Pro, se você escolher o Visual Edit

	Lite (grátis)	Pro
Edição de conteúdo por clique	✓	✓
Formulários, menus, campos de SEO	✓	✓
Edição por chat com IA	–	✓, com a sua própria chave de API
Exportação do tema	–	✓
Proteção de formulários com Turnstile	–	✓
Edição de imagens com IA e animações a partir de imagens	–	✓
Histórico de edições	10 passos	300 passos

O chat com IA roda com a sua própria chave de API. Não vendemos tokens, e você acerta o custo deles com o seu provedor.

Preço, e o que a conversão recusa

Grátis para todos, sem chave e sem cadastro: três conversões de cinco páginas cada e cinco reexecuções no total. Os dois números são contados por endereço IP, então um escritório com um endereço recebe uma única cota. A versão gratuita serve para testar a ferramenta, para sites pessoais e para trabalhos não comerciais.

Uma licença Pro remove o limite de páginas e deixa conversões e reexecuções ilimitadas. Ela também libera o passo que transforma uma loja em WooCommerce. Esse passo nunca é gratuito: o app recusa por completo a conversão gratuita de um site com loja, em vez de fazer metade. Você compra o Pro mensal ou anual na página de preços, e durante o beta o primeiro pagamento tem 30% de desconto.

Uma ressalva: isto é um beta. As verificações pegam a maioria das diferenças, não todas. Por isso, ler cada página ao lado da original faz parte do processo e não é um acabamento opcional. É também por isso que vale converter primeiro algo seu de graça, e só depois confiar.

Um guia passo a passo de todo o processo está na documentação do app html2wp. Se o seu artefato é React, o guia Lovable para WordPress descreve esse caminho.