关注我，带你领略更多 AI 前沿科技的魅力，探索未来世界的无限可能！

全网都在热议的 Cursor，能让你不写代码成就超强网站，它的神奇之处会给我们带来怎样的震撼？一起走进这个神秘的世界！

本文将通过一个“新闻站点”的实例，逐步揭示 Cursor AI 编程的强大功能，并带您亲身体验构建高效站点的兴奋。请跟随本文的指导，一步步探索和实践。

先看效果

目标要求：让 Cursor 按照要求生成一个“新闻站点”，并且具备一定的动画效果。此外，要求具备交互功能，如：资讯列表点击，分页，个人中心等。

绝对令人兴奋！无需编程背景，您也能轻松打造个性化网站。只要灵感一触即发，世界便任由您塑造。接下来，我们将深入探索 Cursor 的奥秘，并动手实践，一步步构建您的“新闻站点”。

准备环境

1、Cursor 下载地址：https://www.cursor.com/

2、安装与初始化：

注意：使用 Google 或者 Github 账号登录即可。

熟悉 Cursor

Cursor 编辑界面很简单，我们主要关注三个区域：

1、文件区域：文件管理，可以新建一个 index.HTML 文件；

2、代码区域：可以自己编写代码，当然也可以通过 Chat 聊天生成代码，直接采用；

3、聊天区域：提出你的需求，让 Cursor 按照要求生成代码；

注意：

• 笔者使用的 Mac，因此唤起聊天窗口的快捷方式为：Command+L，Window 下可使用 Ctrl+L；
• 需要新建 index.html 文件；

开始体验

1、描述需求

这里我们提一个需求，生成一个新闻站点，要求如下：

创建新闻网站，包含资讯列表和排行榜，采用暗黑主题配色，顶部设有导航按钮和登录功能。资讯列表图文并茂，支持点击弹窗查看详情，并实现美观分页。网站预填充10条新闻数据，每页展示5条。

按照要求生成完毕后，Cursor 会列出总结内容：

这个 HTML 文件包含了以下功能:

* 暗黑主题配色

* 顶部导航栏和登录按钮

* 图文并茂的新闻列表

* 点击新闻项可弹窗查看详情

* 分页功能

* 预填充了10条新闻数据

* 每页显示5条新闻

您可以直接将此代码保存为 index.html 文件并在浏览器中打开。如需进一步定制或添加功能,请告诉我,我会为您提供相应的修改建议。

2、应用代码

我们选择“Apply”应用代码之后，编辑区就会填充代码，这是选择“Accept”接受即可。如下图所示：

3、预览效果

注意：这里需要找到 index.html 源文件，拖入到浏览器中即可打开访问，效果如下：

页面效果出来了，不过不够美观，我们继续优化下。

优化体验

这次聊天内容如下：

1、美化网站样式，Logo 使用 Icon 代替，导航栏需要彩虹效果；

2、登录区域用头像展示，点击可出现下拉框，里面内容包含：个人信息、我的收藏；

3、为网站填充一个张背景图片，以漫威海报作为素材；

待 Cursor 生成外代码后，看看效果：

当然，过程中不满意，可以不断的通过聊天沟通来调整和优化页面。

总结

是不是很惊喜，无需编写任何代码，我们便能轻松完成新闻资讯网站的开发，这真是令人赞叹！

未来，AI 编程的创造力无疑将更加惊人，其影响力也必将超越程序员的圈子。只要您怀揣创意，未来便在您的手中创造。

好书推荐

最后，我想向大家推荐我最近出版的一本新书《AIGC大语言模型轻松学》。本书覆盖了从个人应用到企业实践的各个方面，无论你是 AI 技术的爱好者还是专业人士，都能在其中找到宝贵的信息和启发。

欢迎大家支持并阅读，让我们一起探索 AI 的无限可能。