Claude 新模型一手实测：朴素，强大，与艺术之美

昨天凌晨，Anthropic 发布了 Claude 3.7 Sonnet。在代码能力方面，根据测评结果， 3.7 Sonnet 遥遥领先于其前代模型，以及 GPT-o1 和 o3-mini-high：

忍不住上手实测了一番，结果确实让我震撼不已：

1-天气 App 组件

提示词

创建一个包含 CSS 和 JavaScript 的单个 HTML 文件，用于生成一个适合手机 App 中的动态天气卡片。该卡片应以不同的动画视觉化地呈现以下天气状况：

风： (例如，移动的云朵、摇曳的树木或风线)
雨： (例如，落下的雨滴、水坑形成)
晴： (例如，闪耀的光芒、明亮的背景)
雪： (例如，飘落的雪花、积雪)

并排展示所有天气卡片。卡片应具有深色背景。请在此单个文件中提供所有 HTML、CSS 和 JavaScript 代码。JavaScript 应包含一种在不同天气状况之间切换的方法（例如，一个函数或一组按钮），以演示每种天气的动画效果。

一次生成的效果如下：

如果不使用中文，不限定在手机展示，效果是这样的：

2-运动记录 App 组件

提示词

为我创建一个包含 CSS 和 Javascript 的单独 html 文件，用于手机App的健身追踪卡片。这个卡片需要在手机屏幕上美观、清晰地展示以下信息：

1-核心信息：
* 步数： 当前步数（例如：8,567 步）。
* 卡路里消耗： 消耗的卡路里（例如：350 千卡）。
* 运动时长： 运动的时长（例如：35 分钟）。

2-视觉设计要求：
* 风格： 现代、简洁、色彩鲜明，适合运动主题。
* 布局： 信息布局合理，重要信息突出显示。
* 配色： 建议使用对比强烈的颜色，例如：蓝色、绿色、橙色等，但整体风格要协调。
* 响应式： 必须适配各种手机屏幕尺寸。
* 动画： 加入 subtle 的动画效果，例如：数字滚动、进度条加载等，提升用户体验。

3-功能：
* 环形进度条： 使用环形进度条展示步数目标的完成情况（例如：目标 10,000 步）。 进度条颜色要根据完成度变化，例如：未完成时为灰色，完成时为绿色。
* 运动类型图标： 根据运动类型（例如：跑步、走路、骑行），显示不同的图标。
* 个性化建议： 基于用户的运动数据，显示一条个性化的健身建议（例如：“再走 15 分钟，就能完成今天的运动目标！”）。
* 数据更新动画： 当数据更新时，加入平滑的过渡动画，例如：数字滚动、进度条加载。

4-交互：
* 点击事件： 点击卡片可以跳转到更详细的运动数据页面。

依然是一次生成的效果：

3-航班信息 App 组件

提示词较长，先来看效果：

提示词

为我创建一个包含 CSS 和 Javascript 的单独 html 文件。这个卡片需要在网页上清晰、美观地展示航班信息。

1-核心信息：
* 航班号： 例如 "MU5109"
* 航空公司Logo： 使用占位符图片，提供建议尺寸和样式（圆形或方形）。
* 起飞时间/到达时间： 例如 "14:30" / "17:15"
* 起飞机场/到达机场： 使用机场三字码，并附上城市名称，例如 "PVG (上海浦东)" / "SFO (旧金山)"
* 航班状态： 例如 "准点"、"已起飞"、"延误 15 分钟"、"已取消"

2- 视觉设计要求：
* 风格： 现代、简洁、商务风格，配色沉稳大气。
* 布局： 信息分层清晰，突出关键信息（例如：延误状态）。
* 图标： 使用飞机图标，并根据航班状态改变颜色（例如：准点为绿色，延误为红色）。
* 响应式： 适配不同的屏幕尺寸。
* 动画： subtle 的动画过渡效果，例如：状态变化时的颜色渐变。

3-进阶功能：
* 倒计时/预计到达时间： 如果航班已起飞，显示预计到达时间；如果航班未起飞，显示起飞倒计时。
* 地图展示（可选）： 如果有实时航班数据接口，可以在卡片内嵌入一个迷你地图，显示航班的当前位置。
* 行李转盘信息： 如果航班已到达，显示行李转盘号码。
* 延误原因： 如果航班延误，显示延误原因（例如："因天气原因延误"）。

