mp_1787300862_s8r25x
1ef034cd59
- 单文件交互式Demo：六大表单模块 + 右侧AI助手面板 - 一键发品（弹窗式）与对话式自主发品（Agent模式） - 多工具串行调度 + 逐工具确认（human-in-the-loop） - 偏好学习机制（localStorage，越用越好用） - Prompt提示词设计文档与项目方法论笔记
3.2 KiB
3.2 KiB
旅行商品发布 AI 助手 Demo
飞猪商家商品发布平台右侧嵌入的 AI 助手交互式演示。模拟完整的商品发布页（六大模块表单）+ 右侧 AI 助手面板，主打「一键发品」与「越用越好用」的偏好学习机制。
快速开始
无需构建，直接用浏览器打开：
open index.html
或启动本地静态服务：
npx serve .
功能概览
左侧商品发布表单（6 大模块）
| 模块 | 说明 |
|---|---|
| 商品标题 | 40 字计数器 + 目的地/天数/类型/人群标签（作为 AI 上下文） |
| 详细介绍 | 列表页卖点摘要 |
| 商品详情 | 富文本编辑器（工具栏 + 图文混排） |
| 商品图片 | 4 列图片网格，主图/详情图角标 |
| 行程编辑 | 动态 D1~Dn 天数卡片 |
| 价格库存 | 团期表格（日期/成人价/儿童价/库存/在售状态） |
每个模块标题行右侧有 ✨ AI 按钮，可直接唤起助手中对应工具（面板收起时自动展开）。
右侧 AI 助手
- 8 个快捷工具：生成标题、卖点描述、商品详情、配图建议、行程规划、智能定价、SEO 关键词、合规检查
- 一键发品（弹窗式）：选 4 项配置 → 6 大模块逐步生成 → 偏好沉淀 + 成长等级
- 对话式自主发品（Agent 模式）：一句话下需求（如「帮我发个海南亲子6天自由行」），助手自动规划 8 步任务清单、串行调用工具
- 多工具串行调度：如「帮我优化标题和详情」，自动识别 2+ 模块并依次执行
- 逐工具确认（human-in-the-loop）：串行过程中每个工具生成卡片后展示，支持自动（5s 倒计时）/ 手动两种确认模式，可随时切换、可「换一版」
- 上下文感知：生成内容随表单选择（目的地/天数/人群）联动
- 一键回填：生成卡片「⚡ 一键填入」写入对应模块，自动滚动定位 + 高亮闪烁
偏好学习（越用越好用）
- 即时记忆：每次发品沉淀偏好（localStorage），下次自动预填配置
- 成长等级：Lv.1 通用模板（0-2 次）→ Lv.2 风格匹配（3-9 次）→ Lv.3 爆款复刻（10+ 次）
目录结构
├── index.html # 单文件 Demo（HTML + CSS + JS，零依赖）
├── Prompt提示词设计文档.md # 各工具背后的 Prompt 设计规范（可直接落地真实 LLM）
└── AI领教营/ # 项目方法论笔记（AI 价值/边界/验证框架）
设计规范
- 品牌主色：
#FF7A1A（飞猪橙黄），渐变#FFA200 → #FF6600 - 语义色：AI 橙黄 / 用户蓝紫（
#6366f1 → #8b5cf6），成功绿 / 警示橙不受主题影响
落地指引
Demo 中的生成逻辑为前端模拟数据（genData）。接入真实 LLM 时：
- 将助手面板抽成 Vue/React 独立组件
- 按设计文档定义 API 契约（表单上下文 + 生成类型 → 流式返回）
- Agent 编排对应后端 Agent Loop：意图分类 → 参数抽取 → function calling → 结果回填 → 偏好沉淀
- 偏好沉淀对应商家画像服务，喂给 LLM 的个性化 prompt
详见 Prompt提示词设计文档.md。