最近，Anthropic 公司推出了全新的 Claude 3.7 Sonnet AI 模型。官方信息显示，该模型不仅是迄今为止最先进的 Claude 系列，还首次引入了“混合推理”这一创新技术。这一技术使得模型能够在快速响应和深入思考之间灵活转换，几乎实现了实时处理。在编码以及前端Web开发这一领域，Claude 3.7 Sonnet呈现出令人瞩目的显著进步。
撰写这篇博客的动机源于我在浏览推文时，偶然发现了一位程序员的杰出人物Viking分享的内容，他展示了如何运用Claude的最新模型（即Claude 3.7 Sonnet）制作出精美的动画天气卡片。这组卡片运用动态效果生动呈现了各式各样的天气景象，尽管据他所述已经经历了两次细致的调整，然而最终成品在设计和动画的流畅性方面表现卓越，至少在我眼中，它给人以极大的惊喜。
我对网页设计仅有初步的认识，仅能粗略理解HTML和CSS的用法，属于那个连“小白”都算不上的新手。然而，当我目睹那些设计高手轻松制作出精美的动画时，心中不禁涌起一股强烈的欲望，想要亲自尝试一番。同时，我也想深入探究一下“微调”这一概念，究竟它有多么深奥——毕竟，在高手看来随手拈来的“微调”，对于我们这些新手而言，可能是一座难以攀登的高峰。
在着手之前，我所遇到的最大挑战便是：如何构建一个高效的操作指引（Prompt）？即便人工智能功能再卓越，若缺乏明确的指示，它将无法施展其能。幸运的是，Viking 大佬慷慨地提供了他的英文指引，我将其翻译成中文，并对中文版本进行了微调，打算用来指导 Claude，看看它能够产生怎样的输出。
英文原版提示词
构建一个包含CSS和JavaScript的单一HTML文件，用于生成动态的天气卡片。该卡片需通过独特的动画来直观展示以下天气状况：风力（如移动的云朵、摇摆的树木或风线）、降雨（如落下的雨滴、形成的水洼）、阳光（如闪耀的光芒、明亮的背景）和降雪（如飘落的雪花、积雪堆积）。将所有天气卡片并排展示。卡片背景应为深色。在此单一文件中提供全部的HTML、CSS和JavaScript代码。JavaScript中应包含切换不同天气状况的方法（例如，一个函数或一组按钮），以展示每种天气的动画效果。
机翻并优化后的中文提示词：
构建一个单一的HTML文档，其中融入CSS与JavaScript技术，旨在制作动态的天气卡片。卡片需通过多种动画形式生动展现各种天气现象：如风，可呈现流动的云朵、摇曳的树枝或风向线；雨，则可展示滴落的雨珠、积水成坑的景象；太阳，则以闪烁的光芒和明亮的背景来表现；雪，则通过飘舞的雪花和覆盖的积雪来描绘。同时，所有天气卡片应并排展示，且卡片背景需采用深色调。本文件内需包含全部的 HTML、CSS 以及 JavaScript 代码。其中，JavaScript 部分需具备一种切换不同天气状况的功能（比如，一个函数或一系列按钮），用于展示不同天气情况下的动画效果。
将中文提示词输入 Claude 后，它经过一段时间的处理，最终生成了如下的动画卡片。乍一看，整体效果相当不错。不过，有一点美中不足的是，温度显示的位置偏低了一些。幸运的是，我掌握了调整其位置的技巧，只需在源代码中对一行关于温度显示位置的代码进行修改。最终呈现的效果，您可以点击查看网页版。
输入该中文提示词至 Claude 后，经过一段时间的生成，它顺利地输出了一套动画天气卡片。初看效果，我立刻觉得眼前一亮：在纯白的背景上，风、雨、阳光以及雪的动画各具风格，整体呈现出的视觉效果非常顺畅。然而，我也发现了一个小问题——温度信息的显示位置略显偏低，看起来不太和谐。幸亏我掌握了有限的 CSS 知识，成功寻找到并调整了源代码中与温度定位相关的那行样式，使得最终呈现的效果更为协调。您可以点击此处，观看网页版的动画效果。
初始生成效果如下：
微调后的显示效果如下（动图请参考 ）：
原本打算再试一些关键词，却在尝试中遇到了提示：Claude 的消息长度上限已到，这表明免费用户确实有诸多限制，只得等到次日再行尝试。对此感兴趣的朋友们不妨自行尝试调整关键词，以生成理想的效果。不得不说，Claude 在编程领域确实表现出色。
官方博客介绍了Claude 3.7 Sonnet以及Claude Code。
Claude 3.7 Sonnet 真是厉害！它能够制作出非常炫酷的动画天气卡片。
本文链接：
本文标签：Claude，动画卡片，天气， AI 模型
九维四界