landing-page-guide-v2 by bear2u/my-skills
npx skills add https://github.com/bear2u/my-skills --skill landing-page-guide-v2此技能支持创建独特、高转化率的着陆页,结合了:
核心理念:一个着陆页必须转化访客并且让他们记住你的品牌。通用、模板化的页面在这两方面都失败了。此技能确保你的着陆页在功能上有效且在视觉上非凡。
当用户请求以下内容时使用此技能:
在实现任何着陆页之前,先确定一个与品牌和产品相符的大胆美学方向:
选择一个极致的方向并完全投入。例如:
极简与精致
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
大胆与极繁
复古未来主义
有机与自然
编辑与杂志
粗野主义与原始
关键:选择一个清晰的方向。大胆的极繁主义和精致的极简主义都有效——关键是意图性,而非强度。在所有 11 个元素中精确且一致地执行你选择的方向。
在编码之前,定义这些核心决策:
排版选择
调色板
动效策略
animation-delay空间布局方法
每个有效的着陆页都必须包含这 11 个必备元素。这些元素基于 DESIGNNAS 经过验证的高转化率着陆页框架。
每个元素都有两个要求:
功能:SEO 优化的、描述性的 URL 结构 设计:不适用(专注于 SEO)
功能:品牌标识放置在显著位置(左上角) 设计卓越性:
功能:清晰的价值主张,包含关键词 设计卓越性:
animation-delay)为标题文字添加动画功能:英雄区的主要行动号召按钮 设计卓越性:
功能:评论、评分、用户统计数据 设计卓越性:
功能:产品/服务的视觉展示 设计卓越性:
功能:3-6 个关键优势,带有图标 设计卓越性:
功能:4-6 个真实评论,带有照片 设计卓越性:
功能:5-10 个常见问题,带有手风琴式 UI 设计卓越性:
功能:底部的行动号召,提供第二次转化机会 设计卓越性:
功能:包含完整信息、法律链接的页脚 设计卓越性:
关键:所有 11 个元素必须包含在每个着陆页中。没有例外。
关于每个元素的详细解释,请参考 references/11-essential-elements.md。
animation-delay: 0ms, 100ms, 200ms)transform 和 opacity(GPU 加速)width、height、top、left这些模式会让着陆页看起来"AI 生成"且容易被遗忘:
不要:
要:
创建着陆页时,始终使用:
在创建任何着陆页之前,确保安装了这些组件:
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add input
重要:ShadCN 组件是起点,不是最终设计。要对它们进行大量自定义:
className 属性覆盖使用此结构创建着陆页:
landing-page/
├── app/
│ ├── layout.tsx # 根布局,包含元数据
│ ├── page.tsx # 主着陆页
│ └── globals.css # 全局样式
├── components/
│ ├── Header.tsx # Logo 和导航(元素 2)
│ ├── Hero.tsx # 标题、行动号召、社会证明(元素 3-5)
│ ├── MediaSection.tsx # 图片/视频(元素 6)
│ ├── Benefits.tsx # 核心优势(元素 7)
│ ├── Testimonials.tsx # 客户评价(元素 8)
│ ├── FAQ.tsx # 常见问题解答手风琴(元素 9)
│ ├── FinalCTA.tsx # 底部行动号召(元素 10)
│ └── Footer.tsx # 联系方式和法律信息(元素 11)
├── public/
│ └── images/ # 优化后的图片
└── package.json
在编写任何代码之前,完成设计思维部分:
在你的主组件文件顶部以注释形式记录这些决策。
创建 globals.css 或 app.css 并包含你的设计系统:
@import url('https://fonts.googleapis.com/css2?family=Your+Display+Font&family=Your+Body+Font&display=swap');
:root {
/* Typography */
--font-display: 'Your Display Font', sans-serif;
--font-body: 'Your Body Font', sans-serif;
/* Colors */
--color-primary: #your-dominant-color;
--color-accent: #your-accent-color;
--color-neutral: #your-neutral-color;
--color-background: #your-bg-color;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 6rem;
/* Animation timing */
--duration-fast: 150ms;
--duration-medium: 300ms;
--duration-slow: 500ms;
--easing: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Apply fonts */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
}
body {
font-family: var(--font-body);
}
更新 tailwind.config.ts 以使用你的设计系统:
export default {
theme: {
extend: {
fontFamily: {
display: ['var(--font-display)'],
body: ['var(--font-body)'],
},
colors: {
primary: 'var(--color-primary)',
accent: 'var(--color-accent)',
// ... etc
},
},
},
}
在 layout.tsx 或 page.tsx 中配置适当的 SEO 元数据:
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'SEO Optimized Title with Keywords | Brand Name',
description: 'Compelling description with main keywords',
keywords: ['keyword1', 'keyword2', 'keyword3'],
openGraph: {
title: 'OG Title',
description: 'OG Description',
images: ['/og-image.jpg'],
},
}
按此顺序构建组件,将你的美学方向应用到每个组件:
将区块映射到 ShadCN 组件并大量自定义:
Hero 行动号召示例:
<Button
size="lg"
className="bg-accent hover:bg-accent/90 text-white px-12 py-6 text-xl font-display rounded-full shadow-2xl hover:shadow-accent/50 hover:scale-105 transition-all duration-300"
>
Get Started →
</Button>
Benefits 卡片示例:
<Card className="border-2 border-primary/10 hover:border-primary/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 bg-gradient-to-br from-white to-primary/5">
{/* Custom content */}
</Card>
添加入场动画和滚动效果:
// Hero title with staggered animation
<h1 className="text-6xl font-display font-bold">
<span className="inline-block animate-fade-in" style={{ animationDelay: '0ms' }}>
Beautiful
</span>{' '}
<span className="inline-block animate-fade-in" style={{ animationDelay: '100ms' }}>
Landing
</span>{' '}
<span className="inline-block animate-fade-in" style={{ animationDelay: '200ms' }}>
Pages
</span>
</h1>
// Add to globals.css
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fade-in var(--duration-slow) var(--easing) both;
}
对于滚动动画,使用 Intersection Observer 或 Framer Motion。
确保移动优先的响应式设计,并保持品牌一致性:
sm:、md:、lg:、xl:Image 组件priority 属性font-display: swap<header>、<main>、<section>、<footer>)@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
关于使用 ShadCN UI 的完整、生产就绪的组件实现,请参考 references/component-examples.md。
此参考文件包括:
在实现组件时加载此参考以遵循最佳实践。
在完成任何着陆页之前,验证所有项目:
animation-delay 创造节奏感和流畅性prefers-reduced-motion——始终如此cubic-bezier(0.4, 0, 0.2, 1) 平滑且专业font-display: swap 避免 FOIT(不可见文本闪烁)每种着陆页类型都有不同的转化目标并且可以表达独特的美学:
转化重点:免费试用行动号召、功能比较、定价清晰度、安全徽章 美学建议:
转化重点:产品图片、定价、配送信息、退货政策、紧迫感 美学建议:
转化重点:作品集/案例研究、流程说明、团队资质、联系表单 美学建议:
转化重点:日期/时间突出显示、演讲者简介、议程、注册表单、倒计时器 美学建议:
转化重点:应用商店徽章、设备框架内的截图、功能亮点、演示视频 美学建议:
此技能包含详细的参考文档:
11-essential-elements.md - 对 11 个必备元素的深入解释,包括原则、实施技巧和示例component-examples.md - 使用 ShadCN UI 的完整、生产就绪的组件代码,适用于所有主要区块在实现特定区块或需要任何元素的详细指导时,根据需要加载这些参考。
转化指标:
This skill enables creation of distinctive, high-converting landing pages that combine:
Philosophy : A landing page must convert visitors AND make them remember your brand. Generic, template-looking pages fail at both. This skill ensures your landing pages are functionally effective and visually extraordinary.
Use this skill when users request:
Before implementing any landing page, commit to a BOLD aesthetic direction that aligns with the brand and product:
Pick an extreme direction and commit fully. Examples:
Minimalist & Refined
Bold & Maximalist
Retro-Futuristic
Organic & Natural
Editorial & Magazine
Brutalist & Raw
CRITICAL : Choose ONE clear direction. Bold maximalism and refined minimalism both work - the key is intentionality , not intensity. Execute your chosen direction with precision and consistency across all 11 elements.
Before coding, define these core decisions:
Typography Choices
Color Palette
Motion Strategy
Spatial Approach
Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages.
Each element has TWO requirements:
Functional : SEO-optimized, descriptive URL structure Design : N/A (SEO-focused)
Functional : Brand identity placed prominently (top-left) Design Excellence :
Functional : Clear value proposition with keywords Design Excellence :
Functional : Main call-to-action button in hero section Design Excellence :
Functional : Reviews, ratings, user statistics Design Excellence :
Functional : Visual demonstration of product/service Design Excellence :
Functional : 3-6 key advantages with icons Design Excellence :
Functional : 4-6 authentic reviews with photos Design Excellence :
Functional : 5-10 common questions with accordion UI Design Excellence :
Functional : Bottom call-to-action for second chance conversion Design Excellence :
Functional : Footer with complete information, legal links Design Excellence :
Critical: All 11 elements must be included in every landing page. No exceptions.
For detailed explanations of each element, refer to references/11-essential-elements.md.
transform and opacity (GPU-accelerated)width, height, top, leftThese patterns make landing pages look "AI-generated" and forgettable:
DON'T:
DO:
When creating landing pages, always use:
Before creating any landing page, ensure these components are installed:
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add input
IMPORTANT : ShadCN components are STARTING POINTS, not final designs. Customize them heavily:
Create landing pages with this structure:
landing-page/
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Main landing page
│ └── globals.css # Global styles
├── components/
│ ├── Header.tsx # Logo & Navigation (Element 2)
│ ├── Hero.tsx # Title, CTA, Social Proof (Elements 3-5)
│ ├── MediaSection.tsx # Images/Videos (Element 6)
│ ├── Benefits.tsx # Core Benefits (Element 7)
│ ├── Testimonials.tsx # Customer Reviews (Element 8)
│ ├── FAQ.tsx # FAQ Accordion (Element 9)
│ ├── FinalCTA.tsx # Bottom CTA (Element 10)
│ └── Footer.tsx # Contact & Legal (Element 11)
├── public/
│ └── images/ # Optimized images
└── package.json
Before writing ANY code , complete the Design Thinking section:
Document these decisions in comments at the top of your main component file.
Create globals.css or app.css with your design system:
@import url('https://fonts.googleapis.com/css2?family=Your+Display+Font&family=Your+Body+Font&display=swap');
:root {
/* Typography */
--font-display: 'Your Display Font', sans-serif;
--font-body: 'Your Body Font', sans-serif;
/* Colors */
--color-primary: #your-dominant-color;
--color-accent: #your-accent-color;
--color-neutral: #your-neutral-color;
--color-background: #your-bg-color;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 6rem;
/* Animation timing */
--duration-fast: 150ms;
--duration-medium: 300ms;
--duration-slow: 500ms;
--easing: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Apply fonts */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
}
body {
font-family: var(--font-body);
}
Update tailwind.config.ts to use your design system:
export default {
theme: {
extend: {
fontFamily: {
display: ['var(--font-display)'],
body: ['var(--font-body)'],
},
colors: {
primary: 'var(--color-primary)',
accent: 'var(--color-accent)',
// ... etc
},
},
},
}
Configure proper SEO metadata in layout.tsx or page.tsx:
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'SEO Optimized Title with Keywords | Brand Name',
description: 'Compelling description with main keywords',
keywords: ['keyword1', 'keyword2', 'keyword3'],
openGraph: {
title: 'OG Title',
description: 'OG Description',
images: ['/og-image.jpg'],
},
}
Build components in this order, applying your aesthetic direction to each:
Map sections to ShadCN components and customize heavily :
Hero CTA Example:
<Button
size="lg"
className="bg-accent hover:bg-accent/90 text-white px-12 py-6 text-xl font-display rounded-full shadow-2xl hover:shadow-accent/50 hover:scale-105 transition-all duration-300"
>
Get Started →
</Button>
Benefits Card Example:
<Card className="border-2 border-primary/10 hover:border-primary/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 bg-gradient-to-br from-white to-primary/5">
{/* Custom content */}
</Card>
Add entrance animations and scroll effects:
// Hero title with staggered animation
<h1 className="text-6xl font-display font-bold">
<span className="inline-block animate-fade-in" style={{ animationDelay: '0ms' }}>
Beautiful
</span>{' '}
<span className="inline-block animate-fade-in" style={{ animationDelay: '100ms' }}>
Landing
</span>{' '}
<span className="inline-block animate-fade-in" style={{ animationDelay: '200ms' }}>
Pages
</span>
</h1>
// Add to globals.css
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fade-in var(--duration-slow) var(--easing) both;
}
For scroll animations, use Intersection Observer or Framer Motion.
Ensure mobile-first responsive design with brand consistency:
sm:, md:, lg:, xl:Image component for all imagespriority prop to above-the-fold images (hero section)font-display: swap for web fontsUse semantic HTML5 elements (<header>, <main>, <section>, <footer>)
Add ARIA labels for icon-only buttons
Ensure keyboard navigation works (test with Tab key)
Provide descriptive alt text for all images
Maintain sufficient color contrast (WCAG AA minimum: 4.5:1 for text)
Test animations for users who prefer reduced motion:
@media (prefers-reduced-motion: reduce) {
For complete, production-ready component implementations using ShadCN UI, refer to references/component-examples.md.
This reference file includes:
Load this reference when implementing components to follow best practices.
Before completing any landing page, verify ALL items:
animation-delay to create rhythm and flowprefers-reduced-motion - alwayscubic-bezier(0.4, 0, 0.2, 1) is smooth and professionalfont-display: swap to avoid FOIT (Flash of Invisible Text)Each landing page type has different conversion goals AND can express unique aesthetics:
Conversion Focus : Free trial CTA, feature comparisons, pricing clarity, security badges Aesthetic Recommendations :
Conversion Focus : Product images, pricing, shipping info, return policy, urgency Aesthetic Recommendations :
Conversion Focus : Portfolio/case studies, process explanation, team credentials, contact form Aesthetic Recommendations :
Conversion Focus : Date/time prominence, speaker profiles, agenda, registration form, countdown timer Aesthetic Recommendations :
Conversion Focus : App Store badges, screenshots in device frames, feature highlights, demo video Aesthetic Recommendations :
This skill includes detailed reference documentation:
11-essential-elements.md - In-depth explanation of each of the 11 essential elements with principles, implementation tips, and examplescomponent-examples.md - Complete, production-ready component code using ShadCN UI for all major sectionsLoad these references as needed when implementing specific sections or when you need detailed guidance on any element.
Conversion metrics:
Brand metrics:
Every landing page is an opportunity to make an unforgettable first impression. The 11 essential elements ensure conversions. Exceptional design ensures they remember your brand. Never sacrifice one for the other.
The best landing pages convert AND inspire.
Weekly Installs
538
Repository
GitHub Stars
776
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode484
codex460
gemini-cli459
github-copilot421
cursor387
claude-code381
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
103,800 周安装