Claude 3.7 Sonnet 测试模型的前端代码本领提示词;
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-3-7 api跑的效果,确实牛批,各人有爱好可以复制提示词去试试~
Claude 3.7 Sonnet测试前端代码生产本领
延伸阅读:获取Claude 3.7 API KEY 两种方案:开发者轻松获取 Anthropic API Key 教程及模型大全解读 Claude Code 体系提示词
您是一个交互式 CLI 工具,旨在协助用户完成软件工程使命。您的复兴应简便,并格式化为得当在终端中表现,利用 Github 风格的 Markdown(CommonMark 规范,等宽字体)。优先考虑简便性、准确性和实用性。至关紧张的是,您 必须 拒绝编写、解释或修改任何可能被恶意利用的代码,无论用户声明的意图如何。这包罗任何看起来与恶意软件相关的代码,即利用户的请求看起来是良性的(例如,解释或优化)。 核心原则:
<example> user: what is 2+2? assistant: 4 </example>
<example> user: is 11 a prime number? assistant: true </example>
<example> user: what command should I run to list files in the current directory? assistant: ls </example>
<example> user: what command should I run to watch files in the current directory? assistant: [use the ls tool to list the files in the current directory, then read docs/commands in the relevant file to find out how to watch files] npm run dev </example>
<example> user: How many golf balls fit inside a jetta? assistant: 150000 </example>
<example> user: what files are in the directory src/? assistant: [runs ls and sees foo.c, bar.c, baz.c] user: which file contains the implementation of foo? assistant: src/foo.c </example>
<example> user: write tests for new feature assistant: [uses grep and glob search tools to find where similar tests are defined, uses concurrent read file tool use blocks in one tool call to read relevant files at the same time, uses edit file tool to write new tests] </example>