[Transferir] Desempenho incrível, mas há um calcanhar de Aquiles: recursos de desenvolvimento front-end do GPT-5 de uma gama completa de perfis detalhados

Recentes casos de alto perfil GPT-5 Após os rumores do lançamento do modelo, seus recursos na área de geração de código, especialmente no desenvolvimento de front-end, tornaram-se o foco da comunidade. Em comparação com seu modelo predecessor, oGPT-5 O progresso é significativo? E como ele se relacionará com o Claude 4.1eGemini 2.5 Pro e outros concorrentes importantes?

Neste artigo, faremos uma análise detalhada, lado a lado, dos recursos de código desses três grandes modelos de linguagem por meio de uma série de tarefas de front-end que variam de simples a complexas, com o objetivo de explorar seus desempenhos no mundo real em termos de qualidade de geração de código, adesão a palavras-chave, compreensão de design de UX e tratamento de requisitos complexos.

Teste 1: Layout com estilo de grade Bento

O primeiro teste se concentra em Bento Grid geração de páginas estáticas na Web. Essa é uma maneira de imitar o lançamento da Apple PPT layout de grade de estilo que enfatiza a assimetria dos elementos visuais e a clareza da hierarquia de informações. O teste foi projetado para avaliar a eficácia do modelo em relação aos modernos UI Compreensão das tendências de design e CSS Alcançar a competência.

Principais palavras-chave:

基于下面产品介绍文章关键信息，帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示，具体要求为：
1. 尽量在一页展示全部信息，背景为#F8F6F5、卡片背景为白色，文字颜色为#010101，高亮按钮和文字背景色为#F69AAC-DF95E3-7DBDE9 的渐变 ，卡片内的布局为主标题简短表述加大图标
2. 将 Markdown 格式的图片链接的图标放到合适的卡片中，防止图标跟文字重叠
3. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
4. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
5. 中英文混用，中文大字体粗体，英文小字作为点缀
6. 简洁的勾线图形化作为数据可视化或者配图元素
7. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
8. 数据可以引用在线的图表组件，样式需要跟主题一致
9. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
10. 避免使用emoji作为主要图标
11. 不要省略内容要点

Resultados da revisão:

Nesta rodada.Gemini 2.5 Pro O desempenho é o melhor possível, com as páginas geradas sendo muito precisas em termos de espaçamento, uso de cores e inclusão de ícones de luz como acentos para o melhor detalhamento.GPT-5 responder cantando Claude 4.1 Os resultados foram semelhantes e justos, mas a Claude 4.1 A não observância total da regra "Não use Emoji"A diretriz expõe algumas de suas deficiências na conformidade com a diretriz.

Teste 2: geração de cobertura pública

O segundo teste exigiu que o modelo gerasse uma combinação de imagens de capa de números públicos do WeChat em um estilo "minimalista". Essa tarefa não apenas testa CSS Além disso, a habilidade de layout testa a capacidade do modelo de entender e reproduzir estilos de design abstratos, especialmente o controle preciso de detalhes como fontes, tipografia e elementos geométricos.

Principais palavras-chave:

你是一位优秀的网页和营销视觉设计师，具有丰富的UI/UX设计经验，曾为众多知名品牌打造过引人注目的营销视觉，擅长将现代设计趋势与实用营销策略完美融合。
请使用HTML和CSS代码按照设计风格要求部分创建一个的微信公众号封面图片组合布局。我需要的设计应具有强烈的视觉冲击力和现代感。

## 基本要求：    - **尺寸与比例**：  - 整体比例严格保持为3.35:1  - 容器高度应随宽度变化自动调整，始终保持比例  - 左边区域放置2.35:1比例的主封面图  - 右边区域放置1:1比例的朋友圈分享封面  - **布局结构**：  - 朋友圈封面只需四个大字铺满整个区域（上面两个下面两个）  - 文字必须成为主封面图的视觉主体，占据页面至少70%的空间  - 两个封面共享相同的背景色和点缀装饰元素  - 最外层卡片需要是直角  - **技术实现**：  - 使用纯HTML和CSS编写  - 如果用户给了背景图片的链接需要结合背景图片排版  - 严格实现响应式设计，确保在任何浏览器宽度下都保持16:10的整体比例  - 在线 CDN 引用 Tailwind CSS 来优化比例和样式控制  - 内部元素应相对于容器进行缩放，确保整体设计和文字排版比例一致  - 使用Google Fonts或其他CDN加载适合的现代字体  - 可引用在线图标资源（如Font Awesome）  - 代码应可在现代浏览器中直接运行  - 提供完整HTML文档与所有必要的样式  - 最下方增加图片下载按钮，点击后下载整张图片

