Eu testei todos os melhores modelos de linguagem para desenvolvimento frontend. Um modelo se destacou.

Uma comparação lado-a-lado entre Grok 3, Gemini 2.5 Pro, DeepSeek V3, OpenAI o1-pro e Claude 3.7 Sonnet

Esta semana foi insana para a IA.

O DeepSeek V3 foi apenas lançado. De acordo com os benchmarks, é o melhor modelo de IA, superando até mesmo modelos de raciocínio como o Grok 3.

Dias depois, o Google lançou o Gemini 2.5 Pro, novamente superando todos os outros modelos nos benchmarks.

Com todos esses modelos surgindo, todos estão fazendo a mesma pergunta:

“Qual é o melhor modelo para codificação?” – nossa consciência coletiva

Este artigo irá explorar essa questão em uma tarefa REAL de desenvolvimento frontend.

Preparando a tarefa

Para preparar esta tarefa, precisamos dar ao LLM informações suficientes para completá-la. Veja como faremos isso.

Para contextualizar, estou construindo uma plataforma de negociação algorítmica. Uma das funcionalidades se chama “Deep Dives”, relatórios de due diligence abrangentes gerados por IA.

Mesmo tendo lançado isso como uma funcionalidade, não tenho um ponto de entrada otimizado para SEO. Portanto, pensei em ver quão bem cada um dos melhores LLMs pode gerar uma página de destino para essa funcionalidade.

Para isso:

1. Eu construí um prompt de sistema, preenchendo informações suficientes para uma solução de uma só vez
2. Usei o mesmo prompt de sistema para cada modelo
3. Avaliei o modelo exclusivamente com base na minha opinião subjetiva sobre a qualidade da aparência do frontend.

Comecei com o prompt do sistema.

Construindo o prompt de sistema perfeito

Para construir meu prompt de sistema, fiz o seguinte:

1. Forneci uma versão em markdown do meu artigo para contexto sobre o que a funcionalidade faz
2. Forneci exemplos de código do único componente que seria necessário gerar a página
3. Forneci uma lista de restrições e requisitos. Por exemplo, queria poder gerar um relatório a partir da página de destino, e expliquei isso no prompt.

A última parte do prompt do sistema foi uma seção objetiva detalhada que explicou o que queríamos construir.

# OBJETIVO
Construir uma página frontend otimizada para SEO para os relatórios de deep dive. 
Enquanto já conseguimos fazer relatórios no Painel de Ativos, queremos
que esta página seja construída para ajudar a encontrar usuários buscando por análise de ações,
relatórios de due diligence,
  - A página deve ter uma barra de pesquisa e ser capaz de realizar um relatório
ali mesmo na página. Essa é a principal CTA
  - Ao clicar, se não estiver logado, ele será solicitado a se inscrever
  - A página deve ter uma explicação de todos os benefícios e ser
otimizada para SEO para pessoas procurando por análise de ações, relatórios de due diligence, etc.
   - Uma ótima UI/UX é imprescindível
   - Você pode usar qualquer um dos pacotes no package.json, mas não pode adicionar nenhum
   - Foque em boa UI/UX e estilo de codificação
   - Gere o código completo e separe-o em diferentes componentes
com uma página principal

Então, utilizando este prompt, eu queria testar a saída de todos os melhores modelos de linguagem: Grok 3, Gemini 2.5 Pro (Experimental), DeepSeek V3 0324 e Claude 3.7 Sonnet.

Organizei este artigo do pior para o melhor. Vamos começar com o pior modelo dos 4: Grok 3.

Testando Grok 3 (pensando) em uma tarefa real de frontend

Para ser honesto, enquanto eu tinha grandes esperanças para o Grok porque o usei em outras tarefas desafiadoras de codificação “pensante”, neste caso, o Grok 3 fez um trabalho muito básico. Ele gerou um código que eu esperaria sair do GPT-4.

Quero dizer, veja isso. Esta não é uma página otimizada para SEO; quero dizer, quem usaria isso?

Em comparação, o GPT o1-pro se saiu melhor, mas não por muito.

