Claude Sonnet 3.7 编码测试的提示词
这是今天大家都在用官方的提示词来测试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 调用不成功，不知道什么原因。
