Revisão cruzada das ferramentas de programação de IA: quem realmente faz a prototipagem de alta fidelidade?

A programação de IA se tornou um dos caminhos mais concorridos na atual onda de IA. De CursoreWindsurf até v0 pela Vercel, surgiram vários agentes de programação. Por trás de seu surgimento está a Anthropic ClaudeeOpenAI GPTeGoogle Gemini O salto na capacidade de geração de código dos grandes modelos subjacentes, como o

No entanto, em junho de 2025, quais são os recursos reais dessas ferramentas de programação de IA? Qual é a diferença na qualidade da geração de código entre os diferentes modelos? Esta análise fará uma comparação lado a lado dos principais produtos de programação de IA do mercado e seus modelos integrados por meio de um requisito de desenvolvimento unificado do mundo real, a fim de fornecer uma observação intuitiva e informativa.

Benchmarking: um aplicativo chamado "My MBTI Circle of Friends" (Meu círculo de amigos MBTI).

Para testar com eficácia os recursos combinados dessas ferramentas, criamos uma tarefa de complexidade moderada: gerar um protótipo de design de alta fidelidade de um aplicativo chamado "My MBTI AI Circle of Friends".

O conceito central do aplicativo é oferecer aos usuários uma companhia emocional. Os usuários podem usar cartões para registrar momentos da vida na linha do tempo, como se estivessem escrevendo um diário, e uma série de amigos de IA com diferentes personalidades MBTI incorporadas ao sistema responderá às publicações do usuário de acordo com sua própria "persona". Essa tarefa não apenas testa a compreensão da lógica funcional da IA, mas também apresenta requisitos claros para o design da interface do usuário, a estrutura do código e os recursos de engenharia de front-end.

Aqui está o Prompt principal usado para esta análise:

我想开发一款名为“我的MBTI AI朋友圈”的中文情感陪伴 App，功能需求如下：
1.  **核心功能**：用户可以通过卡片+时间线的交互方式，记录想法、计划、待办事项、情绪、链接等生活点滴。本质上，它首先是一款 AI 日记软件。
2.  **AI 交互**：系统预设了一系列不同 MBTI 性格的 AI Agent。这些 Agent 会根据各自的性格特点，对用户的记录做出不同的回应。
3.  **社交关系**：用户可以选择并关注不同的 AI Agent。
4.  **分享功能**：用户可以分享自己的记录以及 AI Agent 的回应。
5.  **核心价值**：通过 AI 的回应和分享功能，为用户提供情感陪伴。
现在，需要输出该 App 的高保真原型图。请通过以下方式完成所有界面的原型设计，并确保这些原型可以直接用于前端开发：
1.  **用户体验分析**：分析 App 的主要功能和用户需求，确定核心交互逻辑。
2.  **产品界面规划**：作为产品经理，定义关键界面，确保信息架构合理。
3.  **高保真 UI 设计**：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4.  **HTML 原型实现**：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件库）让界面更加精美。代码文件需要拆分，保持结构清晰。
5.  **文件结构要求**：
-   每个界面作为一个独立的 HTML 文件存放，例如 `home.html`、`profile.html`、`settings.html`。
-   `index.html` 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 `iframe` 的方式嵌入其他 HTML 页面，并将所有页面在 `index` 页面中平铺展示，而非通过链接跳转。
6.  **真实感增强**：
-   界面尺寸模拟 iPhone 15 Pro，并进行圆角化处理。
-   使用真实的 UI 图片（可从 Unsplash、Pexels 等图库选取），而非占位符。
-   添加模拟 iOS 顶部状态栏和底部 TabBar 导航栏。
请按照以上要求，在 `design-trae-DeepSeekR1` 文件夹中生成完整的 HTML 代码。

O desafio desse Prompt é que ele exige que a IA seja mais do que apenas um gerador de código, mas que também desempenhe as funções de gerente de produto, designer de UI/UX e engenheiro de front-end. Isso é especialmente verdadeiro para iframe A exigência de apresentações em mosaico e estruturas de arquivos separadas é um teste direto da capacidade da IA de organizar o código no nível do projeto.

Rodada 1: Avaliações de ferramentas de integração de IDE nativo

