原创 ElliotBai 2024-09-13 18:05 上海
谁是码王？
今天 OpenAI 终于发了新模型，大家都很兴奋。奥特曼说它推理很厉害，写代码很厉害，官方也演示了一段用 HTML 和 CSS 写 Transformer原理的视频。刚好我之前也搭建了一个 UI 生成的工具，于是连夜就让OpenAI 的新模型来挑战了一下现在的前端代码擂主：克劳德！用实战来看能不能挑战成功！（之前在我的工具环境中测试下来，Claude 遥遥领先，OpenAI 在前端代码能力上，跟 DeepSeek 不相上下）
参赛选手：
OpenAI - o1-mini，OpenAI - 01-preview，claude-3-5-sonnet-20240620
参赛规则：
统一走中转 API（公平公正）
相同的工程环境（React，给的相同的组件库）
每一局每位选手最多有 3 次机会，一次成功得分最高。
如果失败，则会把报错信息给到模型继续修改，相应分数也会有折扣
题目：Claude 和 OpenAI 各出了一套，最后各选一半
结论有点出人意料，先看效果~
第 1 局
题目：设计一个简洁的个人博客首页，包含博主简介、最新文章列表和一个简单的导航栏。
速度：in ➡️ out，Claude 平均在 20s 左右，preview 平均 1-2 分钟
效果：主观看，Claude 略胜一筹，至少对 React 库更熟悉，代码版本也了解的更多
美感：指定了 Shadcn 这个UI库，所以可能出来的风格都差不多，这里其实只放了部分的效果，还是Claude略胜一筹
Claude
o1-mini
o1-preview
耗时：76s
思考：59s
备注：为了大家更了解思考了啥，我贴一块思考内容，后面就不放了，有兴趣可以去飞书看
content: > 正在思考
填写指令我正在生成任务代码，确保组件适应预览区域尺寸1703px宽、1071px高。我正在使用TSX代码，保持代码简洁明了，满足 要求。
构建个人博客首页我正在生成一个简单的个人博客主页代码，包含博主介绍、最新文章列表和一个简单的导航栏。页面尺寸受限在1703px宽度和1071px高度内，不会超出或产生滚动条。
制定代码规范我正在确保所有JSX代码都使用例子中的组件，且是单个静态文件，所有数据直接内联，不接受外部数据。
创建主页我正在写一个简单的博客主页代码，确保页面尺寸适合，避免滚动条出现。
整理思路和资源我正在梳理博客首页的布局需求，包括导航栏、博客介绍和最新文章列表。现有的基础UI和布局组件可以有效地实现这些功能。
引入必要组件我正在集成react和一些UI组件，如navigation-menu和button，设置博客主页的标题和描述。这个过程涉及到快速集成和配置。
展示新功能浏览一些文章，覆盖主题包括JavaScript的ES2025特性、Tailwind CSS的样式设计和TypeScript的介绍，每篇文章都通过卡片形式呈现。
更新代码要求我看到需要将根 div 设置为特定的宽度和高度，以确保代码不会超出指定的尺寸。这样可以避免滚动条的出现。
设计博客主页使用React组件创建博客主页，包含导航菜单、头像、作者简介和最新文章的展示。
深入了解 JavaScript这是关于 JavaScript 2025 引入的新功能的文章探讨，深入探讨了这些新特性如何提升代码质量。了解这些新功能的关 键点和它们的实际应用。
理解代码结构我在读取完整代码后，发现 footer 是闭合且结束的，结构是完整的。
搭建博客页面我正在开发一个博客主页，包括导航菜单、简介、最新文章卡片等元素，使用React和Tailwind CSS。
探讨技术发展我正在细读关于拖拽更新和状态更新的文章，了解它们的工作原理和应用。这让我对现代前端技术有了更深的理解。
构建主页框架正在编写博客主页，包含导航栏、个人信息和文章列表。使用React组件构建，确保页面的直观和友好。
介绍新技术我正在探讨如何有效地使用Hooks，同时介绍JavaScript ES2025的新功能、Tailwind CSS的响应式设计和TypeScript的强类型优势。每个主题都伴有“阅读更多”按钮，供进一步了解。
第 2 局
题目：创建一个待办事项应用的界面，允许用户添加、删除和标记完成的任务。
Claude
o1-mini：
o1-preview：
耗时：85s
第 3 局
题目：设计一个天气应用的主页，显示当前天气、未来几天预报，并根据天气状况改变背景。
Claude：
o1-mini：
o1-preview：
耗时：25s
第 4 局
题目：实现一个在线食谱网站的搜索结果页面，包含筛选器和分页功能。
Claude
o1-mini
o1-preview：
耗时：38s 思考：15s
第 5 局
题目：创建一个电子商务网站的产品详情页，包含图片轮播、产品描述、用户评价和"加入购物车"功能。
Claude
o1-mini
o1-preview
耗时：121s思考：63s
第 6 局
题目：设计一个音乐流媒体服务的播放界面，包含播放控制、歌词显示和播放列表管理。
Claude
o1-mini：
第 1 次：失败，Token 超了
模型返回内容：> 正在思考
思考 6 秒
第 2 次：失败，代码错误
第 3 次：成功
o1-preview
耗时：145思考：41
第 7 局
题目：实现一个社交媒体平台的个人资料页面，支持自定义背景、头像上传和动态展示。
Claude
o1-mini
o1-preview
耗时：38思考：14
第 8 局
题目：创建一个在线课程平台的学习界面，包含视频播放器、课程大纲、笔记功能和进度跟踪。
Claude
o1-mini
第 1 次：失败，原因：库引用出错
第 2 次
o1-preview
耗时：72s思考：41s
第 9 局
题目：设计一个协作型项目管理工具的仪表板，包含任务看板、团队成员状态、项目进度图表和实时通知。
Claude
o1-mini：
第 1 次：失败，原因：库引用出错
第 2 次：成功
o1-preview
第 1 次：失败，没有思考，直出代码，报错了
第 2 次：成功，思考了
耗时：82s思考：57
第 10 局
题目：实现一个复杂的数据可视化平台的主界面，支持多种图表类型、实时数据更新、自定义仪表板和数据钻取功能。
Claude
第 1 次：失败，token超了（4096)
o1-mini：
第 1 次：失败，原因：库引用出错
模型返回内容：> 正在思考
生成React JSX文件我正在创建一个高保真度的React JSX文件，使用Tailwind CSS和指定的UI组件进行数据可视化。这将支持多个图表类型、实时数据更新和自定义仪表板功能。实时数据更新将通过占位符来模拟。整理界面布局我正绘制布局，包含侧边栏、头部和主页内容区，用多个图表和控制组件模拟仪表板的外观。...
思考 几秒
第 2 次：失败，原因：Charts 库引用出错（用的 shadcn）
第 3 次：失败，原因：Charts 库引用出错（用的 shadcn）
o1-preview
第 1 次：失败，原因：库引用出错
第 2 次：失败，原因：看下面自查
第 3 次：成功，思考了64s
结论
前端这块，OpenAI思考完的效果都没有追上Claude
速度
Claude 平均耗时大约 20 秒 完成任务。
OpenAI 的 o1-mini 和 o1-preview 模型通常需要 1-2 分钟 来生成代码，速度明显慢于 Claude。
准确率（一次成功）
Claude: 9/10 场比赛一次成功，说明其在生成前端代码时表现更为稳定且高效。
OpenAI 的两个模型，尤其是 o1-preview，虽然不断尝试调整代码逻辑，但一次成功的次数明显少于 Claude。
代码熟练度与效果
Claude 对于 React 及其库的熟悉度更高，特别是在处理复杂组件和动态页面布局方面表现出色。OpenAI 的模型虽然可以通过思考和调整来生成代码，但其过程显得重复冗余，特别是在需要快速生成代码时显得效率低下。
在美感和功能性上，由于指定使用相同的 UI 库（Shadcn），生成的界面在风格上差别不大，但 Claude 依旧凭借对布局和响应式设计的更好把控，略胜一筹。
思考
最后在观察o1思考过程的时候发现，OpenAI o1 似乎只是把 Planning 揉进了接口调用里，说简单点，就是用户的query发出之后，用工程方式去不断自己调自己的模型（比如4o），然后不断纠正。AutoGPT即视感。我们回头看第一局设计博客页面的时候o1思考的具体内容（为了直观，我把title单独拎出来了），深红是匪夷所思的思考内容，粉色是重复累赘思考的内容，这样再来看是不是就很熟悉了？重复，累赘，多消耗点tokens。看是不是就很熟悉了？重复，累赘，多消耗点tokens。
