# 新生儿生辰八字起名小程序 - 产品规格说明书

## 1. 用户体验分析与核心功能

### 1.1 产品定位
帮助新生儿用户根据生辰八字、五行缺失、周易卦象等传统易学原理，结合现代审美生成高分名字的微信小程序。

### 1.2 目标用户
- 新生儿父母 / 准父母
- 对中国传统姓名学感兴趣的用户
- 希望给孩子起有意义、有文化内涵名字的用户

### 1.3 核心功能
1. **信息录入** - 录入宝宝的出生时间（年/月/日/时/性别）
2. **八字分析** - 自动计算生辰八字、五行缺失、喜用神
3. **卦象解读** - 根据出生信息起卦，解读卦象含义
4. **名字生成** - AI 根据八字+卦象+用户偏好生成候选名字
5. **名字打分** - 从五行、三才、五格、吉凶等多维度评分
6. **名字收藏** - 收藏喜欢的名字，便于对比
7. **付费解锁** - 兑换码兑换后解锁完整名字列表
8. **个人中心** - 订单历史、兑换码、收藏管理

### 1.4 用户流程
```
首页 → 录入信息 → 分析八字 → 生成名字 → 名字打分 → 收藏/选择 → 个人中心(兑换码)
```

---

## 2. 产品界面规划（信息架构）

### 2.1 页面清单
| 页面 | 文件 | 功能描述 |
|------|------|---------|
| 首页/入口 | index.html | 展示所有页面平铺，模拟小程序预览 |
| 欢迎页 | welcome.html | 引导页，展示产品核心价值 |
| 信息录入页 | input.html | 录入出生时间+性别 |
| 八字分析页 | bazi.html | 展示八字、五行、喜用神分析结果 |
| 卦象解读页 | gua.html | 展示起卦结果与卦象解读 |
| 名字广场页 | names.html | 展示AI生成的名字候选列表 |
| 名字详情页 | name-detail.html | 单一名字的多维度评分页 |
| 收藏页 | favorites.html | 收藏的名字列表管理 |
| 个人中心 | profile.html | 用户中心，兑换码功能 |
| 兑换页 | redeem.html | 兑换码输入与使用 |

### 2.2 底部导航结构
- 🏠 首页 (input)
- 📋 名字 (names)
- ⭐ 收藏 (favorites)
- 👤 我的 (profile)

---

## 3. UI 设计规范

### 3.1 设计风格
- **风格**: 新中式 + 轻现代国潮，融合传统周易文化与当代简洁美学
- **色彩**: 以深青/墨绿为主色调，金色点缀，呼应周易五行文化
- **氛围**: 典雅、温暖、有文化底蕴

### 3.2 色彩系统
```
--primary:       #1A5F5F  (深青色 - 主色调)
--primary-light: #2D8B8B  (浅青色)
--secondary:     #C9A84C  (古铜金 - 点缀)
--accent:        #E8533E  (中国红 - 强调)
--bg-primary:     #FAF8F5  (米白 - 主背景)
--bg-secondary:  #F0EDE8  (浅暖灰 - 次级背景)
--text-primary:  #1C1C1C  (主文字)
--text-secondary:#6B6B6B  (次文字)
--text-muted:    #9B9B9B  (弱化文字)
--border:        #E5E0D8  (边框)
--success:       #34A853  (成功)
--warning:       #F5A623  (警告)
--error:         #E53E3E  (错误)
```

### 3.3 字体
- **主字体**: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
- **数字/英文**: "DIN Alternate", "SF Pro Display", sans-serif
- **装饰字体**: 系统楷体用于传统元素

### 3.4 尺寸规范
- 小程序模拟宽度: 375px (iPhone 尺寸)
- 页面圆角: 16px
- 卡片圆角: 12px
- 按钮圆角: 全圆角 / 8px
- 内边距: 16px / 20px / 24px

---

## 4. 页面详细说明

### 4.1 welcome.html - 欢迎页
- 全屏背景图（新生儿/宝宝温馨图）
- 产品 Logo + Slogan
- "开始起名" 主 CTA 按钮
- 底部功能简介（3个核心价值点图标+文字）

### 4.2 input.html - 信息录入页
- 顶部标题 "宝宝起名"
- 性别选择（男/女，大图标按钮）
- 出生日期选择器（年月日三联动）
- 出生时辰选择（12时辰制，子丑寅卯...）
- 确认按钮

### 4.3 bazi.html - 八字分析页
- 宝宝头像/性别图标
- 八字展示（四柱，例：壬寅年 丁酉月 辛亥日 戊子时）
- 五行分布图（环形图或柱状图）
- 五行缺失提示
- 喜用神结论
- 三才五格简述
- "查看卦象" / "生成名字" 按钮

### 4.4 gua.html - 卦象解读页
- 当前卦名（大字）
- 卦象图（八卦符号）
- 卦辞原文
- 象曰解读
- 卦象吉凶判定
- "生成名字" 按钮

### 4.5 names.html - 名字广场页
- 顶部筛选/排序（按评分/五行/笔画）
- 名字卡片列表（姓名+评分+五行属性标签）
- 每个卡片可点击进入详情
- 免费用户显示前3个，解锁后显示全部
- 加载更多 / 解锁提示

### 4.6 name-detail.html - 名字详情页
- 姓名大字展示
- 姓名得分（总分数）
- 五格评分详情（天/地/人和/外格）
- 五行属性
- 八字喜用匹配度
- 卦象契合度
- 名字寓意解读
- 收藏按钮 + 分享按钮

### 4.7 favorites.html - 收藏页
- 顶部标题 "我的收藏"
- 收藏的名字列表
- 每个条目可删除/查看详情
- 空状态（未收藏时）

### 4.8 profile.html - 个人中心
- 用户头像区域
- 功能菜单列表：
  - 兑换码
  - 开通记录/订单
  - 使用帮助
  - 关于我们
  - 客服联系
- 版本信息

### 4.9 redeem.html - 兑换页
- 标题 "开通高级功能"
- 当前套餐状态提示
- 兑换码输入框
- 兑换按钮
- 常见问题折叠区

---

## 5. 技术实现说明

### 5.1 技术栈
- HTML5 + Tailwind CSS (CDN)
- FontAwesome 6 (图标)
- 原生 JavaScript (交互)
- Unsplash/Pexels 真实图片

### 5.2 文件结构
```
bazi-naming/
├── index.html              # 主入口，平铺展示所有页面
├── SPEC.md                 # 本规格说明书
├── pages/
│   ├── welcome.html        # 欢迎页
│   ├── input.html          # 信息录入页
│   ├── bazi.html           # 八字分析页
│   ├── gua.html            # 卦象解读页
│   ├── names.html           # 名字广场页
│   ├── name-detail.html     # 名字详情页
│   ├── favorites.html       # 收藏页
│   ├── profile.html         # 个人中心
│   └── redeem.html          # 兑换页
└── assets/
    ├── css/
    │   └── style.css        # 全局自定义样式（补充Tailwind）
    └── js/
        └── main.js          # 全局JS（底部导航等）
```

### 5.3 index.html 布局
- 使用 CSS Grid 或 Flexbox 将所有页面并排展示
- 每个页面嵌入 iframe，模拟小程序窗口
- 底部标注页面名称
- 响应式：小屏2列，大屏3-4列

---

## 6. 质量要求
- 所有数据为真实展示数据（八字、名字、分数），非占位符
- 图片使用 Unsplash 真实图片
- 评分数据合理性（80-98分区间）
- 五行/八卦信息准确（符合传统易学理论）
- 移动端优先，PC端可查看整体效果