La IA genera HTML muy bien, pero su resultado por defecto suele estar optimizado para «se ve bien en un navegador», no para «se convierte limpiamente en un constructor de páginas». Son objetivos distintos. Unas pocas restricciones en tu prompt cierran casi toda esa distancia.
Por qué el resultado por defecto se convierte mal
Si lo dejas a su aire, un modelo tiende a producir marcado con clases utilitarias y un envoltorio para cada cosa: un div para la sección, otro para el contenedor, otro para la fila, otro para la columna y otro para la tarjeta. Cada uno de ellos se convierte en un Contenedor tras la conversión. La página se ve bien, pero en el editor tienes que atravesar cinco niveles antes de llegar a un encabezado.
También recurre a SVG en línea para los iconos, que no pueden entrar en la biblioteca de iconos de Elementor, y a veces a un framework CSS externo, que no estará presente cuando se convierta el archivo, de modo que acabas convirtiendo una página sin estilos.
Regla 1: pide HTML semántico
Dile al modelo que use etiquetas reales: de <h1> a <h3> para los encabezados, <p> para el texto, <button> o un enlace con la clase button para las llamadas a la acción y <ul> para las listas. Las etiquetas nativas se asignan a widgets nativos sin ambigüedad. Un encabezado simulado con un div con estilos todavía puede detectarse, pero ¿por qué dejarlo a la deducción?
Regla 2: limita el anidamiento de forma explícita
Añade algo como: «Mantén el DOM poco profundo: un envoltorio por sección, sin anidamiento redundante.» Esta sola instrucción es la que más influye en lo cómodo que resulta editar el resultado. Los envoltorios que no llevan ningún estilo se fusionan automáticamente durante la conversión, pero cualquier envoltorio con padding o fondo se conserva, porque quitarlo cambiaría el diseño.
Regla 3: CSS autocontenido
Pide estilos en línea o un único bloque <style> en lugar de un framework. La conversión lee los estilos que el navegador ha calculado realmente, así que si la hoja de estilos de un framework nunca se carga, no hay nada que leer. Un CSS autocontenido también significa que el archivo que guardas es el archivo que conviertes, sin dependencias ocultas.
Regla 4: clases de Font Awesome, nunca SVG en línea
Solo los iconos basados en clases pueden convertirse en iconos editables de Elementor. Pide un marcado del estilo <i class="fas fa-check">. Un SVG en línea que dependía del CSS de la página para su tamaño y su trazo también pierde ese estilo al sacarlo de la página; así es como las pequeñas marcas de verificación acaban convertidas en formas oscuras desproporcionadas.
Regla 5: sé explícito con las imágenes
Un modelo no puede incrustar fotografías reales. Si no dices nada, puede que obtengas marcadores de posición en Base64 o rutas de archivo inventadas, y ninguno de los dos puede convertirse en un adjunto de la Biblioteca de medios. O bien proporcionas URL de imágenes reales en el prompt, o bien pides etiquetas <img> simples con un texto alt descriptivo y aceptas marcadores vacíos: el texto alternativo se conserva como leyenda de cada hueco, así sabes qué va en cada sitio.
Regla 6: usa gap, no márgenes en cada hijo
Pide el espaciado mediante gap en los elementos padre flex y grid. Un gap se convierte en un único control de Elementor; los márgenes en cada hijo se convierten en ajustes por widget que tienes que modificar uno a uno.
Un prompt inicial
«Genera una sección HTML responsive para [tema]. Usa etiquetas semánticas (h2, p, button, ul). Mantén el DOM poco profundo: un envoltorio por bloque, sin anidamiento redundante. Pon todo el CSS en un único bloque style. Usa gap para el espaciado en lugar de márgenes en los hijos. Usa clases de iconos de Font Awesome para los iconos (como <i class=»fas fa-check»>), nunca SVG en línea ni Base64. Usa etiquetas img simples con texto alt descriptivo. Sin scripts, frameworks ni fuentes externos.»
Verifica y luego afina el prompt
Pega el resultado en el convertidor, cambia al modo de componentes nativos y abre el mapa de estructura. Buscas dos cifras: una profundidad máx. de anidamiento baja y filas de conversión directa en su mayoría verdes.
Si la profundidad sigue siendo alta, el modelo ha ignorado la regla de anidamiento: repítela con más firmeza o pídele que vuelva a generar la sección con menos envoltorios. Si ves filas rojas, mira qué son; normalmente se trata de un SVG en línea o de un widget incrustado que hay que sustituir en el código fuente. Corregir el prompt y volver a generar casi siempre es más rápido que reparar a mano el resultado convertido, y además mejora todas las generaciones futuras.