amazon-landing-page

Amazon 产品落地页构建器

即将为 $ARGUMENTS 处的 Amazon 产品构建一个高端落地页。

要求

• 必须使用 Chrome MCP。 立即测试。如果不可用，请告知用户启用它。
• 落地页将是一个包含 Tailwind CDN 的单一 HTML 文件（无需构建步骤）。
• 所有产品数据都必须从真实的 Amazon 页面提取。绝不能编造或伪造数据。

流程

阶段 1：设置

1. 在当前目录中创建项目文件夹：amazon-landing-page-[product-name]。
2. 在其中创建一个 images/ 子文件夹。

阶段 2：通过 Chrome MCP 提取产品数据

1. 在 Chrome MCP 中打开 Amazon 产品 URL。
2. 等待页面加载（3 秒）。
3. 使用 JavaScript 执行提取以下内容：

// Product basics
{
  title: document.getElementById('productTitle')?.textContent?.trim(),
  price: document.querySelector('.a-price .a-offscreen')?.textContent?.trim(),
  rating: document.querySelector('#acrPopover')?.title || document.querySelector('.a-icon-alt')?.textContent,
  reviewCount: document.querySelector('#acrCustomerReviewText')?.textContent?.trim(),
  brand: document.querySelector('#bylineInfo')?.textContent?.trim(),
  badges: document.querySelector('#acBadge_feature_div')?.textContent?.trim() // Amazon's Choice, Best Seller, etc.
}

// Feature bullets
Array.from(document.querySelectorAll('#feature-bullets .a-list-item'))
  .map(el => el.textContent?.trim())
  .filter(t => t && t.length > 10)

// High-res image URLs
Array.from(document.querySelectorAll('#altImages .a-button-thumbnail img'))
  .map(img => img.src.replace(/\._.*_\./, '._SL1500_.'))
  .filter(s => s.includes('images/I/'))

4. 滚动到评论区并提取真实评论：

// Only 4-5 star verified reviews
Array.from(document.querySelectorAll('[data-hook="review"]')).map(r => ({
  stars: parseFloat(r.querySelector('[data-hook="review-star-rating"] .a-icon-alt')?.textContent || '0'),
  body: r.querySelector('[data-hook="review-body"] span')?.textContent?.trim(),
  author: r.querySelector('.a-profile-name')?.textContent?.trim(),
  date: r.querySelector('[data-hook="review-date"]')?.textContent?.trim(),
  verified: !!r.querySelector('[data-hook="avp-badge"]')
})).filter(r => r.stars >= 4 && r.body && r.body.length > 20 && r.verified)

阶段 3：下载图片

使用 curl 下载所有产品图片：

curl -sL "[image-url]" -o images/product-1.jpg

阶段 4：构建落地页

创建 index.html，并按以下顺序包含这些部分：

1. 固定导航栏

   • 左侧显示品牌名称
   • 中间显示分区链接（Features、Reviews、FAQ）（在移动设备上隐藏）
   • 右侧显示“Buy on Amazon - $[price]” CTA 按钮
   • 毛玻璃背景（backdrop-blur）

2. 主视觉区

   • 左侧：产品图片库，带有可点击切换主图的缩略图
   • 右侧：徽章（如有，则显示 Amazon's Choice / Best Seller）、产品标题（改写为吸引人的标题）、简短描述、带评论数量链接的星级评分、价格和“FREE Prime Delivery”、信任徽章（30-Day Returns、Ships via Amazon、1-Year Warranty）、带脉冲动画的 CTA 按钮
   • 页面加载时，两侧分别从左侧和右侧滑入

3. 社会认同栏

   • 客户数量、平均评分和关键规格的动画计数器
   • 滚动到视口内时触发计数动画

4. Features 区块（id="features"）

   • 3 列网格中的 6 张功能卡片
   • 每张卡片包含：图标、标题、描述（从 Amazon 商品要点提取，并简洁改写）
   • 滚动显示动画依次错开

5. 包装盒内物品区块

   • 左侧：产品图片
   • 右侧：用绿色勾号标记包装内所有物品的清单
   • 滚动时，清单项目依次显示