## 设计风格：极简格栅主义封面风格- 黑白极简风格：以纯黑背景和纯白内容区形成鲜明对比- 强烈的几何感：使用简洁的线条、方框和圆形等基础几何元素- 网格系统布局：遵循严格的网格排版规则，结构清晰有序- 留白有度：大量留白创造呼吸感，同时保持视觉重心- 摄影与排版结合：真实场景照片与极简排版形成互补- 工业风格装饰：细线箭头、指示线条等元素增添设计感- 微妙的色彩点缀：小面积绿色等强调色打破黑白单调文字排版风格- 大胆字号对比：核心标题极大化处理，形成主视觉- 几何式分割标题：将主标题分解成独立区块，增强辨识度- 纵横组合排版：文字既有横排也有竖排，创造韵律感- 字体粗细对比强烈：主标题采用超黑体，副文本则较为轻盈- 多层级信息排列：活动名称、日期、宣传语清晰分级- 严格的文字对齐：所有文字元素依循严格的网格对齐原则- 中英文混排：英文作为装饰性元素增添国际设计感视觉元素风格- 裁切的摄影图像：图片经过精心裁切，凸显主题- 指示性线条：箭头、曲线和直线作为引导性视觉元素- 框架式强调：使用方框、底色块等元素强调关键信息- 简洁图形符号：最小化的视觉符号传达核心信息- 构图对称与不对称并存：整体结构有序但细节处理不拘一格- 空间层次感：通过元素大小、位置创造前后层次关系- 数字图形化处理：日期数字被赋予视觉设计感

## 用户输入内容- 公众号标题为：[藏师傅暴论：AI工具尽头是生态｜即梦AI创作者成长计划介绍]右侧文字为：”创作者生态”分为两行，居中对齐

Resultados da revisão:

GPT-5 Supera o desempenho de outros modelos nesta rodada. Embora não seja tão esteticamente agradável quanto o Claudemas conseguiu renderizar tudo dentro da tela fixa sem transbordar e adicionou os elementos de embelezamento necessários. Em contrapartida, outros modelos, como o GeminiO usuário, por sua vez, tem um problema ao lidar com julgamentos de tamanho de fonte em uma tela fixa, o que resulta em sobreposição de conteúdo e incapacidade de formar um design utilizável. Isso sugere que GPT-5 Avanços na compreensão das relações espaciais sob restrições complexas.

Teste III: Ferramentas de gerenciamento de estoque

Esse teste exigiu a criação de uma ferramenta de gerenciamento de inventário com um front-end multifuncional, incluindo gerenciamento de mercadorias, operações de entrada e saída e Kanban de dados, e exigiu o uso do localStorage Realizar a persistência de dados. Essa é uma tarefa abrangente que testa o modelo para gerar aplicativos de página única estruturados e totalmente funcionais (SPA) capacidade.

Principais palavras-chave:

请帮我创建一个完整的网页版商品管理工具，具体要求如下： 功能需求
1. 商品管理 - 商品信息录入：商品名称、种类/分类、SKU编号、价格、库存数量 - 商品图片管理：支持图片上传预览（可用文件选择器模拟） - 商品列表展示：表格形式展示所有商品，支持搜索和筛选 - 商品编辑：支持修改商品信息 - 商品删除：支持删除商品（需确认提示）
2. 库存管理 - 入库操作：增加商品库存数量，记录入库时间和数量 - 出库操作：减少商品库存数量，记录出库时间和数量 - 库存记录：显示每个商品的库存变动历史
3. 界面功能 - 仪表板：显示商品总数、库存总值、低库存预警等统计信息 - 响应式设计：适配桌面和移动设备 - 数据持久化：使用localStorage保存数据 技术要求 样式和图标 - CSS框架：使用 TailwindCSS 3.0+ CDN引入 - 图标库：使用 Heroicons 或 Feather Icons CDN引入 - 字体：使用 Google Fonts 代码结构 - 单页面应用：HTML + CSS + JavaScript - 模块化设计：将功能分解为不同的JavaScript模块 - 数据格式：使用JSON格式存储商品数据 界面设计要求 - 现代化UI：简洁美观的界面设计 - 颜色方案：使用专业的商务色彩搭配 - 交互反馈：按钮点击、表单验证等交互效果 - 表单验证：必填字段验证、数据格式验证 数据结构示例 请生成完整的HTML文件，包含所有必要的CSS和JavaScript代码，确保功能完整且可以直接在浏览器中运行。

