[移籍］驚くべきパフォーマンスだが、アキレス腱がある：GPT-5のフロントエンド開発能力は、徹底的なプロファイリングが充実している

最近の注目株 GPT-5 このモデルのリリースが噂された後、コード生成、特にフロントエンド開発の分野におけるその能力が、コミュニティーの焦点となった。前身モデルと比べてGPT-5 その進歩は重要か？また、それがどのように Claude 4.1そしてGemini 2.5 Pro 他の主要な競合他社は？

この記事では、簡単なものから複雑なものまで、一連のフロントエンド・タスクを通して、これら3つのトップ・ビッグ言語モデルのコード能力を徹底的に横並びでレビューし、コード生成の品質、キュー・ワードの順守、UXデザインの理解、複雑な要件の処理といった点で、実際のパフォーマンスを探ることを目的とする。

テスト1：弁当グリッド・スタイル・レイアウト

最初のテストは、以下の点に焦点を当てる。 Bento Grid スタイルの静的ウェブページ生成。これは、アップルのローンチを模倣する方法である。 PPT 視覚的要素の非対称性と情報階層の明快さを強調するスタイルのグリッド・レイアウト。テストは、このモデルの有効性を最新の UI デザイントレンドの理解 CSS コンピテンスを達成する。

核となるキュー・ワード

基于下面产品介绍文章关键信息，帮我用类似苹果发布会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. 不要省略内容要点

レビュー結果

このラウンドではGemini 2.5 Pro 生成されるページは、間隔、色使い、アクセントとしてのライトアイコンなど、細部まで非常に正確で、パフォーマンスは最高だ。GPT-5 歌で応える Claude 4.1 結果は似たり寄ったりだったが Claude 4.1 使用しないでください。 Emoji「この指令は、指令遵守におけるいくつかの欠点を露呈している。

テスト2：パブリックカバーの生成

2つ目のテストでは、WeChatの公開番号のカバー画像を「ミニマリスト」スタイルで生成することが求められた。このタスクは CSS さらに、レイアウト能力は、抽象的なデザインスタイル、特にフォント、タイポグラフィ、幾何学的要素などの細部を正確にコントロールすることを理解し、再現するモデルの能力をテストする。

核となるキュー・ワード

你是一位优秀的网页和营销视觉设计师，具有丰富的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创作者成长计划介绍]右侧文字为：”创作者生态”分为两行，居中对齐

レビュー結果

GPT-5 このラウンドでは他のモデルを凌駕している。には美的センスで劣るが Claudeしかし、固定されたキャンバス内でオーバーフローすることなくすべてをレンダリングし、必要な装飾要素を追加することができた。これに対して Gemini固定されたキャンバスの下で、フォントサイズの判定を処理することに問題があり、その結果、コンテンツが重なり、使いやすいデザインを形成することができない。このことから GPT-5 複雑な制約のもとでの空間的関係の理解における進歩。

テストIII：在庫管理ツール

このテストでは、品目管理、入出庫業務、データかんばんなど、多機能なフロントエンドを備えた在庫管理ツールを作成する必要があり、そのために localStorage データ永続化を実行する。これは、構造化され、完全に機能する単一ページアプリケーションを生成するモデルをテストする包括的なタスクです (SPA)の容量である。

核となるキュー・ワード

请帮我创建一个完整的网页版商品管理工具，具体要求如下： 功能需求
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代码，确保功能完整且可以直接在浏览器中运行。

レビュー結果

Claude 4.1 このテストでは最高の結果を残した。論理的で明快な複数ページのレイアウトを生成し、各機能が個別のページに対応し、ユーザーにとって直感的な規則的なスタイルを備えている。

GPT-5 前身モデルを継承 GPT-4o 問題のひとつは、すべての機能を同じページにスタックする傾向があることだ。おそらく、複雑なアプリケーション構造を効率的に計画することを不可能にしている、コンテクスト・ウィンドウの制限によるものだろう。このやり方は、ユーザーエクスペリエンスに深刻なダメージを与える。

Gemini 複数のページが実装されているが、厳密なスタイル制約が課されない場合、結果として得られるインターフェイスは美的に美しくなく、インタラクション・デザインも直感的でない。

テスト4：BIキャンバスのドラッグ＆ドロップ

第 4 のテストでは、ドラッグ＆ドロップ、サイズ変更、状態保存をサポートするカスタムダッシュボード（BI キャンバス）を作成する必要がある。このタスクの目的は、複雑な JavaScript 交流だ、DOM 操作や、ドラッグ・アンド・ドロップ・ライブラリのようなサードパーティ製ライブラリを統合する機能を備えている。

核となるキュー・ワード

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

レビュー結果

驚くべきことに、多くの国産モデルが可能なタスクにおいてClaude 4.1 歌で応える Gemini 2.5 Pro いずれも成功しなかった。Claude 4.1 ドラッグ機能は欠陥があり、リサイズできない。 Gemini この場合もリサイズはできない。

GPT-5 しかし、ドラッグ・アンド・ドロップやリサイズなど、核となる機能はすべてうまく実装されており、デフォルトのスタイルはより美しく際立っている。

テスト5：高級ウェブサイトのチェックアウト・プロセス

最終的なテストは、非常に複雑なタスクであった。高級ウェブサイトのために、忠実度の高いショッピングカートと3段階のチェックアウトプロセスを作成することであった。 UIそして、色、フォント、レイアウト、インタラクションに関する非常に詳細な仕様を提供します。これは、複雑で洗練されたデザイン制約に従うモデルの能力を総合的にテストします。

核となるキュー・ワード

角色与目标——担任高级 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；下单后显示订单号与下一步指

レビュー結果

GPT-5 このラウンドでのパフォーマンスは見事だ。非の打ちどころのないコンテンツ階層、ページの一貫性、レスポンシブ・デザインなど、すべてのデザイン仕様にほぼ完璧に従っており、強力なコマンド順守を実証している。

Claude 4.1 パフォーマンスはまずまずだったが、決済プロセスにはレイアウト上の問題があり、横長のスペースを十分に活用できず、入力ボックスが狭すぎたり、フォームのバリデーションが不十分だったりした。

Gemini 結果はかなり悪く、スタイルはほとんど完全に失われ、出来上がったページはまるで CSS ラフハウス "レンダリング。

結論と分析

一緒に考えてみよう。GPT-5 フロントエンドのコード生成における能力は、以下のものと比べても遜色ない。 OpenAI これまでのモデルは、特に複雑なスタイル制約に従うことや、複雑な JavaScript 交流は素晴らしい。

しかしだ。GPT-5 欠点がないわけではない。複雑なアプリケーション・アーキテクチャを理解し、計画する必要があるタスク（例：在庫管理ツール）では、依然として Claude 4.1.さらに重要なのは、次のように主張されていることだ。 Plus ユーザー版のみ 32K コンテキスト・ウィンドウは、そのアキレス腱となる。

32K モデルのコンテキストは、1回の生成で以前のダイアログをすぐに「忘れる」ことを意味する。繰り返しデバッグ、修正、反復を必要とするプログラミング・タスクでは、この制限は、より長いコンテクスト・ウィンドウを持つ Gemini などは競争上不利になる。