mcpField
L
landing-page-vercel

landing-page-vercel

github.com/shipshitdev设计与 UI38269 次安装2 天前更新
代码仓库

关于 landing-page-vercel

这项技能根据产品简介生成静态落地页，并提供表单设置说明和 Vercel 配置，适合准备本地页面的团队。生产环境部署需明确请求。

主要功能

  1. 01生成 HTML、CSS 和 JavaScript 文件
  2. 02设置电子邮件收集表单
  3. 03准备 Plausible 或 Fathom 分析
  4. 04检查响应式设计和无障碍性
  5. 05添加 Vercel 配置与部署说明

适用场景

  1. 01制作产品候补名单页面
  2. 02创建演示预约落地页
  3. 03准备部署到 Vercel 的静态页面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shipshitdev/skills --skill landing-page-vercel

安装后在 Claude Code 中输入/landing-page-vercel确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

plugin.json
references/
full-guide.md
scripts/
scaffold.py

详细介绍

落地页（Vercel）

创建静态落地页，包含：

约定

输入：

  • 产品名称、标语、目标受众、优惠内容和 CTA
  • 目标目录
  • 表单服务商和分析偏好

输出：

  • 静态落地页文件
  • 表单／分析设置说明
  • 部署说明

创建／修改：

  • 本地落地页文件和 Vercel 配置
  • 除非明确请求，否则不会部署到生产环境

外部副作用：

  • 脚手架搭建期间无副作用
  • 仅在明确请求部署后，才可能部署到 Vercel

需要确认：

  • 使用外部表单／分析标识符之前
  • 运行 Vercel 部署命令之前
  • 覆盖现有落地页目录之前

委派给：

  • 完整的 Shipshit.dev 产品仓库：project-init-orchestrator / npx @shipshitdev/v0

  • 自定义视觉设计：frontend-design

  • 部署：deployment-composer 或 deploy-app

  • **结构：**语义化 HTML5 + 现代 CSS + 原生 JS

  • **表单：**可用的电子邮件收集表单（Formspree 或自定义端点）

  • **分析：**可接入 Plausible/Fathom

  • **设计：**响应式、无障碍、高性能

  • **部署：**一键部署到 Vercel

有何不同

此技能生成的是可用的落地页，而非空模板：

  • 真正可提交的电子邮件收集表单
  • 可随时启用的分析集成
  • 经过移动设备测试的响应式设计
  • 无障碍基础要求（WCAG 2.1 AA）
  • 根据 PRD 简报生成内容

工作流

第 1 阶段：收集 PRD 简报

向用户询问产品详情，然后提取并确认：产品名称、标语、主视觉标题／副标题／CTA、3-5 个带描述的功能、CTA 类型（候补名单／注册／申请演示／联系），以及社会认同内容偏好（用户评价／Logo／数据／无）。确认消息格式请参阅 references/full-guide.md（§ PRD 简报收集模板）。

第 2 阶段：生成内容

为以下版块生成完整的落地页内容：

  1. 主视觉 - 标题、副标题、CTA 按钮、可选主视觉图片
  2. 功能 - 3-5 张带图标的功能卡片
  3. 工作原理 - 3 步流程（可选）
  4. 社会认同 - 用户评价或 Logo（可选）
  5. 常见问题 - 4-6 个常见问题（可选）
  6. CTA - 带表单的最终行动号召
  7. 页脚 - 链接、版权信息、社交图标
第 3 阶段：集成表单

选择电子邮件收集方案：

  1. Formspree（推荐 - 免费套餐） - 无需后端，快速设置，可发送电子邮件通知
  2. 自定义端点 - 使用自有 API，控制权完整，需要后端
  3. 候补名单服务 - Waitlist.email、Loops.so、ConvertKit
第 4 阶段：质量验证

交付前验证：

  • HTML 验证通过（W3C）
  • 在移动设备上响应正常
  • 表单提交成功
  • 存在分析占位符
  • Lighthouse 评分达到 90+

用法

# Create landing page with PRD
python3 scripts/scaffold.py \
  --out ./my-landing-page \
  --name "ProductName" \
  --tagline "Your compelling value proposition" \
  --features "Feature1,Feature2,Feature3"

# Interactive mode
python3 scripts/scaffold.py --out ./my-landing-page --interactive

生成 index.html、styles.css、script.js、data.json、vercel.json 和 assets/ 目录。完整文件树请参阅 references/full-guide.md（§ 生成结构）。

关键模式

表单提交通过 fetch 向表单的 action URL 发送请求，并处理加载／成功／错误状态；内容保存在 data.json（hero、features、faq）中，因此修改文案无需改动标记。完整实现请参阅 references/full-guide.md（§ 表单处理（JavaScript）、§ 数据结构（data.json））。

表单集成指南

**Formspree（推荐）：**在 formspree.io 创建免费账号并创建表单，然后将 HTML 中的 YOUR_FORM_ID 替换为生成的表单 ID。

**自定义端点：**以 JSON 格式向可自托管的 API 发送 { email }，并处理响应。完整代码片段请参阅 references/full-guide.md（§ 选项 2：自定义端点）。

分析设置

在页面 head 中添加一个脚本标签：使用 Plausible（data-domain + plausible.io/js/script.js）进行注重隐私的分析，或使用 Fathom（cdn.usefathom.com/script.js + data-site）。两种标签请参阅 references/full-guide.md（§ 分析设置）。

部署

cd my-landing-page
bunx vercel          # Deploy (no global install needed)
bunx vercel --prod   # Production deploy

vercel.json 通过 @vercel/static 映射所有静态资源，将所有路由指向 index.html，并设置基准安全标头（X-Content-Type-Options、X-Frame-Options、X-XSS-Protection）。完整配置请参阅 references/full-guide.md（§ Vercel Configuration (vercel.json)）。

CSS 变量

主题令牌（--color-primary、--color-bg、--font-sans、--spacing-*、--max-width）驱动整个样式表；完整的 :root 区块请参阅 references/full-guide.md（§ CSS Variables）。

无障碍检查清单

  • 语义化 HTML 结构
  • 合理的标题层级（h1 → h2 → h3）
  • 图片的替代文本
  • 交互元素的焦点状态
  • 颜色对比度至少为 4.5:1
  • 表单标签和错误消息
  • 键盘导航的跳过链接
  • 响应式文本大小（正文文本不使用固定 px 值）

性能检查清单

  • 不使用外部 CSS 框架
  • 尽量减少 JavaScript
  • 优化图片（WebP 格式并提供备用方案）
  • 使用系统字体（不加载 Web 字体）
  • 对首屏以下的图片启用延迟加载
  • 为外部资源设置预连接

参考资料

  • scripts/scaffold.py - 生成脚本（模板内嵌）
  • references/full-guide.md - 完整 PRD 模板、生成的文件树、表单/分析/部署配置转储，以及 CSS 变量集

评论

支持 Markdown