Resultados da revisão:

Claude 4.1 Ele teve o melhor desempenho nesse teste. Ele gerou um layout lógico e claro de várias páginas, com cada função correspondendo a uma página separada, com um estilo regular que é intuitivo para o usuário.

GPT-5 Herda seu modelo predecessor GPT-4o Um dos problemas: a tendência de empilhar todas as funcionalidades na mesma página, possivelmente devido a limitações da janela contextual que impossibilitam o planejamento eficiente de estruturas complexas de aplicativos. Essa prática prejudica seriamente a experiência do usuário.

Gemini Embora várias páginas sejam implementadas, a interface resultante é menos agradável esteticamente e o design da interação é menos intuitivo quando não são impostas restrições estritas de estilo.

Teste 4: arrastar e soltar o BI Canvas

O quarto teste requer a criação de um painel personalizado (BI canvas) que suporta arrastar e soltar, redimensionar e salvar o estado. O objetivo dessa tarefa era avaliar o desempenho do modelo em JavaScript Interação,DOM e a capacidade de integrar bibliotecas de terceiros, como as de arrastar e soltar.

Principais palavras-chave:

网格布局系统： 支持响应式网格，小部件可以自动对齐和调整大小。
小部件库： 提供一个可供选择的小部件列表，例如图表（折线图、饼图）、数据卡片、任务列表、时钟等。
拖放功能： 用户可以直观地拖动小部件来改变其在仪表盘上的位置。
调整大小： 用户可以拖动小部件的边缘来调整其尺寸。
状态保存： 仪表盘的布局和小部件配置（例如，图表的数据源）可以被保存（例如在 LocalStorage 或后端服务器中），以便用户下次访问时恢复。
添加/删除小部件： 用户可以从库中添加新的小部件，或关闭不再需要的小部件。
专业的用户界面： 简洁、现代的设计，清晰的网格线和占位符提示，流畅的拖放动画。

Resultados da revisão:

Surpreendentemente, em uma tarefa que muitos modelos desenvolvidos internamente são capazes de realizar, oClaude 4.1 responder cantando Gemini 2.5 Pro Nenhum foi bem-sucedido.Claude 4.1 O recurso de arrastar é falho e não pode ser redimensionado, enquanto o Gemini Novamente, não é possível redimensionar.

GPT-5 No entanto, ele implementa com êxito todas as funções principais, incluindo arrastar e soltar e redimensionar, e o estilo padrão é mais bonito e excepcional.

Teste 5: Processo de checkout de um site de luxo

O teste final foi uma tarefa altamente complexa: criar um carrinho de compras de alta fidelidade e um processo de checkout em três etapas para um site de luxo. UIe fornece especificações extremamente detalhadas de cores, fontes, layouts e interações. Isso testa de forma abrangente a capacidade do modelo de seguir restrições de design complexas e refinadas.

Principais palavras-chave:

