❌ 模糊的描述：

"做一个表单"

✅ 具体的描述：

"创建一个用户注册表单，包含：

• 用户名输入框（必填）
• 邮箱输入框（必填，需验证格式）
• 密码输入框（最少8位）
• 确认密码输入框
• 提交按钮和重置按钮"

🔍 选中相关代码

让AI看到你正在处理的代码

📖 说明项目背景

"这是一个电商网站的购物车功能"

🎯 明确技术栈

"使用React + TypeScript开发"

⚠️ 指出约束条件

"需要兼容IE11浏览器"

✨ 适用场景：

• 修改单行代码
• 添加注释
• 快速重构变量名

💡 使用技巧：

• 先选中要修改的代码
• 按Ctrl+K打开编辑框
• 描述你要做的修改
• Tab键接受建议

🎯 适用场景：

• 复杂功能开发
• 代码解释说明
• 多轮对话优化

📝 对话要点：

• 每次只问一个问题
• 如果不满意，说明具体哪里不对
• 善用"请继续"来完成长代码
• 记得说"谢谢"，AI也喜欢礼貌 😊

❌ 问题示例：

"帮我做个网站"

🤖 AI的困惑：

• 什么类型的网站？
• 需要什么功能？
• 用什么技术？
• 什么风格？

✅ 改进方法：

分步骤详细描述，从简单开始

⚠️ 现实情况：

• AI不是万能的
• 复杂功能需要分步实现
• 有时候会出错
• 需要你提供反馈

💡 正确心态：

• 把AI当作智能助手
• 一起合作完成任务
• 耐心指导和修正
• 享受学习的过程

😅 没有Rules的痛苦：

• 每次都要重复相同的要求
• "请用React写""请用TypeScript"
• "样式用Tailwind CSS"
• "记住我们的组件命名规范"

🚀 有了Rules的神奇：

• AI自动记住你的偏好
• 自动应用项目规范
• 团队保持代码风格一致
• 新人快速上手项目

💡 特点：

• 存储在 .cursor/rules 文件夹
• 版本控制，团队共享
• 可以按目录分级管理
• 支持文件引用

🎯 适用场景：

• 前端组件开发规范
• API接口设计标准
• 代码样式要求
• 项目架构约定

💡 特点：

• 在Cursor设置中配置
• 所有项目都会应用
• 纯文本格式
• 简单直接

📝 常见用法：

请用中文回复。代码注释也用中文。
优先使用现代JavaScript语法。
CSS样式优先考虑Flexbox布局。

📁 文件：.cursor/rules/frontend-components.mdc

---
description: 前端组件开发规范
globs: "src/components/**/*"
alwaysApply: false
---

开发React组件时请遵循以下规范：

1. **组件结构**：
   - 使用函数式组件 + Hooks
   - Props接口定义在组件上方
   - 导出为具名导出

2. **样式规范**：
   - 使用Tailwind CSS类名
   - 响应式设计优先
   - 深色模式支持

3. **命名约定**：
   - 组件名使用PascalCase
   - 文件名使用kebab-case
   - CSS类名使用BEM规范

@component-template.tsx
                

📁 文件：.cursor/rules/api-standards.mdc

---
description: API接口开发标准
globs: "src/api/**/*", "pages/api/**/*"
alwaysApply: true
---

API开发请遵循以下标准：

1. **请求验证**：
   - 使用zod进行参数验证
   - 定义清晰的错误信息
   - 统一的响应格式

2. **REST规范**：
   - GET/POST/PUT/DELETE语义正确
   - 状态码使用标准
   - URL命名规范化

3. **错误处理**：
   - 统一的错误响应格式
   - 日志记录完整
   - 用户友好的错误信息

@api-response-template.ts
                

📁 文件：.cursor/rules/responsive-design.mdc

---
description: 响应式网站设计要求
globs: "**/*.css", "**/*.scss", "**/*.tsx"
alwaysApply: false
---

响应式设计要求：

1. **断点设置**：
   - 移动端：< 768px
   - 平板：768px - 1024px  
   - 桌面：> 1024px

2. **设计原则**：
   - 移动优先设计
   - 触控友好的按钮尺寸
   - 文字大小适中

3. **测试要求**：
   - 在不同设备上测试
   - 检查横竖屏切换
   - 确保可访问性

4. **Tailwind类名**：
   - sm: md: lg: xl: 2xl: 前缀
   - 使用flex和grid布局
                

🚀 操作步骤：

1. 按 Cmd+Shift+P (Mac) 或 Ctrl+Shift+P (Windows)
2. 输入 "New Cursor Rule"
3. 选择规则类型和位置
4. 编写规则内容
5. 保存并测试

💡 小贴士：

• 先在聊天中调试好需求
• 再用 "/Generate Cursor Rules" 自动生成
• 可以随时在设置中修改

📁 项目结构建议：

.cursor/rules/
├── frontend/
│   ├── components.mdc    # 组件开发规范
│   ├── styling.mdc       # 样式指南
│   └── routing.mdc       # 路由规范
├── backend/
│   ├── api.mdc          # API开发标准
│   ├── database.mdc     # 数据库规范
│   └── auth.mdc         # 认证授权
└── common/
    ├── typescript.mdc   # TS配置
    └── testing.mdc      # 测试规范
                

🔧 最佳实践：

• Rules内容简洁明确
• 配合实际代码模板
• 定期更新和优化
• 团队协作时保持同步