关于 landing-page-optimization
面向营销人员和设计者的落地页优化 Skill，提供文案框架、11 个页面要素及从目标定义到发布检查的制作流程。内容涵盖页面结构、视觉方向和转化摩擦优化。
主要功能
- 01PAS、AIDA 和 StoryBrand 文案框架
- 0211 个落地页核心要素
- 03页面文案与 CTA 指引
- 04视觉风格和设计原则
- 05制作、优化与发布流程
适用场景
- 01为单一转化目标规划页面
- 02起草标题、利益点和 CTA
- 03检查页面结构与信任要素
- 04优化移动端和表单摩擦
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/landing-page-optimization确认已加载。
附带文件references/11-essential-elements.mdreferences/component-examples.md
详细介绍
着陆页优化
工作区上下文
提问前先阅读引导上下文：查看 strategy/brand.md，了解品牌、受众、产品、渠道、工具、限制和指标；查看 about/me.md，了解个人语气；查看 content/ideas.md 和 content/calendar.md，了解内容规划。仅在必要时将旧版产品营销上下文文件作为备用。将生成的草稿保存到 content/<platform>/drafts/YYYY-MM-DD_short-topic-slug.md，并将值得长期保留的经验更新到 strategy/brand.md、about/me.md 或 content/ideas.md。
操作约定
此技能在其 frontmatter 范围内自成一体：将本地说明、参考资料、脚本和资源作为操作指南；仅询问缺失的任务专属输入；将超出范围的工作交给相邻技能，而不是自行扩展范围；并交付可执行的成果、决策、计划、草稿或诊断。
结合经过验证的文案框架、11 项核心要素结构和清晰的创建流程，构建、撰写并优化高转化率的着陆页。
1. 文案框架
撰写前收集信息
起草文案前，收集以下信息：
- 产品/服务名称和核心价值主张
- 目标受众及其主要痛点
- 相较于替代方案的关键差异化优势
- 希望访客采取的行动（CTA 目标）
- 可用的社会认同素材（推荐语、数据、徽标）
选择框架
| 框架 | 适用场景 |
|---|---|
| PAS（问题 → 激化 → 解决方案） | 痛点突出、注重情感诉求的产品 |
| AIDA（注意 → 兴趣 → 欲望 → 行动） | 通用场景、认知推广活动 |
| StoryBrand（主角 → 引导者 → 计划 → CTA → 成功） | 品牌叙事、注重关系的销售 |
分区文案指南
首屏区 — 价值主张不超过 10 个词；副标题进一步明确细节；首屏可见区域内包含 CTA 和 1 项信任信号。
标题公式：
[实现目标]，无需[承受痛点][实现预期结果]的[形容词]方式停止[坏事]。开始[好事]。
问题 — 用受众自己的语言描述痛点；列出 2–3 个具体场景；着重情感，而非临床式描述。
解决方案 — 说明产品如何解决问题；将 3–5 项功能转化为收益来表述（例如“每天节省 2 小时”，而非“自动排期”）。
工作原理 — 分为 3–4 个步骤，每步都以清晰的动作动词开头；最后以 CTA 收尾。
社会认同 — 推荐语模板：“[具体成果]……”——姓名、职位、公司。目标为 4–6 条推荐语；如有数据和徽标，也一并加入。
定价 — 突出推荐方案；加入保障文案；每张方案卡片设置一个 CTA。
常见问题 — 列出 5–10 个用于消除顾虑的问题；涵盖定价、退款、技术要求以及与替代方案的比较。
最终 CTA — 重复主要 CTA；加入紧迫感或风险保障（例如“随时取消”“30 天保障”）；视觉表现要比首屏 CTA 更大、更醒目。
CTA 文案规则
- 以动作动词开头
- 表述具体：“开始我的免费试用”优于“提交”
- 使用第一人称措辞通常转化效果更好（例如“获取我的指南”）
- 避免使用：“点击此处”“了解更多”“提交”
文案最佳实践
- 使用主动语态和现在时；先写收益，再写功能
- 用具体数字替代模糊说法（例如“节省 2 小时”，而非“节省时间”）
- 句子简短；使用标题和项目符号，方便快速浏览
- 在读者提出异议前先消除顾虑
- 全页设置多个 CTA，但都指向同一行动；避免设置多个相互竞争的行动
2. 设计原则（11 个必备元素）
每个落地页都需要包含全部 11 个元素。各元素的详细说明请参阅 references/11-essential-elements.md。
| # | 元素 | 转化目的 | 设计说明 |
|---|---|---|---|
| 1 | URL | 包含关键词的 SEO 网址别名 | — |
| 2 | 页眉/Logo | 建立品牌信任，提供导航 | 固定定位，滚动时添加模糊效果 |
| 3 | 主标题 + 副标题 | 清晰传达价值主张，H1 中包含关键词 | 使用醒目的展示字体，字号为 4–6rem |
| 4 | 主要 CTA | 推动主视觉区域转化 | 使用对比色，悬停时添加微交互 |
| 5 | 社会认同 | 增强可信度，减少犹豫 | 数字计数动画、头像重叠排列 |
| 6 | 图片/视频 | 展示产品 | 使用设备模型图或演示视频；不要使用图库照片 |
| 7 | 优势/功能 | 说明购买理由 | 3–6 项并配有图标；文案优先突出优势 |
| 8 | 用户评价 | 获得同类用户认可 | 4–6 条，包含照片、姓名和角色；注明具体成果 |
| 9 | 常见问题 | 消除顾虑 | 使用折叠面板；包含 5–10 个问题 |
| 10 | 最终 CTA | 提供第二次转化机会 | 全宽版块；包含营造紧迫感的元素 |
| 11 | 页脚 | 增强信任，提供法律信息 | 联系信息、隐私政策、社交媒体链接 |
美学方向
选择一个方向并始终如一地贯彻：
| 方向 | 风格 | 适用场景 |
|---|---|---|
| 极简主义 | 留白干净，单色设计 | 高端 SaaS、专业服务 |
| 大胆/繁复 | 层次丰富，色彩鲜明 | 创意机构、消费品牌 |
| 复古未来主义 | 几何图形、霓虹色、等宽字体 | 开发者工具、游戏、科技初创公司 |
| 自然风 | 柔和的形状、大地色调 | 健康与养生、食品、可持续发展 |
| 编辑风 | 鲜明的字体层级、不对称网格 | 媒体、内容平台 |
避免：白底紫色渐变（过度使用的 AI 美学）、每个版块都采用完全对称的布局、人物指着笔记本电脑的图库照片、默认的黄色星星。
技术栈（开发时）
Next.js 14+ · TypeScript · Tailwind CSS · ShadCN UI
构建顺序：设计系统 → SEO 元数据 → 页眉 → 主视觉区域（含动画）→ 媒体 → 优势 → 用户评价 → 常见问题 → 最终 CTA → 页脚。
生产就绪的 ShadCN 组件实现示例请参阅 references/component-examples.md。
3. 创建工作流
为任何落地页项目遵循以下步骤：
步骤 1 — 明确目标
- 单一转化行为（一个 CTA 目标）
- 此页面面向的受众细分
- 流量来源（广告、电子邮件、自然流量）——决定语气和预设背景
步骤 2 — 优先确定结构 采用完整的 11 个元素结构。不要走捷径：缺少社会认同或常见问题的页面，表现往往持续不佳。
步骤 3 — 撰写文案 应用文案框架（§1）。先写主视觉区域的文案——如果无法用 10 个词说清价值主张，就先明确产品方案再继续。
步骤 4 — 设计 选择美学方向，定义设计系统（字体、颜色、动效），然后逐个构建版块。
步骤 5 — 优化
- 首屏区域：无需滚动即可看到价值主张、CTA 和一个信任标识
- 多个 CTA 采用相同操作（不要设置相互竞争的目标）
- 表单字段尽量少；减少所有操作阻力
- 移动端优先；在真实设备上测试
- 性能：LCP <2.5s、CLS <0.1，无布局偏移
步骤 6 — 发布检查清单
- 标题聚焦优势、具体明确，且不超过 10 个词
- 全页面只有一个主要 CTA
- 已加入具体的社会认同内容
- 适配移动设备
- 页面加载时间 <3s
- 首屏可见信任标识
- 常见问题涵盖最主要的 5 个顾虑
- 已配置分析追踪
参考资料
references/11-essential-elements.md— 各元素的详细说明，包含实现指南和正反示例references/component-examples.md— 适用于主视觉区域、优势、用户评价、常见问题、最终 CTA 和页脚版块的生产就绪 ShadCN UI 组件