AI开发提示词文档

完整的AI辅助开发指南

一、新建网站前端框架

前端环境准备：

  1. 本地电脑安装nodejs20+
  2. 新建文件夹ai-web-01（根据自己的需求命名，记得替换提示词中的文件夹名称）
    • 打开cursor后进入项目文件夹ai-web-01

1.1 新建项目框架

新建一个网站前端项目，基于nodejs20+Vue3+vite+TypeScript

  • 直接使用 Vite 模板，完全跳过交互，可以直接使用 Vite 的 Vue+TS 模板: npm create vite@latest my-project -- --template vue-ts
  • 在该项目下的package.json中添加必要依赖，注意不要添加其他非必要依赖，一次性安装
  • 要注意Vue Router 4中RouteRecordRaw的导入方式
  • 在这一步里，请不要写与基础框架无关的页面，比如除了首页、404之外的其他页面。
  • 检测是否安装node.js，如果未安装则安装，若已安装则无需再次安装
  • 创建一个简洁的 README.md 文件，包含项目介绍和启动方法
  • 确保代码是响应式的，不需要兼容移动端，所有页面默认是pc端页面
  • 项目运行默认端口8000

1.2 添加依赖

进入项目，在该项目下的package.json中添加以下依赖：

Element Plus、Vue Router、axios、echarts、mitt、vuex、vuex-along

  • 注意组件版本兼容性
  • 在这一步里，不要添加任何与基础框架无关的页面。

1.3 创建布局

创建布局，需要包含以下组件：

  • Layout主组件，作为路由的父级容器，主组件内嵌套header组件、内容区router-view、footer组件
  • 调整项目整体样式，整体宽度100%，header组件高度为60px，layout的内容区域根据设备自适应宽度（PC端1280px，移动端375px）
  • header内容区要添加导航栏，导航栏的宽度要略大于内容区宽度，让页面布局更加协调，导航项：主页、圈子、工具包、教程、问答、求职，设置活跃项的底部蓝色指示线
  • 导航栏右侧添加搜索框并添加搜索按钮，新增"发布"和"登录"按钮，优化布局和间距
  • header组件、内容区、footer组件优化布局和间距
  • 用一个默认正方形图片作为logo，默认图片从这个网站引用https://picsum.photos/
  • 在这一步里，不要添加任何与基础框架无关的页面。

二、开发页面

找对标站点的页面，截图当做设计图
把设计图发给cursor对话框，让cursor参考设计图的布局以及样式，创建页面
循环往复，直到完成所有页面
（可以先不计美丑，重要的是能展示需求里的功能模块，后面再慢慢调整样式）

2.1 参考提示词

参考这个设计图的布局与样式，修改首页以及header组件里的导航栏布局，不要修改导航项，我们的网站名是知识乐园

根据新上传的这个设计图，修改 Home 页面的布局和样式，保持现有文字内容不变，同时保持已有的header 导航栏组件不变。

这个首页布局与样式还需要继续优化，参考我刚才给你的设计图，继续优化布局样式

调整页面布局，让热门圈子模块占据所有宽度，并将圈子榜单放在热门圈子下方，与热门话题在同一行。

根据页面分析接口列表：

比如我们根据页面上的功能模块分析出如下接口列表

  1. 注册接口
  2. 登录接口
  3. 获取圈子列表接口
  4. 根据圈子类型获取学习榜单接口
  5. 创建圈子的接口
  6. 获取圈子详情接口
  7. 获取圈子评论列表接口
  8. 获取圈子主题列表接口
  9. 立即加入圈子接口
  10. 获取圈子成员列表接口
  11. 圈子成员关注（取关）接口列表
  12. 新增圈子主题点赞接口
  13. 新增圈子主题评论接口
  14. 新增圈子主题接口
  15. 获取圈子主题评论列表接口
  16. 上传图片接口
  17. 上传附件接口

三、数据库设计

后端环境准备：

  1. 本地电脑安装mysql数据库，用户名:root，密码:rootroot
  2. 新建一个数据库，名称（根据自己的项目名称命名）：learning_happy_paradise

3.1 AI生成数据库建表语句

AI生成建表语句，让deepseek生成建表语句

