ship-page

用途

Ship Page 用于创建产品、创业项目和副业项目的交互式落地页。这些页面完全在浏览器中运行，输出为单个 HTML 文件。该技能主要面向非设计人员，帮助他们通过视觉探索（“展示而非描述”）发布专业的产品页面，然后生成具有真实交互性的生产级落地页，而不是静态模型。

主要能力

• 零依赖：单个 HTML 文件，内联 CSS/JS。无需 npm、构建工具或框架。
• 展示而非描述：生成视觉预览，让用户挑选，因为人们往往无法用语言描述自己想要的设计。
• 反 AI 套路：避免白底紫色渐变、通用 SaaS 模板，力求每个页面都为产品定制。
• 默认交互：落地页包含滚动动画、悬停状态、数据计数器、粒子效果和微交互。
• 开箱即用：输出可立即使用，HTML 文件可放到 GitHub Pages、Vercel、Netlify，或直接在浏览器中打开。

使用方式

该技能支持三种模式：

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

阶段 1：发现

了解产品并收集内容。通过一次 AskUserQuestion 调用询问所有问题，包括产品类型、内容来源、所需区块和发布目标。如果用户提供了内容（README、描述、文档），则进行内容分析，提取产品名称、一句话描述、关键功能（3-6 个）、目标受众信号、指标/数字和行动号召，并通过 AskUserQuestion 确认。

阶段 2：风格探索

这是“展示而非描述”阶段。先通过 AskUserQuestion 询问氛围（可多选，最多 2 个），选项包括：未来科技感、简洁极简、大胆活力、暗黑高级、俏皮创意、企业可信。然后根据选择生成 3 个不同的单区块 HTML 预览，展示字体搭配、配色方案、英雄区布局、微交互或动画以及整体氛围。预览保存到 .ship-page/previews/。可读取 references/STYLE_PRESETS.md 获取预设定义，以预设为基础再针对产品定制。用户也可直接选择预设，跳过预览生成。

阶段 3：生成落地页

使用阶段 1 的内容和阶段 2 的风格生成完整落地页。结构遵循固定架构：导航、英雄区、功能、社会证明、最终行动号召、页脚，以及内联脚本。

强制技术要求：

• 视口适配：每个区块应感觉“充实”但不溢出。英雄区使用 min-height: 100vh，其他区块按比例设置高度。
• 响应式：必须在移动端可用。所有字体大小使用 clamp()，间距使用视口相对单位。
• 滚动动画：使用 IntersectionObserver 实现滚动显示，元素随用户滚动动画进入。
• 性能：优先使用 CSS 动画而非 JS。动画元素使用 will-change。防抖滚动处理程序。
• 无障碍：语义化 HTML、足够对比度、为所有动画提供 prefers-reduced-motion 媒体查询。

区块密度限制（防止过度拥挤）：

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

如果单个区块内容过多，拆分为两个区块并在之间加入视觉分隔。

CSS 架构：使用 :root 定义字体、颜色、间距和动画变量。字体大小始终使用 clamp()。提供滚动显示基础类 .reveal 和 .reveal.visible，以及减少动画的媒体查询。

JavaScript 要点：始终包含滚动显示（IntersectionObserver）、动画计数器（用于统计区块）、导航链接平滑滚动等模式。可读取 references/SECTION_LIBRARY.md 获取完整区块模板。

反 AI 套路检查清单：生成前验证字体不是 Inter、Roboto、Arial 或系统默认；配色不是白底紫色渐变；英雄区不使用“Revolutionize”或“Supercharge”等词；CTA 按钮有悬停动画而非仅颜色变化；背景有纹理/深度而非纯色；至少有一个出人意料的设计选择（不对称布局、大胆排版、创意区块分隔）。

交付：保存 HTML 文件为 {product-name}-landing.html，在浏览器中打开，展示给用户并请求反馈。

阶段 4：迭代

初始生成后，通过 AskUserQuestion 询问反馈，选项包括：直接发布、调整颜色/字体、更改布局、添加/删除区块、用新风格重新开始。修改规则：添加内容前先检查区块密度限制，超出则拆分区块；更改风格时更新 CSS 变量，不重写结构；添加区块时读取 references/SECTION_LIBRARY.md 获取模板并按逻辑顺序插入；删除区块时干净删除并检查 JS 引用是否中断。

适用场景

• 为 SaaS、开发者工具、移动应用、开源项目或个人品牌创建落地页。
• 将 GitHub README 或产品描述快速转换为落地页。
• 增强现有 HTML 落地页。
• 用于 GitHub Pages、独立网站或 Product Hunt 发布。

限制

• 输出为单个 HTML 文件，除 Google Fonts 和 Font Awesome CDN 外无外部依赖。
• 各区块有明确的密度限制，内容过多时需要拆分。
• 需要用户参与风格选择和反馈迭代。
• 关于收费、价格、平台支持范围等具体信息，资料中暂未提供。