Abre un artículo de WeChat bien diseñado y notarás que las partes que lo hacen parecer profesional no son las palabras, son los bloques con estilo. La tarjeta de título con degradado arriba, los pequeños encabezados de sección con una barra de color, la tarjeta de "síguenos" al final, las cajas de cita con esquinas redondeadas. Muchos de esos están construidos como SVG, y el SVG es lo que les permite mantener su forma y color exactos sin importar qué teléfono los renderice.
Aquí está la parte frustrante: cuando encuentras uno que te gusta e intentas reutilizarlo, copiarlo normalmente lo rompe. Pegas en el editor de WeChat y el diseño se colapsa, los colores se aplanan o la mitad del bloque desaparece. Esta guía explica por qué pasa y cómo extraer esos bloques para que se mantengan intactos.
Por qué WeChat se apoya en SVG para el diseño
El editor de WeChat elimina la mayor parte del CSS. No puedes adjuntar una hoja de estilos, y muchos estilos en línea se filtran. Así que los diseñadores encontraron un truco: construir las piezas decorativas como SVG, donde la forma, el degradado y la posición del texto viven todos dentro del marcado SVG. WeChat deja ese marcado prácticamente en paz, así que el bloque se renderiza igual en todas partes.
Por eso también estos bloques son tan reutilizables en principio. Una tarjeta de título SVG es autónoma. No depende de un archivo externo ni de una clase definida en otra parte de la página. En teoría puedes sacarla y soltarla en tu propio artículo. El problema está solo en el sacarla.
Por qué copiar sin más rompe el bloque
Cuando seleccionas un bloque con estilo en una página renderizada y lo copias, normalmente estás capturando la versión renderizada del navegador, no la fuente original. Tres cosas salen mal:
- El marcado envolvente se pierde. El bloque a menudo está dentro de contenedores anidados que llevan el posicionamiento. Captura solo la parte visible y pierde su caja.
- Las piezas codificadas se estropean. El SVG frecuentemente contiene imágenes de fondo o fuentes como datos codificados. Un copiar y pegar por el camino equivocado puede corromper esa cadena.
- No puedes recolorearlo limpiamente. Incluso si sobrevive, los colores están horneados en una docena de sitios del marcado. Cambiar el tema a mano significa rebuscar por código en bruto.
Para reutilizar estos bloques de forma fiable no quieres una captura de pantalla ni la conjetura del portapapeles del navegador. Quieres el marcado real del bloque, sacado como una unidad independiente.
Extraer bloques de la forma fiable
El enfoque limpio es copiar todo el contenido fuente del artículo y dejar que una herramienta lo analice, en lugar de intentar seleccionar a mano un bloque en pantalla. El extractor de módulos de diseño de IMG.DIY hace exactamente esto: pegas el contenido, lee el marcado con el propio analizador DOM del navegador y aísla los bloques con estilo reutilizables —tarjetas tipográficas SVG, encabezados con título, tarjetas de síguenos, citas con estilo, separadores—, cada uno como un módulo independiente.
Una advertencia importante, dicha con claridad: la herramienta no puede obtener un artículo por su URL. Los navegadores bloquean las descargas entre sitios de mp.weixin.qq.com, así que ninguna herramienta de navegador puede bajar una página de WeChat por enlace. Tú copias el contenido y lo pegas. Eso no es tanto una limitación que sortear como el funcionamiento del modelo de seguridad de la web.
Como cada bloque se aísla y se previsualiza en su propio entorno aislado de Shadow DOM, los estilos de un módulo no pueden filtrarse a otro. Lo que ves en la vista previa es lo que ese bloque de verdad es.
Recolorear sin tocar código
Una vez que un bloque está extraído, el problema del color que mencioné antes se resuelve por ti. Haz clic en cualquier color de un módulo y cámbialo, y el mismo color se actualiza en todos los lugares donde aparece en ese bloque. Así una tarjeta de título azul se convierte en el verde de tu marca de un solo movimiento, en lugar de que edites seis valores hexadecimales enterrados en SVG. También puedes cambiar las imágenes de marcador de posición dentro de un módulo por las tuyas.
Aquí es donde "reutilizar" deja de ser teórico. Un bloque que te gustó del artículo de otra persona se convierte en un bloque de tu paleta, en tus colores, listo para soltar en tu próxima pieza.
Construir tu propia biblioteca de módulos
La verdadera recompensa es hacer esto unas cuantas veces y conservar lo que extraes. Cada módulo que te guste puede guardarse en una biblioteca local que vive en tu navegador (mediante localStorage), y puedes exportar toda la biblioteca a un archivo JSON para respaldarla o llevarla a otra máquina. Nada se sube y no hay cuenta: la biblioteca es tuya, en tu dispositivo.
En unas semanas construyes un kit personal: un par de tarjetas de título, un encabezado de sección de confianza, una tarjeta de pie, un separador o dos. Cuando llega el momento de maquetar un artículo nuevo, tiras de tu propio conjunto en lugar de rebuscar de nuevo entre las publicaciones de otros. Para meter un bloque con estilo en el editor, lo copias como HTML en línea y lo pegas: el bloque conserva su formato porque el estilo viaja con el marcado.
Empieza con un bloque que siempre te haya gustado, extráelo limpiamente, recolorealo con tu marca y guárdalo. Ese es todo el ciclo, y se acumula.