Claude Sonnet 3.7 编码测试的提示词

#AI编程助手##什么是deepseek#

这是今天大家都在用官方的提示词来测试Claude Sonnet 3.7，这个生成天气动画的提示词可以很好的测试模型的前端代码能力

Claude Sonnet 3.7 Coding Test Prompt:

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.

Claude Sonnet 3.7 编码测试 提示：

创建一个包含 CSS 和 JavaScript 的 HTML 文件，以生成动画天气卡。卡片应以不同的动画直观地表示以下天气状况： 风：（例如，移动的云、摇曳的树木或风线） 雨：（例如，掉落的雨滴、形成的水坑） 太阳：（例如，闪亮的光线、明亮的背景） 雪：（例如，飘落的雪花、积雪） 并排显示所有天气卡片 卡片应具有深色背景。在此文件中提供所有 HTML、CSS 和 JavaScript 代码。JavaScript 应包括一种在不同天气条件之间切换的方法（例如，一个函数或一组按钮），以演示每种天气条件的动画。

还有国外网友测试的 Grok 生成的，差距很大，有兴趣的朋友自己跑一下。

国内网友测试的 deepseek R1 的结果

我用 cline 里的Claude 3.7 think在 plan 里跑的生成结果：

Let's plan the animated weather card implementation. Here's my proposed approach:

1. File Structure:

o Create a single HTML file (weather_cards.html) containing all HTML, CSS and JavaScript

o Use modern CSS features like grid layout and animations

o Use JavaScript to handle weather state changes

2. Visual Design:

o Dark background (#111) with light text

o 4 weather cards side-by-side using CSS grid

o Each card will be 300x400px with rounded corners

3. Weather Animations:

o Wind: Moving clouds using CSS keyframes

o Rain: Falling raindrops with random timing

o Sun: Rotating rays with gradient background

o Snow: Falling snowflakes with accumulation effect

4. JavaScript Implementation:

o Buttons to toggle each weather animation

o State management to ensure only one animation plays at a time

o Smooth transitions between states

Would you like me to:

1. Proceed with this plan and switch to Act Mode to implement?

2. Make adjustments to the proposed design?

3. See a mermaid diagram of the component structure?Please let me know how you'd like to proceed.

我用 Vscode+ Claude 3.5跑上面的，结果如下：3.7 调用不成功，不知道什么原因。