Testando GPT O1-Pro em uma tarefa real de frontend

O1-Pro fez um trabalho muito melhor em manter os mesmos estilos dos exemplos de código. Também parecia melhor que o Grok, especialmente a barra de pesquisa. Ele usou os pacotes de ícones que eu estava utilizando, e a formatação era geralmente bastante boa.

Mas não estava absolutamente pronto para produção. Para ambos Grok e O1-Pro, a saída é o que você esperaria de um estagiário fazendo um curso introdutório de Desenvolvimento Web.

Os restantes dos modelos fizeram um trabalho muito melhor.

Testando Gemini 2.5 Pro Experimental em uma tarefa real de frontend

O Gemini 2.5 Pro gerou uma incrível página de destino na primeira tentativa. Quando vi, fiquei chocado. Parecia profissional, estava fortemente otimizada para SEO e atendia completamente a todos os requisitos.

Ele reutilizou alguns dos meus outros componentes, como meu componente de exibição para minha página de Relatórios de Deep Dive. Após gerá-la, eu honestamente esperava que ele vencesse…

Até eu ver quão bem o DeepSeek V3 se saiu.

Testando DeepSeek V3 0324 em uma tarefa real de frontend

O DeepSeek V3 superou minhas expectativas. Sendo um modelo não-raciocínio, eu achei o resultado extremamente abrangente. Ele teve uma seção de destaque, um número impressionante de detalhes e até uma seção de depoimentos. Nesse ponto, já estava chocado com a qualidade desses modelos e pensei que o Gemini iria surgir como o campeão indiscutível nesse ponto.

Então, finalizei com Claude 3.7 Sonnet. E uau, eu não poderia estar mais impressionado.

Testando Claude 3.7 Sonnet em uma tarefa real de frontend

O Claude 3.7 Sonnet está em uma liga própria. Usando o mesmo prompt exato, eu gerei uma página de destino frontend extraordinariamente sofisticada que atendeu minhas exigências exatas e muito mais.

Ele superou as expectativas. Literalmente, tinha elementos que eu nunca teria imaginado. Não só permite que você gere um relatório diretamente da interface, mas também possui novos componentes que descrevem a funcionalidade, texto otimizado para SEO, descreve completamente os benefícios, incluiu uma seção de depoimentos, e mais.

Foi além do abrangente.

Discussão além da aparência subjetiva

Embora os elementos visuais dessas páginas de destino sejam incrivelmente impressionantes, eu queria discutir brevemente outros aspectos do código.

Por um lado, alguns modelos se saíram melhor ao usar bibliotecas e componentes compartilhados do que outros. Por exemplo, DeepSeek V3 e Grok não implementaram corretamente o “OnePageTemplate”, que é responsável pelo cabeçalho e rodapé. Em contraste, O1-Pro, Gemini 2.5 Pro e Claude 3.7 Sonnet utilizaram esses modelos corretamente.

Além disso, a qualidade do código bruto foi surpreendentemente consistente entre todos os modelos, sem erros significativos aparecendo em nenhuma implementação. Todos os modelos produziram código limpo e legível, com convenções de nomenclatura e estrutura apropriadas.

Além disso, os componentes usados pelos modelos garantiram que as páginas fossem responsivas. Isso é crítico, pois garante uma boa experiência do usuário em diferentes dispositivos. Como eu estava usando o Material UI, cada modelo conseguiu fazer isso de forma autônoma.

Finalmente, Claude 3.7 Sonnet merece reconhecimento por produzir o maior volume de código de alta qualidade sem sacrificar a manutenibilidade. Ele gerou mais componentes e funcionalidades do que outros modelos, com cada peça permanecendo bem estruturada e perfeitamente integrada. Isso demonstra a superioridade do Claude em desenvolvimento frontend.

Caveats Sobre Esses Resultados

Embora o Claude 3.7 Sonnet tenha produzido a saída de mais alta qualidade, os desenvolvedores devem considerar vários fatores importantes ao escolher qual modelo optar.

