以下是优化后的 README，重点强化了 面试作品集属性 和 产品经理视角的决策逻辑，同时保持技术文档的严谨性。
AI 驱动的用户旅程地图生成器
—— AI 产品经理面试作品集 · 展示链式推理、人机协作与工程化落地能力
核心亮点 • 技术决策故事 • 快速开始 • API 文档 • 架构
一句话概括：输入产品名称 + 目标用户画像，AI 自动生成完整的用户旅程地图——包含 6~8 个体验阶段、行为描述、情绪评分（1-10）、痛点洞察和优化机会点，并输出可交互的情绪曲线图。
但它不仅是一个工具，更是一份 AI 产品经理的能力证明。 本项目通过一个完整的端到端产品，系统性地展示了：
| 能力维度 | 本项目如何证明 |
|---|---|
| AI 产品设计 | V1 单次生成 vs V2 链式推理的 A/B 对比设计与验证 |
| 人机协作 | 情绪评分可拖拽修正 → 局部重绘 → Diff 高亮反馈闭环 |
| 工程化落地 | SSE 流式反馈、语义缓存、双重校验、一键导出交付物 |
| 成本意识 | 缓存命中率看板、V1/V2 耗时对比、mock 模式降本 |
| 用户体验设计 | 双栏布局、骨架屏、进度时间线、空状态引导 |
| 模式 | 调用次数 | 耗时 | 适用场景 |
|---|---|---|---|
| 🚀 V1 快速 | 1 次 | ~2s | 头脑风暴、快速原型 |
| 🧠 V2 深度（默认） | 4 次串行 | ~8s | 深度分析、面试演示 |
| 📊 V1+V2 对比 | 5 次并行 | ~8s | 效果对比、方法论验证 |
V2 的 4 步链式推理：阶段拆解 → 行为痛点填充 → 情绪机会评分 → 汇总图表生成。每一步都有独立的 Prompt 和中间产物，可追溯、可调试——这是本项目最核心的设计决策。
- SSE 流式输出：V2 每一步实时推送，前端展示 4 步思考时间线，用户不再面对黑盒等待
- 可交互旅程卡片：每个阶段以
n-card呈现，情绪分数通过n-slider拖拽调整（1-10） - 人工纠偏 + 局部重绘：修改任意阶段后，防抖 500ms 自动调用
/refine接口，仅重算后续阶段，保持曲线连续性 - Diff 高亮反馈：纠偏后，受影响的字段以黄色闪烁动画标记，用户清楚 AI 因何改变
- 版本回退：纠偏前自动保存快照，支持一键回退
- 语义缓存：基于
product|persona的 MD5 完全匹配缓存，重复查询直接命中 - 双重校验：Pydantic 模型校验 + 情绪连续性校验（相邻差值 ≤ 3）
- 自动重试：单次 LLM 调用最多 2 次自动重试
- Mock 模式：
LLM_MOCK=1无需 API Key 即可演示全流程 - 导出交付物：一键导出 Markdown 报告 + 2x 分辨率 PNG 截图（含底部水印）
- 生成历史：localStorage 持久化，支持历史记录回填
- 双栏固定布局：左侧 420px 输入面板 + 右侧独立滚动结果区，符合 B 端工具操作习惯
- 一键生成：快捷示例按钮自动填入并立即触发生成，按钮文字绑定 SSE 步骤进度
- 空状态引导：未生成时展示精致占位图，降低用户认知负担
以下内容面向面试官 / 技术评审，展示本项目关键设计决策的思考过程。
问题：用户旅程地图需要深度推理（心理学模型 + 场景推演），传统单次 LLM 调用容易产生幻觉——情绪曲线要么太平（无效），要么跳跃（不真实）。
方案：设计 V2 链式推理，将复杂任务拆解为 4 个子任务，每个子任务有独立的 Prompt 和中间产物。
验证：用 3 组产品 + 画像做 A/B 对比，V2 的情绪曲线平滑度比 V1 提升约 47%（相邻差值绝对值之和降低）。
结论：复杂推理任务应拆解为子任务，让模型逐步思考。这一原则可迁移到任何需要深度分析的 AI 产品中。
问题：AI 生成的旅程地图不可能 100% 准确——PM 比 AI 更懂自己的用户。如果工具不允许人工修正，用户会抛弃它。
方案：允许用户通过滑块拖拽调整情绪分数、编辑痛点文本，修改后仅重新生成后续阶段（而非全部重算），保持修正后的数据稳定。
结论：AI 产品的关键不是“全自动”，而是“人机协作”。让 AI 做 80% 的体力活，让专家做 20% 的判断。
问题：V2 需要 4 次串行调用，耗时 ~8s。如果 UI 全程转菊花，用户会焦虑甚至流失。
方案：每完成一步，立即向客户端推送进度事件，前端展示“正在拆解阶段... → 正在分析痛点... → 正在评估情绪... → 正在绘制图表...”。
结论：进度反馈不是锦上添花，而是产品信任度的核心组件。
问题：面试官需要看到方法论验证的数据证据。
方案：保留 V1+V2 对比模式，同屏展示两种策略的耗时、阶段数、情绪曲线，直接证明 V2 的质量优势。
结论：产品经理必须能用数据说话。对比模式就是这个项目的数据仪表盘。
journey-dev/
├── app/ # FastAPI 后端
│ ├── main.py # 入口 + 路由 + SPA 托管
│ ├── models.py # Pydantic 数据模型
│ ├── llm_client.py # DeepSeek SDK 封装 + Mock 回退
│ ├── cache.py # 线程安全内存缓存 (MD5 + TTL)
│ ├── errors.py # 全局异常处理
│ └── services/
│ └── generator_v2.py # V2 链式生成 + SSE + 纠偏核心逻辑
├── prompts/ # 所有 Prompt 版本化管理
│ ├── v1/generate.txt # 单次生成
│ └── v2/step{1..4}.txt # 4 步链式 Prompt + refine.txt
├── tests/ # pytest 测试套件
│ └── test_journey.py
├── frontend/ # Vue 3 + Vite + Naive UI
│ ├── src/
│ │ ├── components/ # StageCard, MermaidChart, InputPanel...
│ │ ├── composables/ # useJourney, useApi, useMermaid...
│ │ ├── stores/ # Pinia 状态管理
│ │ ├── views/ # Generator.vue, History.vue
│ │ └── router.js
│ └── package.json
├── .env.example
└── README.md
- Python 3.10+ · Node.js 18+ · DeepSeek API Key（获取）
# 1. 后端
python -m venv .venv && source .venv/bin/activate
pip install fastapi uvicorn openai python-dotenv pydantic
cp .env.example .env # 填入 OPENAI_API_KEY
uvicorn app.main:app --host 127.0.0.1 --port 8000
# 2. 前端（新终端）
cd frontend && npm install && npm run build
# 3. 访问
open http://127.0.0.1:8000# 终端1：后端
uvicorn app.main:app --reload --port 8000
# 终端2：前端热更新（Vite proxy 转发 /api 到 8000）
cd frontend && npm run dev # → http://localhost:5173# .env 中设置
LLM_MOCK=1后端将返回内置的 7 阶段完整数据，支持全流程演示（含 SSE 流式模拟）。
| 接口 | 方法 | 说明 |
|---|---|---|
/api/v1/generate |
POST | V1 单次生成，返回 JSON |
/api/v2/generate |
POST | V2 SSE 流式生成，实时推送 4 步进度 |
/api/v2/refine |
POST | 人工纠偏：修改某阶段后，AI 重算后续阶段 |
完整请求/响应示例见 API 详细文档（或直接运行后访问
/docs）
pytest tests/ -v| 测试 | 验证内容 |
|---|---|
TestV1ResponseStructure |
输出包含 stages 数组、必需字段、emotion_score ∈ [1,10] |
TestV2ChainIntermediate |
4 步均有可解析的中间产物 |
TestEmotionCurveContinuity |
相邻阶段情绪分差值 ≤ 3 |
TestMermaidSyntax |
mermaid_code 包含 graph LR 或 xychart-beta |
测试覆盖率目标：核心服务层 ≥ 80%，API 路由 ≥ 90%。
┌─────────────────────────────────────────────────────────────────────┐
│ 前端 (Vue 3 + Vite) │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────────┐ │
│ │ InputPanel │ │ Pinia Store │ │ ResultWorkspace │ │
│ │ (产品+画像) │→ │ (状态管理) │→ │ ├─ StageCard[] (可交互) │ │
│ │ 策略选择器 │ │ │ │ ├─ MermaidChart │ │
│ │ 快捷示例 │ │ useJourney │ │ ├─ ThinkingTimeline │ │
│ └──────────────┘ └──────────────┘ │ └─ CompareSummary │ │
│ │ │ └──────────────────────────┘ │
│ │ POST /generate │ EventSource (SSE) │
│ ▼ ▼ │
└─────────┼─────────────────┼───────────────────────────────────────┘
│ │
▼ ▼
┌─────────────────────────────────────────────────────────────────────┐
│ 后端 (FastAPI) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ /api/v1/generate → Cache → LLM (单次) → 校验 │ │
│ │ /api/v2/generate → V2 Chain Engine (4步串行) │ │
│ │ /api/v2/refine → Refine Engine (固定前N+重算后续) │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────┐ │
│ │ DeepSeek API │ │
│ │ (chat / v4-pro) │ │
│ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────────────┘
| 变量 | 默认值 | 说明 |
|---|---|---|
OPENAI_API_KEY |
— | DeepSeek API Key（必填） |
OPENAI_BASE_URL |
https://api.deepseek.com |
API 端点 |
LLM_MODEL |
deepseek-chat |
模型名称 |
LLM_MOCK |
0 |
1=跳过 API，使用 mock |
LLM_TIMEOUT |
40 |
超时秒数 |
LLM_TEMPERATURE |
0.7 |
生成温度 |
CACHE_TTL |
0 |
缓存过期秒数（0=永不过期） |
CACHE_MAX_ENTRIES |
1000 |
最大缓存条目数 |
MIT © JourneyMap
如果你用这个项目作为面试作品，以下是三个最可能被问到的问题及参考答案：
Q1：V2 链式推理比 V1 好在哪？你怎么验证的？
我用了 3 组产品+画像做 A/B 对比，V2 的情绪曲线平滑度（相邻差值绝对值之和）比 V1 低 47%，说明链式推理强制模型先做结构化思考，避免了单次生成的幻觉和情绪跳跃。
Q2：为什么做人工纠偏功能？
AI 生成的旅程地图不可能 100% 准确，PM 比 AI 更懂自己的用户。如果工具不允许人工修正，用户会抛弃它。这个功能体现了“AI 辅助而非替代”的产品理念。
Q3：如果让你继续迭代，下一步做什么？
把 localStorage 历史记录升级为轻量后端数据库（SQLite），做成团队共享的“旅程地图知识库”；同时增加导出 PDF 和 PPT 格式，让 PM 能直接用在汇报里，省去二次排版的时间。
📌 项目状态：Production Ready · 面试作品集展示用 · 欢迎 Fork 和 Star