fix-landing（修复着陆）

/fix-landing

Fix the highest priority landing page issue.

What This Does

1. Invoke /check-landing to audit landing page
2. Identify highest priority issue
3. Fix that one issue
4. Verify the fix
5. Report what was done

This is a fixer. It fixes one issue at a time. Run again for next issue. Use /copywriting for copy improvements.

Process

1. Run Primitive

Invoke /check-landing skill to get prioritized findings.

2. Fix Priority Order

Fix in this order:

1. P0: No landing page, redirects to app
2. P1: No value prop, no CTA, weak CTA, mobile broken, slow
3. P2: No social proof, single CTA, missing metadata
4. P3: Polish items

3. Execute Fix

No landing page (P0): Create app/page.tsx or app/(marketing)/page.tsx with:

• Hero section with headline
• Feature highlights
• Call-to-action
• Social proof section

No clear value prop (P1): Add compelling headline:

<section className="hero">
  <h1 className="text-5xl font-bold">
    [Verb] your [noun]. [Benefit] in [timeframe].
  </h1>
  <p className="text-xl text-gray-600">
    [Product] helps you [primary benefit] without [common pain point].
  </p>
</section>

Examples:

• "Track your fitness. See results in weeks."
• "Write better code. Ship faster with confidence."
• "Manage your team. Focus on what matters."

No CTA or weak CTA (P1): Add strong CTA:

<a
  href="/signup"
  className="bg-primary text-white px-8 py-4 rounded-lg text-lg font-semibold"
>
  Start Free Trial →
</a>

CTA best practices:

• Action-oriented: "Start", "Get", "Try", "Create"
• Specific: "Start Free Trial" not "Submit"
• Visible: High contrast, above fold
• Multiple: Above fold + below fold

Mobile broken (P1): Add responsive classes:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* Features */}
</div>

Add mobile menu.

Slow load time (P1):

• Use next/image for images
• Use next/font for fonts
• Remove heavy client-side libraries from landing
• Ensure page is statically generated

No social proof (P2): Add testimonials section:

<section className="testimonials">
  <h2>What our users say</h2>
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    <blockquote>
      <p>"Quote from happy user"</p>
      <cite>Name, Title at Company</cite>
    </blockquote>
  </div>
</section>

4. Expert Panel Review (MANDATORY)

Before returning fix to user, run expert panel review.

See: ui-skills/references/expert-panel-review.md

1. Simulate 10 world-class advertorial experts (Ogilvy, Rams, Scher, Wiebe, Laja, Walter, Cialdini, Ive, Wroblewski, Millman)
2. Each expert scores the fixed section 0-100 with specific feedback
3. Calculate average score
4. If average < 90: Implement highest-impact feedback, iterate
5. If average ≥ 90: Proceed to verification

Example review output:

Expert Panel Review: Hero Section Fix

| Expert | Score | Critical Improvement |
|--------|-------|---------------------|
| Ogilvy | 85 | Lead with user benefit, not feature |
| Wiebe | 82 | CTA needs specificity ("Start Free Trial" not "Get Started") |
| Laja | 78 | Add social proof above fold |
| Cialdini | 84 | Include urgency element |
...
**Average: 84.5** ❌ → Implementing top 4 improvements...

Do not proceed until 90+ average achieved.

5. Verify

After fix passes expert review:

# Check headline exists
grep -E "text-(4xl|5xl|6xl)" app/page.tsx

# Check CTA exists
grep -E "Start|Get Started|Try|Sign Up" app/page.tsx

# Check mobile responsiveness
grep -E "sm:|md:|lg:" app/page.tsx | head -5

# Check performance (if lighthouse CLI available)
lighthouse http://localhost:3000 --only-categories=performance

6. Report

Fixed: [P1] No clear value proposition

Updated: app/page.tsx
- Added hero section with headline
- Added sub-headline explaining benefit
- Added supporting visual

Copy:
- Headline: "Track your fitness journey. See results in weeks."
- Sub: "Volume helps you build consistent habits without complicated tracking."

Next highest priority: [P1] No CTA button
Run /fix-landing again to continue.

Branching

Before making changes:

git checkout -b landing/improvements-$(date +%Y%m%d)

Single-Issue Focus

Landing pages are high-impact. Test each change:

• A/B test major copy changes
• Measure conversion impact
• Keep changes reversible

Run /fix-landing repeatedly to optimize conversions.

Related

• /check-landing - The primitive (audit only)
• /log-landing-issues - Create issues without fixing
• /copywriting - Marketing copy improvements
• /cro - Conversion rate optimization