4-交互：
* 点击事件： 点击卡片可以跳转到更详细的航班信息页面（例如：座位图、机上服务）。
* 刷新按钮： 提供一个刷新按钮，可以手动更新航班信息。

5-数据来源：
* 模拟数据： 假设没有实时航班数据接口，使用模拟数据进行展示。
* 数据格式： 提供一个模拟的 JSON 数据格式示例，方便 JavaScript 代码进行处理。

4-书籍推荐 App 卡片

一次生成的效果：

提示词：

生成一个用于手机 App 书籍推荐卡片，包含 CSS 和 Javascript 的单独 html 代码文件。。这个卡片需要在手机屏幕上美观、清晰地展示书籍信息，并鼓励用户进行互动。

1-核心信息：
* 书籍封面： 建议使用正方形或接近正方形的图片，并提供占位符图片和建议尺寸。
* 书名： 突出显示，字体大小适中。
* 作者： 显示作者姓名。
* 评分： 使用星级评分系统（例如：满分 5 星），并显示评分人数。
* 一句话推荐语： 一句简短的推荐语，吸引用户阅读。

2-视觉设计要求：
* 风格： 现代、简洁、文艺风格，配色温暖舒适，贴合书籍主题。
* 布局： 信息布局合理，封面图突出，易于浏览。
* 配色： 建议使用柔和的颜色，例如：米色、浅蓝色、浅绿色等，可以根据书籍的类型选择不同的配色方案。
* 圆角： 使用圆角设计，增加卡片的圆润感。
* 阴影： 使用 subtle 的阴影效果，增加卡片的立体感。
* 响应式： 必须适配各种手机屏幕尺寸。

3-功能：
* 用户评论摘要： 显示 1-2 条用户的评论，可以截取评论中的精华部分。
* 阅读进度（可选）： 如果用户正在阅读这本书，显示阅读进度，例如：“已读 30%”。
* 标签： 显示书籍的标签，例如：“小说”、“科幻”、“爱情”等。
* 购买按钮： 提供购买按钮，点击跳转到购买页面。
* 添加到书单按钮： 提供添加到书单按钮，方便用户收藏。
* 阅读状态： 显示用户对这本书的阅读状态，例如：“想读”、“在读”、“已读”。

4-交互：
* 点击事件： 点击卡片可以跳转到更详细的书籍信息页面。
* 阅读状态切换： 用户可以直接在卡片上切换阅读状态（想读/在读/已读），并保存状态。
* 添加到书单动画： 点击添加到书单按钮时，播放一个动画效果，例如：图标飞入书单。

5-数据来源：
* 模拟数据： 假设没有真实的书籍数据接口，使用模拟数据进行展示。
* 数据格式： 提供一个模拟的 JSON 数据格式示例，方便 JavaScript 代码进行处理。

5-物理模拟：波的干涉

让 Claude 模拟两束波在真空中传播，从中心向外扩散并发生干涉的过程。
结果如下：

6-太阳系模拟

一句话提示词：使用HTML/JavaScript创建一个交互式太阳系模拟动画。

效果是这样的：

Claude 自己阐述的设计理念：

完整效果视频：

7-弹跳字母

我让 Claude 生成大量的不同颜色的字母掉落在地上的动画；字母要受到弹力和摩擦力的影响，也可能收到其他字母碰撞的影响。

提示词就这么简单，Claude 自己发挥得很好：

直接看视频效果吧：

8-使用 p5.js 创建动画

一句话提示词：使用 p5js 创造最令人的惊叹的动画。

Claude 创建了一个名为"宇宙流体粒子系统"的交互式p5.js动画，我截了个动图：

完整的视频：

它自己的介绍：

总结

我曾在 GPT-o3-mini(high) 的测评中，感受到 o3-mini-high 的简洁之美。Claude 3.7 Sonnet 的思考过程和结果，也同样体现着这种简朴的美感。这种美感，正是其强大能力和高效表现的源泉，也可能预示着 LLM 未来的发展方向。