生成示例展示
以下示例涵盖多个常见业务场景，提供可直接复制的提示词、AI 生成结构、文案样例与代码片段，帮助你快速获得高质量页面。
🚀 示例 1：SaaS 产品落地页
提示词（可直接复制）
创建一个面向电商企业的数据分析 SaaS 产品的落地页。
核心功能：实时数据看板、自定义报表、预测分析、多渠道整合。
目标用户：电商运营团队、数据分析师。
页面包含：Hero、痛点问题、产品解决方案、功能列表、客户评价、价格方案、CTA。
风格：专业科技感，蓝紫渐变，清晰的图表视觉元素。
AI 生成结构
- Hero：核心价值主张 + 注册试用按钮
- Problem：用户痛点描述（3条）
- Solution：产品如何解决（3条）
- Features：功能列表（6项卡片）
- Pricing：定价方案（基础/专业/企业）
- Testimonials：客户评价（3条）
- CTA：行动号召（立即试用）
文案样例（片段）
标题：让数据驱动你的电商增长
副标题：实时洞察销售趋势，精准分析用户行为，助力运营决策
按钮：免费试用 30 天
痛点1：数据分散，难以统一分析
痛点2：报表繁琐，洞察滞后
痛点3：难以预测销售走势
代码片段（Vue 组件片段）
<template>
<section class="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
<div class="container mx-auto px-6 text-center">
<h1 class="text-5xl font-bold mb-4">让数据驱动你的电商增长</h1>
<p class="text-xl opacity-90 mb-8">实时洞察销售趋势，精准分析用户行为，助力运营决策</p>
<button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:shadow-lg">免费试用 30 天</button>
</div>
</section>
</template>
🛒 示例 2：电商品牌商品展示页
提示词
为一个有机护肤品牌创建商品展示页。
产品特点：天然有机、敏感肌适用、环保包装。
页面包含：品牌故事、产品系列、成分介绍、用户评价、购买引导。
风格：自然清新，绿色与米色为主，强调整体环保理念。
AI 生成结构
- Hero：品牌理念 + 主打产品视觉
- Product Series：系列卡片（3-4 个）
- Ingredients：核心成分介绍（图文）
- Reviews：用户评价（4-6 条）
- CTA：购买引导（按钮 + 促销信息）
文案样例（片段）
标题：源自自然，回归纯净
副标题：敏感肌也安心的有机护肤体验
按钮：立即购买
代码片段（HTML 片段）
<section class="hero bg-green-100 py-16">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl font-bold mb-3">源自自然，回归纯净</h1>
<p class="text-lg text-gray-700 mb-6">敏感肌也安心的有机护肤体验</p>
<a href="#buy" class="inline-block bg-green-600 text-white px-6 py-3 rounded">立即购买</a>
</div>
</section>
📚 示例 3：教育机构课程介绍页
提示词
设计一个在线编程培训机构的课程介绍页。
课程：Web 前端、Python、Java。
页面包含：课程体系、师资介绍、学员作品、报名优惠、常见问题。
风格：现代清新，强调学习氛围，主色橙色系。
AI 生成结构
- Hero：课程主张与报名按钮
- Curriculum：课程体系（表格/卡片）
- Instructors：师资介绍（头像 + 简介）
- Student Works：学员作品（网格）
- FAQ：常见问题（折叠面板）
- CTA：报名优惠与活动倒计时
文案样例（片段）
标题：从零到上手，一站式编程学习
副标题：项目驱动教学，作品集直达就业
按钮：立即报名
代码片段（FAQ 折叠组件）
<details class="mb-3">
<summary class="font-semibold">是否需要基础？</summary>
<p class="mt-2 text-gray-600">无需基础，课程从零起步，项目驱动逐步掌握核心技能。</p>
</details>
<details class="mb-3">
<summary class="font-semibold">是否提供就业指导？</summary>
<p class="mt-2 text-gray-600">提供作品集优化、面试辅导与内推支持，助力顺利入职。</p>
</details>
✍️ 示例 4：内容营销博客文章页
提示词
生成一个面向中小企业的数字营销博客文章页。
页面包含：标题、作者信息、发布时间、目录、正文章节、小结、相关推荐、分享按钮。
风格：清晰易读，黑白灰为主，强调排版与可读性。
AI 生成结构
- Header：文章标题、作者、时间
- TOC：目录（自动生成锚点）
- Content：分节正文（H2/H3）
- Related：相关推荐卡片（3-4）
- Share：社交分享按钮
文案样例（片段）
标题：用数据驱动的内容增长策略
副标题：从关键词到转化路径的系统化实践
代码片段（文章头部）
<header class="prose mx-auto py-12">
<h1>用数据驱动的内容增长策略</h1>
<p class="text-gray-600">作者：HTMLPAGE · 发布于 2025-11-27</p>
</header>
✅ 提示词优化建议
- 明确页面类型与目标（如“提高注册转化”）。
- 指定结构模块（Hero/Features/CTA 等）。
- 说明风格与配色偏好（品牌色、视觉氛围）。
- 提供目标用户与行业信息（更精准）。
- 补充关键文案要点（标题语气、CTA 文案）。
🔧 常见页面元素样例
- 导航：固定顶部 + 响应式菜单。
- Hero：全宽背景 + 主按钮 + 次按钮。
- 网格：2/3/4 栏卡片布局。
- 页脚：多列信息 + 社交链接 +版权。
🔗 相关资源
以上示例可直接用作生成的起点，并支持在编辑器中继续拖拽与微调。