落地页搭建 Agent 化方案

讨论日期：2026-08-25
状态：方案讨论完成，待输出 PRD
关联：后台Agent适配度评分表

一、背景

当前 LandingPageTool 是一个拖拽式页面搭建器，包含 30+ 种组件，运营需要手动拖拽组件、配置属性面板，学习曲线陡峭。搭一个促销页需要 30-60 分钟。

目标：引入 Agent，让运营用自然语言描述需求 → Agent 自动匹配模板 → 组装页面。

二、方案选型

做法 1：Agent 调 Tool 组装组件（✅ 推荐）

运营描述 → Agent 选模板 → 调 API 填充内容 → LandingPageTool 渲染

优势： 走现有组件渲染引擎，响应式/埋点/交互逻辑全部保留。

劣势： 图片素材仍需人工提供（可通过自动匹配 + 标记缺失缓解）。

做法 2：Agent 直接渲染 HTML（❌ 不推荐）

运营给 HTML → Agent 直接渲染 → 浏览器展示

劣势： 绕过组件体系，响应式适配/组件交互/埋点全部丢失，兼容性风险大。

结论：做法 1 为主，做法 2 降级为受限的 HTML 嵌入组件（lpCustomHtml），仅用于快速预览。

三、核心设计：页面模板

3.1 现状

组件级模板：已存在，后端 API 存储（componentTemplateStore），支持 CRUD + 置顶
页面级模板：activityPageTemplate API 已存在，但缺少描述字段，Agent 无法高效匹配

3.2 新增：模板描述字段（`description`）

Agent 不需要知道页面 JSON 结构——那个可以从 pageDesc 直接解析。描述字段要解决的是 JSON 回答不了的问题：

JSON 能告诉 Agent	JSON 不能告诉 Agent
用了哪些组件	适合什么场景？（促销/新品/日常）
组件排列顺序	给谁用？（新用户/老客户/所有人）
组件配置参数	什么风格？（活力/高端/简约）

设计方案：一个 description 文本字段（max 200 字），配合引导式 placeholder。

┌─────────────────────────────────────────────┐
│  模板描述 *                                   │
│  ┌──────────────────────────────────────┐   │
│  │                                      │   │
│  │                                      │   │
│  └──────────────────────────────────────┘   │
│  简要描述适用场景、页面风格、核心组件，       │
│  如：「双十一大促落地页，含轮播banner、       │
│  商品卡片、优惠券、倒计时，红色喜庆风格」     │
│                                  最多200字  │
└─────────────────────────────────────────────┘

为什么不需要标签？

标签是封闭集合，场景是开放集合（"世界杯竞猜页"无法归类）
Agent 做语义匹配时，自由文本比标签更有效
一个字段降低运营填写成本

3.3 产品改动点

改动 1：编辑器增加"保存为模板"入口

在 LandingPageTool 编辑器 Header 区增加按钮：

[保存] [保存为模板] [发布] [预览]

点击 → 弹出表单（模板名称 + 描述）。

改动 2：列表页增加"保存为模板"操作

在落地页列表操作项中增加：

[预览] [编辑] [复制] [保存为模板] [发布] [启用/禁用]

已有页面可一键存为模板，无需重新编辑。

改动 3：新增页面模板管理页面

独立于现有 PageConfig.vue（官网首页/商城首页模板），新增落地页模板管理：

┌──────────────────────────────────────────────┐
│  页面模板管理                                  │
│  ┌──────────────────────────────────────┐   │
│  │ 模板名称    │ 描述              │ 操作 │   │
│  │ 双十一大促V2 │ 含轮播banner、...  │ 编辑 │   │
│  │ 新品发布页   │ 轮播+商品列表+...  │ 编辑 │   │
│  │ 表单收集页   │ 表单组件，适合...  │ 编辑 │   │
│  └──────────────────────────────────────┘   │
└──────────────────────────────────────────────┘

四、Agent 交互流程

👤 运营："帮我搭一个双十一促销页，红色喜庆风格，要有轮播图、
        商品卡片、优惠券和倒计时"

🤖 Agent：
  1. 调用 search_page_templates("双十一促销 轮播 商品 优惠券 倒计时")
     → 匹配到模板A："双十一大促落地页，含轮播banner、商品卡片、
        优惠券、倒计时，红色喜庆风格"（匹配度 95%）
  
  2. 基于模板A创建页面，自动填充内容：
     - 轮播图 → 标记"请提供 banner 图（1920×600）"
     - 商品卡片 → 自动拉取促销商品
     - 优惠券 → 自动匹配当前可领券
     - 倒计时 → 设为活动结束时间
  
  3. 返回："页面已搭建，预览链接：xxx。以下素材需要你提供：
     ① 顶部 banner（1920×600）② 底部氛围图"

五、Agent Tool 设计（初稿）

Tool	输入	输出
`search_page_templates`	query（自然语言描述）、pageType	top 3 模板（名称+描述+匹配度）
`get_page_template`	templateId	模板完整 JSON（含组件列表）
`create_page_from_template`	templateId、content（替换内容）	新页面 ID + 预览链接
`list_component_templates`	componentType	该组件类型的预设模板列表

六、待讨论

素材自动匹配：商品图片、优惠券、活动时间的自动填充逻辑
缺失素材标记：Agent 搭完页面后如何标注"需要人工提供的素材"
多语言页面：模板描述是否需要多语言？