Primeiro, todos os modelos, exceto o O1-Pro, exigiram limpeza manual. Corrigir imports, atualizar cópias e encontrar (ou gerar) imagens levou cerca de 1 a 2 horas de trabalho manual, mesmo para a saída abrangente do Claude. Isso confirma que essas ferramentas se destacam em rascunhos iniciais, mas ainda exigem refinamento humano.

Em segundo lugar, as trocas custo-desempenho são significativas.

• O O1-Pro é de longe a opção mais cara, a $150 por milhão de tokens de entrada e $600 por milhão de tokens de saída. Em contraste, o segundo modelo mais caro (Claude 3.7 Sonnet) custa $3 por milhão de tokens de entrada e $15 por milhão de tokens de saída. Ele também tem uma capacidade relativamente baixa como o DeepSeek V3, a 18 tokens por segundo.
• Claude 3.7 Sonnet tem 3x maior capacidade que o O1-Pro e é 50x mais barato. Ele também produziu um código melhor para tarefas de frontend. Esses resultados sugerem que você deve escolher absolutamente o Claude 3.7 Sonnet em vez do O1-Pro para desenvolvimento frontend.
• O V3 é mais de 10x mais barato que o Claude 3.7 Sonnet, tornando-o ideal para projetos com orçamento limitado. Sua capacidade é semelhante à do O1-Pro a 17 tokens por segundo.
• Enquanto isso, o Gemini 2.5 Pro atualmente oferece acesso gratuito e possui a mais rápida capacidade de processamento, 2x mais rápida que a do Sonnet.
• O Grok continua limitado pela falta de acesso à API.

Importante, vale a pena discutir o recurso “continuar” do Claude. Ao contrário dos outros modelos, o Claude teve a opção de continuar gerando código após ficar sem contexto – uma vantagem sobre saídas em uma única tentativa de outros modelos. No entanto, isso também significa que as comparações não foram perfeitamente equilibradas, já que outros modelos precisaram trabalhar dentro de limites de tokens mais restritos.

A “melhor” escolha depende inteiramente de suas prioridades:

• Qualidade de código pura → Claude 3.7 Sonnet
• Velocidade + custo → Gemini Pro 2.5 (gratuito/rápido)
• Pesado, econômico ou com capacidades de API → DeepSeek V3 (mais barato)

Por fim, embora o Claude tenha se destacado nesta tarefa, o “melhor” modelo para você depende de suas necessidades, projeto e do que você considera importante em um modelo.

Pensamentos Finais

Com todos os novos modelos de linguagem sendo lançados, é extremamente difícil obter uma resposta clara sobre qual modelo é o melhor. Assim, decidi fazer uma comparação direta.

Em termos de pura qualidade de código, Claude 3.7 Sonnet emergiu como o vencedor claro neste teste, demonstrando uma compreensão superior tanto dos requisitos técnicos quanto da estética do design. Sua capacidade de criar uma experiência coesa para o usuário – completa com depoimentos, seções de comparação e um gerador de relatórios funcional – coloca-o à frente dos concorrentes para tarefas de desenvolvimento frontend. No entanto, o desempenho impressionante do DeepSeek V3 sugere que a diferença entre modelos proprietários e de código aberto está se estreitando rapidamente.

Dito isso, este artigo é baseado na minha opinião subjetiva. É hora de concordar ou discordar se o Claude 3.7 Sonnet fez um bom trabalho e se o resultado final parece razoável. Comente abaixo e me avise qual saída foi a sua favorita.

Confira o Produto Final: Relatórios Deep Dive

Quer ver como realmente se parece uma análise de ações impulsionada por IA? Confira a página de destino e me diga o que você acha.

Os Relatórios Deep Dive do NexusTrade são a maneira mais fácil de obter um relatório abrangente em minutos para qualquer ação no mercado. Cada relatório Deep Dive combina análise fundamental, indicadores técnicos, benchmarks competitivos e sentimento de notícias em um único documento que normalmente levaria horas para compilar manualmente. Basta inserir um símbolo de ação e obter uma análise completa de investimento em minutos.