O trabalho de frontend está cheio de pequenos problemas chatos e trabalhosos que consomem uma tarde: um layout flex que não se comporta como deveria, um componente que precisa ser acessível, um bug responsivo que só aparece no celular. Pergunte a um chatbot genérico, e você receberá um trecho de código que ignora seu framework e quebra outra coisa. Usar o Claude para desenvolvimento frontend de forma eficiente significa trabalhar com algo que conhece React, CSS e as peculiaridades do navegador - não apenas JavaScript em abstrato. Um verdadeiro desenvolvedor frontend de AI escreve código que se encaixa no seu componente, não um novo do zero.
Lena foi criada para a camada frontend. Ela é uma persona de frontend que você carrega uma vez no Claude, ChatGPT ou em qualquer chat de AI, e trabalha com seu framework e suas convenções. Estes são os trabalhos que ela executa melhor.
“Crie este componente para mim”
Descreva o componente - ou cole um design -, e Lena o cria no seu framework com estado, props e estrutura bem pensados, não como um bloco improvisado. Ela escreve tudo com acessibilidade desde o início (rótulos, funções, navegação pelo teclado), em vez de deixar isso para depois, porque adaptar a acessibilidade posteriormente é a opção mais cara.
“Por que este layout está quebrado?”
Cole a marcação e o CSS, e Lena identifica a causa real - o filho flexível recolhido, a margem que escapa, a armadilha do z-index - em vez de ficar supondo. Ela explica a correção para que o próximo problema seja seu para resolver, e sabe diferenciar um bug no seu código de uma peculiaridade do navegador com a qual você precisa lidar.
“Deixe isso responsivo / mais rápido / mais limpo”
Ela refatora um componente confuso em algo legível, torna um layout fixo responsivo sem uma reescrita e aponta os ganhos óbvios de desempenho - a renderização desnecessária, a imagem enorme, a instabilidade do layout. Melhorias práticas, explicadas, não uma palestra sobre boas práticas.
Tirando o máximo proveito
Informe seu framework e sua abordagem de estilização logo de início - React e Tailwind exigem uma resposta diferente de CSS puro. Cole o código real e o erro real em vez de descrevê-los. E pergunte por quê além de o quê, para que cada correção deixe você um pouco menos travado da próxima vez.
Para quem é
Desenvolvedores frontend e full-stack, fundadores criando sua própria UI, designers migrando para o código e qualquer pessoa aprendendo a desenvolver o front-end. Funciona com Claude, ChatGPT ou qualquer chat de AI que aceite um prompt de sistema. Para o restante do desenvolvimento, a coleção de Skills de tecnologia e desenvolvimento cobre programação full-stack, arquitetura e revisão de código - cada uma atua como um assistente especializado, em vez de um chatbot genérico.
Adicione um arquivo à sua AI e ela criará componentes, depurará layouts e refatorará CSS no seu framework - com acessibilidade e explicações. Sem assinatura, seu para sempre.
Ver Lena →
