Frontend: pivotar ou ficar para trás
A tese do material: se o frontend não pivota (produto, full-ish, IA assistida), o mercado aperta. Pivot não é abandono de craft.
A tese do pivot
Nesta parte do material sobre futuro desenvolvedor frontend, o foco é «A tese do pivot». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Essa é apenas uma opinião de um cara e a minha resposta a essa pergunta, muito simplesmente, é que se você não pivote, sim, você está enganado. Então, antes de eu responder por que eu acredito que isso é e também o que os desenvolvedores de front-end deveriam fazer e como deveriam pivotear, vamos dar uma volta e olhar para a história do desenvolvimento de front-end. Esse fogo agora, eu não sei por que eu quebrei a máquina de fogo.
Eu não sei, talvez para fazer uma referência sobre desenvolvimento de front-end indo no fogo, mas de qualquer forma, essas ferramentas estavam na infância e o que usávamos naquela época era coisas como front page 97, front page 98. Muitas pessoas preferiam citar seu código em HTML com notepad, literalmente. E então as coisas meio que se transformaram de lá para Dreamweaver.
Skills que ainda diferenciam
Nesta parte do material sobre futuro desenvolvedor frontend, o foco é «Skills que ainda diferenciam». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então, Dreamweaver foi uma ferramenta que foi realmente popular na época dos primeiros anos 2000 e fez isso muito fácil, meio que em um meio de código baixo, porque você não necessariamente tinha que tocar o código para perceber seus front-ends. Mas na época, o desenvolvimento dos front-ends era muito mais simples porque nós não tínhamos telefones móveis, nós não tínhamos design responsivo, nós não tínhamos todas as capacidades de CSS. Então, o que se tornou realmente popular foi com os designers de Photoshop.
Eu fiz isso sozinho, nós desenhamos nossas UI em Photoshop, provavelmente até os anos 2010 ou so. Então nós usamos algo como Fireworks para automaticamente dividir nossos desenhos, nós os cortamos, foi chamado de cortamento, em formatos de tabela, formatos de tabela de HTML e então você literalmente clica em exportar e veja o que, não precisamos escrever HTML ou CSS porque isso acabou de funcionar fora do portão. Então, com o advento de smartphones e toda essa tecnologia que saiu, foi muito claro que precisávamos de uma solução mais robusta, o que realmente significou que precisávamos nos tornar praticantes de front-end de desenvolvimento, HTML, CSS, design responsivo com queries de mídia.
Na prática
Opinião: frontend que não pivota fica para trás.
IA como alavanca, não substituto
Nesta parte do material sobre futuro desenvolvedor frontend, o foco é «IA como alavanca, não substituto». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
E nós realmente estamos nesse barco, provavelmente desde a era de 2010, até agora. E o que aconteceu com essas AI e essas LLMs de código, Porque HTML e CSS são tão. Muito prolífico há tanto documentação na internet que esses LLMs são treinados para que pode lidar com a tradução e o design muito acuradamente em HTML e CSS sem poucas alucinações e até há alguns meses atrás você poderia usar ferramentas como lovable Bolt vo todos esses outros, você sabe, plataformas de código de vibe muito low-code que produziam HTML e CSS para você no voo Agora, se você tentou uploadar um jpeg, por exemplo, e você disse.
Um desses modelos para criar html css fora dele, faria um trabalho louco porque a visão de computação em ai não é inteligente o suficiente neste ponto em tempo para inferir apenas através de visão de computação sozinho exatamente como precisa estruturar html css, no entanto, nos últimos meses, figma lançou seu server mcp e isso foi um grande mudança de jogo, é algo que eu cobrei bastante aqui nos últimos meses, até ontem eu postei este vídeo, veja isso com certeza Este server MCP permite a designer entrar e dizer aos AIs para tirar este frame, ou esta seleção, ou este componente, ou este layout, e traduzi-lo para trabalhar HTML e CSS. E assim como eles empleam o uso de auto-layout, eles empleam o uso de variáveis dentro de Figma, onde é necessário, junto com os estilos, ele fará um bom trabalho de traduzir esse design e fazer-o responsável. Working reality in the browser with very minimal screw-ups.
Plano de 90 dias
Nesta parte do material sobre futuro desenvolvedor frontend, o foco é «Plano de 90 dias». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
So, what does this mean now if you're somebody who makes your money or your living by translating designs, maybe from people who design in Figma or Sketch, into the browser? Because now, within just a couple minutes, the desired result is achieved and it can achieve it in just regular vanilla HTML, CSS. You can tell it to integrate it into a React app.
Se você está neste ponto em que você faz seu vida predominantemente traduzindo projetos como Figma ou Sketch de outros designers e implementando-os no browser e fazendo-os uma realidade responsável, o que você faz? A transição é entrar em LLMs de código de AI. Eu não estou falando de Bolt e Lovable e esses tipos.
Sinais de que está funcionando
Nesta parte do material sobre futuro desenvolvedor frontend, o foco é «Sinais de que está funcionando». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Cursor e Claude code, na época de gravar este vídeo, parecem ser os mais populares. Com o código de clã ficando realmente popular, mas você precisa entrar nessas ferramentas agora e se você é alguém que tem a cabeça no chão e você é um deniador sobre AI e o que está vindo, você vai ficar enganado, então o que eu faria se eu fosse você, entra nessas ferramentas e comece a aprender como usá-las, porque é muito mais do que apenas promover-as com o que está no topo da sua mente, há específicos Workflows and there are skills required to maximize the efficiency and the usage of these tools. So if you were before somebody who says, hey, I could take your design and realize it in a browser through front-end development.
Well, now you could be somebody who says, hey, I can do that. Not only can I do that, I can also build full apps that are functioning with back-ends, with beautiful design. Even if you're not a great designer and you're a front-end developer, guess what?
O que evitar na primeira semana
Nesta parte do material sobre futuro desenvolvedor frontend, o foco é «O que evitar na primeira semana». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Há muitas maneiras diferentes de usar bibliotecas de componentes como shad cn com a ajuda de tweaks e eu vou cobrir isso eu acho em um vídeo amanhã eu onde você pode construir ui que parecem muito bom e funcionam muito bem então você pode se tornar alguém que antes era relegado apenas lidando com html e css e enviando para um desenvolvedor como um back-end para alguém que pode agora desenvolver a experiência completa da app que você marca e você vai ser alguém que pode e fazer isso muito rapidamente e eficazmente com a ajuda da AI. Eu conheço desenvolvedores, pessoalmente, que não realmente tocaram AI. Eles não gostam e eu acho que eles estão em denúncia.
Você tem que chegar em frente agora, porque é mais certo do que nunca, porque eu estou prestando atenção nisso desde o início, há alguns anos atrás, que você precisa chegar no trem da AI. Isso é um vídeo que é para avisar as pessoas. Take action Você precisa pivotear, porque em um ano ou dois, vai haver poucas pessoas pagando para o serviço de traduzir projetos para o código de front-end.
Como explicar isso para o time
Nesta parte do material sobre futuro desenvolvedor frontend, o foco é «Como explicar isso para o time». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Você precisa pivotear, você precisa aprender e pegar essas habilidades agora, para que você não seja deixado atrás. E para aqueles que pivoteam, e se tornam pessoas que podem desenvolver a experiência de app, a experiência de website, você vai aumentar sua utilidade, você vai aumentar suas rendas, muito mais do que você era antes. Porque, acredite-me, Os proprietários de negócios, ainda não sabem como utilizar essas ferramentas de inteligência.
Então, essas são as habilidades que eu vou focar no ensino neste canal. Caso você não tenha notado, eu estou uploadando muito recentemente, nos últimos três semanas, cerca de quatro ou cinco vídeos por semana. DesignCourse.com, eu vou integrar todos esses cursos de projetos muito legais.
Na prática
Próximo passo: escolha uma métrica (taxa de sucesso, tempo, retries ou conversão) e rode um experimento de 7 dias antes de escalar o padrão.