# 业务助手智能体 - 产品需求文档 (PRD)

> **版本**: V2.0  
> **编写日期**: 2026-06-08  
> **文档状态**: 草稿 / 评审中 / 已确认  
> **主要用户**: 企业内部员工（无编程背景的业务人员）

---

## 一、产品概述

### 1.1 产品定位

**业务助手智能体**是一款面向企业非技术员工的 AI 辅助开发工具。通过自然语言描述业务需求，智能体自动生成规范的产品文档，并基于文档开发可直接使用的网页应用。核心价值在于：让业务人员也能快速将创意转化为可用的数字产品。

### 1.2 目标用户

| 用户画像 | 特征描述 |
|---------|---------|
| 业务专员 | 需要工具提升日常工作效率，如数据录入、报表生成、客户管理 |
| 部门主管 | 需要轻量级管理工具，如任务跟踪、团队协作、简单审批 |
| 运营人员 | 需要快速验证业务想法，如活动页面、问卷收集、数据看板 |
| HR/行政 | 需要内部工具，如员工信息管理、会议预约、物资申请 |

### 1.3 核心使用场景

1. **需求文档生成**：用户输入业务需求描述 → 智能体生成结构化产品文档
2. **网页应用生成**：用户确认产品文档 → 智能体生成可运行的网页应用
3. **迭代优化**：用户提出改进意见 → 智能体持续优化产品

---

## 二、十步需求分析

### 步骤 1：定问题

**问题定义**：企业员工在日常工作中经常遇到重复性、低效的手工操作，但缺乏技术能力快速开发工具来解决问题。

**现状痛点**：
- 业务人员依赖 IT 部门排期，需求响应慢（通常 1-4 周）
- 简单工具的开发成本与收益不匹配
- 市场上通用软件功能冗余或不符合业务逻辑
- 员工只能手动操作 Excel、邮件等方式处理数据

**期望状态**：业务人员可以自己描述需求，1-2 小时内获得可用的网页工具。

### 步骤 2：定用户

**直接用户**：企业内部各部门非技术员工

**用户分层**：

| 层级 | 特征 | 使用频率 |
|------|------|----------|
| 初级用户 | 仅使用已生成的应用 | 高 |
| 中级用户 | 能提出简单修改需求 | 中 |
| 高级用户 | 能清晰描述完整业务需求 | 低 |

**用户画像示例**：
- 张三，某制造企业 HR，需要一个员工信息录入和管理系统
- 李四，市场部运营，需要一个活动报名收集表和自动统计工具
- 王五，销售主管，需要一个简单的客户跟进记录工具

### 步骤 3：定场景

**核心场景矩阵**：

| 场景编号 | 场景名称 | 触发条件 | 完成标准 |
|---------|---------|---------|---------|
| S1 | 日常数据录入 | 需要记录客户/库存/订单等结构化数据 | 数据可持久化存储 |
| S2 | 简易审批流 | 需要多人确认的流程 | 支持状态流转和通知 |
| S3 | 数据查询展示 | 需要查看和筛选历史数据 | 支持多条件筛选和导出 |
| S4 | 简单看板 | 需要可视化展示关键指标 | 支持图表和统计 |
| S5 | 问卷/报名收集 | 需要收集外部或内部反馈 | 支持表单提交和汇总 |
| S6 | 任务/待办管理 | 需要跟踪工作进度 | 支持增删改查和状态标记 |

### 步骤 4：定输入

**用户输入规范**：

```
【输入格式示例】

需求描述（必填）：
[请用一段话描述你想要解决什么问题]

期望功能（必填）：
1. [功能点1]
2. [功能点2]
3. [功能点3]

使用对象（必填）：
[谁会使用这个工具？多少人？]

使用频率（选填）：
[每天/每周/偶尔]

数据敏感度（选填）：
[公开/内部/敏感]

特殊要求（选填）：
[界面风格/交互偏好/第三方集成等]
```

