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

学习笔记

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

喜欢量: 9 个

阅读次数: 73

人人皆可成为开发者

编程，简单来说，就是用特定的编程语言向计算机下达指令，指导它一步步完成我们设想的功能。就像建筑师绘制蓝图，详细规划每一处细节，而建筑工人（计算机）则按照蓝图（程序代码）精准施工，最终搭建出一座座高楼大厦。

随着人工智能（AI）的出现，编程的方式正在发生革命性的变化。AI 编程就像是建筑师身边多了一位聪明的助手，只需描述出想要的风格和功能，这位助手便能迅速给出初步设计方案，甚至直接生成施工步骤（代码），让整个设计和搭建过程变得更快、更高效。

过去，编程是一件让人望而却步的事情。因为编程语言种类繁多，就像不同国家的语言，每一种都有复杂的语法和规则，还有有点难学的，对抽象思维要求比较高，语法规则严格，即使一个符号错误也会导致程序崩溃，学会语言后，要做出一个APP，不仅要学计算机基础、还要学框架、网络，而且要一条条的写，即使是看似很简单的功能，背后都可能是上千行代码，只有经过专业训练的人才能驾驭。而且开发周期长、代码量大，让很多人不敢轻易涉足。但现在，有了 AI 的辅助，只要你能清晰表达自己的需求，就能让 AI 帮你生成专业的程序代码，真正实现——人人都可以编程。

今天，我将通过三个简单例子，带大家体验一下，如何用 AI 轻松把你的编程想法变成现实。

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

## 案例一：个人博客

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

Cursor 收到这些话，马上就能分析需求，然后用自己的算法和代码库，很快就把页面代码生成了。
具体的过程也话显示在聊天框：
```
我来帮你创建一个纯 HTML+CSS+JS 的博客网站。我们会从首页开始，创建一个现代、简洁且响应式的设计。
首先，让我们创建必要的文件结构：
mkdir -p blog/css blog/js blog/images

现在，让我们创建首页 HTML 文件：
（代码，此处略）
现在让我们创建样式文件：
（代码，此处略）
最后，让我们创建 JavaScript 文件来处理移动端的导航菜单切换：
（代码，此处略）
我已经完成了博客网站首页的基本框架搭建。这个设计包含以下特点：
1.响应式设计：
	使用 CSS Grid 和 Flexbox 实现自适应布局
	针对移动设备的导航菜单
 响应式图片和卡片布局
2.现代化 UI：
	清晰的视觉层次结构
	优雅的颜色方案（主要使用蓝色和深灰色）
	卡片式设计
	平滑的过渡动画
	悬停效果
3.用户体验：
	固定的导航栏，方便访问
	清晰的分类展示
	易读的文章预览
	直观的社交媒体链接
4.性能优化：
	纯静态页面
	最小化的 JavaScript 使用
	优化的图片加载
要查看网站，你可以直接在浏览器中打开 blog/index.html 文件。网站会自动适应不同的屏幕尺寸。
你可以通过以下方式进一步完善网站：
1. 添加更多的文章页面
2. 创建文章分类页面
3. 添加搜索功能
4. 增加文章评论系统
5. 添加更多的交互动画
6. 优化图片加载（例如使用懒加载）
你想要我帮你实现哪些额外的功能？
```

中间会出现等待你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 风格的首页：
index.html
（代码，此处略）
现在让我们创建对应的 CSS 样式文件，采用更接近 coolshell.cn 的设计风格：
style.css
（代码，此处略）
最后，让我们添加 JavaScript 文件来处理移动端的导航菜单：
main.js
（化码，此处略）
现在我们已经完成了一个类似 coolshell.cn 风格的博客网站。主要特点包括：
1.整体布局：
*  采用居中的标题和导航
*  双栏布局（主内容区 + 侧边栏）
*  清晰的文章列表展示
*  简洁的配色方案（主要使用黑白灰）
2.内容展示：
*  文章标题突出显示
*  清晰的文章元信息（日期、作者、分类）
*  文章摘要采用适中的行高和字体大小
*  标签系统方便分类浏览
3.用户体验：
*  响应式设计，适配各种屏幕尺寸
*  移动端友好的导航菜单
*  文章列表的渐入动画效果
*  清晰的分页导航
4.性能优化：
*  最小化的 JavaScript 使用
*  优化的 CSS 选择器
*  渐进增强的动画效果
5.视觉设计：
*  适当的留白和间距
*  柔和的阴影效果
*  统一的字体和颜色系统
*  清晰的视觉层次
你可以直接在浏览器中打开 blog2/index.html 查看效果。网站会根据屏幕尺寸自动调整布局，在手机、平板和桌面端都能提供良好的阅读体验。
需要我帮你进一步完善某些功能吗？比如：
1.添加文章详情页面
2.实现搜索功能
3.添加代码高亮功能
4.实现评论系统
5.添加深色模式支持

![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)

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

然后，再以两个案例分享Trae工具的使用。
Trae：AI 编程工具界的“卷王”，完全免费使用！
首先，从官网下载：https://www.trae.ai/

可以看到，它的界面
![](https://cdn-media.yyii.info/images/2025/04/ai_trai.jpg)
## 案例三， AI 热门资讯
从最早的机器语言，到汇编语言到高级编程语言，越来越象英语，越来越简单了，尤其是著名的Python，所以这个案例中，我们就用到Python, 来实践一下。首先我们需要开发环境，就象写文章需要Word, WPS, 编程也需要工具，这个要使用的是Trae，非常的美观，简洁，容易上手，中文友好。
1.工具准备
官网下载：https://www.trae.ai  
象安装其他软件应用一样，双击安装成功后，双击打开。
在目录下，新建一个文件，hello.py
里面写一句：print("hello world")
保存文件后，
在终端输入：python hello.py
打印出：hello world

获得实时最新AI资讯热门话题，根据此标题再生成新文章。
用 Trae 做这个项目，得先安装 Python 环境。安装 Python 环境也不难，
window请看这一篇：[Windows 10 安装 Python 环境教程（新手友好）](http://www.amtb.info/show/MTg1)
mac 自带python。

装完环境后，再看看 Trae 的界面。

第一步，
我们打开文件夹，找到你已经创建的目录，
2.选择右边的Builder模式，这个Builder模式相当于你可以一口气给你开发程序的一个agent,而chat是一个可以随时跟你聊天问问题的界面。
做这个 AI 资讯平台，得把详细需求告诉 Trae。这个平台要能从指定地方获取新闻列表，列表里得有新闻标题、发布时间这些信息。用户点了新闻标题，平台得能根据标题用 AI 生成新文章，还得展示在页面上。页面设计要简单、好用。把这些需求输入 Trae。

“帮我写一个漂亮的AI热点资讯榜，页面展示今天 的AI热点资讯10条，用户只需选 中一条热点新闻标题，AI就会根据这条资讯标题写出一条图文”
发送。

TRae 读懂需求后，马上开始写代码。代码写完调试好，一个能动态展示数据、自动生成文章的 AI 资讯平台就做好啦（[此处插入 AI 资讯平台效果图]），效果很棒，完全符合咱们想要的功能。

就算你不会编程，他也能帮你做一点小东西，如果你会编程，那他更是你的得力助手，一人成团，并且随着他的越来越强大，可能真的会像黄仁勋说的，这个世界上的所有人，现在都是程序员了。人人都是程序员的时代。

yyii

http://amtb.info/show/MTg0

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