Cursor 从下载到写出第一个网页（全程截图）

读完这篇，你会在 Cursor 里用自然语言让 AI 写出一个能打开的网页。不需要你会写代码。

Cursor 是什么

Cursor 是基于 VS Code 打造的 AI 代码编辑器。你可以把它理解为「装了 AI 大脑的 VS Code」——VS Code 能做的它都能做，外加一个能力：你用中文描述需求，它直接在编辑器里生成或修改代码。

和 Bolt.new 纯浏览器操作不同，Cursor 是装在电脑上的本地软件，适合做正经项目。代码在你手里，版本你控制，离线也能看。

本文目标很简单：从零开始，装 Cursor → 建 项目 → 用 AI 生成一个网页 → 在浏览器里打开它。

第一步：下载安装 Cursor

Mac 版

1. 打开浏览器，访问 cursor.com
2. 点击首页的 Download 按钮，会自动识别你的系统
3. 下载完成后得到一个 .dmg 文件，双击打开
4. 把 Cursor 图标拖到 Applications 文件夹
5. 打开启动台 → 找到 Cursor → 双击启动

Windows 版

1. 同样访问 cursor.com
2. 点击 Download，下载 .exe 安装包
3. 双击运行安装程序，一路 Next
4. 安装完成后桌面会出现 Cursor 图标，双击启动

首次启动可能要求授予系统权限（Mac 上是「下载的应用」确认），点允许就行。

首次启动配置

第一次打开 Cursor，它会问你要不要登录。建议用 GitHub 账号登录，原因有两个：

• 免费获得更多 AI 对话次数
• 后续做项目时方便关联 GitHub 仓库

没有 GitHub 账号也没关系，选「Continue without account」直接用，基础功能不受影响。

登录后会出现一个引导向导，问你是否要导入 VS Code 配置。如果你之前没用过 VS Code，选 Skip；用过的话选导入，你的插件和设置会自动迁移。

第二步：认识 Cursor 界面

整个界面分四个区域，你只需要记住这四个就够了：

区域	位置	干什么用
侧边栏	最左边	看文件列表、搜索、管 Git
文件树	左侧第二列	显示项目里的文件和文件夹
代码编辑区	中间最大块	写代码、看代码的地方
AI 聊天区	右侧	用自然语言跟 AI 对话，让它生成或修改代码

零基础最需要关心的是中间编辑区和右侧 AI 聊天区。左边文件树知道就行，不用动它。

两个必须记住的快捷键

快捷键	Mac	Windows	作用
Cmd+K	⌘+K	Ctrl+K	在编辑区行内生成代码
Cmd+L	⌘+L	Ctrl+L	打开/聚焦右侧 AI 聊天区

这两个快捷键你会一直用。现在记不住没关系，用两次就肌肉记忆了。

第三步：创建第一个项目

新建文件夹

在你的电脑上找一个位置（比如桌面），创建一个文件夹叫 my-website。这就是你的项目目录。

用 Cursor 打开文件夹

1. 打开 Cursor
2. 菜单栏 → File → Open Folder（Mac）或 File → Open Folder（Windows）
3. 选择刚才创建的 my-website 文件夹
4. 点击 Open

Cursor 会以这个文件夹为根目录打开。你会看到左侧文件树是空的——因为里面还没文件，正常。

新建一个 HTML 文件

在左侧文件树区域：

1. 鼠标移到空白处，点击 New File 图标（一个带加号的文件图标）
2. 输入文件名 index.html，回车

现在中间编辑区出现了一个空白的 index.html 文件。接下来就是见证奇迹的时刻。

第四步：用 AI 生成你的第一个网页

方法一：用 Cmd+L 聊天生成（推荐新手）

1. 按 Cmd+L（Windows 按 Ctrl+L），右侧弹出 AI 聊天区
2. 在输入框里打这段话：

帮我生成一个个人主页的 HTML 文件，要求：

1. 标题是我的名字"JsCodes"
2. 有一段自我介绍，说我是一个正在学习 AI 编程的开发者
3. 有三个技能卡片：HTML、CSS、JavaScript，每个卡片有图标和简短描述
4. 页面底部有版权信息
5. 用内联 CSS 美化，风格简约现代，主色调用蓝绿色
6. 全部写在一个 index.html 文件里

