佛系程序员_ 从Cursor 和Trae 两个AI写代码神器，看 AI 如何编程

学习笔记

发布日期: 2025-04-24 23:37:49

喜欢量: 9 个

阅读次数: 121

人人皆可成为开发者

本文末有线上预览网址和代码下载地址。

## 案例一：个人博客

首先我们需要开发环境，就象写画图改图需要PhotoShop,  我们使用Cursor零基础做个人博客首页，Cursor 作为地表最强AI编程工具，没有编程经验的人也能轻松尝试。
首先，从官网下载：https://www.cursor.com/
象安装其他软件应用一样，安装成功后，双击打开。
可以看到，它的界面
![](https://cdn-media.yyii.info/images/2025/04/ai_cursor.jpg)

想做博客首页的时候，我们这样跟AI说（聊天框输入）：
```我希望创建一个具有高度吸引力的博客网站，网站的所有页面均为静态页面，以确保加载速度和安全性。界面设计方面，需要采用自适应布局，能够完美适配不同设备（如手机、平板、电脑）的屏幕尺寸，为用户提供流畅且一致的浏览体验。```
```请先从首页的设计与开发入手，整体 UI 设计风格追求简洁、现代且美观，色彩搭配和谐，元素布局合理，注重用户的视觉感受和操作便捷性。希望首页能够充分展现博客网站的特色和风格，吸引访客进一步浏览网站内容。请帮我完成代码。要用纯 html + css + js 。
```

如果你不知道怎么描述，可以先用一句话说出你的想法，再让 Cursor 或 Trae 帮你润色需求——AI 也可以做“提示词优化器”。

AI在解析需求后，会先进行技术选型，再内容生成，再风格设计。
把我们提出的需求和功能，拆解成实现的步骤，再翻译成编程语言，生成代码。

Cursor 收到这些话，马上就能分析需求，然后用自己的算法和代码库，很快就把页面代码生成了。
具体的过程也会显示在聊天框：
```
我来帮你创建一个纯 HTML+CSS+JS 的博客网站。我们会从首页开始，创建一个现代、简洁且响应式的设计。
首先，让我们创建必要的文件结构：
mkdir -p blog/css blog/js blog/images
......
要查看网站，你可以直接在浏览器中打开 blog/index.html 文件。网站会自动适应不同的屏幕尺寸。
你可以通过以下方式进一步完善网站：
1. 添加更多的文章页面
......
你想要我帮你实现哪些额外的功能？
```

中间会出现等待你Accept的按钮，你只需要接受就可以了。
最后，回到这个生成的blog目录下，打开生成的index.html页面 ，就能看到博客首页效果，完全符合咱们的要求。

![PC端](https://cdn-media.yyii.info/images/2025/04/ai_blog_demo_pc.png)

手机端效果：

![手机端](https://cdn-media.yyii.info/images/2025/04/ai_blog_demo_mobile.gif)

大家觉得如何？下面我们再做一做博客。

## 案例二：个人博客
第二个案例，引用web地址，仿照做一个类似的单页面。
输入：
```@https://coolshell.cn/ 请仿照这个网站，做一个博客单页面网站，自适应。另起一个目录。```

```
好的，我来帮你在新目录创建一个类似 coolshell.cn 风格的博客网站。首先创建新的目录结构：
mkdir -p blog2/css blog2/js blog2/images
现在，让我们创建一个更接近 coolshell.cn 风格的首页：
......
现在我们已经完成了一个类似 coolshell.cn 风格的博客网站。主要特点包括：
1.整体布局：
......
你可以直接在浏览器中打开 blog2/index.html 查看效果。网站会根据屏幕尺寸自动调整布局，在手机、平板和桌面端都能提供良好的阅读体验。
需要我帮你进一步完善某些功能吗？比如：
1.添加文章详情页面
......

中间会出现等待你Accept的按钮，你只需要接受就可以了。
最后，回到这个新生成的blog2目录下，打开生成的index.html页面 ，就能博客首页效果，完全符合咱们的要求。

![PC端](https://cdn-media.yyii.info/images/2025/04/ai_blog2_demo_pc.jpg)
![手机端](https://cdn-media.yyii.info/images/2025/04/ai_blog2_demo_mobile.jpg)

一行代码都不用写，就做出了两个博客的首页静态页面。

目前我们做的是静态展示，下一步我们可以用 API 实现实时热点抓取和AI 自动写文，你会看到页面内容真正“活”起来！

接下来，我们以两个案例分享Trae工具的使用。

## 案例三， AI 热门资讯
主要功能是：获得实时最新AI资讯热门话题，根据此标题再生成新文章。

1.工具准备
Trae：AI 编程工具界的“卷王”，完全免费使用！
首先，从Trae官网下载：https://www.trae.ai/ 
象安装其他软件应用一样，双击安装成功后，双击打开。
可以看到，它的界面
![](https://cdn-media.yyii.info/images/2025/04/ai_trai.jpg)

![](https://cdn-media.yyii.info/images/2025/04/trae%E7%BC%96%E7%A8%8B1.png)

第一步，
我们打开文件夹，找到你已经创建的目录，

2.选择右边的Builder模式，这个Builder模式相当于一个帮你开发程序的代理, 而chat是一个跟你聊天的专家。
做这个 AI 资讯平台，我们把详细需求告诉 Trae，在聊天框中输入。

“帮我写一个漂亮的AI热点资讯榜，页面展示今天 的AI热点资讯10条，用户只需选 中一条热点新闻标题，AI就会根据这条资讯标题写出一条图文”
发送。
正如所料，AI 生成的是html+css+js，遇到是否接受，点接受。如中间有错，截图或文字告诉它。

最后：预览。

Trae 写出来的页面，真的很漂亮。

我们然后要去调用真实的数据和一个大模型的API。

API 就是一个打包好功能，直接给我们提供数据和服务的接口。API，意思是：应用程序编程接口。
这里我们需要两个API，
1：提供实时资讯数据的，
2：给我们写图文的AI大模型。

在[天聚数行](https://www.tianapi.com)，注册、登录后，，
找到[AI资讯](https://www.tianapi.com/apiview/22)，
把接口信息里面的介绍(接口调用方式)，复制下来。
找到[我的密钥](https://www.tianapi.com/console/userpage/uskey) , API KEY复制下来。，

再在[硅基流动](https://cloud.siliconflow.cn/i/7qQzHGZs)，注册，登录后，
进入[API密钥](https://cloud.siliconflow.cn/account/ak)，生成API KEY，复制下来。
在[调用文档的示例](https://docs.siliconflow.cn/cn/api-reference/chat-completions/chat-completions)，
复制下来。
都放在新建文档，api说明.md 里。

然后在聊天框中，#，引入这个.md文件，作为上下文，告诉AI：

```api说明.md 这个文件中是AI资讯和大模型的Apikey和Api和调用方式，请帮我在这个AI资讯榜中，调用他们实现真实的功能。```

然后，再一路同意。

中间遇到的报错，截图或文字发给AI，会继续排查解决。

代码写完，AI会告诉如何执行，调试好后。
一个能动态展示数据、自动生成文章的 AI 资讯平台就做好啦。
![](https://cdn-media.yyii.info/images/2025/05/demo3_ai_news_cover.png)

效果很棒，完全符合咱们想要的功能。

## 案例四， AI 热门资讯(第二版)
同样的需求，第二次抽中的是前后端分离的架构，前端React,后端Python。
界面也有些不同，经过调试修改，最终的AI资讯平台是：
![](https://cdn-media.yyii.info/images/2025/05/demo4_ai_news2_cover.jpeg)

四个案例的代码下载地址：https://gitee.com/phpervip/ai_demos
线上网址：
https://demo1.xiuxinwenhua.com
https://demo2.xiuxinwenhua.com
https://demo3.xiuxinwenhua.com
https://demo4.xiuxinwenhua.com

小提示：如果你对技术选型有要求，先告诉AI。

## Cursor和Trae比较

Cursor和Trae是两款功能相似但各有特色的AI编程工具，以下是它们在几个关键方面的对比：

| 比较项 | Cursor | Trae |
| --- | --- | --- |
| 功能特性 | 支持多语言编程，适合大型项目处理，拥有高级功能1 | 在中文支持和用户界面上有优势，提供免费使用Claude 3.5和GPT-4.0等模型 |
| 性能表现 | 在复杂任务理解和执行上有较强表现2 | 在代码生成方面有一定优势，但在复杂交互理解上还需提升 |
| 用户体验 | 界面较为复杂但功能丰富，适合专业开发者1 | 界面简洁，左侧图标区域便于操作，适合快速编码 |
| 价格策略 | 提供免费和付费版本，付费版本提供更多高级功能3 | 完全免费，但某些高级模型需排队使用或选择国际版4 |
| 安全性 | 有时生成的代码未使用HTTPS协议，存在安全隐患2 | 需要人工干预提示，但代码更贴合生产环境需求 |
| 综上所述 | Cursor在复杂任务处理和高级功能方面表现更优，适合大型项目和专业开发者 | Trae则在中文支持和简洁界面方面有优势，特别适合中小型项目和希望节省成本的开发者 |

yyii

https://www.amtb.info/show/MTg0

本博客所有文章除特別声明外,转载请注明来源佛系程序员 !