码叔最近用Cursor上线了10几个实用小工具，发现用了Cursor后，前端开发效率太高了。不夸张的说，真正掌握Cursor开发前端页面的技巧，以后所有的前端页面，H5，PC网页，小程序前端，安卓APP前端，IOS 苹果APP前端代码，几乎都不需要前端工程师手写代码了，Cursor完全可以帮我们自动生成高保真的前端代码。之前找前端开发1个H5、小程序前端一般报价上万元，现在这个钱可以省了，用Cursor干了。 估计有前端程序员要不服气了，不服气，那我们看下码叔的实战案例： Cursor开发某知识付费课程详情页面的H5网页代码。

友情提示：为了照顾从没使用过Cursor的朋友，码叔增加了第一，二、三小节Cursor入门内容，如果已经使用过Cursor的朋友，可以从第四小节开始看。

一、从零了解Cursor

1、Cursor是什么？

Cursor 是一款基于人工智能的代码编辑器，创建了一个集成开发环境 （IDE）。旨在帮助开发人员编写代码，并与 AI 进行实时互动，提供代码建议、错误检测和自动补全功能。

与传统编程工具相比，Cursor 最大的特点是将 AI 技术深度嵌入到编辑器的各个功能点中。这种深度集成使 AI 功能不再是简单的附加组件，而是成为编辑器的核心部分，为用户提供更自然、更高效的编程体验。

2、Cursor 的优势

相较于 GitHub Copilot 等其他 AI 编程助手，Cursor 的优势主要体现在以下几个方面： 1.多模型支持

Cursor 提供多个 AI 模型供用户选择，并允许用户对 AI 进行个性化调整，以匹配自己的编程风格和偏好。

最近一段时间 cursor 的翻红，尤其是近期接入 claude sonnet 3.5 后，生成的代码质量和成功率大大提高了。 2.基于整个代码库的智能提示

不同于传统工具仅基于当前文件进行代码补全，Cursor 能够分析整个项目的代码库，提供更加精准的智能提示。 3.实时代码分析与修复

Cursor 能够实时分析代码，识别错误并给出修复建议，大大提高了代码的准确性和开发速度。 4.高级 AI 对话功能

用户可以通过自然语言与 AI 助手进行对话，询问编程相关问题或要求执行特定任务，这极大地提升了代码重构、优化和理解的体验。 5.Tab 光标位置预测和多行编辑

Cursor 能够智能预测用户下一步可能修改的位置，使代码浏览更加流畅。同时，它的多行编辑功能允许一次性对多行代码进行修改建议，这在进行大规模代码格式调整时特别有用。 6.隐私和安全性

考虑到代码安全的重要性，Cursor 提供了隐私模式，并已通过 SOC2 认证。用户可以选择不在服务器上存储代码，从而增强数据的安全性。

3、Cursor的常用快捷键

Ctrl + i : 打开Cursor代码对话框，composer 对话框。

Ctrl + l ： 基于某个文件对话，重点更改某个文件代码。

Ctrl + k： 在当前网页代码块中，打开composer，局部更新生成代码。

Tab : 鼠标移动到某个代码，Cursor会自动提示代码补齐提示，按Tab键，自动补齐代码。

二、安装Cursor

1、下载安装包

打开Cursor官网 https://www.cursor.com ，点击 “Download for Free” ，下载Cursor 安装包，支持 Windows 和 Mac 系统。

2、双击安装，用默认设置，点继续

双击安装Cursor，Language for AI，这里的空格填： 中文 ，然后点“Continue”

为了更好的阅读体验，来飞书看吧：

https://qoc4h6bgpc.feishu.cn/docx/AtxmdVhk7oDiaGxqnkEcVC9cntf