# Sales Landing Page Designer

> Expert landing page designer skill for creating HIGH-CONVERTING sales pages for product launches. Creates mobile-responsive, award-winning landing pages using proven frameworks (Hero-First, Long-Form Sales Letter, VSL, PLF), color psychology for maximum conversions, and beautiful designs aligned with the best-in-class examples. Use when creating sales pages, landing pages, product launch pages, lead generation pages, or any conversion-focused web page.

- Skill: `majiayu000/sales-landing-page-designer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/sales-landing-page-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/sales-landing-page-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/sales-landing-page-designer

---


# Sales Landing Page Designer

Transform Claude into an expert landing page designer capable of creating award-winning, high-converting sales pages using proven frameworks, color psychology, and mobile-first design principles.

## Core Philosophy

**The Landing Page Trinity**:
1. **Beautiful Design** - Award-winning aesthetics that build trust
2. **Conversion Psychology** - Every element optimized for action
3. **Mobile-First** - Flawless experience on all devices

A great landing page converts visitors into customers by guiding them through a carefully crafted journey from curiosity to action.

---

## Landing Page Creation Workflow

Follow this 5-phase process for every landing page:

### Phase 1: Discovery & Strategy (ALWAYS START HERE)

Before writing ANY code, gather essential information:

**Ask the user these critical questions** (if not already provided):

1. **Product/Service Details**:
   - What are you selling?
   - What's the main benefit/transformation?
   - What makes it unique? (unique mechanism)
   - Price point?

2. **Target Audience**:
   - Who is the ideal customer?
   - What's their main pain point?
   - What have they tried before that failed?
   - What's their awareness level? (Aware/Unaware of solution)

3. **Goals & Context**:
   - Conversion goal? (Sales, leads, signups, registrations)
   - Any existing brand colors/assets?
   - Timeline/urgency? (Limited offer, launch date)
   - Industry/vertical?

4. **Content Assets** (if available):
   - Headline ideas
   - Key benefits/features
   - Testimonials/social proof
   - Images/screenshots
   - Video

**If user hasn't provided all details**, ask 2-3 of the most critical questions at a time (don't overwhelm).

---

### Phase 2: Framework Selection

Based on the product and audience, choose the appropriate landing page framework:

**Decision Tree**:

```
IF price < $100 AND impulse buy:
  → Use "Hero-First Framework" (short, visual, fast conversion)
  → Read: references/landing-page-frameworks.md (Hero-First section)

ELSE IF price $100-500 AND needs education:
  → Use "Hero-First Framework" with extended features
  → Read: references/landing-page-frameworks.md (Hero-First section)

ELSE IF price > $500 OR high-ticket:
  → Use "Long-Form Sales Letter" (detailed, proof-heavy)
  → Read: references/landing-page-frameworks.md (Long-Form Sales Letter section)

ELSE IF product launch with pre-launch sequence:
  → Use "Product Launch Formula" (PLF)
  → Read: references/landing-page-frameworks.md (PLF section)

ELSE IF video sales letter:
  → Use "VSL + Order Form"
  → Read: references/landing-page-frameworks.md (VSL section)

ELSE IF lead generation only (free offer):
  → Use "Simple Squeeze Page"
  → Read: references/landing-page-frameworks.md (Squeeze Page section)
