Ship Page — 一句话→可交互落地页（单 HTML）

页面页面

创建交互式、动画丰富的着陆页，完全在浏览器中作为单个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 — 关键部分（标题："部分"，多选：true）： 你需要哪些部分？ 选项：带CTA的英雄区 / 功能网格 / 工作原理 / 定价 / 推荐语 / 常见问题 / 统计与指标 / 新闻通讯注册 / GitHub星星徽章

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

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

步骤1.1：内容分析

解析提供的内容并提取：

• 产品名称和一句话描述
• 关键特性（目标3-6个）
• 目标受众信号
• 任何提到的指标/数字
• 行动号召（访客应该做什么？）

通过 AskUserQuestion（标题："内容检查"）确认： "这是我提取的内容——看起来对吗？" 选项：看起来不错 / 让我调整

---

阶段2：样式发现

这是"展示，而非讲述"阶段。大多数人无法用语言表达设计偏好。

步骤2.1：氛围选择

通过 AskUserQuestion（标题："氛围"，多选：true，最多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>
  <!-- 字体、CSS变量、所有内联样式 -->
  <!-- 除Google Fonts + Font Awesome CDN外无外部依赖 -->
</head>
<body>
  <nav><!-- 固定导航，带产品名称+CTA --></nav>
  
  <section class="hero"><!-- 首屏上方：标题、副标题、CTA --></section>
  <section class="features"><!-- 功能网格或展示区 --></section>
  <section class="social-proof"><!-- 统计、推荐语、标志 --></section>
  <!-- ... 根据需要添加其他部分 ... -->
  <section class="cta-final"><!-- 最终行动号召 --></section>
  <footer><!-- 链接、版权 --></footer>

  <script>
    // 滚动动画、计数器、交互——全部内联
  </script>
</body>
</html>

强制技术要求

1. 视口适配 — 每个部分应感觉"饱满"但从不溢出。英雄区使用 min-height: 100vh，其他部分使用比例高度。
2. 响应式 — 必须在移动设备上可用。对所有字体大小使用 clamp()，间距使用视口相对单位。
3. 滚动动画 — 使用 IntersectionObserver 实现滚动时显示。元素应在用户滚动时动画进入。
4. 性能 — CSS动画优先于JS。对动画元素使用 will-change。对滚动处理程序进行防抖。
5. 无障碍 — 语义化的HTML、足够对比度、为所有动画使用 prefers-reduced-motion 媒体查询。

部分密度限制

每个部分（防止过度拥挤）：

• 英雄区：1个标题（最多8词）、1个副标题（最多20词）、1-2个CTA、可选背景效果
• 功能：最多6个卡片。每个卡片：图标+标题（3-4词）+描述（最多15词）
• 统计/指标：最多4个计数器
• 推荐语：最多3条引语
• 定价：最多3个层级
• 常见问题：最多6个项目（使用手风琴/折叠效果）

某个部分内容太多？拆分为两个部分，并在它们之间添加视觉分隔。

CSS架构

:root {
  /* 排版——始终使用 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);
  
  /* 颜色——定义完整调色板 */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* 间距 */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* 动画 */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 滚动显示基类 */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 减少运动偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

JavaScript要点

始终包含这些模式：

// 使用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));

// 动画计数器（用于统计部分）
function animateCounter(el, target, duration = 2000) { ... }

// 导航链接平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

阅读 references/SECTION_LIBRARY.md 以获取每种部分类型的完整HTML、CSS和JS模式模板。

反AI垃圾风检查清单

在生成前，验证：

• 字体不是 Inter、Roboto、Arial 或系统默认字体
• 配色方案不是白色背景上的紫色渐变
• 英雄区没有使用"Revolutionize"或"Supercharge"等词
• CTA按钮有悬停动画，不仅仅是颜色变化
• 背景有纹理/深度——不是纯色平面
• 至少一个出乎意料的设计选择（不对称布局、大胆排版、创意部分分隔符）

交付

1. 保存HTML文件，使用描述性名称：{产品名称}-landing.html
2. 在浏览器中打开：open {产品名称}-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模板