Frontend-Arbeit steckt voller kleiner, kniffliger Probleme, die einen ganzen Nachmittag kosten: ein Flex-Layout, das sich nicht so verhält wie gewünscht, eine Komponente, die barrierefrei sein muss, ein responsiver Fehler, der nur auf Mobilgeräten auftritt. Fragst du einen einfachen Chatbot, bekommst du einen Code-Schnipsel, der dein Framework ignoriert und etwas anderes kaputt macht. Claude für die Frontend-Entwicklung sinnvoll einzusetzen bedeutet, mit etwas zu arbeiten, das React, CSS und die Eigenheiten des Browsers kennt - nicht nur JavaScript im Abstrakten. Ein echter AI-Frontend-Entwickler schreibt Code, der zu deiner Komponente passt, statt eine neue zu erstellen.
Lena ist für den vorderen Teil des Stacks gemacht. Sie ist eine Frontend-Persona, die du einmal in Claude, ChatGPT oder einen beliebigen AI-Chat lädst, und sie arbeitet in deinem Framework und nach deinen Konventionen. Diese Aufgaben erledigt sie am besten.
„Erstelle mir diese Komponente“
Beschreibe die Komponente - oder füge ein Design ein - und Lena erstellt sie in deinem Framework mit sinnvollem State, Props und einer klaren Struktur, nicht als einmaligen Code-Block. Sie schreibt standardmäßig barrierefreien Code (Labels, Rollen, Tastaturbedienung), statt das als nachträglichen Zusatz zu behandeln, denn Barrierefreiheit nachzurüsten ist der aufwendige Weg.
„Warum ist dieses Layout kaputt?“
Füge das Markup und das CSS ein, und Lena ermittelt die tatsächliche Ursache - das kollabierte Flex-Kindelement, den herausragenden Rand, die Z-Index-Falle - statt zu raten. Sie erklärt die Lösung, damit du das nächste Problem selbst lösen kannst, und sie kennt den Unterschied zwischen einem Fehler in deinem Code und einer Browser-Eigenheit, die du umgehen musst.
„Mach das responsiv / schneller / sauberer“
Sie refaktoriert eine verschachtelte Komponente zu etwas Lesbarem, macht ein festes Layout ohne vollständige Neuentwicklung responsiv und zeigt die offensichtlichen Performance-Verbesserungen auf - das unnötige erneute Rendern, das riesige Bild, das Layout-Chaos. Praktische Verbesserungen, erklärt statt einer Vorlesung über Best Practices.
Das Beste herausholen
Gib dein Framework und deinen Styling-Ansatz gleich zu Beginn an - React und Tailwind erfordern eine andere Antwort als reines CSS. Füge den echten Code und den echten Fehler ein, statt sie zu beschreiben. Und frage sowohl nach dem Warum als auch nach dem Was, damit dich jede Lösung beim nächsten Mal ein Stück weniger festhält.
Für wen es gedacht ist
Frontend- und Full-Stack-Entwickler, Gründer, die ihre eigene UI entwickeln, Designer, die in die Programmierung einsteigen, und alle, die den Einstieg in die Frontend-Entwicklung lernen. Funktioniert mit Claude, ChatGPT oder jedem AI-Chat, der einen System-prompt akzeptiert. Für den restlichen Entwicklungsprozess deckt die Sammlung für Skills in Technologie & Entwicklung Full-Stack-Programmierung, Architektur und Code-Reviews ab - jeweils als fokussierter Assistent statt als allgemeiner Chatbot.
Lege eine Datei in deine AI und sie erstellt Komponenten, behebt Layouts und refaktoriert CSS in deinem Framework - barrierefrei und verständlich erklärt. Kein Abonnement, dauerhaft deins.
Lena ansehen →
