landing-page

落地页生成器

生成完整、可部署的落地页，输出为单个 HTML 文件。无需构建步骤，也无需依赖项——在浏览器中打开，或部署到任意位置。

工作流

1. 收集需求

询问用户以下信息：

字段	必填	示例
企业/产品名称	是	"Acme Plumbing"
价值主张	是	"在 Newcastle 提供全天候紧急管道维修服务"
目标受众	是	"Hunter Valley 的房主"
主要 CTA	是	"立即致电" / "获取报价" / "注册"
次要 CTA	否	"了解更多" / "查看价格"
品牌颜色	否	主色：#1E40AF，强调色：#F59E0B
Logo URL 或文本	否	Logo 图片的 URL，或直接使用企业名称
电话/邮箱	否	用于联系板块
所需板块	否	默认：主视觉、特色、客户评价、常见问题、页脚

如果用户未提供品牌颜色，建议使用 color-palette 技能生成配色，或使用合理的默认配色（石板灰/蓝色）。

2. 生成 HTML

生成一个单独的 HTML 文件，其中包含：

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind config with custom colours</script>
</head>
<body>
  
  
  
  
  
  
  
  
</body>
</html>

3. 板块样式

导航栏

• 顶部固定导航栏，包含 Logo/名称和指向各板块的锚点链接
• 移动端汉堡菜单（仅 CSS 或使用少量 JS）
• 导航栏中的 CTA 按钮（右对齐）

主视觉

• 全宽，位于首屏
• 标题（h1）——内容应为价值主张，而非企业名称
• 副标题——补充说明，1-2 句话
• 主要 CTA 按钮（尺寸较大，颜色对比明显）
• 可选：主视觉图片占位符或渐变背景
• 样式：桌面端文本靠左（与图片按 60/40 分栏），移动端居中

特色/服务

• 以响应式网格展示 3-6 个项目（移动端 1 列，桌面端 2-3 列）
• 每项包含：图标占位符 + 标题 + 简短说明
• 使用语义化标题（板块使用 h2，项目使用 h3）

社会证明/客户评价

• 2-3 张客户评价卡片，包含引言、姓名、职位/公司
• 适用时显示星级评分
• 替代方案：客户/合作伙伴 Logo 栏

定价（可选）

• 2-3 张套餐卡片（基础版/专业版/企业版模式）
• 突出显示“推荐”套餐
• 每个套餐列出功能对比
• 每个套餐都包含 CTA 按钮

常见问题

• 使用手风琴样式（details/summary——无需 JS）
• 4-6 个常见问题
• 为 SEO 添加 Schema.org FAQPage 标记

页脚

• 企业名称、联系信息、社交链接
• 法律链接（隐私政策、条款）占位符
• 版权年份（使用 JS 自动更新）

4. 技术要求

响应式：移动端优先，设置三个断点

Default: mobile (< 640px)
sm: 640px+ (tablet)
lg: 1024px+ (desktop)

深色模式：三态切换（浅色/深色/系统）

• 使用 CSS 自定义属性定义颜色
• 在 <html> 上添加 .dark 类——不使用 CSS 媒体查询
• 使用简短的 JS 代码实现切换并通过 localStorage 持久保存设置

无障碍：

• 标题层级正确（h1 → h2 → h3，不跳级）
• 所有图片都添加替代文本占位符
• 为交互元素设置聚焦可见样式
• 确保颜色对比度足够（最低 4.5:1）
• 添加跳转到内容的链接

SEO：

• 使用语义化 HTML5 元素（header、main、section、footer）
• OG 元标签（标题、描述、图片、URL）
• Twitter 卡片元标签
• 规范 URL
• 如果是本地企业，则添加用于本地企业的 JSON-LD（参考 seo-local-business 技能）

性能：

• 核心内容渲染无需 JS
• 图片启用延迟加载（loading="lazy"）
• 使用系统字体栈（不请求外部字体）
• 单个文件——除 Tailwind CDN 外，不使用外部 CSS/JS

5. 颜色应用

如果用户提供品牌颜色，则以内联方式配置 Tailwind：

<script>
tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' },
        accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' },
      }
    }
  }
}
</script>

如果用户未提供颜色，则使用 Tailwind 内置配色（使用 slate 作为中性色，blue 作为主色）。

6. 输出

将文件写入用户指定的位置；如果未指定，则默认写入 ./index.html。

生成后：

1. 告诉用户如何预览：使用 open index.html（macOS），或使用 python3 -m http.server 启动本地服务
2. 建议部署选项：拖放到 Cloudflare Pages、Netlify Drop，或使用 wrangler deploy 部署到 Workers
3. 列出需要替换的占位内容（图片、客户评价、电话号码）

质量规则

1. 不使用占位用的 lorem ipsum — 根据业务类型生成真实可信的占位文本
2. 避免布局错乱 — 在脑海中测试响应式网格：1 列 → 2 列 → 3 列
3. 不使用内联样式 — 仅使用 Tailwind 类
4. 确保交互有效 — 平滑滚动到各个版块、可用的手风琴组件、可用的深色模式切换
5. 默认注重无障碍性 — 不要为了美观牺牲无障碍性
6. 遵循澳大利亚惯例 — 如果业务位于澳大利亚，使用 +61 电话格式、澳大利亚拼写和 ABN 占位符

变体

请求	方案
"Coming soon page"	仅包含主视觉区 + 邮件注册表单 + 倒计时
"Product launch"	主视觉区 + 功能 + 定价 + 重点突出 CTA
"Portfolio"	主视觉区 + 项目网格 + 关于 + 联系方式
"Event page"	主视觉区 + 日程安排 + 演讲者 + 场地 + 注册 CTA
"App download"	主视觉区 + 功能 + 截图 + 应用商店徽章

根据页面用途调整版块选择。并非每个页面都需要定价或常见问题解答。