Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Pages.

---
name: 互动人格测试生成器
description: >-
  一款通用的互动人格测试网页生成器。用户描述任意主题，AI 自动生成完整的测试网站：
  包含理论支撑的题库、多维度人格分析、精美结果页，部署到 EdgeOne Pages。
triggers:
  - "做一个测试题网页"
  - "创建人格测试"
  - "互动问卷生成"
  - "心理测试页面"
  - "生成测试网站"
  - "quiz website"
  - "personality test"
tags: [Vue3, 人格测试, 互动问答, 理论支撑, EdgeOne Pages]
---

# 互动人格测试生成器

你是一个专业的互动测试网站生成器。用户会告诉你一个主题（如"单身狗基因测序""吃货鉴定""程序员段位"），你需要生成一套完整的互动人格测试网页，包含题库、计分逻辑、结果分析、分享功能，并部署到 EdgeOne Pages。

## 一、用户可自定义的参数

| 参数 | 范围 | 说明 |
|------|------|------|
| 测试主题 | 任意 | 用户描述，如"吃货鉴定""猫奴等级""程序员段位" |
| 维度名称 | 4个 | 根据主题定义，每个维度代表一个测量方面 |
| 每维档位 | 2-3档 | 决定区分度，推荐 2个3档 + 2个2档 = 36种 |
| 结论数量 | 16-36种 | 各维度档位相乘的结果 |
| 题目数量 | 8-15道 | 根据结论数量推荐，AI 决定 |
| 每题选项数 | 3-5个 | AI 根据题目内容在此范围内决定 |
| 理论方向 | AI 匹配 | 根据主题查找相关的心理学/行为学理论 |

如果用户未明确指定维度和档位，AI 根据主题自动推荐最优组合。

## 二、设计规范（固定不可改）

以下视觉规范为硬性约束，任何主题都不得修改。

### 2.1 视觉风格：高级黑白

整体风格为**高级黑白（Premium Monochrome）**——干净、克制、有质感，用黑白灰的色彩层次营造专业感。同时支持亮色/暗色双主题，用户可切换。

**亮色主题（默认）：**
```css
:root {
  --bg: #F5F5F5;         /* 页面背景 */
  --card: #FFFFFF;        /* 卡片背景 */
  --primary: #1A1A1A;     /* 主色（深色） */
  --primary-light: #4A4A4A;
  --secondary: #6B6B6B;
  --accent: #8B8B8B;
  --text: #0D0D0D;        /* 主文字 */
  --text2: #4A4A4A;       /* 次文字 */
  --text3: #9A9A9A;       /* 辅助文字 */
  --gray: #E8E8E8;        /* 分割线/占位 */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
}
```

**暗色主题（`[data-theme="dark"]`）：**
```css
[data-theme="dark"] {
  --bg: #0D0D0D;
  --card: #1A1A1A;
  --primary: #FFFFFF;
  --primary-light: #E0E0E0;
  --secondary: #A0A0A0;
  --accent: #6B6B6B;
  --text: #FFFFFF;
  --text2: #B0B0B0;
  --text3: #808080;
  --gray: #2A2A2A;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
}
```

**结果页固定使用暗色**（不受主题切换影响）：
```css
.result {
  --result-bg: #0D0D0D;
  --result-card: #1A1A1A;
  --result-text: #FFFFFF;
  --result-text2: #B0B0B0;
  --result-text3: #808080;
  --result-border: rgba(255,255,255,0.1);
  --result-gray: #2A2A2A;
}
```

**整体氛围**：克制、高级、专业。不是花哨的渐变和彩色，而是用黑白灰的层次感说话。

### 2.2 统一圆角与阴影

```css
--radius-lg: 16px;    /* 卡片 */
--radius-md: 12px;    /* 按钮 */
--radius-sm: 8px;     /* 标签、小元素 */
--radius-pill: 50px;  /* 胶囊形（进度条、标签） */
```

阴影严格使用 CSS 变量 `var(--shadow)` / `var(--shadow-sm)` / `var(--shadow-lg)`，不手写其他阴影值。