**输入质量标准**：

| 等级 | 描述 | 智能体处理方式 |
|------|------|----------------|
| 完整 | 包含所有必填项和详细的选填项 | 直接进入开发 |
| 基本 | 包含所有必填项 | 引导补充关键细节 |
| 模糊 | 描述不明确 | 主动提问澄清 |

### 步骤 5：定流程

**主流程（需求到产品）**：

```
用户输入需求
    ↓
智能体理解意图 → [澄清问题（如需）]
    ↓
生成产品文档（PRD）
    ↓
用户审核确认 → [修改调整（如需）]
    ↓
生成网页应用
    ↓
用户测试使用 → [提出改进意见]
    ↓
持续优化迭代
```

**异常处理流程**：

| 异常情况 | 处理策略 |
|---------|---------|
| 需求超出范围 | 明确告知，提议简化或分阶段实现 |
| 技术不可行 | 说明原因，提供替代方案 |
| 输入信息不足 | 主动询问关键信息，不盲目猜测 |
| 用户放弃流程 | 保存中间状态，支持后续继续 |

### 步骤 6：定规则

**业务规则库**：

```
R1. 数据持久化规则
   - 所有用户输入数据必须存储到本地或指定数据库
   - 优先使用 LocalStorage，复杂数据使用 IndexedDB
   - 数据结构需符合预定义的 Schema

R2. 表单验证规则
   - 必填字段空值拦截
   - 格式校验（邮箱、手机号、日期等）
   - 实时校验反馈

R3. 权限规则
   - 默认单用户本地使用
   - 如需多用户，优先使用简单 JWT 认证
   - 数据隔离按用户区分

R4. 响应规则
   - 操作成功后显示成功提示，3秒后自动消失
   - 操作失败显示错误原因，不闪退
   - 加载状态显示骨架屏或 Loading 动画

R5. 迭代规则
   - 每次修改记录版本号
   - 支持回退到上一个稳定版本
   - 重大变更需用户确认
```

### 步骤 7：定输出

**输出物清单**：

| 输出物 | 格式 | 说明 |
|--------|------|------|
| 产品文档 | Markdown / DOCX | 规范的需求说明 |
| 源代码 | HTML + CSS + JS | 可直接运行的单文件应用 |
| 部署包 | ZIP | 包含所有资源，可一键部署 |
| 使用说明 | Markdown | 操作指南和注意事项 |

**输出质量标准**：

- 所有生成的网页应用必须通过 W3C 基本验证
- 移动端适配率 100%（响应式设计）
- 首屏加载时间 < 3 秒（无网络依赖的单文件应用）
- 支持 Chrome、Firefox、Safari、Edge 最新版本

### 步骤 8：定交付

**交付物交付方式**：

1. **即时预览**：生成后直接在浏览器预览效果
2. **文件下载**：提供完整的源代码文件下载
3. **本地部署指南**：提供简单步骤说明如何在本地运行

**交付验收标准**：

```
验收检查项：
□ 功能完整性：用户需求中的功能点全部实现
□ 交互流畅性：按钮点击有反馈，表单提交有状态
□ 界面美观性：符合现代设计规范
□ 响应速度：操作延迟 < 100ms
□ 数据正确性：提交的数据能正确保存和展示
□ 无致命错误：Console 无 Error 级别日志
```

### 步骤 9：定验收

**用户验收流程**：

```
Step 1: 初步验收
   - 用户查看生成的网页应用
   - 测试核心功能流程

Step 2: 问题反馈
   - 用户记录发现的问题
   - 标注优先级（P0/P1/P2）

Step 3: 修复确认
   - 智能体修复问题
   - 用户重新测试

Step 4: 正式验收
   - 用户确认满意
   - 签署验收确认
```

**验收通过标准**：

- 核心功能流程走通率 100%
- P0 问题数量 = 0
- P1 问题数量 ≤ 2
- P2 问题数量 ≤ 5

### 步骤 10：定复盘

