La IA en MarkupGen: de generar código a puntuar el resultado

La IA en MarkupGen no es una única función: atraviesa las tres etapas del flujo de trabajo —construir código a partir de un diseño, evaluar la calidad de ese resultado y sugerir cómo mejorarlo cuando no encaja del todo—. Este artículo repasa cada una de esas capas, y por qué están pensadas para apoyar el criterio de un desarrollador en lugar de sustituirlo.

Construir código a partir de la estructura del diseño

En la primera etapa, la IA no "redibuja" el diseño a partir de una captura de pantalla: lee la estructura real que envía el plugin de Figma —Auto Layout, espaciado, jerarquía de capas, restricciones de redimensionado—. A partir de ahí, genera HTML/CSS que sigue esa estructura directamente, en lugar de adivinar píxel a píxel:

• Las propiedades de Auto Layout (dirección, gap, padding, alineación) se traducen en reglas CSS Flexbox equivalentes.
• Las restricciones de redimensionado del layout se traducen en breakpoints responsivos, en lugar de una única página de ancho fijo.
• El resultado prioriza elementos HTML con significado en lugar de <div> profundamente anidados y sin etiquetar.

Construir a partir de la estructura, en vez de adivinar desde una imagen, es lo que hace que el resultado conserve la jerarquía y el espaciado del diseño original, en lugar de algo que simplemente "parece correcto" mientras el CSS subyacente es completamente distinto.

Elegir el modelo de IA adecuado para cada tarea

MarkupGen te permite elegir entre distintos modelos de IA allí donde esa elección importa, por ejemplo, al regenerar código después de una evaluación. Hay dos niveles: un modelo rápido y eficiente en coste, adecuado para diseños pequeños o medianos, y un modelo de mayor calidad, pensado para diseños más grandes con componentes más complejos. En las cuentas que no eligen un modelo manualmente, el sistema selecciona automáticamente el más adecuado según el plan actual, equilibrando velocidad y coste sin necesidad de configuración.

Puntuación automática de la calidad del resultado

Una vez generado el código, la IA compara una captura de la vista previa en vivo con el diseño original y puntúa el parecido en una escala del 1 al 10. No es un número abstracto: viene acompañado de una evaluación detallada de qué coincide y qué no, así sabes de inmediato si una exportación está lista para producción o todavía necesita trabajo. Cuando la puntuación supera un umbral casi perfecto, el sistema entiende que ya no queda nada significativo por corregir y oculta las sugerencias de regeneración innecesarias.

El ciclo de retroalimentación: analizar y regenerar

Si una exportación se queda corta, MarkupGen no se limita a darte un número y parar ahí. La vista de evaluación compara el diseño original y la vista previa en vivo lado a lado, con zoom para inspeccionar el detalle, genera una sugerencia de mejora específica y te permite editar esa sugerencia antes de pulsar "Regenerar con este cambio", de modo que la IA reconstruye el código en torno al feedback que realmente quieres, en lugar de empezar de cero al azar.

Por qué esto importa

Las tres capas apuntan al mismo objetivo: eliminar la traducción mecánica de diseño a código para que el esfuerzo del desarrollador se dedique a lo que realmente necesita criterio humano —detalles de interacción, casos límite e integración del resultado en una base de código más amplia—. Si quieres ver las tres capas funcionando sobre tu propio diseño, puedes probarlo gratis.