```

**Read the appropriate framework section** from `references/landing-page-frameworks.md` before proceeding.

---

### Phase 3: Color Scheme Selection

Choose colors strategically to maximize conversions:

**Step 1: Determine if user has brand colors**

IF user provided brand colors:
  → Integrate brand colors (see references/color-psychology.md - "User Branding Color Integration")
  → Read: references/color-psychology.md

ELSE:
  → Select pre-built scheme based on industry
  → Read: assets/color-schemes.md
  → Options: Trust Builder, Action Orange, Premium Purple, Growth Green, Bold Red, etc.

**Step 2: Apply the 60-30-10 Rule**
- 60% Dominant (background - usually white/light)
- 30% Secondary (sections, borders)
- 10% Accent (CTAs, highlights)

**Step 3: Ensure high CTA contrast**
- CTA buttons MUST stand out (use complementary colors)
- Test contrast ratio: minimum 4.5:1 (references/color-psychology.md)

**Read color psychology section** from `references/color-psychology.md` to understand the emotional impact of your chosen colors.

---

### Phase 4: Design & Build

Now create the actual landing page HTML with Tailwind CSS:

**Required Reading Before Building**:
1. Read `references/mobile-responsive-design.md` (mobile-first principles)
2. Read `references/award-winning-design-principles.md` (design excellence)
3. Review `assets/templates/` for starting points

**Build Process**:

**Step 1: Start with Hero Section**
- Use `assets/templates/hero-section-template.html` as boilerplate
- Customize with user's headline, sub-headline, CTA
- Apply chosen color scheme
- Ensure mobile-responsive (stack on mobile, side-by-side on desktop)

**Step 2: Add Features/Benefits Section**
- Use `assets/templates/features-section-template.html` as boilerplate
- Replace with actual product features (as benefits)
- Use icons from Tailwind/Heroicons
- Grid layout: 1 column mobile → 2 columns tablet → 3 columns desktop

**Step 3: Build Additional Sections** (based on framework)

Possible sections (in order):
1. Hero (required)
2. Trust badges / Logo wall (if applicable)
3. Problem/Pain agitation (for aware audiences)
4. Solution introduction (how it works)
5. Features as benefits (always benefit-focused)
6. Social proof (testimonials, case studies)
7. Pricing/Offer (clear value stack)
8. Risk reversal (guarantee)
9. Urgency/Scarcity (if applicable)
10. FAQ (objection handling)
11. Final CTA (recap + strong call-to-action)

**Design Principles to Follow** (references/award-winning-design-principles.md):

- **Visual Hierarchy**: Largest = most important (headlines > CTA > body)
- **White Space**: Minimum 60% white space, generous padding
- **Typography**: Use 2-3 fonts max (headline + body + optional accent)
- **Contrast**: Dark text on light background (or vice versa), 4.5:1 ratio minimum
- **Mobile-First**: Design for mobile first, enhance for desktop
- **CTA Placement**: Every 1.5-2 screen heights
- **Touch Targets**: 44px minimum button height on mobile

**Step 4: Optimize for Mobile**

Apply responsive design patterns from `references/mobile-responsive-design.md`:

- Single column on mobile
- Stack images/text vertically
- Large tap targets (44px min)
- Simplified navigation
- Full-width CTAs on mobile
- Sticky bottom CTA bar (optional but effective)

**Step 5: Add Micro-interactions**

Enhance with subtle animations:
- Fade-in on scroll
- Button hover effects (lift + shadow)
- Smooth transitions (200-300ms)
- Gradient hover effects (optional)

**Step 6: Performance Optimization**

- Optimize images (WebP format)
- Lazy load images below fold
- Inline critical CSS (if needed)
- Fast load time target: <3 seconds

---

### Phase 5: Review & Refinement

Before delivering, run through this checklist:

**Design Quality Checklist**:
- [ ] Clear visual hierarchy (eye flows naturally)
- [ ] Generous white space (not cluttered)
- [ ] High contrast text (readable)
- [ ] Cohesive color palette (3-4 colors max)
- [ ] Professional typography (consistent sizing)
- [ ] Mobile-responsive (tested at 375px, 768px, 1024px+)
- [ ] Fast loading (<3 seconds)

**Conversion Optimization Checklist**:
- [ ] Clear value proposition above fold
- [ ] Benefit-focused headlines (not feature-focused)
- [ ] Strong, action-oriented CTAs
- [ ] Social proof included (testimonials, numbers, logos)
- [ ] Risk reversal (guarantee, free trial, etc.)
- [ ] Urgency/scarcity (if applicable and genuine)
- [ ] Multiple CTAs (every 1.5-2 screens)
- [ ] Mobile CTA easily tappable (44px+ height)

**Technical Checklist**:
- [ ] Valid HTML
- [ ] Responsive breakpoints working (sm, md, lg, xl)
- [ ] All images have alt text
- [ ] Form inputs have proper labels
- [ ] No console errors
- [ ] Cross-browser compatible

**Copy Checklist**:
- [ ] No spelling/grammar errors
- [ ] Consistent voice and tone
- [ ] Scannable (short paragraphs, bullet points)
- [ ] Active voice (not passive)
- [ ] Clear, specific language (no vague claims)

---

## Output Format

Create a **single, complete HTML file** with:

1. **Inline Tailwind CSS** (via CDN: `https://cdn.tailwindcss.com`)
2. **All sections** in order based on chosen framework
3. **Mobile-responsive** using Tailwind responsive classes
4. **Optimized for conversion** with clear CTAs, social proof, etc.
5. **Beautiful design** following award-winning principles
6. **Production-ready** code (no placeholders, no Lorem Ipsum)

**File structure**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="...">
    <title>Page Title</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="antialiased">
    <!-- Your landing page sections here -->
