在AI编程工具重构软件开发范式的今天，开发者无须精通Python、Java、JavaScript等的复杂语法，也不必手动编写成百上千行模板代码，只需用自然语言描述需求即可完成开发：
DeepSeek能够拆解用户需求，输出专业级的产品设计方案；
Cursor能够生成完整的前端页面、后端接口，甚至是数据库脚本。
这不仅是工具的迭代，更是开发思维的革命。
当AI承担了大部分的重复性工作时，开发者得以聚焦创意与逻辑，真正实现“所想即所得”。

一句话实现一个个人网站

（1）在电脑上创建一个文件夹“my-website”。
（2）在Cursor的菜单中选择【文件】→【打开文件夹】，选择刚刚创建的文件夹。
（3）在输入框中输入提示词：“用HTML生成一个个人网站，用于展示我的摄影作品，暂时先下载网络图片来填充作品位置。”就这么简单！
（4）在输入框的左下角，选择Agent模式（如下图所示），

（5）选择claude-3.7- sonnet大模型（如下图所示），单击输入框右下角的按钮。

（6）Cursor开始生成代码。网站需要的JavaScript文件和CSS文件都会一起生成，还会生成一个项目说明文档——README.md，如下图所示。

（7）回到电脑上的文件夹中，双击刚刚生成的index.html文件。在浏览器中可以看到页面效果，如下图所示。

（8）查看完页面，如果满意，则单击输入框右上角的【Accept all】按钮（如下图所示），保存当前所有文件。一个简单、美观的个人摄影作品展示网站就完成了。

拆解网站文件

借助Cursor，我们无须像传统学习编程那样，逐字逐句地钻研一个个语法规则和关键词，就能轻松创建出功能丰富的网页。不过，了解一个网页的基本结构，以及各个模块的作用，对于我们更好地理解网页运行机制、后续对网页进行深度定制与优化，仍然有着重要意义。
下面，我们借助Cursor对刚刚生成的展示摄影作品的个人网站的网页文件进行拆解和分析。在4.1.1节提到过，Cursor生成网站时会同时生成一个说明文档——README.md文档，下面先阅读这个文档。
个人摄影作品展示网站

这是一个简单优雅的个人摄影作品展示网站，使用HTML、CSS和JavaScript构建。

功能特点

• 响应式设计，适配各种设备屏幕
• 作品分类筛选功能
• 悬停效果和平滑过渡动画
• 联系表单验证功能
• 导航栏滚动状态跟踪
• 图片懒加载优化

文件结构

• index.html - 网站主页HTML结构
• styles.css - 网站样式表
• script.js - JavaScript交互功能
  页面内容

网站包括以下几个主要部分：

1. 首页 - 展示网站主要信息和欢迎语
2. 作品集 - 按分类展示摄影作品
3. 关于我 - 个人简介和背景信息
4. 联系方式 - 用户可通过表单发送消息

技术说明

• 使用纯HTML、CSS和JavaScript构建
• 响应式设计使用媒体查询和弹性布局实现
• 使用CSS变量管理颜色主题
• 使用CSS Grid和Flexbox布局
• 作品图片来自Pixabay和Pexels的免费图片库

如何使用

1. 下载或克隆仓库中的所有文件
2. 在浏览器中打开index.html即可查看网站
3. 根据需要修改HTML内容、CSS样式或JavaScript功能

自定义

• 在index.html中更改文本和图片链接
• 在styles.css的:root部分修改颜色主题
• 在script.js中调整交互功能

这个文档已经对整个网站的文件进行了简要说明：
index.html是网站主页的HTML结构。
styles.css是网站的样式表。
script.js是JavaScript交互功能的实现文件。
然而，这些简要说明还不足以让我们深入了解网站各文件的具体作用。接下来，就让Cursor为我们详细解读这些文件。
（1）在Cursor的输入框中，切换到Ask模式（如下图所示）。

（2）在输入框中向Cursor提问，Cursor会以初学者能理解的方式详细解释代码，但不会修改代码。以下是提问和Cursor回复的内容。
向 Cursor 提问

我是一个初学者，请用初学者能理解的方式给我解释这个个人摄影作品展示网站的代码。

给网站增加灯箱效果

目前，我们已经成功搭建了一个个人摄影作品展示网站，但其功能还较为基础，稍显单调。为了使网站更加丰富并具有更好的交互性，我们可以借助Cursor的强大功能，为其增添更多动态效果。接下来，我们将逐步为网站增加灯箱效果。
目前网站上的图片无法放大查看，这在一定程度上影响了用户对作品的欣赏体验。为了解决这一问题，我们可以借助Cursor为网站增加灯箱效果，使用户单击图片时可以全屏查看并浏览所有图片。
具体操作很简单，我们只需向Cursor提出明确的需求：“给图片增加灯箱效果，使用户单击图片时可以全屏查看并浏览所有图片”。Cursor会迅速给出实现这一效果的方案。
Cursor的关键工作是修改CSS文件以增加灯箱效果的样式：
/ 灯箱效果样式 /
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 2000;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}

修改完成后，效果十分显著。如下图所示，当用户单击图片时，图片会以全屏的方式展示，方便用户更清晰地欣赏摄影作品的细节，极大地提升了用户体验。

本文选自《零基础学AI编程（项目实战版）——DeepSeek + Cursor》

本书读者对象

01

零编程基础的学习者

通过“一句话实现一个网站（个人摄影作品展示网站）”“给网站增加更多功能”案例，跳过复杂语法的学习过程，直接掌握AI辅助开发的核心流程，快速建立技术信心。

02

产品经理或管理岗位人员

通过DeepSeek的需求分析方法论，掌握产品需求分析、产品规划和产品原型设计，实现创意与开发的高效对接；通过Cursor自然语言编程，快速开发MVP（最小可行产品），摆脱对开发团队的依赖，自主完成产品验证。

03

想提高效率的开发者

学习如何通过Cursor的Tab自动补全、高质量提示词技巧、多轮对话提示词技巧，大幅压缩重复编码时间，聚焦业务逻辑设计，显著提高开发效率。