| name | landing-page-skill |
| description | 全链路落地页生成 Agent Skill。触发词：landing page、落地页、产品页、营销页、主页设计。 5 阶段协议：需求采集 → 策略规划 → 设计系统 → 代码生成 → 质量验证。 适用：单页转化型落地页（SaaS/电商/服务）。不适用：多页网站、后端集成、复杂交互应用。
|
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、着陆页。
诚实边界（适用性判断）
适用：
- 单页转化型落地页（收集线索、引导注册、促进购买）
- 产品/服务展示页面（SaaS、电商单品、咨询服务、课程）
- 技术栈为 Next.js 14/15 + Tailwind CSS（MVP 阶段）
- 有明确转化目标（CTA）的页面
不适用：
- 多页网站或博客系统（超出单页范围）
- 需要后端 API、数据库、用户认证的完整应用
- 复杂交互（实时协作、数据可视化仪表盘、游戏）
- 非 Web 平台（小程序、原生 App、桌面应用）
边界声明： 本 Skill 生成的是高质量起点代码，需人工打磨文案细节和品牌资产。不承诺"一键完美"。
5 阶段操作协议
Phase 1: 需求采集
按顺序向用户确认以下信息（如用户已提供则跳过）：
- 产品/服务：是什么？核心价值主张是什么？
- 目标受众：谁会用？有什么痛点？
- 转化目标：希望用户做什么？（注册/购买/下载/预约）
- 技术栈：确认使用 Next.js 14/15 + Tailwind CSS
- 品牌风格偏好：从
references/aesthetic-styles.md 的 6 种风格中选择
- 竞品参考：有喜欢的落地页参考吗？（可选）
输出：需求摘要文档（Markdown 列表），用于 Phase 2。
Phase 2: 策略规划
- 加载行业模板：根据产品类型从
references/page-templates/ 选择模板：
- SaaS 产品 →
references/page-templates/saas-product.md
- 电商单品 →
references/page-templates/ecommerce.md
- 其他 → 通用结构（Hero → Features → Benefits → Social Proof → CTA → Footer）
- 选择美学方向：从
references/aesthetic-styles.md 选择风格，确认配色倾向
- 文案结构：使用
references/copy-formulas/ 规划：
- Hero 标题：
references/copy-formulas/hero-headlines.md 的 "结果 + 受众 + 机制" 公式
- CTA 文案：
references/copy-formulas/cta-patterns.md 的 "动词 + 利益" 格式
- 异议处理：
references/copy-formulas/objection-handling.md 的 5 类异议模板
- 转化框架映射：将 7 段式文案映射到 DESIGNNAS 11 元素（参考
references/conversion-framework.md）
输出：策略文档（含风格选择、配色方向、文案大纲、元素映射表）。
Phase 3: 设计系统
基于 references/design-system.md 生成设计 Token：
- Typography Token：Display 字体、Body 字体、heading 字号阶梯
- Color Token：Primary / Secondary / Accent / Neutral / Background / Text（hex + CSS 变量）
- Motion Token：PageLoad 动画、Scroll 触发动画、Hover 交互（类型 + 时长）
- Layout Token：Grid 类型、Spacing 阶梯、Section 宽度、非对称布局规则
输出：设计 Token 文档（可直接复制到 tailwind.config.ts）。
Phase 4: 代码生成
按 references/tech-adapters/nextjs-tailwind.md 生成代码：
- 项目结构：app/page.tsx、app/layout.tsx、components/、lib/utils.ts、tailwind.config.ts
- 组件化：每个 DESIGNNAS 元素独立组件（HeroSection、FeaturesSection 等）
- Tailwind 配置：扩展设计系统 Token（colors、fonts、animations）
- 响应式：使用 sm:/md:/lg:/xl: 断点
- 可访问性：语义 HTML、alt 文本、对比度、focus-visible
输出：完整可运行的 Next.js 项目代码。
Phase 5: 质量验证（闭环保障）
5.1 转化检查
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）未通过时，自动执行修复循环：
- 针对每个未通过的阻塞规则，生成具体修复代码
- 仅替换触发规则的 Section 代码（不修改无关 Section）
- 重新运行该规则的检测
- 重复上述步骤，最多 3 轮
- 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.mdassets/xxx.svgscripts/xxx.py
Agent 或用户按自身安装位置解析，不依赖任何绝对路径。
自包含原则
SKILL.md 包含所有必要信息，可直接复制使用。references/ 中的文件为深度知识补充，按需加载即可。
本 Skill 遵循 Agent Skills 开放协议。
