OpenAI o1 代码能力实战篇

今天 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 局

设计一个简洁的个人博客首页，包含博主简介、最新文章列表和一个简单的导航栏。

• 速度：从输入到输出，Claude 平均在 20 秒左右，而 preview 平均需要 1 到 2 分钟。
• 效果：主观来看，Claude 略胜一筹，至少对 React 库更熟悉，对代码版本的了解也更多。
• 美感：指定了 Shadcn 这个 UI 库，所以出来的风格都差不多。这里只放了部分效果，但 Claude 仍然略胜一筹。

耗时：76s

思考：59s

备注：为了让大家更了解它思考了什么，这里截取一部分思考内容。后面就不放了，有兴趣可以去飞书看。

content: > 正在思考

填写指令

我正在生成任务代码，确保组件适应预览区域尺寸1703px宽、1071px高。我正在使用TSX代码，保持代码简洁明了，满足 要求。

构建个人博客首页

我正在生成一个简单的个人博客主页代码，包含博主介绍、最新文章列表和一个简单的导航栏。页面尺寸受限在1703px宽度和1071px高度内，不会超出或产生滚动条。

制定代码规范

我正在确保所有JSX代码都使用例子中的组件，且是单个静态文件，所有数据直接内联，不接受外部数据。

创建主页

我正在写一个简单的博客主页代码，确保页面尺寸适合，避免滚动条出现。

整理思路和资源

我正在梳理博客首页的布局需求，包括导航栏、博客介绍和最新文章列表。现有的基础UI和布局组件可以有效地实现这些功能。

引入必要组件

我正在集成react和一些UI组件，如na vigation-menu和button，设置博客主页的标题和描述。这个过程涉及到快速集成和配置。

展示新功能

浏览一些文章，覆盖主题包括Ja vaScript的ES2025特性、Tailwind CSS的样式设计和TypeScript的介绍，每篇文章都通过卡片形式呈现。

更新代码要求

我看到需要将根 div 设置为特定的宽度和高度，以确保代码不会超出指定的尺寸。这样可以避免滚动条的出现。

设计博客主页

使用React组件创建博客主页，包含导航菜单、头像、作者简介和最新文章的展示。

深入了解 Ja vaScript

这是关于 Ja vaScript 2025 引入的新功能的文章探讨，深入探讨了这些新特性如何提升代码质量。了解这些新功能的关 键点和它们的实际应用。

理解代码结构

我在读取完整代码后，发现 footer 是闭合且结束的，结构是完整的。

搭建博客页面

我正在开发一个博客主页，包括导航菜单、简介、最新文章卡片等元素，使用React和Tailwind CSS。

探讨技术发展

我正在细读关于拖拽更新和状态更新的文章，了解它们的工作原理和应用。这让我对现代前端技术有了更深的理解。

构建主页框架

正在编写博客主页，包含导航栏、个人信息和文章列表。使用React组件构建，确保页面的直观和友好。

介绍新技术

我正在探讨如何有效地使用Hooks，同时介绍Ja vaScript ES2025的新功能、Tailwind CSS的响应式设计和TypeScript的强类型优势。每个主题都伴有“阅读更多”按钮，供进一步了解。

第 2 局

创建一个待办事项应用的界面，允许用户添加、删除和标记完成的任务。

耗时：85s

第 3 局

设计一个天气应用的主页，显示当前天气、未来几天预报，并根据天气状况改变背景。

耗时：25s

第 4 局

实现一个在线食谱网站的搜索结果页面，包含筛选器和分页功能。

耗时：38s 思考：15s

第 5 局

创建一个电子商务网站的产品详情页，包含图片轮播、产品描述、用户评价和"加入购物车"功能。

耗时：121s思考：63s

第 6 局

设计一个音乐流媒体服务的播放界面，包含播放控制、歌词显示和播放列表管理。

• 第 1 次：失败，Token 超了

模型返回内容：> 正在思考

• 第 2 次：失败，代码错误
• 第 3 次：成功

耗时：145思考：41

第 7 局

实现一个社交媒体平台的个人资料页面，支持自定义背景、头像上传和动态展示。

耗时：38思考：14

第 8 局

创建一个在线课程平台的学习界面，包含视频播放器、课程大纲、笔记功能和进度跟踪。

• 第 1 次：失败，原因：库引用出错
• 第 2 次

耗时：72s思考：41s

第 9 局

设计一个协作型项目管理工具的仪表板，包含任务看板、团队成员状态、项目进度图表和实时通知。

• 第 1 次：失败，原因：库引用出错
• 第 2 次：成功

• 第 1 次：失败，没有思考，直出代码，报错了
• 第 2 次：成功，思考了

耗时：82s思考：57

第 10 局

实现一个复杂的数据可视化平台的主界面，支持多种图表类型、实时数据更新、自定义仪表板和数据钻取功能。

• 第 1 次：失败，token超了（4096)

• 第 1 次：失败，原因：库引用出错

模型返回内容：> 正在思考

生成React JSX文件我正在创建一个高保真度的React JSX文件，使用Tailwind CSS和指定的UI组件进行数据可视化。这将支持多个图表类型、实时数据更新和自定义仪表板功能。实时数据更新将通过占位符来模拟。整理界面布局我正绘制布局，包含侧边栏、头部和主页内容区，用多个图表和控制组件模拟仪表板的外观。...

思考 几秒

• 第 2 次：失败，原因：Charts 库引用出错（用的 shadcn）
• 第 3 次：失败，原因：Charts 库引用出错（用的 shadcn）

• 第 1 次：失败，原因：库引用出错
• 第 2 次：失败，原因：看下面自查
• 第 3 次：成功，思考了64s

结论

• 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。