O trabalho de front-end é onde as ferramentas de codificação de IA geralmente revelam suas verdadeiras personalidades. Quase todos os modelos podem criar um layout funcional, conectar botões e fazer a página parecer decente à primeira vista.
Mas o trabalho de front-end sofisticado envolve espaçamento, hierarquia, estados vazios, posicionamento de botões, capacidade de resposta e dezenas de pequenas decisões de UX que separam uma interface utilizável de uma demonstração apressada.
Então, coloquei a mesma tarefa de front-end em Claude Code, Codex e Google Antigravity para ver qual deles poderia ir além do básico e entender como deveria ser a experiência.
Mudei do Claude Code para o Codex por uma semana e os compromissos me surpreenderam
Uma semana, duas ferramentas, muitas opiniões.
A palavra no prompt
Contém muitas peças móveis
Para este teste, eu não queria dar a Claude Code, Codex e Antigravity um simples aviso na página inicial de que quase todas as ferramentas podem fingir grind com uma bela seção de herói e alguns cartões.
Pedi aos três que criassem o mesmo aplicativo web de gerenciamento de projetos chamado TaskForge, completo com painel, barra lateral, mapas de progresso do projeto, painel de tarefas, painel de carga de trabalho da equipe, prazos futuros, fluxo de atividades, modelo de detalhes de tarefas, pesquisa, notificações e um novo fluxo de projeto.
A ideia era simples: gerar um front-end completo do React, executá-lo localmente no navegador e avaliar qual ferramenta realmente entendia pequenas decisões de UI e UX que importam em um aplicativo real.
Como esperado, usei os planos pagos de todos os três serviços e usei os modelos mais elevados disponíveis para este exercício.
Código
O mais fraco do grupo
Codex acabou sendo o mais fraco dos três para mim. Para ser claro, compreendeu a tarefa no papel. Ele criou um aplicativo web de gerenciamento adequado com as seções de painel esperadas, painel de tarefas, pesquisa, mapas de projeto e painéis de suporte. O problema foi a execução.
A IU geral apresentava problemas óbvios de dimensionamento, com fontes aparecendo muito pequenas em várias partes da interface. Em vez de parecer um aplicativo de gerenciamento de projetos sofisticado, parecia um pouco apertado, como se muitas informações estivessem amontoadas na tela sem atenção suficiente à legibilidade.
Também houve alguns problemas de UX. Quando abri uma tarefa no painel de tarefas, esperava um pequeno painel pop-up, modal ou de detalhes que me mantivesse no contexto. Em vez disso, o Codex abriu-o na barra lateral, o que pareceu estranho e interrompeu o fluxo.
Era funcional, mas não pensado. A função de pesquisa funcionou conforme o esperado, o que foi um sinal positivo, mas o resto da interface não tinha as melhorias que eu procurava.
Até o ícone do aplicativo web gerado parecia desconectado do produto. Não teve nada a ver com projetos, tarefas, planejamento ou gestão de equipes. O Codex atendeu aos requisitos básicos, mas perdeu muitos dos pequenos detalhes de UX que fazem o front-end parecer polido.
Antigravidade do Google
Chegou muito perto
No geral, o Google Antigravity fez um trabalho maravilhoso e imediatamente pareceu um esforço mais sério do que o Codex. A primeira coisa que notei foi que a interface não sofria dos mesmos problemas de dimensionamento. As fontes eram mais fáceis de ler; as seções tinham mais espaço para respirar e o painel geral parecia muito mais equilibrado no navegador.
Dito isto, ainda não era perfeito. A seção Projetos Ativos poderia ter sido melhor desenhada, principalmente por ser uma das áreas mais importantes do aplicativo.
As barras de progresso funcionavam, mas faltavam detalhes contextuais. Independentemente do status do projeto, a barra permaneceu azul. Uma escolha de UX mais cuidadosa teria sido mudar de cor com base no progresso: verde para projetos acima de 70%, vermelho para projetos abaixo de 25% e amarelo para qualquer valor intermediário.
Esses pequenos detalhes são importantes porque ajudam os usuários a entender o status rapidamente. O desempenho geral é um sólido 8 em 10 para mim.
O verdadeiro poder de Claude Code vem das melhorias das quais ninguém quer falar
Claude Code fica melhor quando você para de perseguir fluxos de trabalho chamativos e começa a obter detalhes enfadonhos de configuração.
Código Claude
Os pequenos detalhes estão fixados
Claude Code imediatamente se sentiu mais em casa. A interface tinha elementos legais e não parecia um painel simplesmente montado a partir de uma lista de verificação.
As opções de espaçamento, layout e componentes trabalharam juntas para tornar o aplicativo de gerenciamento de projetos mais fácil de digitalizar e mais agradável de usar.
A maior diferença estava nos pequenos detalhes. Claude Code definiu as barras de progresso do projeto. Pude perceber imediatamente quais projetos estavam próximos da conclusão e quais ainda precisavam de trabalho sério.
Parece simples, mas é exatamente o tipo de decisão de UX que separa uma interface sofisticada de uma maquete funcional. Também gostei da iconografia, do ícone do projeto e da linguagem visual geral.
Até as animações eram suaves e bem pensadas, em vez de chamativas. O quadro Kanban também foi melhor desenhado que os demais, com cartões de tarefas mais limpos, agrupamento mais claro e melhor separação visual entre colunas.
Pequenas métricas como Saudável, On Pace e rótulos de status semelhantes fizeram uma grande diferença. O uso de cores diferentes deu mais contexto ao painel sem torná-lo barulhento.
No entanto, a corrida foi mais disputada do que o esperado
Este teste mostrou que criar um front-end sofisticado envolve mais do que criar um painel funcional. O Codex seguiu o resumo, mas problemas de escala, tipografia pequena, interações desajeitadas de missões e um ícone desconectado tornaram a experiência menos polida.
O Google Antigravity proporcionou uma melhoria significativa com uma interface limpa, balanceada e altamente utilizável que evitou grandes problemas. No entanto, ainda faltavam toques de UX bem pensados.
Claude Code se destacou como o resultado mais forte. Suas barras de progresso, quadro Kanban, iconografia, animações e indicadores de status criaram uma sensação de produto e forneceram a melhor compreensão geral da experiência do usuário.