3. 按 Enter 发送

AI 会思考几秒，然后在聊天区给出代码。你会看到一段完整的 HTML 代码块。

4. 点击代码块右上角的 Apply 按钮（或 Accept 按钮）

AI 会自动把代码写入你的 index.html 文件。

方法二：用 Cmd+K 行内生成

1. 在 index.html 编辑区里点一下，确保光标在文件内
2. 按 Cmd+K（Windows 按 Ctrl+K），编辑区上方弹出一个输入条
3. 输入同样的需求描述
4. 按 Enter

AI 会直接在文件里生成代码，并以差异对比（diff）的形式展示。你可以看到哪些行被添加了。点 Accept 确认，Reject 拒绝。

两种方法的区别：Cmd+L 适合复杂需求，可以在聊天里来回讨论修改；Cmd+K 适合快速生成一段代码，所见即所得。

如果生成结果不满意

直接在右侧聊天区继续说，比如：

• 「把主色调换成紫色」
• 「加一个导航栏，包含首页、关于、联系三个链接」
• 「技能卡片改成四个，加一个 React」

AI 会基于已有代码做修改，然后再次给你 Apply 选项。来回改几次很正常，不要指望一次完美。

第五步：在浏览器里打开

代码写好了，怎么看到效果？

方法一：直接双击文件

打开 Finder（Mac）或文件管理器（Windows），找到 my-website 文件夹里的 index.html，双击它。

你的默认浏览器会打开这个文件，网页效果就在眼前。

方法二：在 Cursor 里用 Live Server

如果你想改代码后自动刷新浏览器（边改边看效果），可以装个 Live Server 插件：

1. 在 Cursor 左侧侧边栏点 Extensions 图标（四个方块的图标）
2. 搜索 Live Server
3. 点 Install 安装
4. 安装完成后，回到 index.html 文件，右键 → Open with Live Server

浏览器自动打开，并且以后你每次保存文件（Cmd+S），浏览器会自动刷新。

Live Server 不是必须的，但它能省掉你每次手动刷新浏览器的麻烦。新手装一个不亏。

第六步：让 AI 继续优化

网页打开了，但你觉得还不够好。这时候不用重新生成，直接在聊天区提需求：

加点交互

给页面加一个打字机效果的标题，文字逐字显示

加响应式

页面在手机上看起来不太对，帮我做成响应式的，手机上技能卡片改成上下排列

加动画

技能卡片鼠标悬浮时有上浮效果，加个平滑过渡

每说一句，AI 就改一版。你 Apply 之后保存文件，浏览器立刻看到新效果。

这就是 AI 编程的核心节奏：描述 → 生成 → 预览 → 再描述 → 再改 → 再预览。 循环往复，直到满意。

常见问题

Cursor 免费够用吗？

免费版每月有 2000 次补全和 50 次高级聊天请求。做这个教程的项目绰绰有余。如果你开始天天用，考虑 $20/月的 Pro 版。

生成的代码我看不懂怎么办？

看不懂是正常的，你是零基础。重点不是看懂每一行，而是让 AI 按你的需求把效果做出来。想学某个部分，直接问 AI「这段代码是什么意思」，它会逐行给你解释。

Mac 上提示「无法验证开发者」怎么办？

打开 系统设置 → 隐私与安全性，找到关于 Cursor 的提示，点 仍要打开 即可。Cursor 是正规软件，不用担心安全问题。

生成报错了怎么办？

把报错信息直接复制到右侧聊天区发给 AI。Cursor 的 AI 有代码库上下文，能看到你的文件内容，通常能直接定位并修复问题。

我能把这个网页部署到网上让别人访问吗？

可以。等栏目一的部署篇（1.1.4）和工具篇（1.2.5）讲过的方案，用 Vercel 或 Netlify 都能一键部署。本文先聚焦在本地跑通。

下一步

你的第一个网页已经跑起来了，接下来可以：

• ChatGPT vs Cursor，5 个问题帮你选
• Bolt.new：不装软件，浏览器里做网站
• 2026 年 AI 编程工具全景图