**项目复盘要点**：

```
复盘维度：
1. 需求理解准确度
   - 用户需求文档与实际需求偏差多大？
   - 哪些信息容易被误解？

2. 生成效率
   - 从需求到第一个版本平均耗时？
   - 迭代优化平均耗时？

3. 质量评估
   - 用户满意度评分（1-5）
   - 功能覆盖率
   - 常见问题TOP3

4. 改进方向
   - 优化需求理解能力
   - 丰富组件库
   - 提升生成速度
```

---

## 三、三步设计

### 设计原则

所有设计遵循以下核心原则：

1. **简洁优先**：Less is More，避免功能堆砌
2. **一致性**：同一产品内交互模式统一
3. **可预测**：用户行为结果可预期
4. **容错性**：允许撤销，减少损失

### 步骤 1：定主题

**主题定义规范**：

| 主题类型 | 适用场景 | 视觉特征 |
|---------|---------|---------|
| 商务专业型 | 企业内部工具、数据管理 | 白色背景、蓝色主调、清晰层级 |
| 活力轻快型 | 年轻用户、活动页面 | 渐变色、圆角卡片、活泼图标 |
| 简约现代型 | 工具类产品 | 大量留白、细线条、微阴影 |
| 数据看板型 | 数据展示、分析 | 深色背景、亮色数据点、图表丰富 |

**默认推荐**：商务专业型（适合大多数企业场景）

### 步骤 2：定色调

**色彩系统（基于 Modern Design）**：

```
主色调 Primary：
  - 品牌蓝: #3B82F6 (blue-500)
  - 深蓝: #1E40AF (blue-800)
  - 浅蓝: #DBEAFE (blue-100)

语义色 Semantic：
  - 成功绿: #10B981 (emerald-500)
  - 警告橙: #F59E0B (amber-500)
  - 错误红: #EF4444 (red-500)
  - 信息蓝: #3B82F6 (blue-500)

中性色 Neutral：
  - 文本主色: #111827 (gray-900)
  - 文本次色: #6B7280 (gray-500)
  - 边框色: #E5E7EB (gray-200)
  - 背景色: #FFFFFF (white)
  - 背景次色: #F9FAFB (gray-50)

暗色模式 Dark Mode：
  - 背景: #0F172A (slate-900)
  - 卡片: #1E293B (slate-800)
  - 文本: #F1F5F9 (slate-100)
```

**辅助色推荐**（来自 shadcn/ui 调色板）：

```
渐变背景 Gradient：
  - 柔粉: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%)
  - 科技蓝: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
  - 清新绿: linear-gradient(135deg, #11998e 0%, #38ef7d 100%)
  - 日落橙: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%)
```

### 步骤 3：定样式

**现代 UI 组件库参考**（shadcn/ui / Vercel Design）：

#### 3.1 按钮 (Button)

```
变体 Variants：
  - default: 填充主色，圆角-md
  - secondary: 填充灰色
  - outline: 描边透明背景
  - ghost: 无背景，hover 显示
  - destructive: 红色，用于删除操作
  - link: 文字链接样式

尺寸 Sizes：
  - sm: h-8 px-3 text-xs
  - default: h-10 px-4 text-sm
  - lg: h-12 px-6 text-base
  - icon: h-10 w-10 方形

状态 States：
  - default: 正常
  - hover: 亮度+10%
  - active: 缩放 0.98
  - disabled: opacity-50, cursor-not-allowed
  - loading: 显示 spinner, 禁用交互
```

**样式示例**：

```css
/* Default Button */
.btn {
  @apply inline-flex items-center justify-center rounded-md 
         text-sm font-medium transition-colors 
         focus-visible:outline-none focus-visible:ring-2 
         focus-visible:ring-offset-2 disabled:opacity-50;
}

/* Primary Button */
.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 
         focus-visible:ring-blue-500;
}

/* Outline Button */
.btn-outline {
  @apply border border-gray-200 bg-white hover:bg-gray-50 
         text-gray-900 dark:border-gray-800 dark:bg-gray-950;
}

/* Glassmorphism Effect */
.btn-glass {
  @apply bg-white/10 backdrop-blur-md border border-white/20;
}
```

