# 需求文档转UI设计生成规则

## 目的
本规则用于根据用户指定的需求文档,生成对应的UI设计并输出为单个HTML文件。

## 步骤
1. 读取用户指定的需求文档文件
2. 分析需求文档中的功能需求和用户流程
3. 根据需求生成适合的UI设计
4. 将设计转换为单个HTML文件并输出到output目录

## UI设计生成指南

### 基本原则
- 界面应简洁清晰,符合现代设计趋势
- 优先考虑用户体验和易用性
- 布局应响应式,适配不同设备
- 遵循需求文档中描述的用户流程
- 色彩方案应符合产品定位和目标用户群体

### 输出HTML要求
- 单文件HTML,包含所有必要的CSS和JS
- 不依赖外部资源(除非特别指定)
- 注释清晰,代码结构合理
- 实现需求文档中描述的核心功能
- 提供基本交互效果展示

### 设计元素
- 导航结构
- 布局框架
- 色彩方案
- 字体选择
- 按钮和表单样式
- 图标和视觉元素

## 模板结构
生成的HTML应包含以下基本结构:

<!DOCTYPE html>


   
   
    [项目名称] UI设计
   


   
   


       
   

    
   

       
   

    
   

       
   

    
   

最后修改:2025 年 06 月 14 日
感谢阅读,欢迎交流。