# Landing Page Skill

> >

- **Type:** Skill
- **Install:** `agentstack add skill-peterfei-landing-page-skill-landing-page-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [peterfei](https://agentstack.voostack.com/s/peterfei)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [peterfei](https://github.com/peterfei)
- **Source:** https://github.com/peterfei/landing-page-skill
- **Website:** https://github.com/peterfei/landing-page-skill

## Install

```sh
agentstack add skill-peterfei-landing-page-skill-landing-page-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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）
2. **选择美学方向**：从 `references/aesthetic-styles.md` 选择风格，确认配色倾向
3. **文案结构**：使用 `references/copy-formulas/` 规划：
   - Hero 标题：`references/copy-formulas/hero-headlines.md` 的 "结果 + 受众 + 机制" 公式
   - CTA 文案：`references/copy-formulas/cta-patterns.md` 的 "动词 + 利益" 格式
   - 异议处理：`references/copy-formulas/objection-handling.md` 的 5 类异议模板
4. **转化框架映射**：将 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](https://skills.sh) 开放协议。

## Source & license

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

- **Author:** [peterfei](https://github.com/peterfei)
- **Source:** [peterfei/landing-page-skill](https://github.com/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.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-peterfei-landing-page-skill-landing-page-skill
- Seller: https://agentstack.voostack.com/s/peterfei
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.