This skill should be used when the user asks to "create a VSL page", "build a video sales letter page", "VSL funnel page", or "sales video landing page". Creates complete, high-converting VSL page designs with video integration, supporting copy, and conversion elements using John Benson + Caleb O'Dowd hybrid methodology.
Install
npx skillscat add mikefilsaime-groove/clickcampaigns-for-claude-code-in-cursor/vsl-funnel-page Install via the SkillsCat registry.
This skill generates Video Sales Letter (VSL) funnel pages by combining video integration with supporting copy and conversion elements. It addresses the need for structured, high-converting landing pages that use video as the primary sales mechanism. Developers should use it when users request VSL page creation, video sales letter building, or sales video landing page development.
VSL Funnel Page Creation
Create high-converting Video Sales Letter (VSL) funnel pages that combine strategic video placement with supporting copy, social proof, and conversion elements for maximum sales.
Primary Objective
Create VSL funnel pages that:
- Feature video as the primary conversion mechanism
- Support the video with strategic copy elements
- Include multiple conversion touchpoints
- Build credibility and overcome objections
- Drive fast action with urgency elements
VSL Page Architecture
Above-The-Fold Hero Section
Video Player Placement:
- Large, prominent video player (60-70% viewport width)
- Auto-play consideration based on platform
- Custom thumbnail with play button overlay
- Progress bar visible but not distracting
Headline Above Video:
- Curiosity-driven headline that creates desire to watch
- Subheadline that expands on transformation promise
- Keep short—video is the main attraction
Example Headlines:
- "Watch This Short Video to Discover [Transformation]"
- "The [Timeframe] Video That Could Change Everything"
- "Before You [Action], Watch This First"
Below-Video Conversion Section
Immediate CTA:
- Clear, prominent button below video
- Benefit-driven text: "Get Instant Access" or "Start Your Transformation"
- High-contrast color (red, orange, or green)
- Arrow or urgency indicator
Urgency Element (if real):
- Countdown timer if deadline exists
- Limited spots indicator if genuine
- Price increase warning if scheduled
Supporting Copy Section (Optional Hybrid)
For skimmers who don't watch the video:
- Key bullet points hitting main benefits
- "What You'll Discover" section
- Brief transformation statement
Keep minimal—don't compete with video:
- 5-7 bullet points maximum
- Focus on outcomes, not features
- Use curiosity to drive video views
Social Proof Section
Testimonial Integration:
- Video testimonials are most powerful (thumbnail with play)
- Photo + quote testimonials with specific results
- Star ratings or aggregate proof
- "As Seen In" media logos if applicable
Placement:
- After first CTA for those who need more proof
- Before final CTA to reinforce decision
Value Stack Section
Visual Value Presentation:
- Each component with associated value
- Crossed-out "retail" price
- Special offer price prominently displayed
- Total value vs. investment contrast
Stack Elements:
- Core offer
- Bonuses (2-3 maximum)
- Guarantee value
- Total package value
Guarantee Section
Risk Reversal:
- Clear guarantee badge/seal
- Specific terms (30/60/90 days)
- What they can expect
- Easy refund process
Trust Elements:
- Secure checkout badges
- Money-back promise language
- "Nothing to lose" framing
FAQ Section
Objection Handling:
- 5-7 common questions
- Price objection
- Time/effort concern
- "Will this work for me?"
- Technical/access questions
- Guarantee/refund process
Final CTA Section
Strong Close:
- Recap key transformation
- Final urgency reminder
- Large, unmissable button
- Reminder of guarantee
Design Guidelines
Important: Follow user's chosen design era from their Brand Style Guide (Classic ClickFunnels or Modern Premium). See CLAUDE.md for full specifications.
Design Era Options
Classic ClickFunnels Style:
- Background: White (#FFFFFF) or light gray (#F7FAFC)
- Headlines: Dark (#1A202C), bold, high-impact
- CTA Buttons: Bright RED (#E53E3E), ORANGE (#ED8936), or GREEN (#38A169)
- Urgency: Yellow (#ECC94B) highlights, prominent countdown timers
- Feel: High-energy, aggressive conversion focus
Modern Premium Style:
- Dark theme: Dark backgrounds (#0c0a09), light text (#fafaf9)
- Light theme: White/cream backgrounds, dark text (#1e293b)
- CTA Buttons: Gradient buttons with subtle glow effects
- Typography: Elegant serif + clean sans-serif (e.g., Instrument Serif + DM Sans)
- Feel: Sophisticated, premium SaaS aesthetic
When to use brand colors:
- Only if user chose "DR with brand hints"
- Balanced approach: Brand accent colors on non-CTA elements
- Never brand-color the CTA button unless specifically asked
Layout Principles (Both Styles)
- Single column for focus
- Video is hero element
- Clear visual hierarchy
- Generous white space
- Mobile-responsive design
Typography
- Large, readable headlines
- Scannable bullet points
- Clear visual separation between sections
- Bold for emphasis on key points
HTML Output Requirements
When generating VSL pages, include:
- Complete HTML document structure
- Responsive CSS (mobile-first)
- Video embed placeholder:
[VIDEO EMBED HERE] - Form placeholder:
[CHECKOUT FORM HERE] - Image placeholders:
[TESTIMONIAL IMAGE],[PRODUCT IMAGE]
Quality Checklist
- Is the video player prominent and compelling?
- Does the headline create desire to watch?
- Are CTAs visible and benefit-driven?
- Does social proof feel authentic?
- Is the value stack clear and compelling?
- Does the guarantee reduce risk?
- Are objections preemptively handled?
- Is the page mobile-responsive?
Additional Resources
Reference Files
references/frameworks.md- VSL page frameworks and conversion optimization strategies
Create every VSL page as if it's the last chance to convert that visitor into a customer.