ship-page

Ship Page

创建交互丰富、动画效果十足的落地页，完全在浏览器中运行，且仅需一个 HTML 文件。

这项技能帮助非设计师通过视觉探索（“展示，而非描述”）发布专业的产品页面，然后生成具备真实交互功能的生产级落地页，而非静态样机。

核心原则

• 零依赖 — 单个 HTML 文件，内含 CSS/JS。无需 npm、构建工具或框架。一个 HTML 文件比任何 React 项目都更经久耐用。
• 展示，而非描述 — 人们无法描述自己想要什么，但看到后就知道。生成视觉预览，让他们挑选。
• 拒绝 AI 廉价感 — 不要白底紫色渐变，不要通用 SaaS 模板。每个页面都应为对应产品量身打造。
• 默认提供交互 — 落地页不是幻灯片。加入滚动动画、悬停状态、数据计数器、粒子效果和微交互，让访客停留更久。
• 随时可发布 — 输出可立即使用。将 HTML 文件放到任意位置即可，包括 GitHub Pages、Vercel、Netlify，或直接在浏览器中打开。

检测模式

• 模式 A：新建页面 — 从头开始创建。进入阶段 1。
• 模式 B：README 转换 — 将 GitHub README 或产品描述转化为落地页。提取内容后，进入阶段 1 步骤 2（跳过内容问题，直接选择风格）。
• 模式 C：页面增强 — 改进现有的 HTML 落地页。阅读并理解其结构，在保留内容的同时进行增强。遵循视口和版块密度规则。

---

阶段 1：需求探索

了解产品并收集内容。通过一次 AskUserQuestion 调用提出所有问题。

问题 1 — 产品类型（标题：“产品”）： 你正在构建什么？ 选项：SaaS / 开发者工具 / 移动应用 / 开源项目 / 个人品牌 / 其他

问题 2 — 内容（标题：“内容”）： 页面应包含什么内容？ 选项：我会粘贴内容 / 从我的 README 提取 / 帮我描述即可 / 我有一份文档

问题 3 — 关键版块（标题：“版块”，multiSelect：true）： 你需要哪些版块？ 选项：含 CTA 的 Hero 区域 / 功能网格 / 工作原理 / 定价 / 用户评价 / 常见问题 / 统计数据与指标 / 新闻通讯订阅 / GitHub Stars 徽章

问题 4 — 发布目标（标题：“发布”）： 页面将发布在哪里？ 选项：GitHub Pages / 独立网站 / Product Hunt 发布 / 仅用于探索

如果用户提供内容（README、描述或文档），请继续：

步骤 1.1：内容分析

解析所提供的内容并提取：

• 产品名称和一句话描述
• 主要功能（目标为 3-6 项）
• 目标受众相关信息
• 提及的任何指标或数字
• 行动号召（访客应该做什么？）

通过 AskUserQuestion 确认（标题：“内容确认”）： “这是我提取的内容——看起来正确吗？” 选项：看起来不错 / 我来调整

---

阶段 2：风格探索

这是“展示，而非描述”阶段。大多数人无法用语言清楚表达自己的设计偏好。

步骤 2.1：氛围选择

通过 AskUserQuestion 提问（标题：“氛围”，multiSelect：true，max 2）： 你希望访客感受到什么？ 选项：未来感与科技感 / 简洁与极简 / 大胆与活力 / 暗色与高级 / 活泼与创意 / 企业风与可信赖

第 2.2 步：生成风格预览

根据风格选择，生成 3 个各具特色的单节 HTML 预览，展示：

• 字体选择（标题字体 + 正文字体搭配）
• 配色方案（背景、文本、强调色、CTA）
• 带有产品名称的首屏布局
• 一种微交互或动画
• 整体氛围（背景效果、间距）

每个预览都应是一个完整、可运行的 HTML 文件，只展示首屏，并采用三种截然不同的风格。将预览保存到 .ship-page/previews/。

阅读 references/STYLE_PRESETS.md，了解精选预设的定义。将预设作为基础，再针对具体产品进行定制。

通过 AskUserQuestion 确认（标题：“选择你的风格”）： “你更喜欢哪个方向？” 选项：风格 A / 风格 B / 风格 C / 混合元素（请描述）

第 2.3 步：直接选择预设（备选方案）

如果用户已经知道自己想要什么，或说“直接做成深色／极简／科技风”：

