第一阶段：AI 落地页生成向导 (共4步)
在工作台控制台右上角点击“＋ 创建新落地页”(Create New Landing Page) 开启4步向导：
为您的项目配置主要指标和参数：
- 项目名称 (Project Name) 输入一个标题，方便在后台目录中识别该页面 (必填)。
- 页面目标/类型 (Page Goal / Type) 选择您的落地页转化漏斗模型：
- 硬核销售漏斗 (Hard-Sell Funnel) 专为直接促单而设计，包含强力的行动号召 (CTA)、产品功能和价格详情。
- 文案销售信 (Copywriter's Letter) 文字丰富的长篇销售信风格，侧重于说故事和建立高度信任。
- 诱饵线索收集 (Lead Magnet Capture) 针对收集潜在客户 (Leads) 优化，通过提供免费资源 (如电子书、折扣券) 来换取客户联络方式。
- 研讨会/活动预热 (Webinar / Event Hype) 专注于活动报名 (RSVP)、活动日程安排、演讲嘉宾名单及日历预约。
- App/SaaS 聚光灯 (App/SaaS Spotlight) 时尚现代的主题，突显软件功能、应用截图和配套价格表。
- 目标语言 (Target Language) 选择向访客展示的语言。
- AI 模型引擎 (AI Model Engine) 点击选择 AI 模型卡。每张卡片会显示生成页面所需的积分以及年度网页托管积分成本。
- 转化风格矩阵 (Conversion Style Matrix) 在 标准矩阵 - A (Standard Matrix - A) (平衡、价值驱动的逻辑文案结构) 或 激进矩阵 - B (Aggressive Matrix - B) (⚡ 充满紧迫感的情感触发策略，旨在最大化即时转化率) 之间做出选择。
操作：点击“下一步”(Next) 继续。
为 AI 排版生成器制定文案蓝图和视觉方向：
- 从 Asset HUB 导入 (可选) 点击“从库中选择”(Select From Library) 链接产品。Sgen AI 会自动填充产品详情并匹配专属的“目标受众”标签。
- 手动输入 (Manual Entry) 手动填写产品名称和目标受众字段。
- 品牌形象源 (Brand Identity Source) 链接来自您品牌库 (BrandKit) 的预设品牌配置，或上传自定义 Logo 和情绪板 (Mood Boards)。
- 生成高转化文案 (Generate High-Converting Copy) 点击主按钮，让 AI 在可编辑文本区内起草详细的产品文案蓝图。
- 建议视觉与调色板 (Suggested Visuals & Color Palette) Sgen AI 会提取主色调 (Primary) 和副色调 (Secondary) 的十六进制代码，并勾勒出符合您行业定位的视觉亮点。点击“应用设计”(Apply Design)，系统将自动将其应用到第四步。
操作：点击“下一步”(Next) 继续。
选择页面的行动号召 (CTA) 触发机制：
- 点击链接操作 (Button Redirect) 嵌入 CTA 重定向链接，将流量引导至外部结账页面或 WhatsApp 渠道。
- 线索表单操作 (Form Embed) 嵌入可自定义的注册表单，直接收集客户姓名、电邮及联系标签。
操作：点击“下一步”(Next) 继续。
指定最终的视觉排版和自定义样式代码：
- 排版主题 (Layout Theme) 选择设计风格，如 Bento Grid (模块化便当盒卡片排版)、Glassmorphism & Frost (暗色渐变上的半透明磨砂玻璃网格)、Neo-Brutalism (带粗边框的高对比度区块)、Quiet Luxury (高级衬线字体及低调点缀) 或 Cyberpunk (霓虹发光暗黑科技预设)。
- 颜色与样式规则 (Color and Style Rules) 验证主色调和副色调的十六进制代码 (若在第二步点击了“应用设计”，此项会自动填充)。
操作：点击“生成落地页”(Generate Landing Page) 启动 AI 代码构建流程。
第二阶段：可视化 HTML 编辑器视图
当 AI 完成页面生成后，您将被重定向至互动式 HTML 编辑器工作台：
互动设计模式指南
将编辑器切换至 设计 (Design) 模式后，您即可直接在落地页上点击并编辑内容。当您选中任何页面区块时，将会出现蓝色边框提示，并显示附带的上下文工具栏。
1. 悬浮工具箱功能
点击任何元素即可显示我们的悬浮工具栏选项 (从左至右)：
- 图层 (Layers) 选择父级容器区块 (如：标题 → Div 容器 → Section 父级网格)，从而轻松调整更宽的父容器。
- 文本编辑 (T) 激活直接打字模式，即时修改、删除或重写文案。
- 文本颜色 (A) 开启调色板或支持输入自定义 Hex 颜色代码，以更改所选文本的颜色。
- 链接管理 (🔗) 开启目标 URL 设置，绑定重定向路径或删除超链接 <a> 结构。
- 样式设置 (🖌️) 开启样式面板，配置自定义颜色、封面图片和遮罩效果。
- 上移 (↑) / 下移 (↓) 在父容器内重新排序组件或子标签。
- 复制 (＋) 复制并紧挨着所选元素插入一个相同的容器排版。
- 删除 (🗑️) 瞬间从落地页中移除所选区块或元素。
- AI 智能编辑 (✦) 触发结合上下文的 Gemini 提示词，对选定的文案进行改写、缩短或润色。
2. 侧边栏导航树
点击右上角的网格图标，可切换 HTML 结构层级面板：
- DOM 树状结构 折叠或展开子排版节点 (标题、区块、文本、图片、表单、按钮)，以检查清晰的排版骨架。
- 悬停高亮 将鼠标悬停在导航节点上，对应的页面排版外围会即时出现紫色虚线边框。
- 快速聚焦定位 点击导航树元素，可自动滚动视口并将焦点定位于所选区块。
3. 图片替换面板
选中任何图片区块即可打开上传和生成设置：
- 本地上传 上传本地图片。Sgen AI 会压缩文件并将其托管在云端 Firebase 存储桶上。
- AI 生成 描述您的插图概念 (如：“桌面上高品质的笔电模型，科技蓝主题”)。Sgen AI 会调用 Gemini 模型绘制免版税高清图片资产。
- 尺寸限制 设置排版尺寸 (像素，如 350px) 或百分比 (50%、100%、Auto)。
4. 背景样式与文本清晰度遮罩
点击 Section 父级网格上的画笔 🖌️ 工具，即可打开背景设置：
- 背景颜色 选择 Tailwind 类名或输入自定义 Hex 代码。
- 封面图片 上传纹理背景或通过 AI 提示词生成抽象图案，以 Cover 模式填充区块。
- 透明度与暗色遮罩 (清晰度保护) 启用暗色遮罩并拖动透明度滑块 (10% 到 90%) 以调暗背景。这能确保对比度要求，使覆盖在上的白色文案保持高度易读。
5. AI 修改 (LITE) 局部润色工具
悬浮工具箱最右侧的闪耀 ✦ 图标按钮可触发我们的内嵌文本优化器：
- 激活提示词 在画布上选择任何文本框，然后点击闪耀 ✦ 图标，切换出 AI 快捷编辑框。
- 指令输入 输入您的具体改写或翻译指令 (如：“将此标题重写得更专业”、“把这行翻译成中文”)。
- 应用 LITE 模型 点击“应用”(Apply)，让我们轻量级的 LITE 模型进行即时局部重写，而无需重新渲染整个页面排版。
第三阶段：发布、托管与数据分析
追踪指标并将上线页面发布给各客户群体：
