Las landing pages generadas con IA suelen estar listas en un 90 % en pocos minutos. La estructura funciona, la tipografía tiene buen aspecto y el mensaje principal ya está aprobado. El problema aparece en el último tramo: un titular demasiado genérico, un párrafo de valor que necesita más precisión o un CTA que no conduce a la acción real que quieres conseguir.
Ahí aparece la trampa de la regeneración por prompt. Un mensaje amplio como «haz el titular más convincente y cambia el CTA» puede obligar al modelo a devolver todo el documento HTML. En el proceso puede cambiar estilos aprobados, clases responsive, colores de marca o detalles del layout. Un ajuste de cinco minutos acaba convertido en una hora de revisión.
La refinación de IA con alcance controlado establece un límite de autorización visual: marcas los elementos exactos que pueden cambiar, explicas la modificación y dejas el resto del marcado fuera del contexto de mutación. Esta guía muestra el método con una landing page de onboarding de clientes de RelayGrid, desde el primer borrador hasta una página lista para revisión final.
Por qué la regeneración completa falla al final
Cuando una herramienta generativa o de vibe coding reescribe toda la página para un cambio local, suelen aparecer tres fallos:
- Deriva de estilos y clases: pueden cambiar utilidades de Tailwind, CSS inline o anchos de contenedor, afectando al responsive o al grid.
- Cambios de contenido no deseados: enlaces del footer, testimonios o microcopy fuera del foco pueden modificarse o desaparecer.
- Deuda de revisión: en lugar de comprobar un titular, el equipo debe auditar toda la página después de cada prompt.
La respuesta es la autorización por alcance: limitar la operación a nodos DOM designados y proteger el resto del árbol del documento.
Matriz de alcance: qué seleccionar y qué proteger
La refinación específica no exige que todas las peticiones sean pequeñas; exige que el límite de selección coincida con la intención.
| Objetivo | Seleccionar | Proteger |
|---|---|---|
| Precisar la propuesta de valor | Titular principal y subtítulo del hero | Navegación, mockup del producto, badges y fondo |
| Cambiar la acción de conversión | El botón CTA principal | Botones secundarios, enlaces y señales de confianza |
| Localizar o rediseñar una sección | El contenedor completo de esa sección | Secciones vecinas, header y footer globales |
Con esta separación, cada iteración tiene un radio de cambio claro y auditable.
Flujo de refinación específica en cinco etapas
En el ejemplo de RelayGrid, el objetivo es convertir un hero genérico en una propuesta B2B más clara sin tocar su layout, la ilustración del producto ni la prueba social.
Etapa 1: establecer una base HTML estable
Empieza con el HTML existente, no con otro prompt desde cero. En HtmlDrag, AI Refinement permite subir un archivo, pegar código o importar una URL. Un HTML independiente fija las hojas de estilo, las clases y la jerarquía DOM como base determinista.
Figura 1: Importar el HTML existente establece una base estable para cambios acotados.
Cuando se renderice el canvas, haz una revisión estructural: identifica qué bloques de texto no cumplen el objetivo y qué recursos visuales ya están listos.
Figura 2: La inspección muestra que el layout y la tarjeta de producto funcionan, mientras el titular y el CTA necesitan más enfoque.
Etapa 2: aislar el objetivo con precisión
En lugar de escribir «actualiza el hero», selecciona cada elemento. En este caso se crean tres marcas numeradas:
- Marca 1: el titular
<h1>(«Customer onboarding, made simpler.»). - Marca 2: el párrafo explicativo inferior.
- Marca 3: el botón principal («See the platform»).
El dashboard del producto, la etiqueta superior, el botón secundario y los logos de clientes quedan sin marcar y, por tanto, fuera del contexto de cambio.
Figura 3: Las marcas visuales vinculan cada nodo DOM con una instrucción concreta.
Etapa 3: usar un prompt con dos restricciones
Un prompt profesional combina la modificación explícita con una cláusula de protección explícita. Relaciona cada número con un resultado y prohíbe cambios en el código no marcado.
1. Replace the headline with: Turn every customer handoff into faster first value.
2. Replace the supporting paragraph with: Give your B2B onboarding team one shared plan for owners, milestones, and blockers—so customers reach first value with less chasing.
3. Change the primary CTA label to: Book an onboarding walkthrough. Change its background color to #153852. Keep its white text, current padding, rounded shape, and placement.
Guard Clause: Do not change any unmarked content, layout, product preview, navigation, customer proof, or other buttons.
Figura 4: La instrucción vincula las marcas a cambios de copy y estilo y congela las áreas no seleccionadas.
Al recibir el resultado, valida una sola cosa: ¿se actualizaron los nodos seleccionados y se mantuvieron intactos los nodos protegidos?
Figura 5: El nuevo mensaje y el color del CTA aparecen dentro de la estructura preservada.
Etapa 4: hacer rondas cada vez más pequeñas
La mejora no tiene que quedar perfecta en un solo prompt enorme. En una iteración decreciente, cada solicitud posterior cubre menos elementos.
En la segunda ronda solo se marca el párrafo actualizado y se pide acortarlo, conservando tamaño, color, ancho y posición.
Figura 6: La segunda micro-ronda se concentra únicamente en condensar el párrafo.
El resultado es «One shared onboarding plan for every owner, milestone, and blocker.» Al reducir el alcance a un elemento, disminuye el riesgo de daños colaterales en el layout.
Figura 7: El microajuste concisa el copy sin alterar titular, CTA ni jerarquía visual.
Etapa 5: transformar bloques completos y respetar la cola asíncrona
Cuando varios nodos hijos deben cambiar juntos, conviene marcar el contenedor completo como una unidad semántica. Así la IA puede mantener la coherencia entre el titular, la descripción y el botón.
La selección por elemento funciona para microcopy, pero una traducción o un cambio de campaña puede necesitar que titular, descripción y botón se adapten juntos. En ese caso, selecciona conscientemente el contenedor completo de la sección.
Figura 8: Seleccionar una sección completa tiene sentido cuando todos sus elementos deben adaptarse como una unidad.
Las transformaciones de varios nodos pueden entrar en una cola gestionada. «Waiting for an available AI slot» indica que el trabajo está esperando ejecución. No lo presentes como un resultado terminado: valida solo cuando el render final sea visible.
Figura 9: El estado de espera describe una tarea activa, no contenido traducido ya visible.
El puente híbrido: del prompt al editor visual
Para ajustes de píxel y pequeños detalles, el lenguaje natural es menos predecible: una instrucción como «mueve este botón cuatro píxeles hacia abajo» se valida mejor directamente en el editor visual.
La IA destaca en transformación semántica y reorganización de contenido. Para ajustes de píxel, como mover un botón cuatro píxeles, el lenguaje natural es menos predecible.
Un flujo híbrido usa la refinación de IA para el trabajo semántico y después pasa al editor visual. En HtmlDrag, Open in Editor permite terminar manualmente:
- Insertar elementos y componentes: añadir contenedores, badges, iconos o tarjetas.
- Insertar y editar tablas: crear matrices de comparación o precios sin escribir todo el marcado.
- Bloquear elementos: proteger secciones aprobadas y activos de marca.
- Eliminar y limpiar: quitar placeholders o bloques obsoletos.
- Gestionar enlaces y destinos: añadir URLs de seguimiento, anclas y destinos externos.
- Versiones y exportación limpia: guardar snapshots y exportar HTML revisado.
Figura 10: El editor visual permite ajustes directos, inserción de componentes y exportaciones versionadas.
Patrones de prompt para refinar HTML
Para ejecutar cambios controlados, estructura tus prompts con estos patrones probados y aumenta la precisión de cada iteración.
| Objetivo | Patrón |
|---|---|
| Propuesta de valor | Update only marked element [1]. Rewrite the heading to focus on [business value]. Keep typography and responsive sizing intact. Do not touch unmarked elements. |
| Cambiar CTA | Update only marked button [2]. Change the label to [new action]. Update the background to [hex color] while preserving radius, padding, and position. Guard adjacent links. |
| Acortar copy | Update only marked paragraph [1]. Shorten it to under 15 words about [key benefit]. Maintain line-height, color, and alignment. Do not alter surrounding containers. |
Checklist antes de enviar
- Fija la base: carga el HTML completo y sus dependencias estables.
- Usa el alcance mínimo: marca solo los nodos DOM que deben cambiar.
- Relaciona números: asigna una instrucción a cada elemento marcado.
- Añade una protección: indica que el contenido y layout no marcados no deben tocarse.
- Itera a la baja: haz las siguientes rondas más pequeñas.
- Pasa al editor visual: úsalo para tablas, enlaces y ajustes deterministas.
- Compara antes de exportar: revisa las zonas no marcadas frente a la base original.
Preguntas frecuentes
¿Por qué la regeneración de toda la página provoca regresiones de estilo?
Los modelos de lenguaje generan el texto token a token. Al volver a emitir cientos de líneas de HTML para cambiar una frase, pueden sustituir clases, omitir puntos de ruptura responsive o reordenar nodos DOM y causar regresiones visuales.
¿El refinamiento dirigido permite editar Tailwind CSS y estilos inline?
Sí. Como trabaja dentro de un contexto DOM acotado, la IA interpreta las clases o estilos inline del nodo seleccionado y aplica el cambio local sin tocar las hojas CSS globales.
¿Qué ventaja ofrecen los marcadores visuales frente a describir un elemento con texto?
Una frase como «el segundo botón bajo el título» puede ser ambigua. El marcador visual se vincula directamente con el elemento DOM correcto y evita que el modelo tenga que adivinar.
¿Cuándo conviene pasar del refinamiento de IA al editor visual?
Usa la IA para redactar contenido, cambiar el mensaje, ajustar el tono o reestructurar texto. Pasa al editor visual para alinear elementos, formatear tablas, bloquear componentes sensibles, insertar enlaces y exportar HTML limpio.
Conclusión: deja de reescribir y empieza a refinar
Una landing page generada con IA que ya funciona no necesita reconstruirse cada vez que cambia un mensaje. Importa el HTML existente, marca los nodos correctos, define el límite, revisa el resultado y solo después decide si hace falta otra ronda. Si debe cambiar un bloque completo, amplía la selección de forma deliberada.
Así la refinación es revisable y el editor visual conserva la decisión humana final. Con HtmlDrag puedes completar esa última milla sin reescribir el resto de la página.