Se você mantém uma Conta Oficial do WeChat (ou qualquer publicação em texto rico), já viu layouts que gostaria de reutilizar — um card de seção com título, um bloco de siga-nos, uma citação estilizada, uma divisória. Copiá-los à mão significa vasculhar HTML aninhado, e uma edição errada quebra o SVG inteiro. Esta ferramenta faz a parte tediosa por você: cole um artigo e ela extrai cada bloco estilizado como um módulo independente e reutilizável.
A partir daí você pode trocar as imagens dentro de um bloco (envie uma nova ou cole uma URL), recolori-lo clicando em qualquer cor que ele use, copiar o bloco como HTML inline pronto para colar no editor do WeChat, em um CMS ou em qualquer campo de texto rico — e salvar os que gostar em uma biblioteca local que vive neste navegador. Nada é enviado; seus materiais são seus.
Como tudo roda no lado do cliente com as APIs de Área de Transferência e localStorage, não há conta, nem nuvem, nem backend — a mesma ideia local-first do resto do IMG.DIY.
Como usar
- Cole um artigoCopie um artigo do WeChat (ou qualquer conteúdo rico) e cole na caixa. Você também pode colar o código HTML bruto.
- Extraia os módulosClique em Extrair — cada bloco estilizado aparece como seu próprio card de prévia, isolado para que os estilos da página não interfiram.
- Edite e reutilizeTroque imagens, recolora, então clique em Copiar HTML para colar em outro lugar, ou Salvar na sua biblioteca local para a próxima vez.
Por que extrair módulos de layout em vez de reconstruí-los
Os blocos bonitos dos artigos do WeChat — cartões de seção com título, chamados de 'siga a gente', citações estilizadas, divisores SVG — são quase sempre HTML e SVG inline montados à mão. Reconstruir um do zero significa acertar espaçamentos, cores, gradientes e spans aninhados exatamente, e uma única edição errada quebra o SVG. Extrair o bloco pronto, em vez disso, mantém cada detalhe intacto e o transforma em algo que você reutiliza em segundos.
Esta ferramenta analisa o artigo que você cola e retira cada bloco estilizado como um módulo independente. Você não está raspando uma página inteira em um único bloco; você obtém uma lista organizada de peças individuais e reutilizáveis — exatamente o que você queria ao ver um layout bacana no post de outra pessoa.
Local em primeiro lugar, então os recursos são de fato seus
Editores na nuvem mantêm seus blocos salvos nos servidores deles atrás de uma conta. Aqui a biblioteca vive no seu próprio navegador via localStorage, e você pode exportá-la para um arquivo JSON para fazer backup ou mover entre máquinas. Nada é enviado, não há cadastro, e a análise, a troca de imagens e a recoloração rodam todas no seu dispositivo com as próprias APIs de DOM e Clipboard do navegador.
O ganho prático é uma biblioteca de módulos pessoal e portátil que cresce enquanto você trabalha: cole um artigo, guarde os dois ou três blocos que valem reutilizar, e da próxima vez arraste-os direto de volta como HTML inline.
Para que as pessoas usam
Reutilizar um layout de que você gostou — Viu um cartão com título ou um divisor bacana em outro artigo — extraia-o, recolora-o na sua marca e copie-o para o seu próprio rascunho.
Montar um kit de estilo da casa — Reúna os cabeçalhos de seção, estilos de citação e cartões de 'siga a gente' que você usa em toda edição em uma única biblioteca local.
Trocar as imagens de um bloco-modelo — Guarde um layout de cartão com imagem favorito e apenas substitua a foto a cada vez pelo seu próprio upload.
Recolorir na sua marca — Mude a cor de destaque de um bloco em todo lugar de uma vez em vez de caçar pelos estilos inline.
Mover blocos entre editores — Copie HTML inline que cola com a estilização intacta no editor do WeChat, num CMS ou em qualquer campo de texto rico.
Manter um acervo privado e portátil — Exporte sua biblioteca como JSON para fazer backup ou levá-la a outro navegador — sem conta, sem nuvem.
Os bons blocos de layout estão presos dentro dos artigos dos outros
Quem administra uma Conta Oficial do WeChat coleciona blocos de layout do jeito lento. Você lê um artigo com um belo cartão de título em SVG, um painel arrumado de "siga-nos", um cabeçalho de seção com uma aba colorida na lateral, e pensa: quero essa estrutura. Então você copia o artigo inteiro para o seu editor e passa vinte minutos apagando tudo, exceto o único bloco que queria, rezando para não beliscar um <span> perdido que faça o SVG desmoronar. A tipografia SVG do WeChat é notoriamente frágil — um atributo fora do lugar, uma imagem que você redimensionou no lugar errado, e o cartão renderiza como uma caixa quebrada em metade dos celulares dos leitores. Os blocos que você quer são reais, reutilizáveis e estão bem ali no HTML, mas não há um jeito limpo de tirar um de dentro e ficar com ele.
A outra metade da dor é a propriedade. A resposta óbvia é um editor de modelos como o 秀米 ou o 135编辑器: bibliotecas enormes, arrastar e soltar, genuinamente poderosos. Mas os ativos vivem na nuvem deles, atrás de uma conta, e muitas vezes atrás de um nível de assinatura. Seu kit de estilo cuidadosamente montado não é uma pasta que você possui — é um login que você aluga. Se você quiser entregar um bloco a um colega, ajustar uma cor em todos os cartões de uma vez ou só manter uma biblioteca pessoal dos cinco cabeçalhos que você de fato reutiliza, você está trabalhando dentro do produto de outra pessoa, nos termos dela.
Esta ferramenta faz o oposto. Você cola um artigo (ou qualquer conteúdo formatado, ou HTML bruto) e ela analisa a marcação direto no seu navegador, extraindo cada bloco estilizado reutilizável — cartões de tipografia SVG, cabeçalhos de seção com título, cartões de siga-nos, citações estilizadas, divisórias — como um módulo independente próprio. A partir daí você edita cada um diretamente: troque a imagem dentro de um cartão, recolora, copie como HTML inline limpo pronto para colar no editor do WeChat ou em qualquer caixa de texto formatado, e salve numa biblioteca local que você pode exportar como JSON. Nada é enviado, não há conta e, uma vez que a página tenha carregado, continua funcionando offline. Um limite honesto de antemão: ela não consegue buscar um artigo pela URL — navegadores bloqueiam requisições entre sites para mp.weixin.qq.com, então a entrada é sempre copiar e colar.
O que faz a diferença
- Local em primeiro lugar, nada enviado. A análise acontece no navegador com o
DOMParser. O artigo que você cola nunca sai da sua máquina — sem servidor, sem conta, sem backend. - Extração por módulo. Cada bloco estilizado sai como um módulo separado e autônomo, em vez de uma parede de marcação emaranhada que você tem que podar à mão.
- Troca de imagem, no lugar. Substitua a foto dentro de um cartão enviando uma nova ou colando uma URL de imagem — sem tocar na estrutura SVG ao redor que a torna frágil.
- Recolora tudo de uma vez. Clique em qualquer cor que um módulo usa e mude-a por todo o bloco num só movimento, para que um cartão combine com sua marca sem uma caça a códigos hexadecimais.
- Cópia limpa de HTML inline. Um clique coloca o módulo na sua área de transferência como HTML inline (via a Clipboard API), pronto para colar direto no editor do WeChat, num CMS ou em qualquer campo de texto formatado.
- Uma biblioteca que é sua. Salve módulos no armazenamento local e exporte ou importe a coleção inteira como JSON — um kit de ativos real e portátil, não um login que você aluga.
- Prévias isoladas. Cada módulo renderiza dentro de um Shadow DOM, para que os estilos de um bloco não vazem para outro e a prévia mostre exatamente o que você vai colar.
- Funciona offline depois de carregada. Após a página carregar, nenhuma conexão é necessária para extrair, editar ou copiar.
IMG.DIY versus outras ferramentas de layout
| Extrator de Módulos IMG.DIY | 秀米 (xiumi.us) | 135编辑器 | i排版 | Copiar o HTML à mão | |
|---|---|---|---|---|---|
| Propósito principal | Extrair e possuir blocos reutilizáveis | Editor de modelos completo | Editor de modelos completo | Editor de modelos completo | — |
| Biblioteca de modelos | Nenhuma (você monta a partir do que cola) | Enorme | Enorme | Grande | Nenhuma |
| Precisa de conta | Não | Sim | Sim | Sim | Não |
| Algo enviado | Não | Sim (nuvem) | Sim (nuvem) | Sim (nuvem) | Não |
| Possui os ativos | Sim (JSON local) | Alugado / nuvem | Alugado / nuvem | Alugado / nuvem | Sim, mas manual |
| Troca de imagem por bloco | Sim | Sim (no editor) | Sim (no editor) | Sim (no editor) | Manual |
| Recolorir um bloco inteiro | Sim, um clique | Sim (no editor) | Sim (no editor) | Sim (no editor) | Manual |
| Funciona offline | Sim, depois de carregada | Não | Não | Não | Sim |
| Preço | Grátis | Camada gratuita + paga | Camada gratuita + paga | Camada gratuita + paga | Grátis |
Para ser justo, isto não é um substituto para um editor de modelos, e não finge ser. 秀米, 135编辑器 e i排版 são produtos maduros com bibliotecas enormes de modelos, layout ao vivo com arrastar e soltar e anos de polimento — se você está construindo um artigo rico do zero, é para lá que você vai, e eles merecem sua reputação. O que eles não te dão é uma pasta privada e portátil dos blocos específicos que você reutiliza, editável sem um login e livre de qualquer coisa saindo da sua máquina. Esta ferramenta é um extrator e organizador, não um editor: ela transforma blocos que você admira por aí em módulos que você possui, recolora, troca de imagem e cola onde quiser. Use os grandes editores para compor; use este para guardar as peças.
Por que o IMG.DIY
Extração de blocos
Extrai cards SVG, cabeçalhos, citações e divisórias como módulos independentes.
Troque imagens inline
Substitua qualquer imagem de um bloco pela sua — envio ou URL.
Recolorir com um clique
Clique em qualquer cor que um bloco use e mude em todos os lugares de uma vez.
Copiar HTML inline
Cole direto no editor do WeChat, em um CMS ou em qualquer campo de texto rico.
Biblioteca local
Salve módulos neste navegador e exporte/importe como JSON.
Sem upload
Roda inteiramente no seu navegador — seus materiais nunca saem do seu dispositivo.