landing-page-design

name	landing-page-design
description	Create visually strong marketing or landing pages, hero sections, pricing pages, feature pages, launch pages, or concept mockups. Use when the user asks for 落地页, 官网首页, hero 区, 定价页, 产品介绍页, 宣传页, 视觉稿, 高保真页面, or wants a page that feels more branded and memorable than a standard SaaS layout.

Landing Page Design

这个技能面向“更偏视觉出图”的页面产出。目标不是先把真实业务逻辑接完，而是先做一个足够强的视觉概念页或营销页原型。

先读什么

• references/landing-page-patterns.md

何时使用

• 需要官网首页、产品页、定价页、活动页
• 需要为新功能先做一版高保真视觉稿
• 需要把“普通产品页”改成“有品牌记忆点的 landing page”

输出优先级

1. 先给出一个清晰的视觉方向命名
2. 先完成 hero 与首屏节奏
3. 再安排 proof、feature、workflow、pricing、FAQ、CTA
4. 最后才接真实数据或复杂交互

强制规则

• 首屏必须有一个明确记忆点：排版、装置、互动元素或构图之一
• 不要把所有 section 都做成相同卡片堆叠
• 文案和视觉必须互相支持，不要“很强的画面 + 很弱的标题”
• 优先做静态高保真原型，再考虑真实接线
• 可以用假数据、示例图、占位图，但结构必须像可上线产品

推荐页面骨架

1. Hero
2. Social proof / trust
3. Feature architecture
4. Workflow / how it works
5. Pricing or offer
6. Final CTA

如果页面较短，宁可少 section，也不要灌水。

视觉要求

• 营销页允许更强的对比、更大的字、更夸张的留白
• 字体策略优先参考“editorial / expressive”而不是纯产品后台样式
• 动效要集中在首屏和 section 进入，不要全页到处抖动
• 背景层要有氛围：网格、渐变、光晕、纹理、装置感，而不是纯白底