Primeiro, analisamos os plug-ins de programação de IA integrados nos IDEs locais, principalmente na forma do Cursor responder cantando Trae é um representante desse tipo de ferramenta. A vantagem dessas ferramentas é sua profunda integração ao fluxo de trabalho existente do desenvolvedor.

Cursor

Cursor + Claude 3.5 Sonnet

• Pontuação: 60
• Avaliação: Habitação irregular qualificada

Cursor junto com Claude 3.5 Sonnet A combinação dos dois foi basicamente a conclusão da tarefa. No nível funcional, ele implementa com precisão a maioria dos requisitos principais, mas gera uma página redundante e que não pode ser aberta. No nível da interface do usuário, o esqueleto da interface está completo, mas os ícones não são carregados da Web conforme necessário, e o estilo geral é simples. Embora existam falhas, como primeira versão do protótipo, ele atende à linha de aprovação.

Cursor + Claude 4 Sonnet

• Pontuação: 90
• Avaliação: Entregue com acabamentos

Essa é uma combinação impressionante.Claude 4 Sonnet O desempenho desse projeto está muito além das expectativas, a implementação da função é extremamente precisa, até mesmo na página "criar", adicionando cuidadosamente o tipo de postagem, a seleção de humor e outros elementos interativos. O design da interface do usuário é bonito, o material está bem preenchido e o efeito visual é excelente. O grau de conclusão é tão alto que quase pode ser entregue diretamente ao front-end para desenvolvimento posterior.

Cursor + Gemini 2.5 Pro

• Pontuação: 59
• Avaliação: conjunto curto com falhas críticas

Gemini 2.5 Pro O desempenho do Prompt não é tão bom quanto poderia ter sido. Embora a funcionalidade básica e os elementos da interface do usuário fossem bons, ele não conseguiu obter o efeito de "exibição direta de blocos" que o Prompt exigia explicitamente e, em vez disso, gerou páginas que exigiam cliques manuais para alternar entre elas. Essa é uma falha crítica de funcionalidade que afeta gravemente a usabilidade do protótipo, fazendo com que ele fracasse.

Cursor + GPT-4o

• Pontuação: 70
• Comentários desativados em Refreshingly Simple

GPT-4o O resultado do (sic o3) é funcionalmente preciso em relação aos requisitos, a interface é completa e os ícones são exibidos corretamente. Seu estilo de design é nítido e minimalista, e o efeito geral é superior ao do Claude 3.5 Sonnetque pode ser considerado um protótipo de boa qualidade para um conjunto curto.

Trae

Trae + Claude 3.5 Soneto

• Pontuação: 80
• Comentários desativados em Simplicidade requintada

Curiosamente, o mesmo Claude 3.5 Sonnet no modelo Trae O desempenho na plataforma é melhor do que na Cursor A interface do usuário é muito mais agradável esteticamente e rica em materiais. Além de fazer tudo com precisão, a interface do usuário é muito mais agradável esteticamente e rica em materiais, embora o design seja um pouco menos impressionante do que o do Claude 4 Sonnet versão, mas já é uma entrega de qualidade.

Trae + Claude 3.7 Soneto

• Pontuação: 59
• Avaliação: as mesmas falhas críticas

Surpreendentemente, a atualização Claude 3.7 Sonnet O desempenho da versão, em vez disso, regrediu. Com a Gemini 2.5 Pro cometeu o mesmo erro, mas não se deu conta iframe Tela plana, que também é uma falha fatal do recurso. Apesar do design esteticamente agradável da interface do usuário, a falha dos requisitos principais faz com que ele seja usado somente em conjunto com o Gemini A versão do livro é justaposta à versão do livro.

Trae + Claude 4 Sonnet

• Pontuação: 90
• Veredicto: Entregue com acabamentos novamente

Trae junto com Claude 4 Sonnet A combinação do modelo novamente se mostra decisiva. Seu resultado é semelhante ao do modelo Cursor A versão da plataforma também é excelente, com funcionalidade total, uma bela interface de usuário e até mesmo a adição de detalhes de upload de anexos à função de criação. Mais uma vez, isso é uma prova de que a Claude 4 Sonnet liderança em tais tarefas.

