Cursor生成需求文档+UI设计图
在需求文档和UI设计的提效上，是可以使用Cursor进行处理的。
如何使用Cursor生成需求文档和UI设计图呢？
下面进行一个案例讲解
实现步骤
配置通用规则
这里可以按照自己电脑的系统进行修改
创建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 验收标准
[项目成功的衡量标准]
使用指南
用户输入格式应包含项目基本信息和关键需求
尽可能从用户输入中提取所有相关信息
对于缺失信息，可以提示用户补充或使用合理的默认值
生成的文档应当清晰、结构化且专业
## 生成需求文档
现在假设我们需要生成这样子的一个需求：
小程序，支持以家庭为单位，进行目标设立和记账的功能
```python
不选择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设计稿
可以看到生成结果：
扫一扫
740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
