所有程序员看过来，用上不要钱的Claude-3.7-sonnet了！

我之前有写过一篇《手把手教你 AI 全自动编程》的文章！里面用到了一个叫 Trae 的 AI 辅助编程工具。

今天他们更新了目前最强的编程模型Claude-3.7-sonnet，还不收费，所以我有些小激动，立马在上面试了一把，感觉很好。

下面就用一个小例子，完整的展示一下我的使用过程。

我用了最近 X 上很火的一个提示词。

这个提示词的核心需求是：写一个动态的天气卡片。

写完后效果如下：

注意这是一个完全动态的效果！

播放

然后，我来完整的演示下，这个实例的实现方法！

安装并运行软件

安装软件很简单，直接访问官网，下载对应的版本就可以了。Mac 和 Windows 都可以。

官网：https://www.trae.ai

访问这个地址直接点击 Download Trae 下载，安装，并运行软件。

中间无需任何特殊设置，无需账号认证，无需充值付费，无需国外手机，无需国外信用卡。只要注册并登录，简单设置，就可以立马开始使用。

开始AI编程

打开软件之后，新建或者打开一个本地的文件夹。

右侧直接切换到 Build 模式，模型切换到Cluade 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.

翻译成中文：

创建包含CSS和JavaScript的单个超文本标记语言文件，以生成动画天气卡。卡片应该用不同的动画直观地表示以下天气条件：风：（例如，移动的云，摇曳的树，或风线）雨：（例如，落下的雨滴，形成的水坑）太阳：（例如，闪亮的光线，明亮的背景）雪：（例如，落下的雪花，积雪）并排显示所有的天气卡卡片应该有一个黑暗的背景。在这个单个文件中提供所有的超文本标记语言，CSS和JavaScript代码。JavaScript应该包括一种在不同天气条件之间切换的方法（例如，一个函数或一组按钮），以演示每个的动画。

粘贴在底部的输入框中，一个回车！

AI辅助编程就开始了。

很快，文件已经自动创建，并且写好了代码。由于实现我们这个需求不需要很多文件，所以它只是创建了一个 html 页面。

这是一个完全由 html ，js，css 构成的页面，所以可以直接在浏览器中打开。

打开之后效果如下：

整体设计非常不错！一般前端，可能根本做不出这么好的效果，即便能，也需要花些时间。

另外其他模型也做不到这个效果，只有 Claude 最新版本才可以。

修复bug

目前，我对这个一次生成的效果，比较满意。但是在一些细节上还是有问题。比如后面三个卡片没有动态效果，点击按钮无效。

此时，我只要在编程软件里面输入纯文字的需求：“样式不错，但是按钮点击无效，卡片中没有动态效果。请保持卡片的整体风格，完善动画效果。和按钮点击控制的功能”。

上面的描述连伪代码都不算，基本就是完完全全的“人话，普通话”。

但是Trae能很快理解并执行，修改后的效果如下：

这个版本，四个卡片已经全部有动画效果，点击下方的按钮，也会有对应的变化了。

接下来我又提出了几个需求：“点击停止动画的按钮后，wind 卡片动画没有停止。

很快，它成功修复了这个 bug。到这一步，这个 demo 已经不错了，没有明显的问题。

提出新需求

考虑到语言习惯性的问题。我希望他能帮我做成中文界面！

所以，我又提出了新需求：“不错，帮我另外生成一个 html 文件，用同样代码，但是里面文字全部 改成中文” 

它根据提示，成功的创建了一个新的html 文件，并自动将里面的文字全部翻译成了中文，连浏览器 Tab 上的标题也改了。

然后，就获得了如下的最终效果：

这就是使用 trae 和 cluade 辅助编程的过程。对于这类简单的问题，写代码的效率实在是太高了，关键是他做的效果，起码在中等这个基准线之上。

从理性的角度来说，AI 绝对不可实现一句话搞定一切。即便是人类，也不可能一句话搞定一个项目。

但是像 trae 这样的工具，高度整合了编程工具和大语言模型，并且提供了很多智能化自动化的操作，让编程效率大幅提升。同时也可以让不太会写程序的人，变做边学。

如果你对编程有兴趣，或者对 AI 辅助编程有兴趣，可以立马搞起来。乘着现在工具和模型全部免费，是一个很好练手和上手的时机！