Trae + Gemini 2.5 Pro

• Pontuação: 50
• Veredicto: esboçado e com falhas grosseiras

Gemini 2.5 Pro existir Trae O desempenho no é ainda melhor do que no Cursor Pior ainda. Além da falha central de não conseguir obter uma exibição em mosaico, a interface sofre com a falta de ícones e o estilo geral é muito austero.

Trae + DeepSeek R1

• Pontuação: 40
• Avaliação: bruto abandonado

DeepSeek R1 O desempenho é o pior do grupo de IDEs locais. Ele não apenas falha na colocação de ladrilhos, mas até mesmo a troca básica de páginas apresenta erros, com a página de erro aparecendo após clicar em Tab. A funcionalidade e a interface do usuário estavam incompletas, e o protótipo era basicamente inutilizável.

Rodada 2: Revisão da plataforma de programação de IA baseada em nuvem

Em seguida, passamos aos produtos baseados em nuvem. Essas ferramentas são executadas diretamente no navegador, sem instalação local, e representam outro paradigma de programação de IA.

Replit

• Pontuação: 50
• Veredicto: simplicidade imperfeita

IDE de nuvem veterano Replit (modelo desconhecido) foi medíocre neste teste. Ele também não cumpre o requisito principal de exibição em mosaico. Embora a estrutura básica e os ícones da interface tenham sido mantidos, o design geral é rudimentar e há uma clara lacuna na qualidade de geração das principais ferramentas de IA.

Adorável

• Pontuação: 95
• REVISÃO: Impressionantes acabamentos sob medida

Lovable O resultado é revelador e o maior azarão da análise. Ele implementa perfeitamente todos os requisitos do Prompt, inclusive o iframe Exibição de blocos. Funcionalmente, ele não apenas implementa todas as funções básicas, mas também adiciona opções avançadas, como configurações de privacidade na página de criação. A interface do usuário é muito bem projetada e rica em materiais, e a experiência visual supera até mesmo a do Claude 4 Sonnet versões. Isso mostra que um produto de IA profundamente otimizado para uma tarefa específica, como a geração de protótipos front-end, pode superar o desempenho de um modelo genérico.

v0

Lançado pela Vercel v0 é uma ferramenta que se concentra na geração de componentes de front-end. Testamos sua v0-1.5-md responder cantando v0-1.5-lg Dois modelos.

v0 + v0-1.5-md

• Pontuação: 55
• Avaliação: Falha grosseira

v0-1.5-md O desempenho do modelo é mediano. Ele também não consegue obter uma exibição em mosaico e tem ícones de interface ausentes. Embora o design seja minimalista, suas falhas de funcionalidade e a falta de conteúdo diminuem seu valor como protótipo.

v0 + v0-1.5-lg

• Pontuação: 65
• Avaliação: Habitação irregular qualificada

paramétrico v0-1.5-lg O desempenho do modelo melhorou. Desta vez, ele implementa corretamente a exibição em mosaico e funciona de forma bastante precisa. A interface da IU está completa, mas os ícones ainda precisam ser preenchidos manualmente. O efeito geral é semelhante ao do Cursor + Claude 3.5 Sonnet A combinação é comparável à de um protótipo competente da primeira edição que está aguardando renovação adicional.

Parafuso.novo

• Pontuação: 40
• Avaliação: bruto abandonado

Bolt.new indicadores de desempenho DeepSeek R1 É igualmente ruim. Além de não conseguir obter uma apresentação em mosaico, os elementos da interface do usuário resultantes sofrem com graves problemas de layout e conteúdo ausente, e são basicamente inutilizáveis.

Cartão de pontuação de avaliações

Embora esta análise seja baseada em um único caso de uso e os resultados sejam um tanto aleatórios, ela revela claramente o cenário atual do mercado de ferramentas de programação de IA.

Os resultados finais da avaliação levam a uma conclusão clara: em tarefas como a prototipagem de front-end, a escolha do modelo é fundamental para determinar a qualidade do resultado final.Claude 4 Sonnet demonstrou uma combinação notável de habilidades, e os gostos de Lovable Esses setores verticais oferecem a melhor experiência por meio de uma otimização profunda.