着陆页生成器

根据产品描述生成高转化率的着陆页。输出完整的 Next.js/React 组件，包含多个区块变体、经检验的文案框架、SEO 优化和性能优先的模式。不是占位符——是真正能转化的文案。

目标： LCP < 1s · CLS < 0.1 · FID < 100ms
输出： TSX 组件 + Tailwind 样式 + SEO meta + 文案变体

使用时机

你需要在 Next.js 或 React 中生成一个营销着陆页。
任务涉及以转化为导向的页面结构、区块变体、Tailwind 样式或 SEO 感知的文案。
你希望从产品描述中获得完整的着陆页输出，而不是零散的 UI 片段。

核心能力

5 种英雄区变体（居中布局、分屏布局、渐变背景、视频背景、极简风格）
特性区（网格布局、交替布局、带图标的卡片布局）
定价表（2–4 个层级，包含功能列表和切换开关）
常见问题手风琴组件（含 Schema 标记）
用户评价区（网格布局、轮播、单条引用）
行动号召区（横幅、全页、内联）
页脚（简单、丰富、极简）
4 种设计风格，配以 Tailwind 类集

生成工作流程

对每次着陆页请求，按顺序执行以下步骤：

收集输入 —— 收集产品名称、标语、目标受众、痛点、关键利益、定价层级、设计风格和文案框架，使用下方的触发格式。仅询问缺失的字段。
分析品牌声音（推荐）—— 如果用户有现有的品牌内容（网站文案、博客文章、营销材料），请通过 marketing-skill/content-production/scripts/brand_voice_analyzer.py 运行，以获取声音档案（正式程度、语气、视角）。使用该档案来指导设计风格和文案框架的选择：
- 正式 + 专业 → 企业风格，AIDA 框架
- 随意 + 友好 → 大胆初创风格，BAB 框架
- 专业 + 权威 → 深邃SaaS风格，PAS 框架
- 随意 + 对话式 → 干净简约风格，BAB 框架
选择设计风格 —— 将用户的选择（或从品牌声音分析推断）映射到设计风格参考中的四种 Tailwind 类集之一。
应用文案框架 —— 在生成组件之前，使用所选框架（PAS / AIDA / BAB）编写所有标题和正文。全程匹配声音档案的正式程度和语气。
按顺序生成区块 —— 英雄区 → 特性区 → 定价区 → 常见问题 → 用户评价 → 行动号召 → 页脚。跳过与产品不相关的区块。
对照 SEO 检查清单验证 —— 在输出最终代码前，逐项检查 SEO 检查清单。内联修复所有差距。
输出最终组件 —— 交付可直接复制粘贴的 TSX 文件，包含所有 Tailwind 类、SEO meta 和结构化数据。

触发此技能

产品：[名称]
标语：[一句话价值主张]
目标受众：[他们是谁]
关键痛点：[你解决了什么问题]
关键利益：[主要成果]
定价层级：[免费/专业/企业或描述]
设计风格：dark-saas | clean-minimal | bold-startup | enterprise
文案框架：PAS | AIDA | BAB

设计风格参考

风格	背景	强调色	卡片	行动号召按钮
深邃 SaaS	`bg-gray-950 text-white`	`violet-500/400`	`bg-gray-900 border border-gray-800`	`bg-violet-600 hover:bg-violet-500`
干净简约	`bg-white text-gray-900`	`blue-600`	`bg-gray-50 border border-gray-200 rounded-2xl`	`bg-blue-600 hover:bg-blue-700`
大胆初创	`bg-white text-gray-900`	`orange-500`	`shadow-xl rounded-3xl`	`bg-orange-500 hover:bg-orange-600 text-white`
企业	`bg-slate-50 text-slate-900`	`slate-700`	`bg-white border border-slate-200 shadow-sm`	`bg-slate-900 hover:bg-slate-800 text-white`

大胆初创 风格标题：在所有 <h1>/<h2> 元素上添加 font-black tracking-tight。

文案框架

PAS（问题 → 激化 → 解决方案）

H1：他们所处的痛苦状态
副标题：如果他们不解决会发生什么
行动号召：你提供的解决方案
示例 — H1： “你的团队每天浪费3小时在手动报告上” / 副标题： “花在电子表格上的每一小时都是无法成交的商机。你的竞争对手已经自动化了。” / 行动号召： “10分钟自动化你的报告 →”