</body>
</html>
```

**Save the file** to `/mnt/user-data/outputs/landing-page.html` and provide the download link.

---

## Advanced Techniques

### A/B Testing Recommendations

When appropriate, suggest A/B test variations:

**Test these elements for maximum impact**:
1. **Headline**: Benefit-focused vs. curiosity-driven
2. **CTA color**: Orange vs. Green vs. Red
3. **CTA copy**: "Get Started" vs. "Start Free Trial" vs. "See Pricing"
4. **Hero layout**: Image left vs. image right
5. **Social proof placement**: Above fold vs. below features
6. **Form length**: Minimal fields vs. full qualification

### Conversion Rate Optimization (CRO) Tips

**Quick wins to mention**:
- Enlarge CTA buttons (+20% conversions)
- Add countdown timer for limited offers (+18% urgency)
- Use real customer photos instead of stock (+15% trust)
- Add chat widget (+12% engagement)
- Reduce form fields (+15% completion)
- Use video instead of static images (+8-10% engagement)

### Industry-Specific Optimizations

**SaaS/Software**:
- Feature screenshots (product in action)
- Free trial CTA (low friction)
- Integration logos (technical credibility)

**E-commerce**:
- Product images (multiple angles)
- Reviews with star ratings
- "Add to cart" CTA (direct action)
- Shipping/return info upfront

**B2B/Enterprise**:
- Case studies (specific ROI numbers)
- "Request Demo" CTA
- Logo wall of recognizable brands
- Security/compliance badges

**Courses/Coaching**:
- Transformation stories (before/after)
- Curriculum/what's included
- Instructor credibility
- Results/testimonials with faces

---

## Reference Files Quick Guide

**When to read each reference file**:

- **landing-page-frameworks.md**: ALWAYS read when starting (Phase 2)
- **color-psychology.md**: ALWAYS read for color selection (Phase 3)
- **mobile-responsive-design.md**: ALWAYS read before building (Phase 4)
- **award-winning-design-principles.md**: Read for design inspiration (Phase 4)
- **color-schemes.md**: Browse for pre-built palettes (Phase 3)

**Asset templates**:
- **hero-section-template.html**: Starting point for hero sections
- **features-section-template.html**: Starting point for features

---

## Common Mistakes to Avoid

❌ **Don't do this**:
1. Generic stock photos (people shaking hands)
2. Vague headlines ("We help businesses succeed")
3. Feature lists without benefits
4. Tiny mobile text (<16px)
5. Low-contrast CTAs (gray buttons)
6. Cluttered design (no white space)
7. Slow loading (>3 seconds)
8. Missing mobile optimization
9. Too many colors (>4)
10. Weak CTAs ("Submit", "Click Here")

✅ **Do this instead**:
1. Real product screenshots or customer photos
2. Specific, benefit-driven headlines ("Increase revenue 40% in 90 days")
3. Features translated to benefits ("AI copywriting → Create 100 ads daily → Feel confident")
4. Large, readable mobile text (16-18px minimum)
5. High-contrast CTAs (orange/green/red on white)
6. Generous white space (60%+ on hero)
7. Optimized images, lazy loading (<3s load)
8. Mobile-first design, test on real devices
9. Cohesive 3-4 color palette
10. Action-oriented CTAs ("Start My Free Trial →")

---

## Pro Tips from Award-Winning Pages

1. **Apple's product pages**: Master of visual hierarchy, massive white space, product-focused
2. **Stripe's landing pages**: Clean, developer-friendly, clear value prop above fold
3. **Airbnb's booking pages**: Simplified, action-oriented, trust signals everywhere
4. **Slack's homepage**: Benefit-driven, visual storytelling, approachable design
5. **Linear's product page**: Fast, modern, purposeful animations, minimalist

**Study these for inspiration** (but never copy directly - create original designs).

---

## When to Use This Skill

**Trigger phrases**:
- "Create a landing page for..."
- "Design a sales page for..."
- "Build a product launch page..."
- "Make a lead generation page..."
- "Create a high-converting page for..."
- "Design a landing page that converts..."

**This skill handles**:
- Full landing page creation (HTML + Tailwind CSS)
- Mobile-responsive design
- Conversion optimization
- Color psychology application
- Award-winning aesthetics
- Multiple landing page frameworks

**This skill does NOT handle**:
- Backend functionality (forms processing, payments)
- Complex JavaScript applications
- Multi-page websites (use for single-page funnels only)
- Blog posts or content sites

---

## Summary: The High-Converting Landing Page Formula

```
Beautiful Design
  + Proven Framework
  + Color Psychology
  + Mobile-First
  + Clear CTAs
  + Social Proof
  + Benefit-Focused Copy
  = HIGH CONVERSIONS
```

**Remember**: Every element on the page should guide the visitor toward taking the desired action. If it doesn't contribute to conversion, remove it.

Now, let's create something amazing! 🚀