Landing Craft

Landing Craft

Landing pages that convert. Based on Unbounce (44,000+ A/B tests), GoodUI, CXL Institute, and WiderFunnel LIFT Model.

Creative Variance Engine

Before writing code, select ONE combination based on the brief. This prevents every landing page from looking the same.

Vibe Archetypes (pick 1)

| Archetype | Palette | Typography | Best for | |-----------|---------|------------|----------| | Editorial Luxury | Warm cream (#f5f2ec), deep charcoal, ink-blue accent | Serif display (Cormorant Garamond, Playfair Display) + clean body | B2B, consulting, premium SaaS | | Dark Atmospheric | Deep navy (#080c1a), off-white text, burnt orange accent | Bold condensed display (Cabinet Grotesk, Space Grotesk) | Tech, AI, developer tools | | Soft Structural | White (#ffffff), zinc neutrals, single accent | Grotesk display (Geist, Plus Jakarta Sans) | SaaS, productivity, health | | Minimalist Editorial | Warm bone (#f7f6f3), strict 1px borders, muted pastels | Serif + system sans-serif | Portfolios, indie products |

Layout Archetypes (pick 1)

| Archetype | Structure | Mobile | |-----------|-----------|--------| | Split Screen | 50/50: text left, visual right. Clean alignment, no center. | Stack vertical: text on top, visual below | | Asymmetric Bento | Masonry grid with varying card sizes. col-span-8 next to col-span-4. | Single column. All col-span overrides reset to 1 | | Editorial Z-Cascade | Elements overlap with slight rotation (-2deg to 3deg). Depth through stacking. | Remove all rotations and negative margins. Stack vertically. | | Full-Bleed Typography | Hero is pure typography. No image. Text spans viewport width. | Text scales down via clamp(). No overflow. |

Mobile override (universal): Any asymmetric layout above md: (768px) must collapse to single-column (w-full, px-4, py-8) on viewports below 768px.

---

Workflow

Step 1: Select creative archetype

Pick one vibe + layout from the Creative Variance Engine. Every page must feel distinct.

Step 2: Wireframe the sections

Block out all 10 sections (Hero through Final CTA). Each section answers: what does the visitor need to hear RIGHT NOW to move forward?

Step 3: Draft copy

Headline under 10 words. One CTA above fold. Social proof near top. Use PAS framework for problem section.

Step 4: Implement with mobile-first HTML/CSS

8px grid. clamp() for fluid typography. No centered hero text. Grain overlay (opacity 0.03-0.06).

Step 5: Optimize for Core Web Vitals

Preload hero image. Inline critical CSS. Lazy-load below-fold images. Target LCP textvisual | Default. Works for everything. | | Text-bleed | Hero text | Strong brand, confident product | | 3D perspective | Hero | Creative, premium, editorial | | Negative space | textvisual` | Editorial, luxury |

---

Design Palette

| Element | Specification | |---------|---------------| | Background | Dark (#080808) or cream (#f5f2ec). Never flat #ffffff or #f5f5f5 | | Headline | Editorial serif or bold display. clamp(2.5rem, 5vw, 4.5rem) | | Body | Clean sans. Min 16px. Line height 1.6 | | Spacing | 8px base. Section: clamp(4rem, 8vw, 8rem) | | Texture | Grain overlay: opacity 0.03-0.06 | | Icons | Lucide or Phosphor. No emoji icons. | | Motion | Subtle scroll-triggered. Parallax or 3D on hero. No gratuitous animation. |

---

CRO Methodology

LIFT Model (WiderFunnel)

Evaluate every element against these six factors:

| Factor | Question | Measurement | |--------|----------|-------------| | Value proposition | Does this clearly communicate the benefit? | "What do I get?" answerable in 3 seconds | | Relevance | Does this match the visitor's intent? | Bounce rate 50% | | Anxiety | What reassures the visitor? | Trust signals visible above fold | | Urgency | Why should they act now? | Deadline or scarcity (real, not fake) |

High-Impact Test Elements (in order of ROI)

| Test | Why | Expected lift | |------|-----|--------------| | Headline | First thing read. Shapes entire perception. | 10-40% | | CTA button text and color | Final friction point. | 5-25% | | Hero image/video | Visual sets trust and expectation. | 5-15% | | Social proof placement | Top vs mid page changes trust curve. | 3-10% | | Pricing structure | Tiers, placement, toggle. | 3-15% |

Test one element at a time. 95% statistical significance. Min 1,000 visitors per variant.

---

Hero Architecture (Exact CSS)

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 clamp(2rem, 5vw, 6rem);
  background: #080c1a;
}

.hero-text {
  max-width: 650px;
}

.hero-text h1 {
  font-family: 'Cabinet Grotesk', 'Geist', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #f0ede8;
}

.hero-text p {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: #a09c96;
  max-width: 480px;
  margin-top: 1.5rem;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 16px 48px;
  background: #1B365D;
  color: #f0ede8;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 0;
  margin-top: 2rem;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background 200ms ease;
}

.hero-cta:hover {
  background: #e05a20;
  transform: translateY(-2px);
}

.hero-cta:active {
  transform: scale(0.97);
}

---

Social Proof

Place near the top (within first 2 sections). Types by effectiveness:

1. Logos of recognizable companies (3-12, grayscale, hover color. Never use without permission.)
2. Specific user metrics: "Join 10,000+ paying customers" - number must be real
3. Relevant testimonial: quote with name, title, photo, specific result
4. Award/certification badge: only if recognizable (SOC 2, YC, Product Hunt)

  Trusted by teams at
  
    
    
    
  

---

Problem Section (PAS Framework)

Problem: name the exact pain with specific numbers. "Your landing page converts at 0.8%. The industry average is 3.2%." Agitate: explore consequences of NOT solving it. Money lost. Growth stalled. Competitors winning. Solution: present your approach. "DeployPro uses conversion science from 44,000+ A/B tests to lift conversion rates."

---

Features Grid

3-6 features. Each one gets:

• Icon (meaningful, not decorative). Single color, consistent stroke width.
• Benefit-led headline: "Ship 3x faster" not "Automated CI/CD"
• 1-2 sentence explanation. No fluff.

  
    
    Ship 3x faster
    Automated build and deploy pipeline. One command to production.
  

---

Testimonials

| Element | Rule | |---------|------| | Photo | Required. Real person. No stock. | | Attribution | Full real name, title, company | | Quote | Specific, results-oriented. "We shipped 40% more features after switching" not "Great product" | | Length | 1-3 sentences | | Placement | Near relevant claim. Don't pile all at the bottom. |

---

Pricing

3 tiers. Middle is your real offer.

| Position | Role | Strategy | |----------|------|----------| | Left (Starter) | Anchor low | Makes middle look reasonable. Price at 40-60% of Pro. | | Center (Pro) | The offer | Best value, highlighted visually. "Most popular" badge. | | Right (Enterprise) | Anchor high | Makes middle look affordable. 2-3x Pro. |

.pricing-card-featured {
  border: 2px solid var(--accent);
  transform: scale(1.05);
  position: relative;
  z-index: 1;
}

.pricing-card-featured::before {
  content: 'Most popular';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: white;
  padding: 4px 16px;
  border-radius: 9999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Rules:

• Annual/monthly toggle (annual = 17-20% discount)
• Every tier lists features explicitly
• Include money-back guarantee near pricing
• No fake scarcity. No "Only 3 spots left" when unlimited.

---

Form Optimization (exact specs)

| Element | Best practice | |---------|---------------| | Fields | Minimum viable. Email only for lead gen. | | Validation | Inline, real-time, specific error messages | | Autofill | Enable autocomplete attributes | | Submit | Button says what happens: "Get my free guide", "Start free trial" not "Submit" | | Error recovery | Preserve entered values, highlight fields | | Privacy | "No spam. Unsubscribe anytime." | | Input height | 48px minimum for mobile | | Input font | 16px minimum (prevents iOS zoom on focus) |

  
    Work email
    
  
  
    Get my free guide
  
  
    No spam. Unsubscribe anytime.
  

---

Performance (Core Web Vitals 2026)

| Metric | Target | Measurement | |--------|--------|-------------| | INP (Interaction to Next Paint) | 90 | Lab |

Achievement checklist:

• No render-blocking resources above fold
• Hero image preloaded: ``
• Critical CSS inlined in `` tag. Async load for rest.
• Images lazy-loaded (loading="lazy") with explicit width/height
• Fonts self-hosted or preloaded with font-display: swap
• Third-party scripts loaded with defer or async
• Minimal JS. No frameworks for simple landing pages.

---

Mobile Optimization

| Element | Mobile rule | |---------|-------------| | CTA | Full-width, min 48px tall, thumb-friendly | | Forms | Single column, large inputs (48px min) | | Font size | Body never below 16px | | Touch targets | 44-44px min, 12px gap | | Horizontal scroll | Never. Test on 320px width. | | Hero | Full-width text, no image until 768px |

---

CRO Audit Checklist

Before launching, verify:

• [ ] Value proposition clear in 3 seconds (show to someone new, ask "what is this?")
• [ ] CTA visible without scrolling on mobile and desktop
• [ ] Only one primary CTA above fold
• [ ] Headline under 10 words with specific benefit
• [ ] Hero text NOT centered (left-aligned + right visual)
• [ ] Social proof above fold (logos or metrics)
• [ ] Real testimonials with attribution and specific results
• [ ] LIFT Model: all 6 factors score 4/5 or higher
• [ ] Form: minimum fields, 16px+ font, 48px+ input height
• [ ] Privacy reassurance near form
• [ ] Money-back guarantee near pricing
• [ ] FAQ addresses top 5 real objections
• [ ] Lighthouse Performance > 90
• [ ] Core Web Vitals pass (LCP 4s | No preload or unoptimized format | Preload with ``, use WebP/AVIF, serve via CDN |

| CLS from late-loading fonts | Web font triggers layout shift | Self-host fonts. Use font-display: swap. Preload with ` | | A/B test inconclusive | Not enough traffic or significance | Min 1,000 visitors/variant, 95% significance, run for 2+ business cycles | | Form abandonment spike | Too many fields or validation confusion | Reduce to minimum viable fields. Inline real-time validation. Preserve values on error. | | Mobile bounce rate > 70% | Touch targets too small, horizontal scroll | All touch targets >= 44px. Test at 320px width. No horizontal overflow. | | Scroll effects jank on mobile | requestAnimationFrame scroll listeners | Use CSS animation-timeline: view()` or IntersectionObserver. Debounce JS scroll handlers. | | CTA click-through below 1% | Weak copy, wrong placement | A/B test CTA text. Ensure CTA visible without scroll. Single primary action above fold. |

Anti-Patterns

| Mistake | Fix | |---------|-----| | Multiple CTAs competing | One primary action per viewport | | No social proof above fold | Add logos or metrics in hero | | Weak headline ("Welcome to Our Product") | Specific benefit + audience in 10 words | | Generic stock photos | Real product screenshots or real people | | No mobile test | Most traffic is mobile. Test at 320px. | | Auto-playing video with sound | User-initiated playback only | | No A/B testing plan | Identify highest-impact element, test one change | | Centered hero text | Left-aligned text + right-aligned visual | | "Only 3 spots left" when unlimited | Fake scarcity destroys trust | | Pricing without annual toggle | Annual = 17-20% discount. Always offer it. | | CTA says "Submit" | Action verb + value: "Get my free guide" | | Hero image without preload | ` for LCP | | h-screen for hero | min-h-[100dvh]` - avoids iOS Safari jump | | Form inputs under 48px on mobile | iOS zooms on anything under 16px font |

---

Sources

• Unbounce Conversion Benchmark Report (44,000+ A/B tests analyzed)
• GoodUI.org - A/B tested UI patterns database
• CXL Institute - Conversion optimization research
• WiderFunnel LIFT Model
• NN Group - Conversion studies and usability research
• Refactoring UI - Adam Wathan, Steve Schoger
• Google Web Vitals (web.dev)
• Copyhackers - Conversion copywriting

Checklist

• [ ] Skill loads without errors in the AI agent
• [ ] YAML frontmatter is valid (description, compatibility, audience)
• [ ] Workflow section provides clear step-by-step instructions
• [ ] Error handling section covers common failure modes
• [ ] All referenced files (references/, scripts/, assets/) exist
• [ ] Skill triggers correctly for intended use cases
• [ ] No broken links or missing resources

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: EliasOulkadi
• Source: EliasOulkadi/shokunin
• License: MIT
• Homepage: https://eliasoulkadi.github.io/shokunin/

Install and usage instructions live in the source repository linked above.