6. 图片库

   • 2 至 3 列网格，带悬停放大效果
   • 显示所有产品图片

7. 电子邮件收集区块

   • 显示“加入我们的 VIP 名单”文案
   • 电子邮件输入框 +“加入 VIP 名单”按钮
   • 提交时：保存到 Google Sheet（如果已配置）+ 显示带 Amazon 链接的成功消息
   • 在代码中加入 Google Form 集成设置注释：

     const GOOGLE_FORM_URL = ''; // Seller fills this in
     const EMAIL_FIELD_ID = ''; // Seller fills this in
     

8. 真实评论区（id="reviews"）

   • 只能使用从 Amazon 提取的评论。绝不能编造评论。
   • 仅显示 4 至 5 星的已验证评论
   • 显示作者姓名、星级评分、日期、“Verified”徽章
   • 提供“在 Amazon 上阅读所有评论”链接

9. FAQ 区块（id="faq"）

   • 5 个相关问题，支持手风琴式展开和收起
   • 根据产品类型和功能生成 FAQ
   • 常见主题：电池续航、兼容性、保修、尺寸/重量、设置

10. 最终 CTA 区块

    • 渐变卡片，包含标题、副文案和醒目的 CTA 按钮

11. 页脚

    • 免责声明：“独立产品页面。[Brand] 是注册商标。购买由 Amazon.com 履行。”

12. 移动端悬浮栏（仅在移动设备上滚动后显示）

    • 价格 + 固定在底部的“Buy on Amazon”按钮

设计系统

重要：不要使用通用的深色主题。请调整设计，使其符合品牌和产品的风格。

在选择颜色和风格之前，请查看：

• 品牌官网和产品包装的配色
• 产品类别（科技产品 = 简洁利落，婴儿用品 = 柔和温暖，户外用品 = 自然粗犷，美容产品 = 优雅清爽）
• 产品图片的主色调

构建一套让人感觉专属于这个品牌和产品的配色方案。落地页应该看起来像是品牌自己制作的，而不是通用模板。

Base design principles:
- Typography: Inter (Google Fonts) or a font that matches the brand feel
- Border radius: rounded-2xl (cards), rounded-full (buttons, badges)
- Animations: scroll reveal (fade up), stagger delays, counter animation, pulse CTA glow
- CTA button: use a color that contrasts well and stands out
- Stars: amber-400 (#fbbf24)

技术要求

• 单个 HTML 文件，无需构建步骤
• 通过 <script src="https://cdn.tailwindcss.com"> 加载 Tailwind CDN
• 使用自定义 Tailwind 配置设置品牌颜色
• 所有 CSS 动画都写在 <style> 标签中
• 所有 JavaScript 都放在底部的 <script> 标签中
• 响应式：移动优先，适配所有屏幕尺寸
• 所有 Amazon 链接都应使用 target="_blank"
• 图片库支持通过 JavaScript 切换缩略图

阶段 5：打开并验证

1. 在浏览器中自动打开 HTML 文件：open index.html
2. 告知用户页面已准备就绪，并列出已包含的内容
3. 提醒用户设置用于收集电子邮件的 Google Form：
   • “如需收集电子邮件，请创建一个免费的 Google Form，其中只包含一个电子邮件字段”
   • “获取表单的 action URL 和字段 entry ID”
   • “将它们填入 HTML 中的 GOOGLE_FORM_URL 和 EMAIL_FIELD_ID 变量”

重要规则

• 绝不要伪造或编造评论。只能使用从 Amazon 页面提取的评论。
• 如果没有 4–5 星的已验证评论，请完全跳过评论版块，并告知用户。
• 所有产品数据（标题、价格、功能、图片）都必须来自真实的 Amazon 页面。
• 主视觉区域的标题应是对产品标题的改写，要醒目吸引人（不要直接使用完整的 Amazon 标题）。
• 常见问题解答应实用准确，并以产品功能为依据。
• 落地页应显得高端、专业，而不是通用模板。