用 AI 快速生成高转化率的 Next.js 营销落地页 #

解决从产品描述到商业页面的转化痛点：通过内置营销心理学框架和高性能代码模式，让 AI 直接输出可用于生产的 Next.js/React 落地页代码，而非简单的 UI 碎片。

为什么需要这个技能 #

构建一个营销落地页不仅需要美观的 UI，更需要能够驱动用户转化的文案逻辑和极致的加载性能。传统的开发流程中，文案由策划提供，设计由 UI 决定，最后由前端实现，沟通成本极高。

该技能将营销框架（如 PAS 痛点分析法）与现代前端技术栈（Next.js + Tailwind CSS）结合，让 AI 在生成代码的同时完成文案策划。它关注 Core Web Vitals（核心 Web 指标），确保生成的页面在 LCP（最大内容绘制）和 CLS（累积布局偏移）等方面达到工业级标准。

适用场景 #

• 需要快速为新产品构建一个高水准的营销主页。
• 需要针对不同用户群体快速测试多套 A/B 测试落地页方案。
• 缺乏专业营销文案，需要 AI 基于 AIDA 或 BAB 框架生成具有说服力的内容。
• 对 SEO 和页面加载速度有严格要求的商业项目。

核心工作流 #

1. 输入关键信息：提供产品名称、目标人群、核心痛点、定价方案及期望的视觉风格（如 Dark SaaS 或 Clean Minimal）。
2. 品牌调性分析：AI 分析品牌声音（正式、专业或亲切），自动匹配最适合的文案框架（例如：专业权威 $\to$ PAS 框架 $\to$ Dark SaaS 风格）。
3. 文案先行：在生成代码前，先根据选定的框架（PAS/AIDA/BAB）编写所有标题和正文，确保逻辑闭环。
4. 模块化组件生成：按顺序生成 Hero 区域 $\to$ 功能特性 $\to$ 价格表 $\to$ FAQ $\to$ 客户证言 $\to$ CTA $\to$ 页脚。
5. SEO 与性能校验：对照 SEO 检查清单（如 JSON-LD 结构化数据、Meta 标签、图片 Alt 属性）进行自检并修复。
6. 最终代码输出：交付可直接复制的 TSX 文件，包含完整的 Tailwind 类名和 SEO 配置。

下载和安装 #

下载 landing-page-generator 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