在当今科技飞速发展的时代，AI 已深入到我们生活和工作的各个角落，编程领域也不例外。本文将分享如何借助一款热门的 AI 代码编辑器——Cursor，开发一个属于自己的个人网站。
Cursor于去年问世，因被知名开发者卡帕西称赞而迅速走红。甚至连 CloudFlare 的副总裁也分享了自己8岁女儿使用Cursor制作网站的视频，这一现象在全球引起了广泛关注。正如李彦宏所说：“所有的人，只要你会说话，就具备今天的程序员所具备的能力。”
开始使用Cursor
-
下载与安装
首先，访问Cursor的官网，下载并安装免费套餐。对于初次使用的朋友，建议先不去了解复杂的项目结构，可以完全依赖AI的帮助。安装完成后，打开Cursor，点击扩展应用，搜索中文包并下载。按说明使用ctrl + shift + p调出小框框，输入“display”，选择“language”并点击中文。重启应用后，界面就会变成中文，使用起来更加方便。 -
创建项目文件夹
新建一个文件夹用于存放代码。在Cursor中点击“打开一个空文件夹”，选择刚刚新建的文件夹。然后在设置中打开“features”，将“composer”功能开启，这是后续开发的关键。
整理需求与编写代码
在正式编写代码前，先整理一下需求。我与Claude-3.5-Sonnet进行了交流，告诉它我想设计一个好看的个人网站，包含照片轮播、社交媒体链接和类似OpenAI的对话界面。得到设计方案后，直接将内容复制到Cursor中，使用 ctrl + i 调出composer（AI对话界面），粘贴内容。我还补充希望这是一个单页面应用，通过CDN或其他简单方法实现，因为需求较简单，不想过于复杂。
接着，将这些内容发送给AI，它会自动生成代码。点击“accept”接受代码。要查看单页面应用的效果，只需右键点击HTML文件，在浏览器中打开即可。如果遇到问题，比如页面空白，直接与AI反馈。当AI询问是否添加个人照片时，肯定回答是。可以让它帮助处理文件分类，并将所有相关名称改为“tengsheji”。将照片放在名为“images”的文件夹中，并将路径复制给AI，它会自动替换。
调整对话界面与API设置
如果对话界面出现灰色无反应的情况，可能是因为功能尚未实现。这时需要调取API，可以选择通义千问、摆渡文心、Kimi、海螺或智谱。我从智谱的BigModel上复制接口文档给Cursor，让它按文档编写代码，并在需要API key时从智谱复制过来。如果担心密钥泄露，可以自行处理。如果需要引入库，也让AI自行添加。完成这些后，测试对话功能，看看是否正常。如果对话窗口的弹出形式不理想，可以要求AI改为在页面内显示。
完善网站内容
最后，检查页脚部分。如果社交媒体链接不符合需求，可以替换为国内的链接。将自己的链接复制过来，并设置悬停在图标上有变化且能直接跳转。
基本框架完成后，大家可以根据自己的需求继续丰富内容，比如添加关于自己、作品集等信息，发挥设计创意。会写代码的朋友还可以尝试Cursor的选中区域对话修改、代码补全和终端报错对话等功能。
部署网站
完成网站开发后，可以利用GitHub和Vercel一键免费部署。首先注册一个GitHub账号，登录后新建一个代码仓库并命名，将代码文件夹上传。然后在Cursor官网用GitHub账号登录，新增项目，导入仓库，点击部署和访问，这样网站就上线了。大家可以将域名转发给朋友，如果有自己的域名，也可以进行修改。
希望分享的这些内容能帮助大家更好地使用AI工具，扩展能力边界。期待在评论区看到你们的成果！
👉 野卡 | 一分钟注册，轻松订阅海外线上服务