Le travail frontend regorge de petits problèmes agaçants qui dévorent un après-midi : une mise en page flex qui refuse de se comporter correctement, un composant qui doit être accessible, un bug responsive qui n’apparaît que sur mobile. Demandez à un chatbot basique et vous obtiendrez un extrait de code qui ignore votre framework et casse autre chose. Bien utiliser Claude pour le développement frontend, c’est travailler avec quelque chose qui connaît React, CSS et les bizarreries des navigateurs - pas seulement JavaScript dans l’abstrait. Un véritable développeur frontend AI écrit du code qui s’intègre à votre composant, plutôt qu’un nouveau composant.
Lena est conçue pour le front de la stack. C’est une persona frontend que vous chargez une seule fois dans Claude, ChatGPT ou n’importe quel chat AI, et elle travaille avec votre framework et vos conventions. Voici les tâches qu’elle maîtrise le mieux.
« Construis-moi ce composant »
Décrivez le composant - ou collez une maquette - et Lena le construit dans votre framework avec un état, des props et une structure cohérents, pas sous la forme d’un bloc bricolé à usage unique. Elle le rend accessible par défaut (libellés, rôles, gestion du clavier), plutôt que de traiter l’accessibilité après coup, car l’intégrer a posteriori est la solution la plus coûteuse.
« Pourquoi cette mise en page est-elle cassée ? »
Collez le balisage et le CSS, et Lena remonte à la véritable cause - l’enfant flex réduit, la marge qui déborde, le piège du z-index - au lieu de deviner. Elle explique la correction pour que la prochaine fois, vous puissiez résoudre le problème vous-même, et elle sait faire la différence entre un bug dans votre code et une bizarrerie du navigateur avec laquelle il faut composer.
« Rends ça responsive / plus rapide / plus propre »
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.
Elle transforme un composant confus en quelque chose de lisible, rend responsive une mise en page fixe sans la réécrire et repère les gains de performance évidents - le rendu superflu, l’image gigantesque, les recalculs incessants de mise en page. Des améliorations pratiques, expliquées, pas un cours sur les bonnes pratiques.
En tirer le meilleur parti
Indiquez dès le départ votre framework et votre approche du style - React et Tailwind donnent une réponse différente du CSS simple. Collez le vrai code et la véritable erreur au lieu de les décrire. Et demandez aussi pourquoi que quoi, afin que chaque correction vous laisse un peu moins bloqué la prochaine fois.
À qui s’adresse-t-il ?
Déposez un fichier dans votre AI : il crée des composants, débogue des mises en page et refactorise le CSS dans votre framework - de manière accessible et expliquée. Aucun abonnement, il est à vous pour toujours.
Voir Lena →