Shokunin Landing Craft — build CRO/LIFT de conversão

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 < 2.5s, INP < 200ms.

Step 6: A/B test and iterate

Test highest-impact element first (headline). 95% significance. Min 1,000 visitors per variant.

The Structure

Hero: headline + sub + CTA (above the fold)
Social proof: logos, metrics, testimonials (~100px below hero)
Problem: framed for empathy, names the pain
Solution: 3 steps max, benefit-focused
Features: 3-6 items, each with one clear benefit
Testimonials: real people, specific results
Pricing: 3 tiers, middle is the offer
FAQ: answers top 5 objections
Final CTA: same ask, different context, near scroll bottom

Every section answers: what does the visitor need to hear RIGHT NOW to move to the next section?

---

Hero Rules (from Unbounce data)

1. Value in 3 seconds: headline must communicate core benefit. A/B test headline first - highest-impact element.
2. CTA visible without scroll: primary button above the fold. Above 600px vh.
3. One CTA: one primary action. Secondary links are text only.
4. Headline under 10 words: "Ship 3x faster with automated deployments" not "Welcome to DeployPro - the fastest way to ship code"
5. Never center text: Left-aligned text + right-aligned visual (Split Screen). Centered hero is the #1 AI clich-.
6. Supporting visual: product screenshot, illustration, or demo - never a generic stock photo.

Hero alt-layouts (not all center)

Layout	HTML structure	When
Split 50/50	<div class="grid grid-cols-2"><div>text</div><div>visual</div></div>	Default. Works for everything.
Text-bleed	<div class="pl-[5vw]"><h1 class="text-[clamp(48px,7vw,120px)]">Hero text</h1></div>	Strong brand, confident product
3D perspective	<div class="perspective-[800px]"><h1 class="[transform:rotateX(15deg)]">Hero</h1></div>	Creative, premium, editorial
Negative space	<div class="grid"><div class="col-start-1 col-end-3">text</div><div class="col-start-2">visual</div></div>	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%
Clarity	Is the message immediately understandable?	"What is this?" answerable in 5 seconds
Distraction	What can we remove to focus attention?	Scroll depth > 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)

<div class="social-proof">
  <p class="text-sm uppercase tracking-wider text-slate-400 mb-6">Trusted by teams at</p>
  <div class="flex flex-wrap gap-8 items-center opacity-60">
    <img src="stripe.svg" alt="Stripe" class="h-8 grayscale hover:grayscale-0 transition" />
    <img src="vercel.svg" alt="Vercel" class="h-8 grayscale hover:grayscale-0 transition" />
    <img src="shopify.svg" alt="Shopify" class="h-8 grayscale hover:grayscale-0 transition" />
  </div>
</div>

---

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.

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <div class="feature">
    <Icon icon="zap" class="w-8 h-8 text-amber-500 mb-4" />
    <h3 class="text-lg font-semibold mb-2">Ship 3x faster</h3>
    <p class="text-slate-400">Automated build and deploy pipeline. One command to production.</p>
  </div>
</div>

---

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)

<form class="space-y-4 max-w-md">
  <div>
    <label for="email" class="block text-sm font-medium mb-1">Work email</label>
    <input
      id="email"
      type="email"
      autocomplete="email"
      required
      class="w-full h-12 px-4 border border-slate-200 text-base rounded-md"
      placeholder="[email protected]"
    />
  </div>
  <button
    type="submit"
    class="w-full h-12 bg-slate-900 text-white font-medium rounded-md
           transition-all duration-160 ease-out
           active:scale-[0.97]"
  >
    Get my free guide
  </button>
  <p class="text-xs text-slate-400 text-center">
    No spam. Unsubscribe anytime.
  </p>
</form>

---

Performance (Core Web Vitals 2026)

Metric	Target	Measurement
INP (Interaction to Next Paint)	< 200ms	Field data (Chrome UX Report)
LCP (Largest Contentful Paint)	< 2.5s	Lab + field
CLS (Cumulative Layout Shift)	< 0.1	Lab + field
TBT (Total Blocking Time)	< 200ms	Lab only
Lighthouse Performance	> 90	Lab

Achievement checklist:

• No render-blocking resources above fold
• Hero image preloaded: <link rel="preload" as="image" href="hero.webp">
• Critical CSS inlined in <style> 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 < 2.5s, INP < 200ms, CLS < 0.1)
• Mobile: all touch targets = 44-44px, no horizontal scroll
• A/B test plan: identify highest-impact element, document hypothesis
• No fake urgency or scarcity
• No generic stock photos - real product, real people, or illustration

---

Error Handling

Scenario	Cause	Fix
Hero image LCP > 4s	No preload or unoptimized format	Preload with <link rel="preload" as="image">, 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 <link rel="preload" as="font">
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	<link rel="preload" as="image"> 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