frontend-landings

前端落地页

生成精美的零构建单文件 HTML 落地页，提供精选风格预设、流畅动画、响应式设计和深色／浅色模式，所有内容都包含在一个独立文件中。

开始之前

阅读风格预设参考文件，了解可用的视觉风格：

references/STYLE_PRESETS.md

两种工作模式

模式 1：从零开始

用户提供产品详情 → 生成完整的落地页。

收集以下信息（如用户未提供，请询问）：

1. 产品／品牌名称（必填）
2. 标语／主视觉标题（必填）
3. 3–6 项核心功能或优势（必填）
4. 目标受众（有帮助）
5. 主要 CTA（例如“开始免费试用”“加入候补名单”）——默认值：“立即开始”
6. 颜色偏好（可选——由预设处理）
7. 风格预设（如未指定，展示预设菜单）

模式 2：改进／转换

用户提供现有 HTML、描述、截图或 URL → 通过改进设计、动画和响应式布局进行增强。

工作流：

1. 分析现有设计（结构、颜色、排版、布局）
2. 找出可改进之处（动画、响应式布局、无障碍性、视觉层次）
3. 询问要应用哪种风格预设（或保留现有视觉风格）
4. 重新生成包含所有增强内容的单文件 HTML

---

风格预设系统

任何落地页任务开始时都必须提供预设菜单，除非用户已经选择预设或明确描述了特定视觉风格。

按以下格式展示预设：

Pick a visual style for your landing page (type number or name):

 1. ☁️  Clean SaaS Minimal     — Crisp whites, subtle shadows, system-native feel
 2. 🔮  Glassmorphic Modern     — Frosted glass panels, gradients, translucency
 3. 🏗️  Bold Brutalist          — Raw concrete textures, monospace type, stark contrast
 4. 🌆  Cyberpunk Neon          — Dark backgrounds, electric glow, scanline effects
 5. ✒️  Elegant Serif Premium   — Editorial luxury, serif headlines, gold accents
 6. 🎨  Playful Gradients       — Bouncy animations, mesh gradients, rounded everything
 7. 🌙  Dark Mode First         — Deep blacks, neon accents, OLED-optimized
 8. 📻  Vintage Retro           — Warm sepia tones, retro type, nostalgic textures
 9. 🌿  Organic Nature          — Earth tones, organic shapes, botanical illustrations
10. 🏢  Corporate Professional  — Navy/slate palette, structured grid, trust-building

Or describe your own custom aesthetic!

用户选择后，阅读 references/STYLE_PRESETS.md，了解该预设的详细 CSS 变量、字体栈、动画样式和设计令牌。

---

输出要求

单文件 HTML 架构

每次输出都必须是一个完整、独立的 HTML 文件。结构如下：

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>{Product Name} — {Tagline}</title>
  <meta name="description" content="{Concise product description}">
  <meta property="og:title" content="{Product Name}">
  <meta property="og:description" content="{Description}">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  
  
  <script src="https://cdn.tailwindcss.com"></script>
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family={Preset+Fonts}&display=swap" rel="stylesheet">
  
  
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          // Preset-specific extensions
          fontFamily: { /* from preset */ },
          colors: { /* from preset */ },
        }
      }
    }
  </script>
  
  <style>
    /* CSS Custom Properties from preset */
    :root { /* light theme vars */ }
    .dark { /* dark theme vars */ }
    
    /* Scroll-triggered animation base classes */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    
    /* Preset-specific custom styles */
  </style>
</head>
<body>
  
  
  <script>
    // Dark mode toggle
    // Scroll reveal observer
    // Anime.js entrance animations
    // Interactive components (FAQ accordion, pricing toggle, etc.)
  </script>
</body>
</html>

CDN 技术栈（不允许使用其他 CDN）

• Tailwind CSS：https://cdn.tailwindcss.com（带内联配置）
• Anime.js：https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js
• Google Fonts：仅使用特定预设所需的字体
• 图标：仅使用内联 SVG（Heroicons 风格）。绝不使用图标字体 CDN。

每个输出都必须包含的功能

1. 响应式设计——移动端优先。以 375px、768px、1280px 宽度进行心智测试。
2. 深色／浅色模式——通过 prefers-color-scheme 自动检测，并在导航栏中提供手动切换按钮。
3. 滚动动画——基于 IntersectionObserver，为所有区块添加显示动画。
4. 平滑滚动——在 html 上使用 scroll-smooth，并通过 JS 实现导航锚点滚动。
5. 无障碍性——使用语义化 HTML5、为交互元素添加 ARIA 标签、设置 focus-visible 样式、提供跳转到内容的链接，并确保颜色对比度充足。
6. SEO 元标签——title、description、og:title、og:description、og:type、twitter:card。
7. 性能——图片延迟加载、CSS 高效、JS 精简。

---

区块生成

根据用户输入，灵活决定是否包含以下区块。并非所有区块都必须包含，应根据产品背景进行选择：

始终包含：