• 阅读 references/STYLE_PRESETS.md
• 匹配最接近的预设
• 跳过预览生成，进入第 3 阶段

---

第 3 阶段：生成落地页

使用第 1 阶段的内容和第 2 阶段的风格生成完整落地页。

结构规则

所有落地页都遵循以下架构：

<!DOCTYPE html>
<html lang="en">
<head>
  
  
</head>
<body>
  <nav></nav>
  
  <section class="hero"></section>
  <section class="features"></section>
  <section class="social-proof"></section>
  
  <section class="cta-final"></section>
  <footer></footer>

  <script>
    // Scroll animations, counters, interactions — all inline
  </script>
</body>
</html>

强制技术要求

1. 适配视口 — 每个区块都应显得饱满，但绝不溢出。首屏使用 min-height: 100vh，其他区块使用适当的高度。
2. 响应式 — 必须适配移动设备。所有字号都使用 clamp()，间距使用相对视口单位。
3. 滚动动画 — 使用 IntersectionObserver 实现滚动显示效果。元素应在用户滚动时逐渐出现。
4. 性能 — 优先使用 CSS 动画。对动画元素使用 will-change。对滚动处理函数进行防抖。
5. 无障碍 — 使用语义化 HTML，确保足够的对比度，并通过 prefers-reduced-motion 媒体查询适配所有动画。

区块内容密度限制

每个区块（避免内容过于拥挤）：

• 首屏：1 个主标题（最多 8 个词）、1 个副标题（最多 20 个词）、1-2 个 CTA，可选背景效果
• 功能：最多 6 张卡片。每张卡片包含：图标 + 标题（3-4 个词）+ 描述（最多 15 个词）
• 统计数据／指标：最多 4 个计数器
• 用户评价：最多 3 条引言
• 定价：最多 3 个档位
• 常见问题：最多 6 项（使用手风琴／折叠组件）

单个区块内容过多？拆分成两个区块，并在两者之间加入视觉分隔。

CSS 架构

:root {
  /* Typography — always use clamp() */
  --font-display: 'YOUR_CHOICE', sans-serif;
  --font-body: 'YOUR_CHOICE', sans-serif;
  --heading-size: clamp(2rem, 5vw, 4.5rem);
  --body-size: clamp(0.875rem, 1.5vw, 1.125rem);
  
  /* Colors — define full palette */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* Spacing */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* Animation */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll reveal base class */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

JavaScript 基础要点

始终包含以下模式：

// Scroll reveal with IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

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

// Animated counters (for stats sections)
function animateCounter(el, target, duration = 2000) { ... }

// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

阅读 references/SECTION_LIBRARY.md，了解每种区块类型的完整模板，其中包含 HTML、CSS 和 JS 模式。

避免 AI 廉价感检查清单

生成前，请确认：

• 字体不是 Inter、Roboto、Arial 或系统默认字体
• 配色方案不是白底紫色渐变
• 首屏没有使用“彻底革新”或“全面提升”这类词语
• CTA 按钮具有悬停动画，而不只是改变颜色
• 背景具有纹理／层次感，而不是纯色
• 至少有一个出人意料的设计选择（非对称布局、醒目排版、创意区块分隔线）

交付

1. 使用描述性名称保存 HTML 文件：{product-name}-landing.html
2. 在浏览器中打开：open {product-name}-landing.html
3. 向用户展示并征求反馈

---

第 4 阶段：迭代

初次生成后，通过 AskUserQuestion 询问（标题：“反馈”）： “效果怎么样？” 选项：就这样发布！ / 调整颜色和字体 / 更改布局 / 添加或移除区块 / 用新风格重新开始

修改时，请遵循以下规则：

• 添加内容：先检查区块内容密度限制。若超出限制，则拆分区块。
• 更改风格：更新 CSS 变量，不要重写结构。
• 添加区块：阅读 references/SECTION_LIBRARY.md 中的区块模板，并按逻辑顺序插入。
• 移除区块：彻底删除，并检查是否有 JS 引用因此失效。

---

参考资料（渐进式披露）

此技能采用渐进式披露——仅在需要时加载参考文件：

文件	阅读时机	内容
references/STYLE_PRESETS.md	阶段 2（风格探索）	5 种精心挑选的风格预设，包含完整的 CSS 变量、字体搭配和背景处理方式
references/SECTION_LIBRARY.md	阶段 3（生成）	各类版块（主视觉、功能、定价等）的完整 HTML/CSS/JS 模板