Claude vs. Figma MCP: quem gera o melhor código React a partir do design?
Claude gera código a partir de screenshot enquanto Figma MCP é mais fiel ao design. Mais: Laravel no Node.js, lib React com Tailwind e React Aria, provas mentais e uma ferramenta que não sai da moda.
A promessa de converter automaticamente designs em código funcional sempre foi um sonho para desenvolvedores, designers e times de produto. No vídeo mais recente, o engenheiro e youtuber Jack Herrington lançou um desafio prático nesse sentido: comparar dois fluxos de trabalho para transformar um formulário de perfil criado no Figma em um formulário funcional em React.
De um lado, Claude 4 Opus, via Claude Code, recebeu apenas um screenshot da interface e gerou o código inteiro a partir disso. Do outro, a nova integração Figma MCP (Model Context Protocol) foi ativada: Jack selecionou o componente diretamente no Figma, usou o botão “Get Code”, passou o HTML gerado para o Claude 4 Sonnet via Cursor e pediu para substituir a rota inicial da aplicação React com aquele código.
O resultado? Depende do critério.
Claude impressiona ao receber só uma imagem e inferir com razoável precisão que campos estilizados com <p>s ou <div>s deveriam, na verdade, ser <input type="text">. Até campos não editáveis no Figma viraram corretamente campos de entrada no HTML. Tudo isso sem plugins ou autenticação — apenas o screenshot.
Por outro lado, a abordagem com Figma MCP + Claude 4 Sonnet + componentes prontos (como ShadCN) produz um código mais limpo, alinhado a padrões modernos e mais fiel ao design original. Em um terceiro teste, usando também TanStack Form e os componentes já declarados no projeto, o agente no Cursor reconhece cada campo e gera código funcional, semanticamente correto e com uso consistente da biblioteca.
Jack admite que o resultado final com Figma MCP é o que ele usaria em projetos reais. E talvez o mais interessante: o sistema não precisa “entender” o design como uma imagem — ele opera diretamente sobre a estrutura da interface, com contexto sobre o projeto, o editor e os arquivos.
Isso mostra que a IA pode acelerar etapas do processo, especialmente para times que já têm design systems e bibliotecas de componentes bem definidos. Ainda assim, o uso dessas ferramentas não elimina a necessidade de ajustes manuais, revisões e, é claro, da experiência humana para garantir o direcionamento, a qualidade e a segurança do produto.
Claude é uma abordagem mais direta e simples, ideal para prototipagem rápida, mas com limitações visuais e funcionais. Figma MCP aposta numa integração mais profunda com o ecossistema de design e no uso de componentes, porém exige uma configuração mais complexa e ainda depende de revisão técnica.
Mais do que buscar uma solução mágica, o verdadeiro desafio é como integrar essas tecnologias ao fluxo de trabalho de forma prática e eficiente, aproveitando seus benefícios sem perder o controle sobre o resultado final — uma parceria entre a operação da IA e a estratégia humana.
Vale assistir o vídeo completo para entender mais sobre o processo e os resultados.
Laravel no Node.js: integração via Watt Runtime
Agora é possível rodar aplicações Laravel dentro de um processo Node.js com o módulo @platformatic/php. A execução ocorre por meio do Watt Runtime, que embute uma engine PHP multi-thread em Node, via WebAssembly e Rust. Isso permite compartilhar infraestrutura entre serviços PHP e JavaScript, com acesso direto entre eles sem depender da rede. A integração reduz latência e facilita a convivência entre microsserviços em diferentes linguagens. Mais aqui.
Untitled UI: biblioteca React com Tailwind CSS e React Aria
Untitled UI é uma biblioteca open-source que reúne uma vasta coleção de componentes React, construídos com Tailwind CSS e React Aria. Seu foco está na acessibilidade e na facilidade de uso, oferecendo componentes prontos para serem integrados em projetos. A biblioteca inclui desde botões e modais até dashboards completos, facilitando o desenvolvimento de interfaces consistentes e acessíveis sem necessidade de criar tudo do zero. Mais no site oficial.
Malware em pacote npm popular expõe risco na distribuição de pacotes
O pacote eslint-config-prettier, com mais de 30 milhões de downloads semanais, foi alvo de um ataque após o mantenedor cair em um golpe de phishing. Versões maliciosas passaram a executar um DLL (node-gyp.dll) no Windows, espalhando o malware Scavenger. As versões comprometidas já foram removidas do npm, mas é recomendável revisar dependências e evitar versões entre 9.1.1 e 10.1.7. Mais aqui.
Provas mentais para programar melhor
"Provas mentais" podem garantir a correção do código e tornar programadores melhores, segundo o desenvolvedor Matthew Prast. Isso envolve aplicar conceitos como: monotonicidade (processos unidirecionais); pré e pós-condições (estados definidos); invariantes (condições sempre verdadeiras); isolamento (modificar sem desestabilizar); e indução (para funções recursivas). Termos difíceis, que não fazem muito sentido? Vale entender mais no artigo completo.
E sabe quem não sai do "hype" há décadas?
O terminal. Firme e forte ao longo de anos, quem diria, a tela preta está se tornando ainda mais relevante com IA, principalmente para a IA “agêntica”, dada sua facilidade em operar em tarefas de ambiente, DevOps e execução. Grandes laboratórios (Anthropic, DeepMind, OpenAI) já lançaram ferramentas de linha de comando como Claude Code, Gemini CLI e CLI Codex, o que reforça o caminho nesse sentido. Mais aqui.
Obrigado por acompanhar a BeTalent Academy. Se gostou, compartilhe e deixe um comentário. Até a próxima semana, com mais uma edição!