1. 我们现在做圈子类、知识分享的app，需要设计登录注册功能，给我写一个mysql的建表语句，叫圈子主题表，主要字段包括类型、标题、简介、内容、图片、创建时间、更新时间、状态、作者、作者ID、作者名称

2. 我们现在做圈子类、知识分享的app，需要设计登录注册功能，给我写一个mysql的建表语句，叫圈子表，主要字段包括圈子分类、圈子类型（公开、私密）、圈子名称、封面、圈子简介、内容介绍、价格、年费类型、创建时间、更新时间、状态、作者、作者ID、作者名称

3. 我们现在做圈子类、知识分享的app，需要设计登录注册功能，给我写一个mysql的建表语句，叫圈子排行榜单表，主要字段包括圈子分类、圈子id以及圈子相关一些可以冗余的字段，还有排行相关的字段

4. 我们现在做圈子类、知识分享的app，需要设计登录注册功能，给我写一个mysql的建表语句，建一个用户表

5. 我们现在做圈子类、知识分享的app，需要设计一个圈子分类表，给我写一个mysql的建表语句，建一个圈子分类表，主要字段包括名称、描述、图标、父类id、分类层级、创建时间、更新时间、创建用户

6. 其他

3.2 AI初始化测试数据

生成10条测试数据的初始化表语句，上一步AI每生成一个建表语句时，接下来都让AI给新的表生成测试语句的sql

1. 根据建表语句，生成10条测试数据的insert语句

四、新建后台服务端框架

4.1 新建后台服务端框架

新建一个后台服务API项目，基于nodejs20+nodemon+Express+Mysql+JWT

  • 在该项目下的package.json中添加必要依赖，注意不要添加其他非必要依赖，一次性安装
  • 项目运行默认端口4000
  • 项目搭建好后需要运行npm install命令安装依赖
  • mysql数据库连接信息，用户名:root，密码:rootroot，数据库名：learning_happy_paradise
  • 项目启动以后，需要连接数据库，验证数据库正常连接，并且打印数据库连接结果日志，查出数据库里有哪些表，打印出来表名
  • 不要集成Sequelize组件

3.2 框架集成以下功能

  • 错误处理
  • 日志记录(Winston)
  • 文件上传(Multer)
  • API速率限制
  • 安全头部设置(Helmet)
  • 跨域资源共享(CORS)

五、写后台接口

5.1 根据数据库建表语句，让AI写接口

5.1.1 新建注册接口

新增一个注册接口，post方法，接口请求字段，可以参考这个表结构：

CREATE TABLE users (
  user_id bigint(20) NOT NULL AUTO_INCREMENT COMMENT '用户ID，主键',
  username varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '用户名，用于登录和显示',
  email varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '电子邮箱，用于登录和通知',
  ...
)
5.1.2 新建获取圈子列表接口

新建获取圈子列表接口，post方法，响应结果返回的字段，可以参考这个表结构

CREATE TABLE circle (
  id bigint(20) NOT NULL AUTO_INCREMENT COMMENT '圈子ID，主键',
  ...
)
5.1.3 新建获取圈子分类列表接口

新建获取圈子分类列表接口，post方法，响应结果返回的字段，可以参考相应表结构

5.1.4 获取圈子榜单

新建根据圈子类型获取学习榜单接口，post方法，请求字段包括圈子类型字段

5.1.4 其他接口类似

测试后台接口：

我们用apifox或者postman测试接口工具
测试接口以后是不是返回了接口数据

六、对接后台接口

根据测试步骤，得到接口的url地址、请求参数示例、返回数据示例，对接接口数据

6.1 对接口

1. 注册接口对接

注册页面需要对接注册接口

接口地址：http://localhost:3000/api/auth/register

请求参数：

{
  "username": "john_do123e",
  "email": "john123@example.com",
  "password": "securePassword123",
  "confirmPassword": "securePassword123",
  "nickname": "John",
  "gender": 1
}
2. 登录接口对接

登录页面需要对接登录接口

接口地址：http://192.168.31.120:3000/api/auth/login

3. 新增圈子接口对接

创建圈子页面需要对接新增圈子的接口

接口地址：http://192.168.31.120:3000/api/circles/create

请求的Header要有Authorization参数

4. 获取圈子列表接口对接

首页热门圈子模块，需要对接获取圈子列表接口

接口地址：http://192.168.31.120:3000/api/circles

这个接口是get请求