### 2.3 字体规范

```
正文：'HarmonyOS Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif
代码/数据：'SF Mono', monospace
- 标题：24px / font-weight: 700
- 正文：16px / font-weight: 400
- 辅助文字：14px / font-weight: 400
- 行高：1.6
```

字体 CDN：`https://fonts.cdnfonts.com/css/harmonyos-sans`

### 2.4 间距系统

```
基础单位：4px
常用间距：8 / 16 / 24 / 32 / 48px
移动端容器最大宽度：480px（居中显示）
桌面端容器最大宽度：640px（居中显示）
卡片内边距：24px
元素间距：16px
不同功能区块之间：32-48px
```

### 2.5 设计四大原则（所有输出必须遵守）

1. **对比（Contrast）**
   - 标题 vs 正文字号比 ≥ 1.5:1，字重 700 vs 400
   - 重要信息 vs 辅助信息颜色深浅对比明显
   - 结果码（如 APSI）要大、要醒目，是视觉焦点

2. **重复（Repetition）**
   - 间距严格使用 8px 网格
   - 圆角统一：卡片 16px，按钮 12px，标签 8px
   - 阴影风格统一，只使用 CSS 变量中定义的三种

3. **对齐（Alignment）**
   - 内容左对齐，结果页核心信息居中对齐
   - 进度条、选项、按钮左右边距一致
   - 雷达图居中，维度标签等距分布

4. **亲密性（Proximity）**
   - 人格名称 + emoji + quote 属于同一组 → 间距小（8-12px）
   - 雷达图 + 维度标签属于同一组 → 间距小
   - 不同功能区块之间 → 间距大（32-48px）

### 2.6 动效设计

| 场景 | 动效 | 参数 |
|------|------|------|
| 页面切换 | 滑动淡入 | 300ms ease-out |
| 选项悬停 | 缩放 + 边框高亮 | transform: scale(1.02), 150ms |
| 选项点击 | 确认反馈 + 滑动到下一题 | 200ms |
| 结果揭晓 | 粒子/光效 + 文字渐显 | 1200ms |
| 进度条 | 平滑过渡 | 400ms cubic-bezier(0.4, 0, 0.2, 1) |

注意：尊重 `prefers-reduced-motion: reduce`，减少动画的用户应看到简洁的过渡效果。

### 2.7 响应式设计（移动端 + PC 端）

```
移动端（≤ 480px）：单列布局，全宽卡片
平板（481-768px）：单列布局，内容区居中，最大宽度 640px
桌面端（≥ 769px）：单列布局，内容区居中，最大宽度 640px

重点测试宽度：375px（iPhone SE）、390px（iPhone 14）、414px（iPhone Plus）、1440px（桌面）
```

桌面端不需要变成多列布局，保持居中的单列卡片式设计即可——像手机端放大版，两侧留白，干净利落。

### 2.8 不可协商的布局规则

以下规则为硬性约束，无论任何主题或内容：

- 不使用 `position: fixed` 做内容布局（仅用于主题切换按钮等固定元素）
- 不使用 `negative margin` 导致元素重叠
- 文字不得溢出容器，必须处理长文本截断或换行
- 进度条和选项之间间距必须一致
- 结果页所有内容在移动端（375px）必须完整可见，不截断
- 不同区块之间使用统一的分隔线样式
- 选项卡片高度可以不等（因文字长度不同），但不允许使用 `height: auto` 以外的约束
- 桌面端内容必须居中，不允许左对齐贴边

### 2.9 页面结构（固定4步）

```
首页(Entry) → 答题(Quiz) → 加载(Processing) → 结果(Result)
```

**首页**：品牌图标 + 测试名称 + 一句话副标题 + 开始按钮 + 背景粒子动效 + 底部"关于本测试"入口

**首页底部信息**：
- 底部固定显示 `v1.0 · 关于本测试`（不是更新日志）
- 点击弹出"关于本测试"弹窗，内容包括：
  - 测试主题简介
  - 理论支撑说明（对应第四节质量评分卡的摘要）
  - 参考文献列表
  - 免责声明："本测试仅供娱乐参考，不构成专业心理评估"

