El trabajo frontend está lleno de pequeños problemas engorrosos que se comen una tarde: un diseño flex que no se comporta como debería, un componente que debe ser accesible, un error responsive que solo aparece en el móvil. Pregúntale a un chatbot sin más y obtendrás un fragmento de código que ignora tu framework y rompe otra cosa. Usar bien Claude para el desarrollo frontend significa trabajar con algo que conoce React, CSS y las peculiaridades del navegador - no solo JavaScript en abstracto. Un verdadero desarrollador frontend de AI escribe código que encaja en tu componente, no uno nuevo.
Lena está hecha para la parte frontend del stack. Es una persona frontend que cargas una vez en Claude, ChatGPT o cualquier chat de AI, y trabaja con tu framework y tus convenciones. Estos son los trabajos que mejor desempeña.
“Constrúyeme este componente”
Describe el componente - o pega un diseño - y Lena lo construye en tu framework con un estado, unas props y una estructura sensatos, no como un bloque improvisado. Lo escribe con accesibilidad de forma predeterminada (etiquetas, roles, gestión del teclado), en lugar de dejarlo para después, porque adaptar la accesibilidad a posteriori es la opción más costosa.
“¿Por qué está roto este diseño?”
Pega el marcado y el CSS, y Lena razona sobre la causa real - el hijo flex colapsado, el margen que se desborda, la trampa del z-index - en lugar de adivinar. Explica la solución para que la próxima vez puedas resolverlo tú, y sabe distinguir entre un error en tu código y una peculiaridad del navegador con la que tienes que lidiar.
“Hazlo responsive / más rápido / más limpio”
She refactors a tangled component into something readable, makes a fixed layout responsive without a rewrite, and points at the obvious performance wins - the unnecessary re-render, the giant image, the layout thrash. Practical improvements, explained, not a lecture on best practice.
Refactoriza un componente enredado para convertirlo en algo legible, adapta un diseño fijo a distintos tamaños sin reescribirlo y señala las mejoras de rendimiento más evidentes: el renderizado innecesario, la imagen enorme y los cambios constantes de diseño. Mejoras prácticas y explicadas, no una lección sobre buenas prácticas.
Cómo sacarle el máximo partido
Indica de antemano tu framework y tu enfoque de estilos: React y Tailwind requieren una respuesta distinta del CSS puro. Pega el código real y el error real en lugar de describirlos. Y pregunta por qué además de qué, para que cada solución te deje un poco menos atascado la próxima vez.
Para quién es
Introduce un archivo en tu AI y crea componentes, depura diseños y refactoriza CSS en tu framework, con accesibilidad y explicaciones. Sin suscripción, tuyo para siempre.
Ver a Lena →
