El trabajo frontend está lleno de pequeños problemas engorrosos que se comen toda una tarde: un diseño flex que no se comporta como debería, un componente que debe ser accesible o un error de diseño adaptable que solo aparece en móviles. Si le preguntas a un chatbot básico, obtienes un fragmento que ignora tu framework y rompe otra cosa. Usar Claude para el desarrollo frontend correctamente significa trabajar con algo que conoce React, CSS y las peculiaridades del navegador, no solo JavaScript en abstracto. Un desarrollador frontend de AI de verdad escribe código que encaja en tu componente, no uno nuevo desde cero.
Lena está hecha para la parte frontend del stack. Es una personalidad frontend que cargas una sola vez en Claude, ChatGPT o cualquier chat de AI, y trabaja con tu framework y tus convenciones. Estos son los trabajos que mejor realiza.
«Créame 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 de usar y tirar. Lo escribe accesible de forma predeterminada (etiquetas, roles y 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 elemento hijo flex contraído, 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 que debes sortear.
«Haz que esto sea adaptable / más rápido / más limpio»
Refactoriza un componente enredado para convertirlo en algo legible, adapta un diseño fijo para que responda sin reescribirlo y señala las mejoras de rendimiento más evidentes: el renderizado innecesario, la imagen enorme, los cambios constantes del 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 que 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
Desarrolladores frontend y full stack, fundadores que crean su propia UI, diseñadores que se adentran en el código y cualquiera que esté aprendiendo sobre la parte frontend. Funciona con Claude, ChatGPT o cualquier chat de AI que acepte un prompt de sistema. Para el resto del desarrollo, la colección de Skills de tecnología y desarrollo cubre la programación full stack, la arquitectura y la revisión de código: cada uno es un asistente especializado, no un chatbot general.
Introduce un archivo en tu AI y crea componentes, depura diseños y refactoriza CSS en tu framework: accesible y con explicaciones. Sin suscripción, tuyo para siempre.
Ver a Lena →