# Landing page guide v2 Human Guide

## What This Is For
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. It gives the agent a clearer input/output frame for conversion optimization: what context to ask for, what decisions to make, and what usable artifact to return.

Use this as a human-readable version of the Landing page guide v2 agent skill. It is meant for marketers, operators, founders, and other non-coders who want the workflow without reading agent-specific implementation instructions.

## When To Use This
- Use this when you need a repeatable process for landing page guide v2.
- Use this when the task needs judgment, examples, constraints, or a clear output format rather than a one-off prompt.
- Use this when you want to hand an AI assistant enough context to produce a usable marketing artifact.

## When Not To Use This
- Do not use this when you only need a quick factual answer.
- Do not use this when the work depends on private data you cannot share with the assistant.
- Do not use this as a replacement for legal, compliance, financial, or medical review.

## What You Need Before Starting
- The goal or business outcome you want.
- The audience, customer segment, or market context.
- Any source material the assistant should respect, such as notes, briefs, examples, URLs, or brand guidance.
- Constraints such as tone, length, channel, deadline, region, or approval requirements.
- A clear definition of what a good final answer should look like.

## Step-By-Step Workflow
1. State the job clearly: "Use the Landing page guide v2 guide to help me with..."
2. Add context: audience, goal, offer, channel, source material, and constraints.
3. Ask the assistant to identify missing inputs before producing the final output.
4. Have the assistant follow the skill-specific guidance below.
5. Review the result against the final checklist and ask for revisions where needed.

## Skill-Specific Guidance
- **Proven Conversion Framework**: 11 essential elements from DESIGNNAS for high conversion rates
- **Exceptional Design Quality**: Bold aesthetic choices that create unforgettable brand experiences
- **Production-Ready Code**: Next.js 14+ with ShadCN UI, TypeScript, and performance optimization
- Creation of landing pages, marketing pages, or product pages
- Next.js or React-based promotional websites
- Pages that need to convert visitors into customers AND stand out visually
- Professional marketing pages with exceptional design quality
- Landing pages that avoid generic "template" aesthetics
- Brand experiences that are both conversion-optimized and memorable
- **Purpose**: What problem does this product solve? Who is the target audience?
- **Brand Personality**: Is this brand playful, professional, luxury, minimalist, bold, technical?
- **Industry**: What visual language does this industry expect (or should we break)?

## Decision Points And Nuance
The original skill emphasizes: Overview, When to Use This Skill, Design Thinking: Before You Code, Understand Context, Choose an Aesthetic Direction, Define Your Design System, The 11 Essential Elements Framework, Element-by-Element Design Guide, URL with Keywords, Company Logo (Header).

Use these questions to steer the work:
- What is the intended audience or buyer?
- What source material must be preserved?
- What should the assistant optimize for: clarity, persuasion, accuracy, speed, creativity, or conversion?
- What examples represent the desired quality bar?
- What should the assistant avoid?

## Common Mistakes
- Landing pages that avoid generic "template" aesthetics
- **NEVER** converge on common choices - vary fonts across different projects
- Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages.
- **Functional requirement** (for conversion) - Must be included
- **Design excellence** (for memorability) - Must be distinctive and beautiful
- Avoid boring rectangles: consider pill shapes, unique borders, or geometric shapes
- **CRITICAL**: Never use placeholder or generic images
- **Icons**: Custom designed or carefully selected (NOT generic line icons)

## Copy-And-Paste Prompt
```text
Use the Landing page guide v2 human guide.

My goal:
[Describe the business outcome]

Audience:
[Describe who this is for]

Context and source material:
[Paste notes, examples, links, or existing copy]

Constraints:
[Tone, length, channel, timeline, must-include items, must-avoid items]

Before producing the final output, ask me for any missing information that would materially improve the result.
```

## Final Checklist
- [ ] The output matches the original goal.
- [ ] The audience and context are reflected in the answer.
- [ ] Important constraints and source material were preserved.
- [ ] The assistant made the relevant decisions explicit.
- [ ] The final artifact is ready to use, review, or hand to the next person.

## Source
This guide was generated from the bear2u/my-skills skill entry for `landing-page-guide-v2`.

## Source Skill Notes
These notes preserve the nuance from the original skill. Use them as supporting reference when the workflow above feels too generic.

# Landing Page Guide V2

## Overview

This skill enables creation of **distinctive, high-converting landing pages** that combine:
- **Proven Conversion Framework**: 11 essential elements from DESIGNNAS for high conversion rates
- **Exceptional Design Quality**: Bold aesthetic choices that create unforgettable brand experiences
- **Production-Ready Code**: Next.js 14+ with ShadCN UI, TypeScript, and performance optimization

**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.

## When to Use This Skill

Use this skill when users request:
- Creation of landing pages, marketing pages, or product pages
- Next.js or React-based promotional websites
- Pages that need to convert visitors into customers AND stand out visually
- Professional marketing pages with exceptional design quality
- Landing pages that avoid generic "template" aesthetics
- Brand experiences that are both conversion-optimized and memorable

## Design Thinking: Before You Code

Before implementing any landing page, commit to a **BOLD aesthetic direction** that aligns with the brand and product:

### 1. Understand Context
- **Purpose**: What problem does this product solve? Who is the target audience?
- **Brand Personality**: Is this brand playful, professional, luxury, minimalist, bold, technical?
- **Industry**: What visual language does this industry expect (or should we break)?
- **Differentiation**: What makes this brand unforgettable? What's the ONE thing visitors will remember?

### 2. Choose an Aesthetic Direction

Pick an extreme direction and commit fully. Examples:

**Minimalist & Refined**
- Brutally clean layouts, generous whitespace
- Sophisticated typography with large scale contrasts
- Monochromatic or limited color palette (2-3 colors max)
- Subtle micro-interactions, elegant transitions
- Examples: Luxury products, professional services, premium SaaS

**Bold & Maximalist**
- Rich, complex visual layers
- Dynamic animations and scroll effects
- Gradient meshes, textures, and overlapping elements
- Vibrant color palettes with high contrast
- Examples: Creative agencies, entertainment, youth brands

**Retro-Futuristic**
- Nostalgic elements with modern execution
- Geometric patterns, neon accents
- Glitch effects, scanlines, grain textures
- Monospace or display fonts with character
- Examples: Gaming, tech startups, creative tools

**Organic & Natural**
- Soft, flowing shapes and gradients
- Nature-inspired colors (earth tones, pastels)
- Smooth animations mimicking natural motion
- Rounded corners, soft shadows
- Examples: Wellness, sustainability, food

**Editorial & Magazine**
- Strong typographic hierarchy
- Grid-breaking asymmetric layouts
- Large, impactful imagery
- Bold use of whitespace and negative space
- Examples: Content platforms, media, education

**Brutalist & Raw**
- Unconventional layouts, intentional "ugly"
- System fonts or deliberately basic typography
- High contrast, limited color
- Minimal or no animations
- Examples: Art, fashion, anti-establishment brands

**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.

### 3. Define Your Design System