#### 3.2 输入框 (Input)

```
样式变体：
  - default: 灰色边框，圆角-md，p-2
  - filled: 灰色填充背景
  - underline: 仅底部边框

状态反馈：
  - focus: ring-2 ring-blue-500
  - error: border-red-500, 显示错误提示
  - disabled: opacity-50, 背景变灰
  - loading: 右侧显示加载图标
```

**样式示例**：

```css
.input {
  @apply flex h-10 w-full rounded-md border border-gray-200 
         bg-white px-3 py-2 text-sm placeholder:text-gray-400 
         focus-visible:outline-none focus-visible:ring-2 
         focus-visible:ring-blue-500 disabled:cursor-not-allowed 
         disabled:opacity-50 dark:border-gray-800 dark:bg-gray-950;
}

.input-error {
  @apply border-red-500 focus-visible:ring-red-500;
}
```

#### 3.3 卡片 (Card)

```
结构：
  - card: 白色背景，圆角-xl，shadow-sm
  - card-header: p-6 pb-0
  - card-content: p-6
  - card-footer: p-6 pt-0

变体：
  - default: 普通卡片
  - interactive: hover 放大卡片阴影
  - bordered: 仅边框无阴影
  - glass: 毛玻璃效果背景
```

**样式示例**：

```css
.card {
  @apply rounded-xl border border-gray-200 bg-white 
         shadow-sm dark:border-gray-800 dark:bg-gray-950;
}

.card-glass {
  @apply bg-white/10 backdrop-blur-lg border border-white/20;
}

.card-interactive {
  @apply transition-all hover:shadow-md hover:scale-[1.01];
}
```

#### 3.4 表格 (Table)

```
特性：
  - striped: 斑马条纹
  - hoverable: 行悬停高亮
  - sortable: 列可排序
  - filterable: 列可筛选
  - 分页: 显示页码和每页条数

样式：
  - 表头: bg-gray-50, font-semibold
  - 单元格: p-3
  - 边框: border-b
```

#### 3.5 对话框/模态框 (Dialog)

```
动画：
  - 进入: scale-95 + opacity-0 → scale-100 + opacity-100
  - 退出: 反向
  - 遮罩: backdrop-blur-sm

变体：
  - default: 居中，白色背景
  - fullscreen: 全屏
  - sheet: 从底部滑入（移动端）
```

#### 3.6 表单布局 (Form Layout)

```
网格系统：
  - form-grid: grid grid-cols-1 md:grid-cols-2 gap-4
  - form-field: flex flex-col gap-1.5
  - form-label: text-sm font-medium
  - form-description: text-xs text-gray-500
  - form-error: text-xs text-red-500
```

#### 3.7 导航栏 (Navbar)

```
样式：
  - sticky: 固定顶部
  - transparent: 透明背景滚动后变色
  - glass: 毛玻璃效果
  - 高度: h-16

响应式：
  - desktop: 水平导航
  - mobile: 汉堡菜单 + 侧滑抽屉
```

#### 3.8 侧边栏 (Sidebar)

```
变体：
  - fixed: 固定左侧
  - collapsible: 可折叠
  - rail: 仅显示图标
  - floating: 浮动于内容上方

动画：
  - 展开/折叠: width 过渡 300ms ease
```

#### 3.9 徽章 (Badge)

```
变体：
  - default: 灰色背景
  - primary: 蓝色
  - success: 绿色
  - warning: 橙色
  - destructive: 红色

尺寸：
  - sm: px-2 py-0.5 text-xs
  - default: px-2.5 py-0.5 text-sm
```

#### 3.10 空状态 (Empty State)

