landing-page-guide-v2

Name: landing-page-guide-v2
Author: bear2u

Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.

TL;DR

Create distinctive, high-converting landing pages using proven conversion elements and bold design quality.

What Is It

Landing pages combining conversion elements with exceptional design
Next.js 14+ and ShadCN UI for production-ready code
Implementation of the 11 essential elements framework
Bold aesthetic directions that avoid generic AI aesthetics

Key Features

Follows the 11 essential elements framework for high conversion
Uses Next.js 14+ and ShadCN UI with TypeScript
Prioritizes bold, intentional aesthetic directions
Ensures design excellence in every element
MUST avoid generic AI aesthetics
CRITICAL: Choose ONE clear aesthetic direction
NEVER converge on common font choices (e.g., Inter, Roboto)
MUST define typography, color, motion, and layout system

How to Use

1.Commit to a bold aesthetic direction before coding
2.Define typography, color, and motion strategy for design system
3.Apply all 11 essential elements with functional and design excellence
4.Use SEO-optimized URLs, titles, and subtitles
5.Implement animated or dynamic header elements
6.Ensure brand consistency across all visual elements

Guardrails & Gotchas

CRITICAL: Choose ONE clear direction. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
NEVER converge on common choices - vary fonts across projects
MUST avoid generic AI aesthetics
MUST define a complete design system before coding