AIDA（注意 → 兴趣 → 欲望 → 行动）

H1：大胆的引人注意的陈述 → 副标题：有趣的事实或利益 → 特性：建立欲望的证明点 → 行动号召：明确的行动

BAB（之前 → 之后 → 桥梁）

H1：“[之前状态] → [之后状态]” → 副标题：“这是[产品]如何架起桥梁” → 特性：它的工作原理（桥梁）

代表性组件：英雄区（居中渐变 — 深邃 SaaS）

将此作为所有英雄区变体的结构模板。对于分屏、视频背景和极简变体，请切换布局类、渐变方向和图片位置。

export function HeroCentered() {
  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
      <div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
      <div className="relative z-10 max-w-4xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          现在处于公测阶段
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          更快地交付。<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
            更少地出错。
          </span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          在你的用户之前发现错误的部署平台。零配置。即时回滚。实时监控。
        </p>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
            开始免费试用
          </Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
            查看它的工作原理 →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">无需信用卡 · 14天免费试用</p>
      </div>
    </section>
  )
}

其他区块模式

特性区（交替布局）

遍历一个包含 { title, description, image, badge } 的 features 数组。使用 i % 2 === 1 ? "lg:flex-row-reverse" : "" 切换布局方向。使用带有显式 width/height 和 rounded-2xl shadow-xl 的 <Image>。包裹在 <section className="py-24"> 中使用 max-w-6xl 容器。

定价表

遍历一个包含 { name, price, description, features[], cta, highlighted } 的 plans 数组。突出显示的方案使用 border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20；其他方案使用 border border-gray-800 bg-gray-900。将 null 价格渲染为 "Custom"。每行功能使用 <Check> 图标。布局：grid gap-8 lg:grid-cols-3。

带 Schema 标记的常见问题

通过 <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> 在区块内注入 FAQPage JSON-LD。将包含 { q, a } 的常见问题映射到 shadcn <Accordion>，使用 type="single" collapsible。容器：max-w-3xl。

用户评价、行动号召、页脚

用户评价： 网格布局（grid-cols-1 md:grid-cols-3）或单条引用英雄区，带有头像、姓名、角色和引用文本。
行动号召横幅： 全宽区块，包含标题、副标题和两个按钮（主要 + 幽灵）。在下方立即添加信任信号（如退款保证、Logo 条）。
页脚： Logo + 导航列 + 社交链接 + 法律信息。使用 border-t border-gray-800 分隔符。

SEO 检查清单

验证步骤： 在输出最终代码之前，验证上述检查清单中的每一项是否都已满足。内联修复所有差距——不要跳过任何项目。

性能目标

指标	目标	技术
LCP	< 1s	预加载英雄区图片，在 Next/Image 上使用 `priority`
CLS	< 0.1	在所有图片上设置显式的 width/height
FID/INP	< 100ms	延迟非关键 JS，使用 `loading="lazy"`
TTFB	< 200ms	为着陆页使用 ISR 或静态生成
打包大小	< 100KB JS	使用 `@next/bundle-analyzer` 审计

常见陷阱

英雄区图片未预加载 —— 为第一个 <Image> 添加 priority prop
缺少移动端断点 —— 始终以移动优先设计，使用 sm: 前缀
行动号召文案过于模糊 —— “开始使用”胜过“了解更多”；“开始免费试用”胜过“注册”
定价页面缺少信任信号 —— 在行动号召附近添加退款保证和用户评价
移动端首屏以上无行动号召 —— 确保按钮在 375px 视口上无需滚动即可看到

局限性

仅当任务明确符合上述描述的范围时使用此技能。
不要将输出视为特定环境验证、测试或专家审查的替代品。
如果缺少所需输入、权限、安全边界或成功标准，请停下来要求澄清。

n2g7/agent-skills

agent-skills 是什么？

在你喜欢的 AI 中提问

文档

着陆页生成器

使用时机

核心能力

生成工作流程

触发此技能

设计风格参考

文案框架

代表性组件：英雄区（居中渐变 — 深邃 SaaS）

其他区块模式

特性区（交替布局）

定价表

带 Schema 标记的常见问题

用户评价、行动号召、页脚

SEO 检查清单

性能目标

常见陷阱

相关技能

局限性

Individual skills in this repo

n2g7/agent-skills

相关技能

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me