使用Cursor生成需求文档+UI设计图
在需求文档和UI设计的提效上，是可以使用Cursor进行处理的。
如何使用Cursor生成需求文档和UI设计图呢？下面进行一个案例讲解
实现步骤
配置通用规则
这里可以按照自己电脑的系统进行修改
1.Always respond in 中文
2.每次修改后将修改的内容记录在log.md
3. 我的电脑系统是Windows
创建rules
点击创建rule
填写rule名称，这里只支持英文和"-"，创建之后就可以修改为中文
之后就生成了mdc文件
那么什么是mdc文件呢？
mdc文件可以理解为md文件+rule类型的一个文件
上方有支持配置规则类型的选项
Cursor Rule Type 是一种灵活且强大的工具，能够帮助开发者通过定制化规则优化 AI 的行为
- Always Rule（始终规则）
这种规则适用于所有聊天和命令，通常用于框架或语言级别的通用规则。- Auto Attached Rule（自动附加规则）
当文件匹配特定模式时自动应用规则，适用于多仓库或多目标环境。- Agent Requested Rule（代理请求规则）
根据用户意图智能地启用规则，适用于需要更灵活控制的场景。- Manual Rule（手动规则）
需要明确将文件附加到 AI 上才能应用规则，适用于需要精细控制的场景
之后填写我们的需求文档生成的规则
这个是使用/Generate Cursor Rules 【cursor的0.49的特性】生成的规则
# 需求文档生成规则## 文档格式根据用户输入，生成的需求文档应包含以下部分：1. **项目概述**- 项目背景- 项目目标- 目标用户2. **功能需求**- 核心功能列表- 功能详细描述- 用户流程3. **非功能需求**- 性能要求- 安全要求- 可用性要求4. **技术规格**- 技术栈- 系统架构- 第三方集成5. **交付物**- 里程碑- 时间线- 验收标准## 标准模板用户提供信息时，请按照以下结构生成文档：```markdown
# 项目名称：[项目名]## 1. 项目概述
### 1.1 项目背景
[根据用户输入填写]### 1.2 项目目标
[根据用户输入填写]### 1.3 目标用户
[根据用户输入填写]## 2. 功能需求
### 2.1 核心功能
- [功能1]
- [功能2]
- [功能3]### 2.2 功能详细描述
#### 2.2.1 [功能1]
[详细描述]#### 2.2.2 [功能2]
[详细描述]### 2.3 用户流程
[描述用户如何使用系统完成主要任务]## 3. 非功能需求
### 3.1 性能要求
[响应时间、并发用户数等]### 3.2 安全要求
[数据安全、身份验证等]### 3.3 可用性要求
[易用性、可访问性等]## 4. 技术规格
### 4.1 技术栈
[前端、后端、数据库等]### 4.2 系统架构
[系统组件和交互]### 4.3 第三方集成
[需要集成的外部系统或API]## 5. 交付：
### 5.1 里程碑
[主要项目阶段]### 5.2 时间线
[各阶段的预计完成时间]### 5.3 验收标准
[项目成功的衡量标准]
使用指南
- 用户输入格式应包含项目基本信息和关键需求
- 尽可能从用户输入中提取所有相关信息
- 对于缺失信息，可以提示用户补充或使用合理的默认值
- 生成的文档应当清晰、结构化且专业
## 生成需求文档
现在假设我们需要生成这样子的一个需求：小程序，支持以家庭为单位，进行目标设立和记账的功能不选择auto-select模式，否则默认会选择相对生成效果差一些的大模型输入下面的内容：```markdown
按照@requirement-doc.mdc 生成需求文档：
小程序，支持以家庭为单位，进行目标设立和记账的功能
等待生成结果。
# 项目名称：家庭目标记账小程序## 1. 项目概述### 1.1 项目背景当今社会，家庭财务管理和目标规划变得越来越重要。许多家庭希望能够共同制定财务目标并跟踪家庭支出，但市场上缺乏专门针对家庭单位设计的、将目标设立与记账功能有效结合的应用。本项目旨在填补这一市场空白，为家庭提供一个简单易用的小程序解决方案。### 1.2 项目目标- 开发一款以家庭为单位的小程序，帮助家庭成员共同管理财务
- 提供目标设立功能，允许家庭成员共同制定和跟踪财务目标
- 实现便捷的记账功能，支持多成员协作记录家庭收支
- 通过数据分析和可视化，帮助用户了解家庭财务状况和目标完成进度
- 打造简洁友好的用户界面，确保各年龄段用户都能轻松使用### 1.3 目标用户- 有共同财务管理需求的家庭
- 希望进行家庭预算规划的夫妻/伴侣
- 需要教育子女理财知识的父母
- 共同生活并分担家庭开支的室友
- 有储蓄或投资目标的家庭成员## 2. 功能需求### 2.1 核心功能- 家庭单元创建与管理
- 家庭成员邀请与权限管理
- 家庭财务目标设立与跟踪
- 日常收支记账
- 财务报表与分析
- 目标完成度可视化
- 家庭成员消息通知### 2.2 功能详细描述#### 2.2.1 家庭单元创建与管理- 用户可以创建家庭单元并成为管理员
- 支持家庭信息设置，包括家庭名称、成员角色定义等
- 允许创建多个家庭单元(如大家庭和小家庭)
- 支持家庭单元的基本设置修改和解散#### 2.2.2 家庭成员邀请与权限管理- 家庭管理员可以通过多种方式邀请成员(微信分享、二维码等)
- 支持设置不同成员的权限级别(管理员、记账员、普通成员等)
- 成员可以查看个人贡献和参与情况
- 支持成员退出和管理员移除成员功能#### 2.2.3 家庭财务目标设立与跟踪- 支持创建短期、中期和长期财务目标
- 目标类型多样化：储蓄目标、消费目标、投资目标等
- 允许设置目标金额、截止日期和分期计划
- 提供目标完成进度实时更新和提醒
- 支持目标修改和历史目标查看#### 2.2.4 日常收支记账- 支持多种收入和支出类别的记账
- 提供快速记账和详细记账两种模式
- 支持定期收支自动记录
- 支持上传票据照片和添加备注
- 提供成员间账单分享和确认功能#### 2.2.5 财务报表与分析- 提供日/周/月/年度财务报表
- 支持按类别、成员、时间等多维度分析
- 展示收支构成比例和趋势变化
- 与家庭目标关联，显示支出是否符合目标计划
- 支持自定义报表导出### 2.3 用户流程1. **注册与家庭创建**：- 用户通过微信小程序授权登录- 创建家庭单元并设置基本信息- 邀请家庭成员加入2. **目标设立**：- 家庭管理员发起目标创建- 成员参与讨论并确认目标- 系统记录目标并开始跟踪3. **日常记账**：- 任一成员记录家庭收支- 系统自动关联到相关目标- 其他成员可查看并确认4. **目标跟踪与调整**：- 系统定期生成目标进度报告- 成员查看财务分析报表- 根据实际情况调整目标或支出习惯## 3. 非功能需求### 3.1 性能要求- 页面加载时间不超过 3 秒
- 支持至少 50 名同时在线的家庭成员
- 数据同步延迟不超过 5 秒
- 能够处理单个家庭至少 5 年的历史数据
- 报表生成时间不超过 10 秒### 3.2 安全要求- 采用微信小程序标准安全机制
- 敏感财务数据加密存储
- 基于角色的访问控制
- 重要操作需二次确认
- 数据备份与恢复机制
- 符合相关数据隐私法规### 3.3 可用性要求- 简洁直观的用户界面
- 适合各年龄段用户使用
- 提供新手引导和操作提示
- 支持语音输入记账
- 关键功能不超过 3 次点击可达
- 提供用户反馈和帮助中心## 4. 技术规格### 4.1 技术栈- 前端：微信小程序原生开发框架
- 后端：Node.js + Express
- 数据库：MongoDB
- 云服务：腾讯云
- 图表展示：ECharts for MiniProgram
- 消息推送：微信订阅消息### 4.2 系统架构- 采用前后端分离架构
- 微信小程序作为前端展示和交互层
- 云函数处理业务逻辑和数据处理
- MongoDB 存储用户和交易数据
- 腾讯云提供云存储、云计算资源### 4.3 第三方集成- 微信登录和支付 API
- 腾讯云短信服务
- 数据分析与可视化库
- OCR 票据识别服务
- 云存储服务## 5. 交付物### 5.1 里程碑1. 项目启动与需求确认
2. 原型设计与用户验证
3. 核心功能开发完成
4. 测试与优化
5. 上线准备与推广
6. 正式发布与运营### 5.2 时间线- 第 1 月：需求分析与原型设计
- 第 2-3 月：核心功能开发
- 第 4 月：内部测试与功能优化
- 第 5 月：封闭测试与问题修复
- 第 6 月：正式上线与运营支持### 5.3 验收标准- 所有核心功能按需求规格实现
- 性能指标达到规定要求
- 通过安全性测试和数据保护评估
- 在不少于 50 个家庭单位中完成测试
- 用户满意度测试达到 85%以上
- 系统稳定运行 30 天无重大问题再基于需求文档，生成UI设计图
首先编写ui设计规则
# 需求文档转UI设计生成规则## 目的
本规则用于根据用户指定的需求文档，生成对应的UI设计并输出为单个HTML文件。## 步骤
1. 读取用户指定的需求文档文件
2. 分析需求文档中的功能需求和用户流程
3. 根据需求生成适合的UI设计
4. 将设计转换为单个HTML文件并输出到output目录## UI设计生成指南### 基本原则
- 界面应简洁清晰，符合现代设计趋势
- 优先考虑用户体验和易用性
- 布局应响应式，适配不同设备
- 遵循需求文档中描述的用户流程
- 色彩方案应符合产品定位和目标用户群体### 输出HTML要求
- 单文件HTML，包含所有必要的CSS和JS
- 不依赖外部资源（除非特别指定）
- 注释清晰，代码结构合理
- 实现需求文档中描述的核心功能
- 提供基本交互效果展示### 设计元素
- 导航结构
- 布局框架
- 色彩方案
- 字体选择
- 按钮和表单样式
- 图标和视觉元素## 模板结构
生成的HTML应包含以下基本结构：```html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>[项目名称] UI设计</title><style>/* 此处包含所有CSS样式 */</style>
</head>
<body><!-- 页面结构 --><header><!-- 导航栏 --></header><main><!-- 主要内容区域 --></main><footer><!-- 页脚 --></footer><script>// 此处包含所有JavaScript代码</script>
</body>
</html>
使用方法
- 用户需指定要处理的需求文档文件路径
- 系统将分析需求并生成UI设计
- 生成的HTML文件将保存到output目录
- 文件命名格式为：
[项目名称]-ui-design.html
注意事项
- 优先实现核心功能，确保基本可用
- 界面设计应符合需求文档中描述的项目目标和用户群体
- 生成的HTML应该是可直接在浏览器中打开和使用的
输入：```markdown
根据 @ui-design-generator.mdc 规则，将 @需求文档.md ，生成UI设计稿
可以看到生成结果：