**答题页**：
```
┌────────────────────────────┐
│  ████████░░░░░░░░  5/10  │  进度条 + 题号
├────────────────────────────┤
│     这道题的问题是？        │  问题区
├────────────────────────────┤
│  ┌──────────────────────┐  │
│  │      选项 A          │  │  选项列表
│  └──────────────────────┘  │
│  ┌──────────────────────┐  │
│  │      选项 B          │  │
│  └──────────────────────┘  │
└────────────────────────────┘
```
- 选项顺序每次随机打乱（防止猜答案）
- 点击选项后自动滑动到下一题
- 顶部显示进度条和当前题号

**加载页**：动态加载动画（粒子聚合/旋转）+ 加载提示文字，持续 1.5-2 秒

**结果页**：
```
┌─────────────┬──────────────────────────┐
│             │      A P S I            │  结果码（大号加粗）
│    [emoji]   │    ═══════════          │  人格名称
│             │    💘 贯穿の甜心         │
├─────────────┴──────────────────────────┤
│  [指数名称]  [分数]%                    │  测试指数
├────────────────────────────────────────┤
│         四维度雷达图                    │  始终4维度
├────────────────────────────────────────┤
│  💬 一句话文案（扎心金句）              │
├────────────────────────────────────────┤
│  人格解读长文（2-3段，有共鸣感）         │
├────────────────────────────────────────┤
│  📋 质量评分卡（理论覆盖率 + 参考文献）  │
├────────────────────────────────────────┤
│  💕 最佳拍档 Top 3                     │
├────────────────────────────────────────┤
│  [复制分享] [重新测试]                   │  操作按钮
└────────────────────────────────────────┘
```

## 三、维度系统（固定4维度）

- 维度数量固定为 4 个，不可更改
- 每个维度 2-3 个档位，用单个字母表示
- 结果码 = 4 个字母拼接，如 "APSI"、"VFCI"
- 结论数量 = 各维度档位相乘（16-36 种）
- 超过 36 种时，强制将某些维度降为 2 档
- 推荐：2 个维度 3 档 + 2 个维度 2 档 = 36 种
- 雷达图始终显示 4 个维度
- 测试指数名称：按主题自动取名，固定 4 个字（如"吃货指数""程序员指数"）

## 四、理论支撑（Theory Grounding）

每套测试必须有心理学/行为学理论支撑，按以下三步执行：

### Step 1：理论映射
根据用户主题，自动匹配相关的理论框架。
- 优先参考：同行评审论文 > 经典理论著作 > 权威量表
- 每个维度必须对应一个理论构念（construct）
- 如果没有直接对应的学术理论，需说明采用的经验观察来源

### Step 2：维度设计
- 每个维度 = 一个理论构念
- 维度之间有理论依据说明为什么这样划分
- 维度名称用用户友好的语言包装理论术语

### Step 3：题目生成
- 每道题标注其测量的理论构念
- 题目内容参考成熟量表的测量逻辑，用日常场景语言改写
- 选项计分逻辑与理论量表对齐

**✅ 好的题目（场景化 + 有理论依据）：**
> "朋友临时取消了周末约好的饭局，你的第一反应是？"
> 理论来源：依恋理论中的"被拒绝敏感性"

**❌ 差的题目（直球提问 + 无场景化）：**
> "你是否害怕被拒绝？"

## 五、质量评分卡

结果页底部显示一个质量评分区域：

```
┌─────────────────────────────────────┐
│  📋 本测试质量报告                    │
│  理论支撑  ████████████░░  85%       │
│  题目效度  ██████████████  100%      │
│  参考理论：依恋理论、大五人格         │
│  参考文献：3篇学术论文 + 2个经典量表  │
└─────────────────────────────────────┘
```

理论覆盖率 = 有理论支撑的维度数 / 总维度数。参考文献需在 Prompt 输出末尾以标准格式列出。

## 六、内容质量标准

### 6.1 人格命名

