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

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

---

一、产品概述

1.1 产品定位

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

1.2 目标用户

1.3 核心使用场景

1. 需求文档生成：用户输入业务需求描述 → 智能体生成结构化产品文档

2. 网页应用生成：用户确认产品文档 → 智能体生成可运行的网页应用

3. 迭代优化：用户提出改进意见 → 智能体持续优化产品

---

二、十步需求分析

步骤 1：定问题

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

现状痛点：

业务人员依赖 IT 部门排期，需求响应慢（通常 1-4 周）

简单工具的开发成本与收益不匹配

市场上通用软件功能冗余或不符合业务逻辑

员工只能手动操作 Excel、邮件等方式处理数据

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

步骤 2：定用户

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

用户分层：

用户画像示例：

张三，某制造企业 HR，需要一个员工信息录入和管理系统

李四，市场部运营，需要一个活动报名收集表和自动统计工具

王五，销售主管，需要一个简单的客户跟进记录工具

步骤 3：定场景

核心场景矩阵：

步骤 4：定输入

用户输入规范：

【输入格式示例】

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

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

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

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

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

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

输入质量标准：

步骤 5：定流程

主流程（需求到产品）：

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

异常处理流程：

步骤 6：定规则

业务规则库：

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

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

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

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

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

步骤 7：定输出

输出物清单：

输出质量标准：

所有生成的网页应用必须通过 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, 禁用交互

样式示例：

/* 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: 右侧显示加载图标

样式示例：

.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: 毛玻璃效果背景

样式示例：

.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 组件清单

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

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：定方式

部署方案对比：

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

步骤 2：定空间

托管平台推荐：

步骤 3：定维护

维护模式：

维护清单：

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

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

版本管理：
□ 语义化版本号 (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：术语表

附录 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：版本历史

---

文档结束