Landing Page Skill

Landing Page Skill

> 本 Skill 设计为 agent-agnostic——Claude Code、Codex CLI、Cursor、Trae、OpenClaw、Hermes Agent 或任何支持 markdown-based skill 的 agent 都可以使用。 > 所有文件引用采用相对本 Skill 根目录的相对路径形式。

激活条件

当用户输入包含以下任一触发词时激活：landing page、落地页、产品页、营销页、主页设计、single page website、着陆页。

诚实边界（适用性判断）

适用：

1. 单页转化型落地页（收集线索、引导注册、促进购买）
2. 产品/服务展示页面（SaaS、电商单品、咨询服务、课程）
3. 技术栈为 Next.js 14/15 + Tailwind CSS（MVP 阶段）
4. 有明确转化目标（CTA）的页面

不适用：

1. 多页网站或博客系统（超出单页范围）
2. 需要后端 API、数据库、用户认证的完整应用
3. 复杂交互（实时协作、数据可视化仪表盘、游戏）
4. 非 Web 平台（小程序、原生 App、桌面应用）

边界声明： 本 Skill 生成的是高质量起点代码，需人工打磨文案细节和品牌资产。不承诺"一键完美"。

5 阶段操作协议

Phase 1: 需求采集

按顺序向用户确认以下信息（如用户已提供则跳过）：

1. 产品/服务：是什么？核心价值主张是什么？
2. 目标受众：谁会用？有什么痛点？
3. 转化目标：希望用户做什么？（注册/购买/下载/预约）
4. 技术栈：确认使用 Next.js 14/15 + Tailwind CSS
5. 品牌风格偏好：从 references/aesthetic-styles.md 的 6 种风格中选择
6. 竞品参考：有喜欢的落地页参考吗？（可选）

输出：需求摘要文档（Markdown 列表），用于 Phase 2。

Phase 2: 策略规划

1. 加载行业模板：根据产品类型从 references/page-templates/ 选择模板：

• SaaS 产品 → references/page-templates/saas-product.md
• 电商单品 → references/page-templates/ecommerce.md
• 其他 → 通用结构（Hero → Features → Benefits → Social Proof → CTA → Footer）

1. 选择美学方向：从 references/aesthetic-styles.md 选择风格，确认配色倾向
2. 文案结构：使用 references/copy-formulas/ 规划：

• Hero 标题：references/copy-formulas/hero-headlines.md 的 "结果 + 受众 + 机制" 公式
• CTA 文案：references/copy-formulas/cta-patterns.md 的 "动词 + 利益" 格式
• 异议处理：references/copy-formulas/objection-handling.md 的 5 类异议模板

1. 转化框架映射：将 7 段式文案映射到 DESIGNNAS 11 元素（参考 references/conversion-framework.md）

输出：策略文档（含风格选择、配色方向、文案大纲、元素映射表）。

Phase 3: 设计系统

基于 references/design-system.md 生成设计 Token：

1. Typography Token：Display 字体、Body 字体、heading 字号阶梯
2. Color Token：Primary / Secondary / Accent / Neutral / Background / Text（hex + CSS 变量）
3. Motion Token：PageLoad 动画、Scroll 触发动画、Hover 交互（类型 + 时长）
4. Layout Token：Grid 类型、Spacing 阶梯、Section 宽度、非对称布局规则

输出：设计 Token 文档（可直接复制到 tailwind.config.ts）。

Phase 4: 代码生成

按 references/tech-adapters/nextjs-tailwind.md 生成代码：

1. 项目结构：app/page.tsx、app/layout.tsx、components/、lib/utils.ts、tailwind.config.ts
2. 组件化：每个 DESIGNNAS 元素独立组件（HeroSection、FeaturesSection 等）
3. Tailwind 配置：扩展设计系统 Token（colors、fonts、animations）
4. 响应式：使用 sm:/md:/lg:/xl: 断点
5. 可访问性：语义 HTML、alt 文本、对比度、focus-visible

输出：完整可运行的 Next.js 项目代码。

Phase 5: 质量验证（闭环保障）

5.1 转化检查

• [ ] 11 元素覆盖率：检查是否包含 Hero、Social Proof、Features、Benefits、How It Works、Testimonials、Pricing/CTA、FAQ、Scarcity、Footer（至少覆盖 7 个）
• [ ] CTA 清晰度：CTA 文本是否使用 "动词 + 利益" 格式
• [ ] Hero 标题：是否遵循 "结果 + 受众 + 机制" 公式

5.2 反模式检测（逐项检查，详见 references/anti-patterns.md）

