Le travail frontend est rempli de petits problèmes fastidieux 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 du navigateur - pas seulement JavaScript dans l’abstrait. Un véritable développeur frontend AI écrit du code qui s’intègre à votre composant, au lieu d’en créer un nouveau.
Lena est conçue pour le front-end. 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, plutôt qu’un bloc bricolé. Elle le rend accessible par défaut (libellés, rôles, gestion du clavier), au lieu de traiter l’accessibilité après coup, car la rendre accessible 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 identifie 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 afin que le prochain problème soit à vous de résoudre, et elle sait faire la différence entre un bug dans votre code et une bizarrerie du navigateur qu’il faut contourner.
« Rends ceci 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 désordonné en quelque chose de lisible, rend responsive une mise en page fixe sans la réécrire et pointe les gains de performance évidents - le rendu superflu, l’image gigantesque, les recalculs incessants de la 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 appellent une réponse différente du CSS classique. Collez le vrai code et la véritable erreur plutôt que de les décrire. Et demandez pourquoi aussi bien que quoi, afin que chaque correction vous laisse un peu moins bloqué la fois suivante.
À qui s’adresse-t-il
Déposez un fichier dans votre AI : il crée des composants, débogue les mises en page et refactorise le CSS dans votre framework - le tout de manière accessible et expliquée. Sans abonnement, à vous pour toujours.
Voir Lena →
