Si llevas una Cuenta Oficial de WeChat (o cualquier publicación con texto enriquecido), habrás visto maquetaciones que ojalá pudieras reutilizar: una tarjeta de sección con título, un bloque de "síguenos", una cita con estilo, un separador. Copiarlas a mano implica bucear entre HTML anidado, y una sola edición equivocada rompe todo el SVG. Esta herramienta hace la parte tediosa por ti: pega un artículo y extrae cada bloque con estilo como un módulo independiente y reutilizable.
A partir de ahí puedes cambiar las imágenes dentro de un bloque (sube una nueva o pega una URL), recolorearlo haciendo clic en cualquier color que use, copiar el bloque como HTML en línea listo para pegar en el editor de WeChat, un CMS o cualquier caja de texto enriquecido, y guardar los que te gusten en una biblioteca local que vive en este navegador. No se sube nada; tus materiales son tuyos.
Como todo se ejecuta en el lado del cliente con las API de Clipboard y localStorage, no hay cuenta, ni nube, ni backend: la misma idea local-first que hay detrás del resto de IMG.DIY.
Cómo se usa
- Pega un artículoCopia un artículo de WeChat (o cualquier contenido enriquecido) y pégalo en la caja. También puedes pegar el HTML fuente en bruto.
- Extrae los módulosHaz clic en Extraer: cada bloque con estilo aparece como su propia tarjeta de vista previa, aislado para que los estilos de la página no interfieran.
- Edita y reutilizaCambia imágenes, recolorea y luego Copia HTML para pegar en otro sitio, o Guarda en tu biblioteca local para la próxima vez.
Por qué extraer módulos de maquetación en lugar de reconstruirlos
Los bloques atractivos de los artículos de WeChat —tarjetas de sección con título, avisos de "síguenos", citas con estilo, separadores SVG— casi siempre son HTML y SVG en línea ensamblados a mano. Reconstruir uno desde cero significa igualar exactamente el relleno, los colores, los degradados y los spans anidados, y una sola edición equivocada colapsa el SVG. Extraer en su lugar el bloque terminado mantiene cada detalle intacto y lo convierte en algo que puedes reutilizar en segundos.
Esta herramienta analiza el artículo que pegas y saca cada bloque con estilo como un módulo independiente. No estás raspando una página entera en un solo bloque; obtienes una lista ordenada de piezas individuales y reutilizables, exactamente lo que querías cuando viste una maquetación bonita en la publicación de otra persona.
Local primero, así que los recursos son de verdad tuyos
Los editores en la nube guardan tus bloques en sus servidores tras una cuenta. Aquí la biblioteca vive en tu propio navegador mediante localStorage, y puedes exportarla a un archivo JSON para respaldarla o moverla entre máquinas. No se sube nada, no hay registro, y el análisis, el intercambio de imágenes y el recoloreado se ejecutan todos en tu dispositivo con las propias APIs de DOM y Clipboard del navegador.
La ventaja práctica es una biblioteca de módulos personal y portátil que crece a medida que trabajas: pega un artículo, quédate con los dos o tres bloques que merece la pena reutilizar, y la próxima vez arrástralos de vuelta directamente como HTML en línea.
Para qué la usa la gente
Reutilizar una maquetación que te gustó — ¿Ves una tarjeta con título o un separador bonito en otro artículo? Extráelo, recolóralo a tu marca y cópialo en tu propio borrador.
Construir un kit de estilo propio — Reúne los encabezados de sección, los estilos de cita y las tarjetas de "síguenos" que usas cada número en una sola biblioteca local.
Cambiar las imágenes de un bloque plantilla — Conserva una maquetación de tarjeta con imagen favorita y solo reemplaza la foto cada vez con tu propia subida.
Recolorear a tu marca — Cambia el color de acento de un bloque en todas partes de una vez en lugar de rastrear los estilos en línea.
Mover bloques entre editores — Copia HTML en línea que se pega con el estilo intacto en el editor de WeChat, un CMS o cualquier caja de texto enriquecido.
Mantener un archivo privado y portátil — Exporta tu biblioteca como JSON para respaldarla o llevarla a otro navegador, sin cuenta, sin nube.
Los buenos bloques de maquetación están atrapados dentro de los artículos de otros
Cualquiera que lleve una Cuenta Oficial de WeChat colecciona bloques de maquetación por la vía lenta. Lees un artículo con una preciosa tarjeta de título SVG, un panel ordenado de "síguenos", un encabezado de sección con una pestaña de color al costado, y piensas: quiero esa estructura. Así que copias el artículo entero en tu editor y luego te pasas veinte minutos borrando todo salvo el único bloque que querías, rogando no cortar un <span> perdido que haga colapsar el SVG. La tipografía SVG de WeChat es célebremente frágil: un atributo mal colocado, una imagen que redimensionaste en el sitio equivocado, y la tarjeta se renderiza como un recuadro roto en la mitad de los móviles de tus lectores. Los bloques que quieres son reales, reutilizables y están ahí mismo en el HTML, pero no hay una forma limpia de sacar uno y conservarlo.
La otra mitad del dolor es la propiedad. La respuesta obvia es un editor de plantillas como 秀米 o 135编辑器: bibliotecas enormes, arrastrar y soltar, realmente potentes. Pero los recursos viven en su nube, detrás de una cuenta, y a menudo detrás de un nivel de membresía. Tu kit de estilos cuidadosamente montado no es una carpeta que posees: es un inicio de sesión que alquilas. Si quieres pasar un bloque a un compañero, ajustar un color en todas las tarjetas a la vez, o simplemente mantener una biblioteca personal de los cinco encabezados que de verdad reutilizas, estás trabajando dentro del producto de otro y en sus términos.
Esta herramienta adopta el enfoque opuesto. Pegas un artículo (o cualquier contenido enriquecido, o HTML en bruto) y analiza el marcado directamente en tu navegador, extrayendo cada bloque estilizado reutilizable —tarjetas de tipografía SVG, encabezados de sección con título, tarjetas de "síguenos", citas estilizadas, separadores— como su propio módulo independiente. A partir de ahí editas cada uno directamente: cambias la imagen dentro de una tarjeta, la recoloreas, la copias como HTML en línea limpio listo para pegar en el editor de WeChat o cualquier caja de texto enriquecido, y la guardas en una biblioteca local que puedes exportar como JSON. No se sube nada, no hay cuenta, y una vez cargada la página sigue funcionando sin conexión. Un límite honesto de entrada: no puede descargar un artículo por su URL —los navegadores bloquean las peticiones entre sitios a mp.weixin.qq.com—, así que la entrada es siempre copiar y pegar.
Qué lo hace diferente
- Local primero, no se sube nada. El análisis ocurre en el navegador con
DOMParser. El artículo que pegas nunca sale de tu máquina: sin servidor, sin cuenta, sin backend. - Extracción por módulo. Cada bloque estilizado sale como un módulo separado y autónomo en lugar de un muro de marcado enredado que tienes que podar a mano.
- Cambio de imagen, en su sitio. Sustituye la foto dentro de una tarjeta subiendo una nueva o pegando una URL de imagen, sin tocar la estructura SVG circundante que la vuelve frágil.
- Recolorear todo a la vez. Haz clic en cualquier color que use un módulo y cámbialo en todo el bloque de un movimiento, para que una tarjeta cuadre con tu marca sin buscar entre códigos hex.
- Copia de HTML en línea limpio. Un clic pone el módulo en tu portapapeles como HTML en línea (vía la Clipboard API), listo para pegar directamente en el editor de WeChat, un CMS o cualquier campo de texto enriquecido.
- Una biblioteca que posees. Guarda módulos en el almacenamiento local y exporta o importa toda la colección como JSON: un kit de recursos real y portátil, no un inicio de sesión que alquilas.
- Vistas previas aisladas. Cada módulo se renderiza dentro de Shadow DOM, así que los estilos de un bloque no pueden filtrarse a otro y la vista previa te muestra exactamente lo que vas a pegar.
- Funciona sin conexión una vez cargado. Tras cargar la página, no hace falta conexión para extraer, editar o copiar.
IMG.DIY frente a otras herramientas de maquetación
| IMG.DIY Extractor de Módulos | 秀米 (xiumi.us) | 135编辑器 | i排版 | Copiar el HTML a mano | |
|---|---|---|---|---|---|
| Propósito principal | Extraer y poseer bloques reutilizables | Editor de plantillas completo | Editor de plantillas completo | Editor de plantillas completo | — |
| Biblioteca de plantillas | Ninguna (construyes con lo que pegas) | Enorme | Enorme | Grande | Ninguna |
| Requiere cuenta | No | Sí | Sí | Sí | No |
| Se sube algo | No | Sí (nube) | Sí (nube) | Sí (nube) | No |
| Posees los recursos | Sí (JSON local) | Alquilado / nube | Alquilado / nube | Alquilado / nube | Sí, pero manual |
| Cambio de imagen por bloque | Sí | Sí (en el editor) | Sí (en el editor) | Sí (en el editor) | Manual |
| Recolorear un bloque entero | Sí, un clic | Sí (en el editor) | Sí (en el editor) | Sí (en el editor) | Manual |
| Funciona sin conexión | Sí, una vez cargado | No | No | No | Sí |
| Precio | Gratis | Nivel gratis + de pago | Nivel gratis + de pago | Nivel gratis + de pago | Gratis |
Para ser justos, esto no es un reemplazo de un editor de plantillas, y no pretende serlo. 秀米, 135编辑器 e i排版 son productos maduros con bibliotecas enormes de plantillas, maquetación en vivo de arrastrar y soltar, y años de pulido: si construyes un artículo rico desde cero, ahí es donde vas, y se ganan su reputación. Lo que no te dan es una carpeta privada y portátil de los bloques concretos que reutilizas, editable sin inicio de sesión y libre de que nada salga de tu máquina. Esta herramienta es un extractor y organizador, no un editor: convierte los bloques que admiras por ahí en módulos que posees, recoloreas, reilustras y pegas donde quieras. Usa los grandes editores para componer; usa este para conservar las piezas.
Por qué IMG.DIY
Extracción de bloques
Extrae tarjetas SVG, cabeceras, citas y separadores como módulos independientes.
Cambia imágenes en línea
Reemplaza cualquier imagen de un bloque por la tuya: subida o URL.
Recolorea con un clic
Haz clic en cualquier color que use un bloque y cámbialo en todas partes a la vez.
Copia HTML en línea
Pega directamente en el editor de WeChat, un CMS o cualquier caja de texto enriquecido.
Biblioteca local
Guarda módulos en este navegador y expórtalos/impórtalos como JSON.
Sin subidas
Se ejecuta por completo en tu navegador: tus materiales nunca salen de tu dispositivo.