🚀 前端架构：从0到上线 - 完整提示词体系
📋 阶段一：需求分析与技术选型
1.1 业务需求分析
我计划开发一个[电商平台/后台管理系统/SaaS应用]，请帮我：1. 核心功能梳理- 主要用户角色：[买家/卖家/管理员]- 核心业务流程：[浏览商品-下单-支付]- 关键数据实体：[用户、商品、订单]2. 非功能性需求- 预期用户量：[日活1000/月活10000]- 性能要求：[首屏加载<2s，LCP<2.5s]- 安全要求：[登录验证、数据加密]3. 特殊需求- 国际化支持：[中/英双语]- 多端适配：[桌面/移动端响应式]- 第三方集成：[支付、短信、地图]请给出前端架构选型建议和技术栈方案。
1.2 技术栈决策
基于以下业务需求：
- 应用类型：[单页应用/服务端渲染/静态站点]
- 团队规模：[1人/5-10人/20+人]
- 开发周期：[1个月/3个月/6个月]
- 技术偏好：[React生态/Vue生态/其他]请推荐完整的技术栈组合：
1. 核心框架及理由
2. 状态管理方案
3. 路由解决方案
4. 样式方案选择
5. 构建工具配置
6. 测试策略
7. 部署方案
🏗️ 阶段二：项目初始化
2.1 脚手架生成
使用以下技术栈创建项目脚手架：
- 框架：[Next.js 14 / Vite + React 18 / Vue 3 + Vite]
- 语言：[TypeScript 5.x]
- 包管理：[pnpm]
- 代码规范：[ESLint + Prettier + Husky]
- CSS方案：[Tailwind CSS / styled-components / UnoCSS]
- 组件库：[shadcn/ui / Ant Design / Element Plus]请生成：
1. package.json完整依赖配置
2. tsconfig.json TypeScript配置
3. 项目目录结构
4. 基础环境变量配置
5. 开发/构建脚本
6. Git忽略文件配置
2.2 核心架构配置
为我的[Next.js/React/Vue]项目配置企业级架构：1. 目录结构设计- 按功能模块划分组织- 共享组件统一管理- 工具函数分类存放- 类型定义集中管理2. 构建优化配置- 分包策略（chunk splitting）- 压缩优化（gzip/brotli）- 图片优化配置- PWA支持（如果需要）3. 开发环境配置- 热重载配置- Mock数据方案- 代理配置- 错误边界生成完整配置文件，包含详细注释。
🔧 阶段三：核心模块开发
3.1 路由架构设计
设计适用于[电商平台]的路由系统：
1. 路由分层- 公开路由：/home, /products, /login- 认证路由：/dashboard, /orders, /profile- 管理路由：/admin/users, /admin/products2. 路由保护机制- 基于角色的权限控制- 路由懒加载实现- 404页面处理- 路由守卫配置3. 动态路由需求- 商品详情页：/products/:id- 用户个人页：/user/:username- 嵌套路由：/dashboard/settings/notifications请生成路由配置文件和权限验证组件。
3.2 状态管理架构
设计全局状态管理方案：
应用特点：
- 多页面共享数据：[用户信息、购物车、主题]
- 需要持久化状态：[登录状态、用户偏好]
- 复杂异步操作：[API调用、数据同步]请实现：
1. 状态分层设计（全局/模块/页面）
2. 持久化方案（localStorage/cookies）
3. 异步状态管理（RTK Query/TanStack Query）
4. 性能优化（memoization/selector）
5. TypeScript类型安全生成核心状态管理代码和示例用法。
3.3 API通信层
设计企业级API通信层：
技术栈：[Axios / fetch API]
要求：
1. 请求拦截器（token自动注入）
2. 响应拦截器（统一错误处理）
3. 取消请求机制
4. 重试策略
5. 请求缓存
6. 分页参数标准化
7. 文件上传支持
8. WebSocket集成生成：
- API客户端封装
- 类型定义
- 错误处理工具
- 使用示例
🎨 阶段四：UI组件系统
4.1 基础组件库
创建可复用的基础组件库：
1. 表单组件- Input、Select、DatePicker、Upload- 表单验证系统- 表单状态管理2. 数据展示组件- Table（支持排序、筛选、分页）- Card、List、Grid- 空状态、加载状态3. 交互组件- Modal、Drawer、Notification- Dropdown、Tooltip、Popover4. 布局组件- Container、Grid、Flex- Header、Sidebar、Footer要求：
- 支持主题定制
- 完整的TypeScript类型
- 无障碍访问支持
- 响应式设计
- 单元测试覆盖
4.2 业务组件封装
基于电商业务封装业务组件：
1. 商品卡片组件- 图片懒加载- 价格显示（折扣、原价）- 库存状态- 添加到购物车按钮2. 购物车组件- 商品数量增减- 价格计算- 优惠券应用- 结算流程3. 用户地址管理组件- 地址增删改查- 地图选点- 默认地址设置生成组件代码，包含Props类型定义和使用示例。
⚡ 阶段五：性能优化
5.1 构建优化
优化[Next.js/Vite]项目构建性能：
1. 代码分割策略- 路由级代码分割- 组件懒加载- 第三方库动态导入2. 资源优化- 图片压缩和WebP转换- 字体子集化- SVG雪碧图3. 缓存策略- CDN缓存配置- Service Worker缓存- 浏览器缓存头设置4. 监控配置- Web Vitals监控- 错误追踪- 性能分析生成优化配置和关键代码。
5.2 运行时性能
优化前端运行时性能：
1. 渲染优化- React.memo、useMemo、useCallback- 虚拟滚动列表实现- 图片懒加载和占位符2. 内存管理- 事件监听器清理- 定时器管理- WebSocket连接管理3. 网络优化- 请求合并- 预加载策略- 离线缓存4. 用户感知优化- 骨架屏实现- 渐进式图片加载- 过渡动画优化生成关键优化代码和性能监控工具。
🧪 阶段六：测试策略
6.1 测试框架配置
配置完整的测试环境：
技术栈：
- 单元测试：[Vitest / Jest]
- 组件测试：[React Testing Library / Vue Test Utils]
- E2E测试：[Cypress / Playwright]
- 集成测试：[MSW模拟API]请生成：
1. 测试环境配置文件
2. 测试工具函数
3. Mock数据工厂
4. 测试覆盖率配置
5. CI/CD测试集成脚本
6.2 测试用例编写
为以下组件编写测试用例：
组件：[用户登录表单]
测试场景：
1. 表单验证测试- 空表单提交- 无效邮箱格式- 密码长度验证2. 交互测试- 输入框输入- 显示/隐藏密码- 记住登录状态3. 集成测试- 成功登录流程- 登录失败处理- 网络异常处理生成完整的测试文件，包含各种边界条件。
🚢 阶段七：部署与监控
7.1 CI/CD流水线
配置GitHub Actions CI/CD流水线：
阶段：
1. 代码检查- ESLint检查- TypeScript编译检查- 代码规范检查2. 测试阶段- 单元测试运行- 组件测试- E2E测试3. 构建阶段- 生产环境构建- 打包优化- 静态资源上传4. 部署阶段- 部署到[Vercel/Netlify/AWS S3]- 环境变量注入- 数据库迁移（如需要）生成完整的.github/workflows/ci-cd.yml配置。
7.2 生产环境监控
配置生产环境监控：
1. 错误监控- Sentry配置- 错误边界实现- 用户行为追踪2. 性能监控- Web Vitals实时监控- 自定义性能指标- 慢加载追踪3. 业务监控- 用户转化率追踪- 关键功能使用统计- A/B测试框架4. 日志系统- 结构化日志- 日志级别管理- 日志聚合分析生成监控配置代码和Dashboard示例。
📚 阶段八：文档与维护
8.1 项目文档
生成完整的项目文档：
1. 开发文档- 环境搭建指南- 代码规范说明- 组件使用示例2. API文档- 接口文档- 类型定义说明- 错误码说明3. 部署文档- 生产环境部署步骤- 环境变量配置- 故障排查指南4. 维护文档- 代码架构说明- 性能优化指南- 常见问题解答使用TypeDoc/Vitepress生成文档站点配置。
🔄 快速启动模板
一键生成项目
基于以下需求创建完整项目：
项目名称：E-Commerce Admin
技术栈：Next.js 14 + TypeScript + Tailwind CSS + shadcn/ui
功能模块：
1. 用户认证系统
2. 商品管理CRUD
3. 订单管理
4. 数据统计面板
5. 系统设置请生成：
- 完整项目结构
- 核心业务代码
- 数据库Schema设计（如需要）
- 部署配置文件
增量开发指令
// 添加新功能
"为现有电商项目添加优惠券功能，包含：
- 优惠券管理后台界面
- 优惠券领取和使用逻辑
- 订单结算时优惠计算
- 优惠券统计报表生成完整代码，保持现有代码风格。"// 性能优化
"分析当前项目性能瓶颈，针对以下问题优化：
- 商品列表页加载慢
- 图片资源过大
- 首屏渲染时间过长提供具体优化方案和代码修改。"
调试与修复
"当前遇到问题：[具体错误描述]
错误现象：[页面表现]
相关代码：[@file_path:line_number]请分析：
1. 问题根本原因
2. 修复方案
3. 预防措施
4. 影响范围评估"
🎯 使用技巧
上下文管理
// 提供完整上下文
"项目背景：在线教育平台，使用Next.js + TypeScript
当前任务：开发课程播放页面
已有组件：VideoPlayer、CourseSidebar、CommentSection
需求：添加播放速度控制、字幕切换、画质选择功能生成代码，集成到现有组件中。"
分步骤执行
"任务：实现用户评论系统
步骤1：设计数据库Schema和API接口
步骤2：创建评论组件UI
步骤3：实现评论发布和加载功能
步骤4：添加评论审核和敏感词过滤请分步骤生成代码，每步确认后再继续。"
技术选型咨询
"我正在选择前端状态管理方案：
项目特点：
- 大型企业管理后台
- 复杂表单交互
- 实时数据更新
- 离线支持需求候选方案：Zustand、Redux Toolkit、Vuex Pinia
请对比优缺点，给出推荐和建议实现。"
📌 最佳实践提示
- 明确技术栈：开头说明使用的框架和版本
- 分步骤描述：复杂任务拆分为小步骤
- 提供示例：给出期望的代码结构
- 指定格式：说明输出格式要求
- 保持上下文：引用已有文件或代码
- 限制范围：明确需要生成的部分
示例高效指令：
"@components/UserForm.tsx
修改这个表单组件：
1. 添加邮箱验证规则
2. 增加手机号字段（中国格式验证）
3. 提交时显示加载状态
4. 错误信息国际化仅生成修改后的代码，保持现有代码风格。"
这套提示词体系覆盖了前端项目从0到上线的全生命周期，Cursor能够快速理解并生成相应代码。