角色与目标——担任高级 UX/UI 设计师。为 “VELLORA” 在线商店（奢华而平易近人的时尚与配饰）创建高保真的桌面网页。包含：精致的购物车页面，以及独立的结账流程（3 步：送货 • 付款 • 审核/确认）。
【Quiet Luxury · 石墨中性】——色板（Hex）- 页面背景：#F7F7F7（浅灰）；内容卡片：#FFFFFF- 主文本：#222426；次文本：#6B6E73；强调近黑：#0E0E0F- 品牌点缀（选其一并全站统一使用）：#9AA18E（Sage 鼠尾草）或 #8E7C6D（Mocha 摩卡）- 分隔/描边：#E7E7E7（1px 细线）；发丝线可用 rgba(0,0,0,.06)字体- H1/H2：优雅衬线 **Newsreader**（备选：Cormorant Garamond）- UI 文本：几何无衬线 **Manrope**（备选：Inter）- 数字/价格允许使用等宽样式（Manrope Tabular）圆角与阴影- 圆角：按钮与输入 12px；卡片/模态 16px- 阴影：s-sm：0 1px 2px rgba(17,17,19,.06)；s-md：0 8px 24px rgba(17,17,19,.08)（浮层/模态使用）- 分隔以 1px 线为主，阴影少量点缀，整体克制屏幕与关键布局（保持原功能/流程，按下述结构出高保真）——
1) 购物车界面（桌面 & 移动）- 桌面布局：  · 左栏：购物车商品列表（此处省略长表格）。每张商品卡片包含：缩略图、商品名称、颜色/尺码、单价、数量步进 (+/–)、“稍后保存”、移除 (×)  · 右栏（置顶）：订单摘要卡片（小计、预计运费、税费/关税、优惠码输入与验证、总计），主要 CTA「去结账」，支持“继续购物”次级链接- 移动布局：  · 列表纵向滚动；摘要卡片固定底部（安全区内），显示总计与主要 CTA  · 数量步进与移除操作就地完成，避免跳层  · 优惠码折叠，点击展开输入
2) 结账流程（3 步）——送货 • 付款 • 审核/确认- 通用  · 顶部步骤条（当前高亮，已完成打勾，可点击返回修改）  · 表单分组拥有清晰分隔标题与说明文本；错误就地提示  · 支持“返回购物车”与“继续下一步”双按钮（主要/次要层级明确）- 步骤一：送货（Shipping）  · 字段：收件人、电话、邮箱、国家/地区（联动省市区）、地址1/2、邮编；发票与备注（可选）  · 运送方式卡片：标准/加急/当日（价格与预计到达时间），选择后实时更新摘要- 步骤二：付款（Payment）  · 方式：信用卡、支付宝/微信；卡片信息实时掩码；账单地址同收货地址的复选  · 安全与合规说明（小字）- 步骤三：审核/确认（Review & Confirm）  · 汇总：收货信息、配送方式、付款方式尾号、商品清单与金额；可就地编辑返回相应步骤  · 同意条款复选；下单 CTA；下单后显示订单号与下一步指

Resultados da revisão:

GPT-5 O desempenho nesta rodada é impressionante. Ele seguiu todas as especificações de design quase perfeitamente, com hierarquia de conteúdo impecável, consistência de página e design responsivo, demonstrando forte aderência ao comando.

Claude 4.1 O desempenho foi razoável, mas houve problemas de layout no processo de pagamento, que não aproveitou totalmente o espaço horizontal, resultando em caixas de entrada muito estreitas e falta de validação de formulário.

Gemini O resultado é muito ruim, com estilos quase completamente perdidos, e a página resultante é como uma página que não passou pelo processo de CSS Renderizado "rough house".

Conclusão e análise

Em conjunto.GPT-5 A capacidade de geração de código de front-end se compara favoravelmente ao OpenAI Os modelos anteriores deram um salto qualitativo, especialmente no que se refere a seguir restrições de estilo complexas e implementar JavaScript A interação é excelente.

No entanto.GPT-5 Não sem deficiências. Em tarefas que exigem a compreensão e o planejamento de arquiteturas de aplicativos complexas (por exemplo, ferramentas de gerenciamento de inventário), ele ainda não tem um desempenho tão bom quanto o Claude 4.1. Mais importante ainda, alega-se que Plus A versão do usuário só está disponível 32K janela de contexto, que se torna seu calcanhar de Aquiles.

32K O contexto do modelo significa que ele "esquece" rapidamente os diálogos anteriores após uma única geração. Para tarefas de programação que exigem depuração, modificação e iteração repetidas, essa limitação reduz muito sua usabilidade em comparação com as janelas de contexto mais longas do Gemini e outros modelos estão em desvantagem competitiva.