```
组件：
  - 图标: 64x64 或更大，灰色调
  - 标题: text-lg font-semibold
  - 描述: text-sm text-gray-500
  - 操作: 主要按钮引导下一步

示例场景：
  - 无数据: "暂无数据，点击添加第一条记录"
  - 搜索无结果: "未找到匹配结果，试试其他关键词"
  - 错误状态: "出错了，请刷新页面重试"
```

---

## 四、现代设计元素参考库

### 4.1 Vercel 风格特征

```
特征：
  - 极简留白
  - 细线条分隔
  - 微妙的阴影
  - 网格布局
  - 等宽字体用于代码/数字
  - 流畅的过渡动画
```

### 4.2 shadcn/ui 组件清单

**优先使用组件**（按使用频率排序）：

| 组件 | 用途 | 优先级 |
|------|------|--------|
| Button | 所有可点击操作 | P0 |
| Input | 文本输入 | P0 |
| Card | 内容容器 | P0 |
| Table | 数据展示 | P0 |
| Dialog | 弹窗确认 | P0 |
| Select | 下拉选择 | P1 |
| Checkbox | 多选 | P1 |
| Radio | 单选 | P1 |
| Switch | 开关 | P1 |
| Badge | 状态标签 | P1 |
| Avatar | 头像 | P2 |
| Tabs | 标签切换 | P2 |
| Dropdown Menu | 右键菜单 | P2 |
| Toast | 操作反馈 | P2 |
| Skeleton | 加载占位 | P2 |
| Calendar | 日期选择 | P2 |
| Chart | 数据可视化 | P2 |

### 4.3 交互动效参考

```
Micro-interactions：
  - button hover: scale(1.02), 150ms
  - card hover: shadow-md, translateY(-2px), 200ms
  - modal: scale(0.95→1), opacity(0→1), 200ms
  - drawer: translateX(100%→0), 300ms ease-out
  - skeleton shimmer: background-position 动画
  - success: checkmark scale(0→1) + opacity

页面过渡：
  - fade: opacity(0→1), 300ms
  - slide: translateY(20px→0), 300ms
  - staggered: 子元素依次延迟 50ms
```

### 4.4 字体推荐

```
标题字体：
  - Inter: 现代、清晰、专业感
  - Geist: Vercel 官方字体
  - Plus Jakarta Sans: 几何感强

正文字体：
  - Inter: 屏幕阅读友好
  - SF Pro: Apple 生态

代码字体：
  - JetBrains Mono: 等宽、专业
  - Fira Code: 连字支持
```

---

## 五、三步部署

### 步骤 1：定方式

**部署方案对比**：

| 方案 | 适用场景 | 优点 | 缺点 |
|------|---------|------|------|
| 本地单文件 | 临时工具、个人使用 | 无需服务器、即开即用 | 无法多设备同步 |
| 内网部署 | 企业内部系统 | 数据安全、完全可控 | 需要 IT 支持 |
| 云端部署 | 需要外部访问 | 随时随地访问 | 需要服务器费用 |
| Vercel/Netlify | 静态页面 | 免费、快速 | 仅支持静态资源 |

**默认推荐**：本地单文件 + Vercel（根据用户需求选择）

### 步骤 2：定空间

**托管平台推荐**：

| 平台 | 免费额度 | 适合场景 | 部署难度 |
|------|---------|---------|----------|
| Vercel | 100GB 带宽/月 | 现代 Web 应用 | ⭐ |
| Netlify | 100GB 带宽/月 | 静态网站 | ⭐ |
| Cloudflare Pages | 无限次构建 | 静态 + Workers | ⭐⭐ |
| GitHub Pages | 无限存储 | 开源项目 | ⭐ |
| 阿里云 OSS | 30GB/免费 | 国内访问 | ⭐⭐ |
| 腾讯云 COS | 50GB/免费 | 国内访问 | ⭐⭐ |

### 步骤 3：定维护

**维护模式**：