| # | 规则 | 检测逻辑 | 严重度 | |---|------|---------|--------| | 1 | 泛滥字体 | Inter/Roboto/Arial 作为 Display 字体 | 阻塞 | | 2 | 模板化配色 | 紫色渐变 + 纯白背景的模板组合 | 阻塞 | | 3 | CTA 模糊 | CTA 为 Submit/Learn More/Click Here | 阻塞 | | 4 | 缺少社会证明 | Hero 下方无 Social Proof 元素 | 阻塞 | | 5 | Hero 标题无力 | Welcome/品牌名开头，纯描述性 | 阻塞 | | 6 | 移动端适配缺失 | 无 sm:/md:/lg: 响应式断点 | 警告 | | 7 | 可访问性基线 | 缺少 alt/aria/语义 HTML | 警告 | | 8 | SEO 基础缺失 | 无 meta/title/OG 标签 | 警告 | | 9 | 性能隐患 | 大图未优化、缺 lazy load | 警告 | | 10 | Token 一致性 | 硬编码颜色/非标准间距 | 警告 |

5.3 自动修复循环（阻塞级规则）

阻塞级规则（1-5）未通过时，自动执行修复循环：

1. 针对每个未通过的阻塞规则，生成具体修复代码
2. 仅替换触发规则的 Section 代码（不修改无关 Section）
3. 重新运行该规则的检测
4. 重复上述步骤，最多 3 轮
5. 3 轮后仍未通过 → 报告失败原因，交由用户决定

5.4 正面模式验证（建议性，详见 references/positive-patterns.md）

| # | 模式 | 检测逻辑 | |---|------|---------| | P1 | CTA 动词+利益 | CTA 文本匹配"动词 + 具体利益"格式 | | P2 | Hero 结果+受众 | 标题包含可量化结果 + 目标受众 | | P3 | 社会证明元素 | 页面包含 ≥1 个社会证明类型 | | P4 | 紧迫感/稀缺性 | 存在名额/时间/价格紧迫感元素 |

正面模式不触发自动修复，仅在报告中提供优化建议。

输出：检测报告（反模式 + 正面模式 Markdown 表格）+ 自动修复摘要（如有修复）。

Phase 5.5: 迭代优化（可选）

Phase 5 完成后，向用户提供 3 个选项：

A) 接受 — 输出最终完整项目代码 B) 修改指定 Section — 用户说明要修改的 Section 和修改要求 C) 重新生成指定 Section — 用户指定 Section 从头重新生成

迭代规则：

• 修改/重新生成仅影响用户指定的 Section（Section 粒度）
• 每次修改后，重新检测该 Section 相关的反模式规则
• 最多 3 轮迭代，超限后输出当前版本
• 每轮输出变更日志："Round N: Modified [Sections], Re-checked [Rules]"

索引

技术栈适配器

• Next.js 14/15 + Tailwind CSS → references/tech-adapters/nextjs-tailwind.md

行业模板

• SaaS 产品页 → references/page-templates/saas-product.md
• 电商产品页 → references/page-templates/ecommerce.md

文案公式库

• Hero 标题 → references/copy-formulas/hero-headlines.md
• CTA 模式 → references/copy-formulas/cta-patterns.md
• 异议处理 → references/copy-formulas/objection-handling.md

设计参考

• 转化框架 → references/conversion-framework.md
• 设计系统 → references/design-system.md
• 美学风格 → references/aesthetic-styles.md
• 反模式检测 → references/anti-patterns.md
• 正面模式检测 → references/positive-patterns.md

跨 Agent 环境适配说明

本 Skill 设计为 agent-agnostic，兼容以下运行时：

| 运行时 | 支持方式 | 备注 | |--------|---------|------| | Claude Code | 原生支持 | 推荐，/agent 或触发词激活 | | Codex CLI | 兼容 | 直接加载 SKILL.md | | Cursor | 兼容 | 复制到 .cursorrules 或使用 Composer | | Trae | 兼容 | 直接加载 SKILL.md | | OpenClaw | 兼容 | 遵循 skills.sh 协议 | | Hermes Agent | 兼容 | 直接加载 SKILL.md | | 其他 markdown-based skill 运行时 | 兼容 | 任何支持 YAML frontmatter + Markdown 的运行时 |

路径规范

所有文件引用均采用相对本 Skill 根目录的相对路径：

• references/xxx.md
• assets/xxx.svg
• scripts/xxx.py

Agent 或用户按自身安装位置解析，不依赖任何绝对路径。

自包含原则

SKILL.md 包含所有必要信息，可直接复制使用。references/ 中的文件为深度知识补充，按需加载即可。

> 本 Skill 遵循 Agent Skills 开放协议。

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: peterfei
• Source: peterfei/landing-page-skill
• License: MIT
• Homepage: https://github.com/peterfei/landing-page-skill

Install and usage instructions live in the source repository linked above.