两周前，我用 AI 编程工具（Cursor）做出了一个完整的课题组网站，包含前台展示和后台管理系统。整个过程中，我没有写过一行代码。
这个结果连我自己都有些意外。一年前，我作为零技术基础的新人，面对代码还是一头雾水 (虽然现在也还是)。但随着工作中接触各种开发工具，特别是公司里开始普及 Cursor——这个被同事们称为"编程游戏规则改变者"的 AI 编程助手，我开始思考：既然连专业开发者都说它强大，那我这个半吊子能不能也试试？
于是就有了这次实验：能否完全依靠 AI 工具，从零实现一个完整的 Web 项目？

---

传统的网站开发需要掌握前端、后端、数据库、部署等多个技术栈，学习成本高，上手门槛非常高。但 Cursor 的出现让这个门槛大幅降低（自我感觉）：

• 从写代码到描述需求：我更像是一个"产品经理"，负责提出想法和需求
• 从技术专家到想法执行者：AI 负责具体的代码实现
• 从完整技术栈到工具组合：选择合适的工具链，而非从零学习每个技术细节
  我就觉得，是时候让我把想法变成现实了。

---

步骤1：明确需求和目标

我想做一个课题组网站，主要服务两类用户：课题组成员（内部管理）和外部访客（展示宣传）。
基于这个定位，我规划了功能模块：

• 前台：首页、发表文章、团队成员、联系我们
• 后台：管理员快速上传和管理文章，这样以后如果有文章更新也不需要我一直去维护

步骤2：技术选型

这一步我认为是最重要的，它决定了整个项目的基础架构。但因为我确实对架构缺乏了解，所以就请教了组里的技术大佬，让他帮忙定下整体的框架。大佬考虑到项目规模较小且主要用于我个人学习体验，帮我选择了这样的技术组合：

• 开发工具：Cursor（AI 编程工具）/ Trae / Qcoder等都可以，我这里用的cursor
• 技术框架：Next.js + shadcn/ui + Tailwind CSS
• 后端服务：Supabase（开源，提供数据库和认证）
• 部署平台：Vercel（免费的 hobby 方案）

大佬还帮我在Cursor中制定了编码规范（rule），让 AI 在整个开发过程中都遵循统一的代码风格、样式风格。不过在我把网站开发完后，另一位大佬说像我这样的菜鸟更适合Nuxt框架而不是Next.js🐶

步骤3：设计前台展示网页

打开 Cursor，我开始了和 AI 的"对话式开发"。第一个prompt如下：

“我要做一个课题组的网站，包含首页、文章、团队成员、联系我们四个模块。这个网站主要是为了课题组成员和外部访客浏览。希望一步一步来，让我们首先设计首页。首页顶部需要课题组名称和横幅图片，下方展示最近发表的5 篇文章，参考展现形式如图…”

这里主要包含三个内容：

1. 首先明确你的需求：具体要做什么样的网站，是电商网站、个人博客、还是课题组网站，包含哪几模块
2. 明确你的需求后，就要说明你的目的：这个网站具体是做给谁看的？当然你也可以把这个目的写在cursor的rule里，我是直接在对话框里说明的。最后就是一定要让AI一
3. 分步骤执行：一定要让AI步一步来，让每一步骤都能按照你的预期去执行。因为我最开始的时候没有经验，直接让AI把网站所有模块一次性全部生成，结果效果惨不忍睹。所以最好分模块的去执行，让AI每一个模块都已经完全执行完了，并且你检查没有问题了，再开启新的模块，然后开始重复上述步骤。

其实按这个步骤来，首页就已经生成一个比较让我满意的样式了，但我想让首页更加好看，就会进一步让AI优化细节，比如：

“这个首页展示的最近发表的5篇文章能不能包含更多内容？每篇文章左侧放文章的图片，右侧放文章的标题、作者、期刊、以及摘要”。

依次类推，每个页面都是按照这样的逻辑。如果你看到喜欢的网页设计，也可以直接截图上传，告诉AI“某个部分参考这个图片实现"。关键是要具体明确地描述需求。

这个过程最让我印象深刻的是：我更像是一个产品经理，专注于功能定义和用户体验，而 AI 负责具体的技术实现。

步骤4：网站获取真实数据

前台框架完成后，网站展示的都是假数据。要让它真正可用，需要接入真实的数据库。当然这一步我也完全没有写代码。我是用的Supabase(https://supabase.com/)作为我的后端，我在 Supabase 创建了项目后，跟 AI （任意AI模型都可以）说明需求：

“我需要进行课题组的文章管理、团队成员管理，请帮我设计两张表”。

AI 给出初步设计后，我发现字段不完全符合需求，于是进一步细化：

“文章表需要包含标题、作者、期刊、发表时间、摘要、DOI等字段…”

AI 生成建表的 SQL 语句，我直接在 Supabase 中执行，两张表就创建完成了。
创建完表后，就需要导入真实数据，作为一个懒人，我实在不想手动一篇篇导入100篇文章。所以我从Google Scholar 上复制了导师发表的所有文章信息，直接发给 AI：

“帮我把这些文章批量插入到数据库中，按照对应字段匹配”

表设计完成后，我回到了Cursor，跟Cursor中的AI模型对话，说明：

“我后台用的数据库是Supabase的xxx项目。首页展示的最新发表的5篇文章，需要从xxx项目的文章表中按发表时间排序获取，标题对应title 字段，作者对应 authors 字段…”

AI 完全理解了我的需求，实现了前台与数据库的完美连接，此时我的首页已经完全展示了真实数据，其他页面的操作也是完全一样的逻辑。

步骤5：设计后台管理系统

完成步骤4后，其实网站已经可以部署并让别人访问了，但是在实际的使用中，我发现需要一个简单的后台，让管理员能够自己更新文章内容，而不需要每次都找我（cursor）修改代码，于是我又跟Cursor对话了：

“我希望设计一个对应的后台管理系统，包含文章管理功能，实现文章的增删改查。所有文章以表格形式展现，操作列支持编辑、删除功能，删除前需要确认提示，同时支持添加新文章的弹窗…”

因为项目相对简单，不涉及复杂的多表操作，AI 生成的准确率很高，基本一次就能满足需求。

步骤6：一键部署

最后，我希望我的网站可以让别人访问，就需要部署，这里我借助了Vercel (https://vercel.com/)。部署过程如下：

“我想将网站部署到 Vercel，请帮我完成部署配置”

然后AI 指导我完成了以下步骤：将代码推送到 GitHub、在 Vercel 中连接 GitHub 仓库、配置必要的环境变量（如 Supabase 的 API 密钥）、一键部署。
整个部署过程不到五分钟！网站不仅成功上线，Vercel 还自动分配了域名和 SSL 证书。更棒的是，每次推送main分支的代码，Vercel 都会自动重新部署，这一套流程真的很方便。

---

至此，一个完整的、可以公开访问的课题组网站就诞生了。从想法到上线，整个过程用时不到一周（下班后抽时间做的），而我确实没有写过一行代码。这次实验让我意识到，AI 工具不仅降低了技术门槛，还让非开发者也能快速实现想法。未来，我计划尝试加上更复杂的功能，比如加上用户登录功能或多语言支持。Cursor 让我从‘害怕代码’变成了‘享受创造’。