El CSS es peligroso, mantener alejado de los LLMs

En el primer artículo de la serie, hablábamos sobre la necesidad de empezar a experimentar con herramientas de IA, especialmente sobre modelos de agente. Hoy vamos a hablar de un ejemplo en el que tanto yo como el agente hemos fracasado estrepitosamente, y por qué, de momento, voy a mantener estas herramientas alejadas de cualquier cosa parecida a CSS.

El escenario

Hace un par de semanas, recibimos comentarios de una interfaz que estábamos diseñando. Como trabajamos en zonas horarias diferentes, usamos un documento compartido. El documento era muy claro, con expectativas correctas en cuanto a tamaños de fuente, estilos y textos, y era algo que era relativamente sencillo de solucionar a la antigua usanza.

Sin embargo, vivimos en el mundo de los agentes y pensé que sería un ejercicio interesante pasarle a Cline el documento tal cual (tras haberlo convertido a markdown), darle una referencia al repositorio que contenía la interfaz y verlo trabajar.

La respuesta no se hizo esperar, y con los cambios aplicados (y sin prestar demasiada atención) mandé una primera Pull Request al equipo para que echaran un vistazo, simplemente por hacer el ejercicio. Sería la primera de muchas revisiones a lo largo de varios días…

Una cuestión de contexto… visual

El mayor problema lo tuvimos con tamaños de fuente, en los que el agente directamente aplicaba cambios de manera local sin tener en cuenta variables, referencias u otros ficheros. Tras especificar un fichero de estilos con variables, alucinó, generando nombres de variables que no existían, y, las que existían, usando valores que no eran los adecuados, es decir, no era capaz de resolver correctamente referencias.

CSS, y más concretamente SASS, es una combinación de herencia, variables, referencias y selectores que aplican a uno o varios componentes de manera integrada, lo que lo convierte en un lenguaje difícil de dominar para interfaces complejas.

De manera adicional, los estilos se pueden redefinir en diferentes ficheros, y el orden de carga de los mismos es importante. A la hora de ver el resultado y depurar, es un proceso fundamentalmente visual y multi-modal (escritorio, mobile, múltiples modos de zoom, diferentes escalas…).

Volando a ciegas

Una de las mayores ventajas que tienen los agentes respecto a los chat, es que pueden ejecutar los comandos que compilan el código y ejecutan los tests, pueden leer el resultado de esos comandos y reaccionar ante ellos, lo que hace que se puedan recuperar relativamente rápido de las alucinaciones especialmente si se especifica que se ejecuten los tests tras cada cambio significativo.

En el caso de CSS el agente, aunque puede puede ver el resultado (Cline tiene un navegador integrado, puede cargar una URL, navegar y comprobar la presencia de elementos), no va a poder ver el alcance de los cambios al detalle, y no va a poder decir si una fuente es demasiado pequeña de manera intuitiva, por ejemplo.

Estos dos aspectos le dan a trabajar con estilos una complejidad adicional que, en nuestro caso concreto, hizo que los resultados no fueran positivos.

Previsualización

Herramientas como Cline, Q o Github Copilot tienen modos de planificación, en los cuales no ejecutan cambios en el código pero pueden hacer sugerencias. Sin embargo, una de las cosas que sí que podemos hacer es usar el modo de ejecución, pero en vez de aplicar los cambios sobre el código, orientarles a que escriban un documento de análisis sobre los cambios y que propongan varias alternativas.

Esta acción no soluciona los problemas de CSS que de momento he encontrado con LLMs, nos permite entender el contexto que está usando el agente a la hora de tomar decisiones, y podemos ampliar o modificar dicho contexto antes de ejecutar.

Conclusiones

Una de las cosas que tenemos que tener en cuenta es que los LLMs no son una bala de plata ni nos van a permitir solucionar todos los problemas. Habrá casos, como el de este ejemplo, en el que supongan más un inconveniente que una ayuda.

Los modelos siguen evolucionando cada día, seguiremos viendo escenarios en los que no funcionen, y en los que funcionan sorprendentemente bien. La clave, y es la que estoy siguiendo en este viaje por el mundo de la IA, es experimentar, probar y ajustar.