# 新手用AI从0-1开发网站 - AI提示词
## 前端环境准备：
1. 本地电脑安装nodejs20+
- https://nodejs.org/zh-cn/download
2. 新建文件夹ai-web-01（根据自己的需求命名，记得替换提示词中的文件夹名称）
- 打开cursor后进入项目文件夹ai-web-01
## 新建网站前端框架
1. 新建app框架
不要询问，直接执行命令。
新建一个app项目，基于flutter，我们的app名是知识乐园
- 在这一步里，请不要写与基础框架无关的页面
- 创建一个简洁的 README.md 文件，包含项目介绍和启动方法
- 创建.gitignore文件，并添加flutter项目常见的忽略内容
2. 添加依赖
进入项目，在该项目下的pubspec.yaml中添加以下依赖：
environment:
sdk: '>=3.0.0 <4.0.0'
dependencies:
flutter:
sdk: flutter
path_drawing: ^1.0.1
dio: ^5.3.2
logger: ^2.0.1
cupertino_icons: ^1.0.5
provider: ^6.0.5
shared_preferences: ^2.2.0
http: ^1.4.0
flutter_sprite: ^3.0.5
flutter_slidable: ^3.0.0
flutter_localizations:
sdk: flutter
sign_in_with_apple: ^6.1.4
just_audio: ^0.9.46
url_launcher: ^6.1.14
in_app_purchase: ^3.1.7
device_info_plus: ^11.3.0
package_info_plus: ^8.3.0
get_it: ^7.6.0
onesignal_flutter: ^5.1.2
crypto: ^3.0.3
intl: ^0.19.0
- 注意组件版本兼容性
- 在这一步里，不要添加任何与基础框架无关的页面。
## 开发页面
找对标站点的页面，截图当做设计图
把设计图发给cursor对话框，让cursor参考设计图的布局以及样式，创建页面
循环往复，直到完成所有页面
比如：
1. 参考这个设计图的布局与样式，修改首页以及header组件里的导航栏布局，不要修改导航项，我们的网站名是知识乐园
2. 根据新上传的这个设计图，修改 Home 页面的布局和样式，保持现有文字内容不变，同时保持 已有的header 导航栏组件不变。
3. 这个首页布局与样式还需要继续优化，参考我刚才给你的设计图，继续优化布局样式
4. 调整页面布局，让热门圈子模块占据所有宽度，并将圈子榜单放在热门圈子下方，与热门话题在同一行。
## app对接后台接口
创建圈子页面需要对接新增圈子的接口，接口地址：http://192.168.31.120:3000/api/circles/create，
请求的Header要有Authorization参数，参数值参考：Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTMsInVzZXJuYW1lIjoid2FuZyIsImVtYWlsIjoiYXNmZXdmQHFxLmNvbSIsInJvbGUiOjEsImlhdCI6MTc1MDE3NDM5NywiZXhwIjoxNzUwNzc5MTk3fQ.ANNSwya0TVLgqN3j971zhsu1ttK8jUrsBo9SbzSTNxQ
，请求参数：
{
"category_id": 1,
"category_name": "科技",
"type": 1,
"name": "AI技术交流圈",
"cover": "https://example.com/cover.jpg",
"introduction": "这是一个关于人工智能技术的交流圈子",
"content_description": "这里我们将深入讨论机器学习、深度学习等各种AI技术...",
"price": 0.00,
"annual_fee_type": 1,
"status": 1
}
响应结果：
{
"message": "创建圈子成功",
"data": {
"create_time": "2025-06-17T15:37:50.188Z",
"update_time": "2025-06-17T15:37:50.188Z",
"id": 11,
"category_id": 1,
"category_name": "科技",
"type": 1,
"name": "AI技术交流圈",
"cover": "https://example.com/cover.jpg",
"introduction": "这是一个关于人工智能技术的交流圈子",
"content_description": "这里我们将深入讨论机器学习、深度学习等各种AI技术...",
"price": 0,
"annual_fee_type": 1,
"status": 1,
"author_id": 13,
"author_name": "wang",
"member_count": 0,
"post_count": 0
}
}
注册页面需要对接注册接口，接口地址：http://localhost:3000/api/auth/register，请求参数：{
"username": "john_do123e",
"email": "john123@example.com",
"password": "securePassword123",
"confirmPassword": "securePassword123",
"nickname": "John",
"gender": 1
}，响应结果：{
"message": "注册成功",
"user": {
"id": 12,
"username": "john_do123e",
"email": "john123@example.com",
"nickname": "John",
"role": 1
},
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTIsInVzZXJuYW1lIjoiam9obl9kbzEyM2UiLCJlbWFpbCI6ImpvaG4xMjNAZXhhbXBsZS5jb20iLCJyb2xlIjoxLCJpYXQiOjE3NDk3NDMwMzMsImV4cCI6MTc1MDM0NzgzM30.Soz7VOxH9YanJQtnyIiPsArA5Q4iCaLZ9mcW5bbp4yo"
}
登录页面需要对接登录接口，接口地址：http://192.168.31.120:3000/api/auth/login，请求参数：{
"login": "test@example.com",
"password": "Password123!"
}
首页需要对接获取圈子列表接口，接口地址：http://192.168.31.120:3000/api/circles，这个接口是post请求，
请求参数：{
"page": 1,
"pageSize": 8
}
响应结果：{
"message": "获取圈子列表成功",
"data": {
"circles": [
{
"id": 5,
"category_id": 4,
"category_name": "艺术",
"type": 1,
"name": "摄影爱好者",
"cover": "https://example.com/covers/photography.jpg",
"introduction": "摄影作品分享与点评",
"content_description": "分享摄影技巧、作品和后期处理经验。定期组织线下拍摄活动。",
"price": "199.00",
"annual_fee_type": 4,
"create_time": "2023-04-12T11:10:00.000Z",
"update_time": "2023-06-17T09:45:00.000Z",
"status": 1,
"author_id": 105,
"author_name": "陈摄影师",
"member_count": 432,
"post_count": 287
}
],
"pagination": {
"total": 10,
"page": 1,
"pageSize": 10,
"totalPages": 1
}
}
}
首页学习榜单模块的卡片列表，需要获取圈子类型接口渲染卡片列表，接口地址：http://192.168.31.120:3000/api/circles/categories，这个接口是post请求，
请求参数：{
"parent_id": 0,
"status": 1,
"level": 1,
"is_tree": true
}
响应结果：{
"message": "获取圈子分类列表成功",
"data": [
{
"id": 1,
"name": "科技",
"description": "探索科技前沿，分享技术心得",
"icon": "https://example.com/icons/tech.png",
"cover_image": "https://example.com/covers/tech.jpg",
"parent_id": 0,
"level": 1,
"sort_order": 100,
"status": 1,
"circle_count": 15,
"created_at": "2025-06-16T22:55:04.000Z",
"updated_at": "2025-06-16T22:55:04.000Z",
"created_by": 1,
"updated_by": null,
"is_deleted": 0
}
]
}
首页点击学习榜单的卡片，需要根据圈子类型获取学习榜单接口，接口地址：http://192.168.31.120:3000/api/circles/rank，这个接口是post请求，
请求参数：{
"page": 1,
"pageSize": 5,
"category_id": 1
}
响应结果：{
"message": "获取圈子学习榜单成功",
"data": {
"circles": [
{
"id": 1,
"category_id": 1,
"category_name": "科技",
"circle_id": 101,
"circle_name": "AI技术前沿",
"circle_cover": "https://example.com/covers/ai-tech.jpg",
"circle_intro": "人工智能技术交流",
"author_name": "张教授",
"heat_score": "98.50",
"member_count": 3200,
"post_count": 850,
"like_count": 12500,
"comment_count": 4200,
"view_count": 85600,
"activity_score": "95.20",
"rank_position": 1,
"rank_change": 1,
"rank_type": 1,
"rank_date": "2023-06-25",
"rank_time": "2023-06-25T09:00:00.000Z"
}
],
"pagination": {
"total": 1,
"page": 1,
"pageSize": 10,
"totalPages": 1
}
}
}
