Cursor 生成前端项目与页面的提示词指南，涵盖项目初始化、页面生成、组件生成和功能实现等场景

一、项目初始化提示词

1. 基础框架初始化
   “用 [React/Vue/Next.js/Nuxt.js] 创建一个新项目，包含以下配置：TypeScript、路由系统、状态管理（Redux/Pinia）、ESLint + Prettier。输出项目结构说明”

2. UI 库集成
   “创建一个使用 [Tailwind CSS/Ant Design/Element Plus] 的 [React/Vue] 项目模板，包含主题配置和响应式布局示例”

3. 全栈项目初始化
   “生成一个包含 Express/Nest.js 后端和 React/Vue 前端的全栈项目结构，支持 RESTful API 通信和 JWT 鉴权”

二、页面生成提示词

1. 基础页面结构
   “生成一个响应式电商首页，包含：顶部导航栏、轮播图、商品分类导航、精选商品网格布局、页脚。使用 Tailwind CSS 实现”

2. 数据驱动页面
   "创建一个动态博客列表页，支持：

   • 从 API 异步加载数据
   • 分页功能
   • 搜索过滤
   • 骨架屏加载效果
     使用 React Query + Axios 实现"

3. 后台管理页面
   "生成管理后台的仪表盘页面，包含：

   • 数据统计卡片
   • 最近订单表格（带排序和分页）
   • 用户活跃度折线图
   • 通知中心下拉面板
     使用 Ant Design Pro 组件库"

三、组件生成提示词

1. UI 组件
   "创建一个可复用的模态框组件，要求：

   • 支持自定义内容
   • 动画过渡效果
   • 点击外部区域关闭
   • 可通过 Context API 全局调用
     Vue 3 Composition API 版本"

2. 表单组件
   "生成一个用户注册表单，包含：

   • 实时表单验证
   • 密码强度检测
   • 验证码图片
   • 提交防抖处理
     使用 React Hook Form 实现"

3. 数据可视化
   "创建一个交互式 ECharts 图表组件，要求：

   • 响应式布局
   • 动态数据更新
   • 主题切换支持
   • 鼠标悬停 tooltip
     Vue 3 + TypeScript 版本"

四、功能模块提示词

1. 用户系统
   "实现完整的用户认证流程：

   • 登录/注册页面
   • JWT 令牌管理
   • 权限路由守卫
   • 第三方登录（Google/GitHub）
     使用 Next.js Auth 实现"

2. 电商功能
   "生成购物车功能模块，包括：

   • 本地存储持久化
   • 商品数量增减
   • 优惠券应用
   • 跨组件状态同步
     Redux Toolkit 实现方案"

3. 实时功能
   "创建实时聊天组件，要求：

   • WebSocket 连接
   • 消息历史记录
   • 输入框 markdown 支持
   • 消息已读状态
     使用 Socket.io + React"

五、样式处理提示词

1. 响应式布局
   "用 CSS Grid 实现一个响应式图片画廊：

   • 桌面端 4 列
   • 平板 3 列
   • 手机 1 列
   • 支持懒加载"

2. 动画效果
   "创建页面切换的动画效果：

   • 路由切换时的淡入淡出
   • 列表项入场动画（stagger 效果）
   • 按钮点击涟漪效果
     使用 Framer Motion 实现"

3. 主题切换
   "实现暗黑/明亮主题切换功能：

   • CSS 变量定义主题色
   • 系统主题自动检测
   • 切换无闪屏
   • 状态持久化
     React Context + styled-components 方案"

六、优化与部署

1. 性能优化
   "为 React 项目添加优化配置：

   • 代码分割
   • 图片懒加载
   • 服务端渲染 (SSR)
   • PWA 支持"

2. 部署配置
   "生成 Docker 部署配置文件，包含：

   • Nginx 反向代理
   • 多阶段构建
   • 环境变量管理
   • HTTPS 自动配置"

3. SEO 优化
   "为 SPA 添加 SEO 优化方案：

   • 动态 meta 标签管理
   • 预渲染静态页面
   • 生成 sitemap.xml
   • 结构化数据标记"

七、第三方集成提示词

1. 地图服务
   "集成 Mapbox GL JS 创建交互式地图：

   • 标记点位
   • 聚类显示
   • 路径绘制
   • 弹出信息窗口"

2. 支付系统
   "实现 Stripe 支付流程：

   • 信用卡表单
   • 3D Secure 验证
   • 支付状态回调
   • 订单记录保存"

3. 数据分析
   "集成 Google Analytics 4：

   • 页面浏览跟踪
   • 自定义事件上报
   • 用户属性记录
   • GDPR 合规配置"

使用技巧：

1. 添加技术栈限定词：如 “使用 Vue 3 Composition API 实现”
2. 指定代码规范：如 “遵循 Airbnb JavaScript Style Guide”
3. 要求代码注释：如 “添加详细的 JSDoc 注释”
4. 限定版本号：如 “使用 React 18 新特性实现”
5. 组合多个要求：如 “使用 TypeScript + Redux Toolkit + Material UI 实现”

通过组合这些提示词元素，可以高效生成符合需求的前端代码。建议先创建整体框架，再逐步细化具体模块。