1. 导航——粘性／固定导航栏，包含 Logo、链接、深色模式切换按钮和主要 CTA 按钮
2. 主视觉——醒目的标题 + 副标题 + CTA 按钮（一个或多个）+ 视觉元素（渐变、抽象形状或图片占位符）
3. 功能——包含内联 SVG 图标的 3–6 个功能卡片／网格
4. 最终 CTA——通栏行动号召横幅，包含标题和按钮
5. 页脚——链接、版权信息、社交图标（内联 SVG）

适用时包含：

• 社会认同／Logo——“深受以下品牌信赖”Logo 栏（使用带有企业风格名称的占位框）
• 用户评价——2–3 张带有头像占位符的引言卡片
• 定价——3 个层级，带月付／年付切换（由 JS 驱动）
• 常见问题——带平滑展开／收起动画的折叠面板
• 工作原理——包含编号步骤的 3 步流程
• 统计数据／指标——动态计数器（例如“10k+ 用户”“99.9% 正常运行时间”）

---

动画指南

统一使用以下动画模式：

滚动显示（IntersectionObserver）

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

错落入场动画（Anime.js）

anime({
  targets: '.feature-card',
  opacity: [0, 1],
  translateY: [40, 0],
  delay: anime.stagger(100, { start: 300 }),
  easing: 'easeOutCubic',
  duration: 800
});

主视觉文本动画

anime({
  targets: '.hero-title .word',
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(80),
  easing: 'easeOutExpo',
  duration: 1200
});

悬停微交互

悬停效果使用 CSS 过渡动画；仅在复杂序列中使用 Anime.js：

.card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }

计数器动画

function animateCounter(el) {
  const target = parseInt(el.dataset.target);
  anime({
    targets: el,
    innerHTML: [0, target],
    round: 1,
    easing: 'easeInOutExpo',
    duration: 2000
  });
}

---

深色模式实现

// Check system preference and saved preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && prefersDark)) {
  document.documentElement.classList.add('dark');
}

// Toggle function (bind to button)
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

导航栏中的切换按钮：

<button onclick="toggleDark()" aria-label="Toggle dark mode" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
  
  <svg class="hidden dark:block w-5 h-5" ...>...</svg>
  
  <svg class="block dark:hidden w-5 h-5" ...>...</svg>
</button>

---

字体排版与避免千篇一律的规则

绝不使用这些字体：Inter、Roboto、Arial、Helvetica、Open Sans、system-ui 默认字体。

每个预设都指定了独特的字体搭配。始终从 Google Fonts CDN 加载字体。

绝不使用未经自定义的 Tailwind 默认颜色。每个预设都通过 CSS 变量和 tailwind.config extend 定义自定义配色方案。

绝不生成看起来和其他 AI 生成的落地页如出一辙的页面。 每个预设都有具体的差异化特征——请遵循这些要求。

---

行内 SVG 图标

使用 Heroicons 风格的行内 SVG 图标。以下是示例：

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="..." />
</svg>

在 HTML 中直接包含 6–8 个常用图标。根据产品功能选择与上下文相关的图标。

---

FAQ 手风琴实现

document.querySelectorAll('.faq-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const content = btn.nextElementSibling;
    const icon = btn.querySelector('.faq-icon');
    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
    
    // Close all others
    document.querySelectorAll('.faq-content').forEach(c => { c.style.maxHeight = '0px'; });
    document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });
    
    if (!isOpen) {
      content.style.maxHeight = content.scrollHeight + 'px';
      icon.style.transform = 'rotate(45deg)';
    }
  });
});

---

定价切换实现

const toggle = document.getElementById('pricing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const annualPrices = document.querySelectorAll('.price-annual');

toggle.addEventListener('change', () => {
  const isAnnual = toggle.checked;
  monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
  annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
});

---

最终输出说明

生成 HTML 后，始终附上以下说明：

✅ Your landing page is ready!

To use it:
1. Copy the entire code above into a file called `index.html`
2. Open it in any browser — it works standalone, no build step needed

To deploy for free:
• Vercel: vercel.com → New Project → drag & drop your index.html
• Netlify: app.netlify.com → drag & drop your index.html
• GitHub Pages: Push to a repo → Settings → Pages → Deploy from main

To customize further:
• Colors: Edit the CSS variables in :root { } and .dark { }
• Content: All text is directly in the HTML — find and replace
• Fonts: Swap the Google Fonts link and font-family values
• Animations: Adjust timing in the Anime.js calls and CSS transitions

---

质量检查清单

交付前，请在心中核对：

• 单个文件，除 CDN 链接外无外部依赖
• 在 375px、768px、1280px 屏幕宽度下均能响应式显示
• 深色模式正常运行（切换按钮 + 系统偏好设置）
• 所有动画都会在滚动时触发
• 导航链接可平滑滚动至各个版块
• 所有交互元素都有悬停/焦点状态
• 按钮、切换控件和交互元素都带有 ARIA 标签
• 不呈现 Tailwind 默认风格——预设的美学风格独具特色
• 包含用于 SEO 和社交分享的 Meta 标签
• 页脚通过 JS 使用当前年份：new Date().getFullYear()
• CTA 按钮醒目，并按照预设样式设计
• 图标使用行内 SVG，而非外部字体
• 页面加载迅速——没有阻塞资源