AI 编程进阶：如何用 Cursor + Claude 3.5 零基础快速开发个人网站？

随着 AI 技术的飞速迭代，编程的门槛已经被前所未有地拉低了。在 2026 年的今天，你哪怕连一行代码都没写过，也完全可以利用现代化的 AI 工具，独立开发出一个功能完善、界面精美的个人网站或 Web 应用。

今天，我们将带你实操演练，使用目前地表最强的开发组合：Cursor (AI 代码编辑器) + Claude 3.5 Sonnet (最强逻辑代码大模型)，来完成这个看似不可能的任务！

🛠️ 第一步：准备好你的“数字武器”#

在开始之前，我们需要配置好开发环境。不用担心，这非常简单。

下载并安装 Cursor
- Cursor 是一个基于 VS Code 打造的 AI 编辑器，你可以直接去它的官网免费下载。它的界面和快捷键与 VS Code 一模一样，但内置了强大的 AI 能力。
切换到最强模型：Claude 3.5 Sonnet
- 打开 Cursor 后，在设置（或者右侧的对话框）中，将默认的模型从 GPT-4o 切换为 Claude 3.5 Sonnet。
- 为什么要选它？因为在 2026 年，Claude 3.5 在前端代码生成、UI 设计感以及复杂代码重构方面，体验远远甩开了其他模型。
安装 Node.js (环境依赖)
- 去 Node.js 官网下载安装 LTS 版本即可，这是为了我们在本地运行网页所必须的环境。

TIP
觉得官网下载慢或者打不开？你可能需要一个稳定快速的代理环境。请参考我们的《2026 年下半年科学上网终极指南》获取帮助。

现在的 AI 编程，核心就是“写好 Prompt（提示词）”。你越是清晰地描述你的需求，AI 给出的代码质量就越高。

在 Cursor 中按下快捷键 Cmd + I (Mac) 或 Ctrl + I (Windows)，唤出 Composer 对话框。

在对话框中输入类似这样的一段话：

“我要开发一个现代化的个人博客网站。请使用 Next.js 和 Tailwind CSS。网站需要包含三个页面：首页（自我介绍和最新文章列表）、关于我（个人履历）、文章列表页。整体设计风格要采用极简的暗黑模式 (Dark Mode)，排版干净利落。请帮我初始化项目，并生成核心代码。”

点击确认后，Cursor 会在后台疯狂运转。你不仅会看到 AI 在对话框里回答你，你还会看到左侧的文件目录中，一个个代码文件被自动创建并自动填满代码！你只需要点击“Accept（接受）”，整个项目的基础骨架就搭建完毕了。

AI 虽然强大，但审美和细节还是需要你来把控。

运行项目 打开 Cursor 底部的终端 (Terminal)，输入 npm run dev。你会得到一个本地链接（通常是 http://localhost:3000）。在浏览器打开它，你就能看到你的网站初雏形了。
“哪里不爽指哪里”
- 觉得首页的标题字体太小？在 Cursor 中选中标题的代码，按下 Cmd + K，输入：“把这个标题的字体调大两号，并加上从左到右的渐变色效果”。
- Cursor 会立即在代码上生成 Diff（修改对比），你按回车键确认，浏览器里的页面就会瞬间变化。
添加交互动画 你可以告诉 AI：“为所有的按钮添加悬浮时的微微放大效果和投影。” 它会自动为你写好 Tailwind 的 CSS 类名。

在本地把玩够了，是时候让全世界都能看到你的网站了！这里我们推荐使用全球对开发者最友好的免费托管平台：Vercel。

在 GitHub 创建一个代码仓库，并把你在 Cursor 里生成的项目代码推送上去。（如果你不懂怎么用 Git，可以直接问 Cursor：“教我如何把这个项目推送到 GitHub”）。
登录 Vercel 官网，点击 “Add New Project”，选择你刚刚推送到 GitHub 的仓库。
点击 “Deploy (部署)”。
等待大约 1-2 分钟，Vercel 会自动分配一个可供外网访问的域名给你。

🎉 恭喜你，你的第一个由 AI 协助开发的现代化个人网站正式上线了！

看到这里，你可能会惊叹于 Cursor 的强大。那么问题来了，有了这么聪明的 AI，普通程序员会失业吗？

答案是：不会，但不会用 AI 的程序员一定会被淘汰。 AI 让软件工程的瓶颈从“敲代码的速度”变成了“产品的构思与逻辑思维”。它极大地赋能了独立开发者和跨界创意者，这是一个属于“超级个体”的时代。

还不赶紧下载 Cursor 去试一试？如果你在开发过程中遇到了有趣的 bug 或者难题，欢迎在本文下方留言交流！