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

显示全部楼层

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">昨天凌晨，Anthropic 发布了 Claude 3.7 Sonnet。在代码能力方面，根据测评结果， 3.7 Sonnet 遥遥领先于其前代模型，以及 GPT-o1 和 o3-mini-high：

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">忍不住上手实测了一番，结果确实让我震撼不已：

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;padding-left: 12px;color: rgb(63, 63, 63);">1-天气 App 组件

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: inherit;color: rgb(15, 76, 129);">提示词

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-feature-settings: normal;font-variation-settings: normal;font-size: 14px;margin: 10px 8px;background: rgb(254, 254, 254);color: rgb(84, 84, 84);text-align: left;line-height: 1.5;overflow-x: auto;border-radius: 8px;box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 10px inset;padding: 0px !important;">创建一个包含 CSS 和 JavaScript 的单个 HTML 文件，用于生成一个适合手机 App 中的动态天气卡片。该卡片应以不同的动画视觉化地呈现以下天气状况：

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

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

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">一次生成的效果如下：

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">如果不使用中文，不限定在手机展示，效果是这样的：

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 代码进行处理。