原创 ElliotBai 2024-09-13 18:05 上海
谁是码王？
统一走中转 API（公平公正）
相同的工程环境（React，给的相同的组件库）
每一局每位选手最多有 3 次机会，一次成功得分最高。
如果失败，则会把报错信息给到模型继续修改，相应分数也会有折扣
题目：Claude 和 OpenAI 各出了一套，最后各选一半结论有点出人意料，先看效果~第 1 局题目：设计一个简洁的个人博客首页，包含博主简介、最新文章列表和一个简单的导航栏。速度：in ➡️ out，Claude 平均在 20s 左右，preview 平均 1-2 分钟
效果：主观看，Claude 略胜一筹，至少对 React 库更熟悉，代码版本也了解的更多
美感：指定了 Shadcn 这个UI库，所以可能出来的风格都差不多，这里其实只放了部分的效果，还是Claude略胜一筹
Claudecontent: > 正在思考填写指令我正在生成任务代码，确保组件适应预览区域尺寸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的强类型优势。每个主题都伴有“阅读更多”按钮，供进一步了解。
第 1 次：失败，Token 超了
模型返回内容：> 正在思考思考 6 秒
第 2 次：失败，代码错误
第 3 次：成功
第 1 次：失败，原因：库引用出错
第 2 次
第 1 次：失败，原因：库引用出错
第 2 次：成功
第 1 次：失败，没有思考，直出代码，报错了
第 2 次：成功，思考了
耗时：82s思考：57第 1 次：失败，token超了（4096)
第 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。