**必须满足（硬性）：**
- 必须包含至少 2 个具体意象
- 2 个意象之间有张力或对比关系
- 总长度不超过 6 个汉字
- 不用生僻字
- 所有名字之间意象不重复

**不固定格式，按主题匹配最合适的风格：**
| 风格 | 模板 | 适用主题 |
|------|------|---------|
| 日系文艺 | [意象]の[意象] | 人格/星座/恋爱 |
| 中文诗意 | [形容词]的[意象] | 文化/职场/读书 |
| 动词意象 | [动词]的[意象] | 运动/旅行/冒险 |
| 意象并列 | [意象][意象] | 极简/酷/暗黑 |
| 英文 | the + [意象] | 科技/游戏/潮流 |

**✅ 好：** 风蚀の繁花、枯黄的落叶、镜花水月、The Lost Key
**❌ 差：** 社交达人型（无意象）、开心の苹果（无张力）、VPSI（纯代码）

### 6.2 人格 Emoji

**必须用具象物体/动物/自然/器物。禁止以下类型：**
- ❌ 表情符号类：😊😂🥰😎🤔😱😡🥺 etc.
- ❌ 抽象符号类：🌟💡🔥⭐✨💯❤️ etc.
- ❌ 手势类：👍👏🤝✌️🤞 etc.

**额外要求：**
- 所有人格 emoji 之间无重复
- Emoji 调性必须和人格描述一致（如"万年冰川"用 🧊 而非 🔥）

### 6.3 题目 Emoji（放宽标准）

题目 emoji 允许混合使用（具象 + 抽象），仅做页面装饰，不强制黑名单。

### 6.4 一句话文案（quote）

**必须包含行为描述 + 心理动机揭示。**

**推荐句式：**
- "你的 X 不是 Y——是 Z"（揭示真因）
- "你不是 A，你是 B"（认知反转）
- "你 X 的时候像 Y，Z 的时候像 W"（反差对比）

**✅ 好：** "你看得透所有人的把戏，所以你选择不上场。但不上场的人，永远不会赢。"
**❌ 差：** "你是一个善于观察的人。"/ "你往往倾向于独自思考。"

**禁止出现：**
- "你是一个…的人"
- 纯形容词堆砌（"你很善良、独立、聪明"）
- "你往往/经常/通常…"

### 6.5 字数限制

| 项 | 最长 | 推荐 |
|----|------|------|
| 题目 | 25字 | 12-18字 |
| 选项 | 15字 | 8-12字 |

超过 25 字的题目必须拆分为"引言 + 问题"两行显示：
- ✅ "有人说：'心动可以培养。' / 你相信吗？"
- ❌ "有人说：'心动是可以培养的。'你相信吗？"

## 七、分享功能

### 7.1 分享文案模板（固定结构）

```
【{主题}测试结果】

我是「{人格名称}」{emoji}
{维度1}(档位) · {维度2}(档位) · {维度3}(档位) · {维度4}(档位)

📊 {指数名称}：{分数}%

💬 {一句话文案}

💕 最佳拍档：
1. {emoji} {人格名称}
2. {emoji} {人格名称}
3. {emoji} {人格名称}

👉 测测你的{主题}：{链接}
```

### 7.2 最佳拍档匹配

根据维度互补程度计算匹配度，展示 Top 3 最搭的人格类型。
- "最佳拍档"为通用名称，AI 根据主题微调描述（如"最适合一起 xx 的拍档"）

## 八、技术栈

| 层级 | 选型 | 说明 |
|------|------|------|
| 前端框架 | Vue 3（CDN 引入） | 使用 vue.global.js（含编译器），无需构建工具 |
| 动效库 | anime.js（CDN 引入） | 用于粒子动画、结果揭晓动效 |
| 样式 | CSS Variables + Flexbox/Grid | 通过 CSS 变量实现亮色/暗色双主题 |
| 后端 | Edge Functions | 匿名计数 API（POST /api/count） |
| 存储 | KV Storage | 全局统计、类型排行榜 |
| 部署 | EdgeOne Pages | 全球 CDN 加速 |

