几分钟内开发一个网站，编程神器诞生了！

　　从最初的代码补全、错误修复，到现在直接对话就能写代码，AI 正以前所未有的速度重塑着软件开发领域。

　　就在前两天，字节跳动推出了一款全新的 AI 编程工具：Trae。

　　对中文开发者非常友好，操作界面全是中文轻松上手，更为我们配备了两位得力 AI 干将。

　　在Builder 模式下，一位全能助手，轻松理解我们的想法，并从 0 到 1 开发到落地可用的产品。

　　而在Chat 模式下，一位全栈程序员，随叫随到帮我们解决任何编程问题，高效完成开发任务。

　　同时，它们使用的是强大的 Claude 3.5 sonnet 和 GPT-4o 模型，而且现在免费用。

　　下面就让我带大家体验一下，如何通过聊天从 0 到 1 开发一个产品。

　　快速上手

　　1、首先访问 Trae 官网：

　　https://www.trae.ai/

　　进入官网后，将会看到如下界面，点击中间按钮「Download for macOS」即可下载安装包。

　　注意：目前仅支持 macOS 系统，Windows 版本即将推出，敬请期待。

　　2、安装完成后首次打开 Trae，默认简体中文，对中文开发者非常友好。

　　3、接着会引导我们选择主题、导入 IDE 配置、添加命令行启动，最后来到登录界面。

　　注意：完成登录才能使用 AI 功能，需要一点魔法，我们可以选择邮箱注册或第三方登录方式。

　　4、登录成功之后，就顺利进入到工具界面，发现支持的插件非常丰富，通过安装插件可以增强编辑器编码能力。

　　实战案例：AI 春联生成器

　　春节将至，就让我们通过 Trae 来开发一个 AI 春联生成器。

　　一边感受跟 AI 聊天开发的乐趣，一边给自己和家人定制专属的新年祝福。

　　整个项目我将拆分成四个步骤来实现：项目初始化、基础 UI 实现、春联生成逻辑和样式优化。

　　项目初始化

　　首先切换到 Builder 模式，创建一个名为ai-couplet的新项目。

　　我们先这样描述需求并发送：

　　我想在当前目录创建一个 AI 春联生成器的项目，使用 React + Tailwind CSS 技术栈。 需要你帮我： 1. 初始化项目结构 2. 配置必要的依赖 3. 设置基本的开发环境 请帮我开始第一步。

　　Trae AI 很快就给出了响应，提供了项目初始化命令，只需要点击下「运行」按钮即可。

　　接着 AI 会帮我们配置一些必要的样式文件，审查一下变更内容，确认无误后点击「全部接受」就可以了。

　　就这样，一路下来只需要动手点击几下鼠标，就完成了项目初始化，并成功启动运行。

　　此外，Trae 还内置了一个 Web 预览能够直接查看界面情况，对于前端项目来说非常方便调试。

　　基础 UI 实现

　　项目初始化完成后，接下来要实现春联生成器的界面部分。如下图，我们简单画了一个界面原型，让 AI 帮我们实现。

　　发送简单的提示词，并附上原型图，AI 立刻就理解了我们的意图并开始自动编写代码，过程中我们只需审查下文件，点击「全部接受」即可。

　　一个漂亮的春联生成界面就完成了，完全符合原型图中的所有设计元素，甚至还选取了更好看的字体配色。

　　经过这轮对话，我们可以看到 Trae 不仅能读懂代码，还能准确理解提供的图片内容。整个过程行云流水，让传统的界面开发工作变得轻松愉快。

　　生成逻辑实现

　　有了界面之后，接下来我们要实现最核心的春联生成功能。需要获取到用户输入的内容，并调用 Claude API 生成对应的春联。

　　我们继续让 AI 来帮我们实现这个功能：

　　请帮我实现春联生成功能： 当用户点击"生成春联"按钮时，需要： 1. 获取输入框中用户输入的主题或关键词 2. 调用 Claude API 生成一副对联，包含： - 横批（四字） - 上下联（七字对） - 要求对仗工整，符合春节喜庆氛围 3. 将生成的结果分别展示到对应的红色区域中

　　Trae AI 很快完成了功能开发，包括添加接口调用、错误处理等逻辑，不过在测试的时候遇到了 “生成春联失败” 的情况。

　　此时，无需担心害怕，我们只需不断将遇到的问题反馈给 AI 进行修复即可。

　　我们甚至可以将遇到的问题截图，同时附带一些简单的描述发给 AI，帮助它更好地理解和解决问题。

　　经过几轮优化调整，我们终于实现了一个运行流畅的春联生成功能。

　　现在无论是输入"家"、"春"还是其他关键词，都能生成一副对仗工整、喜庆祥和的春联。

　　样式优化

　　接下来，让我们尝试使用 Chat 模式来优化春联的展示效果。

　　切换到 Chat 模式后，我们继续以自然的聊天方式跟 AI 沟通需求，并附带界面截图：

　　我发现界面有个灰色背景，看起来不够喜庆。希望： 1. 把背景改成白色，让红色的春联更加突出 2. 左右对联之间的间距需要加大一些 3. 调整下字体大小，让对联更醒目 请帮我修改下这些样式。

　　Trae AI 同样很快就给出具体修改的样式代码，需要我们审查一下。

　　然后点击「应用」按钮，此时还会再次让我们查看变更内容，点击「全部接受」即可完成更新。

　　对于界面细节优化，这里可能需不断反复与 AI 对话沟通调整，只需清楚描述想怎么改就好。

　　比如，我们觉得当前的对联过于单调而且不够喜庆，可以问下 AI 有什么好的建议。

　　于是我决定在横批的左右两侧增加两个小灯笼装饰一下，为了更好的表达，我在网上找了张灯笼图片素材，并画一张简单的示意图并告诉 AI 帮我实现。

　　很快 AI 就明白了我的想法，开始啪啪写代码，一下子就写完，还没有让我们失望，实现了想要的效果，甚至还给灯笼增加了左右摇摆动效。

　　加上两个灯笼瞬间感觉到有点年味了，但看对联中间空白区域太大，突发灵感，在这中间增加一个 “福” 字，同样给 AI 画个示意图，让它帮我们实现。

　　最终成品

　　最后让我们一起来看下，最终 AI 春联生成器的运行效果如何。

　　如你所见，在开发「AI 春联」项目时，Trae 全程充当了我们的编程助理，并通过一对一的聊天互动，帮助我们构建出一个完整项目。

　　不过，对于一款新产品而言，Trae 还存在部分不足之处。

　　比如，在上述我们实现灯笼动画效果的过程中，需提供一些示例给 AI，才能更好更快引导 AI 完成开发。

　　对于一些常用的 Rule，编辑器也没有提供全局选项，用户在使用时需要重复设置，流程较为繁琐，期待后续他们可以把这块优化下。

　　但尽管如此，我相信后面随着更多开发者的加入，诸如 Trae 此类的 AI 编辑器会愈加完善，工匠与工具相辅相成，编程效率定会得到大幅提升。

　　有了 AI 加持，编程门槛进一步降低，更多人能上手编程，做出实用的产品。

　　未来，或将是一个互联网产品大爆发时代。