引言
最近，Anthropic 公司推出了全新的 Claude 3.7 Sonnet AI 模型。官方宣称，这不仅是有史以来最智能的 Claude 版本，更首次实现了“混合推理”能力，能在近乎实时的快速应答与深度推理之间无缝切换。在编码和前端网页开发领域，Claude 3.7 Sonnet 的表现尤为亮眼，令人惊叹。
写这篇文章的契机是在刷推时，我发现一位开发者大神 Viking 利用 Claude 最新模型（Claude 3.7 Sonnet）生成了一组漂亮的动画天气卡片。这些卡片通过动态效果生动呈现了多种天气场景。虽然大神表示经过了两次调整，但最终成品的设计感与动画流畅度已经相当出色，至少在我看来堪称惊艳。
作为一个对网页设计仅有一些基础了解（只会简单读懂 HTML 和 CSS 的“小白+1”水平）的普通人，看到大神如此轻松地做出精美动画，我不禁也想亲自上手试试，顺便探究一下所谓的“调整”到底有多复杂——毕竟，在大神口中轻描淡写的“微调”，对我们新手来说可能是一座难以逾越的大山。
动手尝试
开始之前，我最大的难题是：如何写出一个有效的提示词（Prompt）？即便 AI 再强大，没有清晰的指令也无法发挥它的潜力。幸好 Viking 大神贴心分享了他的英文提示词。我将其机器翻译成中文，再在中文基础上稍作优化，准备喂给 Claude，看看它能生成什么样的结果。
英文原版提示词
Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.
机翻并优化后的中文提示词：
创建包含 CSS 和 JavaScript 的单个 HTML 文件，以生成动画天气卡。卡片应以不同的动画直观地表示以下天气状况： 风：（例如，移动的云、摇曳的树木或风线） 雨：（例如，落下的雨滴、形成的水坑） 太阳：（例如，闪亮的光线、明亮的背景） 雪：（例如，飘落的雪花、积雪） 并排显示所有天气卡片 卡片应具有深色背景。在此文件中提供所有 HTML、CSS 和 JavaScript 代码。JavaScript 应包括一种在不同天气条件之间切换的方法（例如，一个函数或一组按钮），以演示每种天气条件的动画。
把这个中文提示词输入 Claude 后，经过短暂的生成过程，它成功输出了一组动画天气卡片。初次看到效果时，我眼前一亮：白色背景上，风、雨、太阳和雪的动画各具特色，整体视觉很流畅。不过，我也发现一个小瑕疵——温度显示的位置比较靠下，显得有些不够协调。好在我凭借仅有的 CSS 知识，找到并修改了源代码中一行与温度定位相关的样式，最终呈现的效果更加和谐。点击 此处查看网页版动画效果。
初始生成效果如下：
微调后的显示效果如下（动图请参考 https://uuzi.net/animated-weather-cards.html）：
本来想再尝试一些不同的提示词，但过程中遇到了提示“Claude 达到消息的最大长度”——可见免费用户的限制还是挺大的。只能等到明天再试了。感兴趣的小伙伴们可以自己动手修改提示词，生成你想要的效果。不得不承认，Claude 在代码生成方面真的太强了 👍。
