Applitools convierte los diseños de Figma en el árbitro que detecta cuándo la IA construye mal una interfaz

Las herramientas de codificación con IA —Claude Code, Cursor, GitHub Copilot, Codex y otras— se han vuelto muy rápidas generando interfaces a partir de un simple prompt. El problema, según explica el artículo, no es que fallen técnicamente, sino que lo que producen no siempre coincide con el diseño que se aprobó. Un botón puede funcionar perfectamente y estar colocado donde el diseñador nunca lo puso. Un titular puede ajustarse de otra forma. Una tarjeta puede quedar demasiado ancha. Un layout responsive puede romperse en un viewport concreto. Nada de esto significa que el código esté roto: significa que la implementación se ha desviado del diseño original, un fenómeno que el artículo denomina 'visual drift'.

Para atajar exactamente ese problema, Applitools ha lanzado una integración llamada Figma Design Baselines. La idea es sencilla: el desarrollador aporta la URL de un frame de Figma y esa pieza se convierte automáticamente en la línea base visual contra la que se compara la interfaz ya construida. Applitools ajusta automáticamente el viewport de la prueba a las dimensiones del frame original y aplica su sistema de comparación Visual AI para detectar cualquier diferencia entre lo diseñado y lo finalmente implementado. Según el artículo, todo esto ocurre sin necesidad de un plugin de Figma, sin exportar capturas de pantalla a mano y sin subir imágenes de referencia por separado, lo que ahorra el tedioso proceso de tener Figma en una ventana y el navegador en otra jugando a encontrar las diferencias.

Este cambio técnico tiene una lectura más amplia sobre el papel de Figma dentro de los flujos de trabajo asistidos por IA. Tradicionalmente, un diseño en Figma se entregaba a un desarrollador que lo interpretaba y construía la interfaz, con idas y venidas hasta cerrar las discrepancias. Con la generación de interfaces por IA ese proceso se acelera muchísimo, pero la posibilidad de desviación visual no desaparece; simplemente ocurre más rápido. Con esta integración, el archivo de Figma pasa a funcionar como una referencia visual que un sistema de pruebas automatizado puede verificar frente a la implementación real. La pregunta que enfrentan los equipos de diseño deja de ser únicamente '¿el desarrollador siguió mi diseño?' para convertirse también en '¿la IA siguió mi diseño?'.

La segunda mitad del anuncio, publicado el 15 de septiembre, resulta igual de relevante: Applitools ha ampliado su Eyes MCP Server, el conector que enlaza su sistema de pruebas visuales con los agentes de codificación de IA. Antes, un agente conectado a Eyes MCP podía añadir pruebas visuales desde el propio chat. Con las nuevas herramientas, el agente puede además inspeccionar, revisar y resolver esas pruebas por sí mismo. Applitools explica que el sistema puede proporcionar al agente información pixel a pixel sobre las diferencias visuales junto con contexto del DOM, ayudándole a identificar qué ha cambiado sin obligar al desarrollador a saltar a un panel de pruebas independiente. El agente puede incluso aceptar, rechazar o enmascarar líneas base visuales directamente desde la conversación. Las notas de la versión mencionan explícitamente a Claude Code, Cursor, Copilot y Codex, y el anuncio del 15 de septiembre añade también a Cline entre los flujos de trabajo compatibles.

Al combinar ambas piezas surge un bucle de retroalimentación bastante interesante: diseño en Figma → implementación → comparación visual → detección de la diferencia → investigación asistida por IA. El artículo subraya que esto es distinto de simplemente preguntarle a una IA '¿se ve bien esta captura?'. Applitools se posiciona como una capa de validación visual determinista que realiza la comparación y luego entrega al agente de codificación las diferencias resultantes junto con contexto estructural, en lugar de dejar que sea la propia IA quien juzgue subjetivamente si algo 'parece correcto'. El diseñador no queda fuera de esta ecuación; si acaso, el diseño aprobado gana importancia porque se convierte en el objetivo visual formal contra el que se mide la implementación.

El artículo enmarca esto como una respuesta a uno de los problemas menos glamurosos de la codificación con IA: las webs generadas por IA lucen impresionantes en las demos, porque las demos suelen detenerse justo en el momento en que aparece la interfaz. Los productos reales, en cambio, cambian con el tiempo, reutilizan componentes, se comportan de forma distinta según el navegador, ven cómo sus layouts responsive se rompen y, tarde o temprano, alguien pregunta por qué el botón de compra se ve raro en un iPhone. Applitools afirma que su plataforma puede realizar validación visual a través de distintos navegadores, dispositivos y sistemas operativos, mientras que la nueva integración con Figma aporta una referencia directa de cómo se suponía que debía verse la interfaz originalmente. La cuestión deja de ser si la IA generó código funcional, para convertirse en si lo que ve el usuario final sigue pareciéndose a lo que el diseñador aprobó: 'se generó correctamente' y 'coincide con el diseño' son, señala el artículo, dos cosas muy distintas.

La conclusión que plantea el texto es que el archivo de diseño podría volverse más importante, no menos, a medida que se normalicen este tipo de flujos. El archivo de Figma se perfila como la especificación visual que mantiene ancladas al diseño original las interfaces generadas por IA: el agente construye, el navegador renderiza, Applitools compara y Figma aporta la referencia. Si este modelo se generaliza, los diseñadores podrían dedicar menos tiempo a señalar que un padding está mal y más tiempo a decidir qué debería ser realmente la interfaz en primer lugar, algo que el propio artículo describe como un uso mucho mejor del tiempo de un diseñador.