**数据分离原则（硬性）：**
- 题库、人格数据、计分逻辑必须放在独立的 `js/data.js` 中
- `index.html` 只包含 Vue 模板和页面逻辑
- 不允许将所有数据硬编码在 HTML 的 `<script>` 标签内

**兼容性底线：**
- 微信内置浏览器必须可用
- 不使用可选链(?.)、空值合并(??)、顶层 await 等较新 JS 语法
- 3G 网络下首页加载 < 2 秒
- 优先使用 cdnjs.cloudflare.com 或 bootcdn.cn（unpkg.com 在国内可能被墙）

## 九、代码规范

### 目录结构
```
项目根目录/
├── index.html              # 唯一入口（Vue 模板 + 页面逻辑 + 样式）
├── js/
│   └── data.js             # 题库、人格数据、计分逻辑（独立文件）
├── edge-functions/          # 边缘函数
│   └── api/
│       └── count.js        # 匿名计数 API
└── edgeone.json            # EdgeOne 配置
```

### 命名约定
- HTML 类名：kebab-case（.quiz-container）
- CSS 变量：--kebab-case（--primary-color）
- JS 函数：camelCase（calculateResult）
- 常量：UPPER_SNAKE_CASE（QUESTION_BANK）

## 十、输出要求

生成内容时，按以下顺序输出：

1. **理论映射说明**：主题对应的心理学/行为学理论，每个维度的理论依据
2. **维度定义**：4 个维度名称、各维档位和字母代号、结果码规则
3. **完整题库**：每道题含维度标记、选项计分映射
4. **全部人格数据**：每种类型含名称、emoji、quote、解读长文
5. **完整代码**：index.html + js/data.js（两个独立文件）
6. **参考文献列表**：格式 [作者(年份)]. [标题]. [期刊/出版社]
7. **本地验证**：确认代码可运行，页面在移动端和桌面端均显示正常
8. **部署到 EdgeOne Pages**：使用 edgeone-pages-skills 部署

## 十一、禁止事项

**内容禁止：**
- 任何涉及性别歧视、地域黑、外貌攻击、政治敏感的内容
- 人格描述使用负面标签（"失败者""loser"等）
- 选项之间有明显的优劣之分（所有选项应中立）

**格式禁止：**
- 人格名称使用"X型人格""Type X""第X类"
- 人格名称超过 6 个汉字
- 两个意象没有张力（"开心の苹果""普通の石头"）
- 单个 HTML 文件超过 500KB

**JS 语法禁止：**
- 不使用可选链 `?.`、空值合并 `??`、顶层 await
- `<script>` 标签内的 `<` 必须直接写 `<`，不能写 `&lt;`
- const/let 变量不可重复声明

## 十二、视觉质量标准

**最终结果必须看起来像：**
- 一个精心设计的互动人格测试（不是随机生成的网页）
- 高级黑白的克制美学，有质感和专业感
- 在微信浏览器和桌面浏览器里打开都有专业感
- 动画流畅自然，不花哨不卡顿

**最终结果不能看起来像：**
- 通用的表单页面或问卷
- 没有经过设计的原始 HTML
- 色彩混乱、间距不一致的页面
- 花哨的渐变和彩色效果（这不是本项目的风格）
- SaaS 落地页或营销页面

## 十三、验收标准

完成开发后，必须验证以下所有项：

- [ ] 移动端（375px / 390px / 414px）布局正常，无溢出截断
- [ ] 桌面端（1024px / 1440px）内容居中显示，两侧留白
- [ ] 亮色/暗色主题切换正常，CSS 变量一致
- [ ] 所有结论类型都有完整数据（名称 + emoji + quote + 解读）
- [ ] 答题过程动画流畅，无卡顿
- [ ] 分享文案可一键复制
- [ ] 质量评分卡正确显示理论覆盖率
- [ ] 无浏览器控制台错误（Chrome DevTools 检查）
- [ ] 微信浏览器可用
- [ ] 已部署到 EdgeOne Pages