| 模式 | 说明 | 适用场景 |
|------|------|----------|
| 自助维护 | 用户自行修改代码 | 技术爱好者 |
| 服务托管 | 智能体提供基础维护 | 普通业务用户 |
| IT 托管 | 企业 IT 部门维护 | 企业内部系统 |

**维护清单**：

```
日常维护：
□ 数据备份
□ 浏览器兼容性测试
□ 功能回归测试

定期维护（月）：
□ 依赖更新
□ 安全补丁
□ 性能优化

版本管理：
□ 语义化版本号 (v1.0.0)
□ 更新日志记录
□ 回滚方案准备
```

---

## 六、技术规范

### 6.1 技术栈选择

**默认技术栈**：

```
前端框架：Vanilla JS (单文件优先)
样式：Tailwind CSS (CDN)
图标：Heroicons (SVG)
字体：Inter (Google Fonts)
图表：Chart.js (CDN)
```

**进阶技术栈**（可选）：

```
前端框架：Vue 3 / React 18
样式：Tailwind CSS + shadcn/ui
图标：Lucide Icons
构建：Vite
图表：Recharts / ECharts
```

### 6.2 代码规范

```
文件结构（单文件应用）：
/project
  ├── index.html      # 主文件（包含 HTML/CSS/JS）
  ├── README.md      # 使用说明
  └── CHANGELOG.md   # 更新日志

命名规范：
  - 文件名：kebab-case (如: user-management.html)
  - 类名：BEM 或 Tailwind 工具类
  - 函数名：camelCase (如: handleSubmit)
  - 常量名：UPPER_SNAKE_CASE

注释规范：
  // ===== 区块标题 =====
  // 单行注释
  /**
   * 多行注释
   * @param {string} name - 描述
   */
```

### 6.3 数据存储规范

```
LocalStorage 结构：
{
  "app_data": {
    "version": "1.0.0",
    "lastUpdated": "2026-06-08T10:00:00Z",
    "records": [...]
  }
}

IndexedDB 适用场景：
  - 数据量 > 5MB
  - 需要复杂查询
  - 需要事务支持
```

---

## 七、质量检查清单

### 7.1 功能检查

```
□ 所有按钮可点击并有反馈
□ 所有表单可提交并验证
□ 数据正确保存和读取
□ 列表支持增删改查
□ 搜索/筛选功能正常
□ 分页/加载更多正常
□ 错误处理友好
```

### 7.2 界面检查

```
□ 响应式布局（手机/平板/桌面）
□ 颜色对比度符合 WCAG 2.1 AA
□ 字体大小可读（最小 12px）
□ 交互元素间距足够（可点击）
□ 加载状态有提示
□ 空状态有说明
□ 移动端触摸目标 ≥ 44px
```

### 7.3 性能检查

```
□ Lighthouse 评分 ≥ 80
□ 首屏加载时间 < 3s
□ 无外部资源阻塞
□ 图片有 alt 描述
□ 无 console.error
```

---

## 八、附录

### 附录 A：术语表

| 术语 | 定义 |
|------|------|
| PRD | Product Requirements Document，产品需求文档 |
| MVP | Minimum Viable Product，最小可行产品 |
| UX | User Experience，用户体验 |
| UI | User Interface，用户界面 |
| CRUD | Create/Read/Update/Delete，增删改查 |

### 附录 B：参考资料

- [shadcn/ui 官方文档](https://ui.shadcn.com)
- [Tailwind CSS 文档](https://tailwindcss.com)
- [Radix UI 组件库](https://radix-ui.com)
- [Vercel 设计系统](https://vercel.com/design)
- [OpenAI Codex 最佳实践](https://docs.codex.ai)

### 附录 C：版本历史

| 版本 | 日期 | 修改内容 | 作者 |
|------|------|---------|------|
| V1.0 | 2026-06-01 | 初稿 | - |
| V2.0 | 2026-06-08 | 全面升级，新增现代设计元素库 | Mavis |

---

**文档结束**