Back to Details

fix-landing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/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.
  1. 调用/check-landing对着陆页进行审计
  2. 识别优先级最高的问题
  3. 修复该问题
  4. 验证修复效果
  5. 报告处理内容
这是一个修复工具，每次仅修复一个问题。如需处理下一个问题，请再次运行。如需优化文案，请使用/copywriting。

Process

操作流程

1. Run Primitive

1. 调用基础技能

Invoke 
/check-landing
skill to get prioritized findings.
调用/check-landing技能获取按优先级排序的问题列表。

2. Fix Priority Order

2. 修复优先级顺序

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
按照以下顺序修复：
  1. P0：无着陆页，直接跳转到应用
  2. P1：无价值主张、无CTA、CTA效果弱、移动端适配异常、加载缓慢
  3. P2：无社交证明、仅单个CTA、缺失元数据
  4. P3：细节优化项

3. Execute Fix

3. 执行修复

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:
tsx
<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:
tsx
<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:
tsx
<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:
tsx
<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>
无着陆页（P0）： 创建
app/page.tsx
或
app/(marketing)/page.tsx
，包含：
  • 带有标题的Hero区域
  • 功能亮点
  • 行动号召（CTA）
  • 社交证明区域
无清晰价值主张（P1）： 添加有吸引力的标题：
tsx
<section className="hero">
  <h1 className="text-5xl font-bold">
    [动词] 你的 [名词]。在 [时间段] 内获得 [收益]。
  </h1>
  <p className="text-xl text-gray-600">
    [产品] 助你 [核心收益]，无需 [常见痛点]。
  </p>
</section>
示例：
  • "追踪你的健身进度。几周内看到成果。"
  • "写出更优质代码。自信快速交付。"
  • "管理你的团队。聚焦关键事务。"
无CTA或CTA效果弱（P1）： 添加醒目的CTA：
tsx
<a
  href="/signup"
  className="bg-primary text-white px-8 py-4 rounded-lg text-lg font-semibold"
>
  开始免费试用 →
</a>
CTA最佳实践：
  • 动作导向：使用“开始”、“获取”、“试用”、“创建”等词汇
  • 具体明确：用“开始免费试用”而非“提交”
  • 视觉突出：高对比度，位于首屏
  • 多处设置：首屏 + 底部均放置
移动端适配异常（P1）： 添加响应式类名：
tsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* 功能模块 */}
</div>
添加移动端菜单。
加载缓慢（P1）：
  • 使用
    next/image
    处理图片
  • 使用
    next/font
    加载字体
  • 移除着陆页中沉重的客户端库
  • 确保页面为静态生成
无社交证明（P2）： 添加客户评价区域：
tsx
<section className="testimonials">
  <h2>用户怎么说</h2>
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    <blockquote>
      <p>"满意用户的评价内容"</p>
      <cite>姓名，公司职位</cite>
    </blockquote>
  </div>
</section>

4. Expert Panel Review (MANDATORY)

4. 专家评审（必填）

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:
markdown
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.
在将修复结果返回给用户前，必须进行专家评审。
参考：
ui-skills/references/expert-panel-review.md
  1. 模拟10位世界级广告营销专家（Ogilvy、Rams、Scher、Wiebe、Laja、Walter、Cialdini、Ive、Wroblewski、Millman）
  2. 每位专家为修复后的区域打分（0-100分）并给出具体反馈
  3. 计算平均得分
  4. 若平均分<90分：根据影响最大的反馈进行优化，迭代修复
  5. 若平均分≥90分：进入验证环节
评审输出示例：
markdown
专家评审：Hero区域修复

| 专家 | 得分 | 关键优化建议 |
|--------|-------|---------------------|
| Ogilvy | 85 | 以用户收益为核心，而非功能 |
| Wiebe | 82 | CTA需更具体（用“开始免费试用”而非“开始使用”） |
| Laja | 78 | 在首屏添加社交证明 |
| Cialdini | 84 | 加入紧迫感元素 |
...
**平均分：84.5** ❌ → 正在实施前4项优化建议...
平均分未达90分不得进入下一环节。

5. Verify

5. 验证

After fix passes expert review:
bash
undefined
修复通过专家评审后：
bash
undefined

Check headline exists

检查标题是否存在

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

Check CTA exists

检查CTA是否存在

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

Check mobile responsiveness

检查移动端响应式

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

Check performance (if lighthouse CLI available)

检查性能（若已安装lighthouse CLI）

lighthouse http://localhost:3000 --only-categories=performance
undefined
lighthouse http://localhost:3000 --only-categories=performance
undefined

6. Report

6. 报告

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.
已修复：[P1] 无清晰价值主张

更新文件：app/page.tsx
- 添加了带有标题的Hero区域
- 添加了说明收益的副标题
- 添加了配套视觉元素

文案内容：
- 标题："追踪你的健身旅程。几周内看到成果。"
- 副标题："Volume助你养成稳定习惯，无需复杂的追踪流程。"

下一个最高优先级问题：[P1] 无CTA按钮
再次运行/fix-landing继续优化。

Branching

分支管理

Before making changes:
bash
git checkout -b landing/improvements-$(date +%Y%m%d)
进行修改前：
bash
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.
着陆页影响重大，请为每项变更进行测试：
  • 对主要文案变更进行A/B测试
  • 衡量转化影响
  • 确保变更可回滚
重复运行/fix-landing以持续优化转化率。

Related

相关技能

  • /check-landing
    - The primitive (audit only)
  • /log-landing-issues
    - Create issues without fixing
  • /copywriting
    - Marketing copy improvements
  • /cro
    - Conversion rate optimization
  • /check-landing
    - 基础技能（仅审计）
  • /log-landing-issues
    - 仅创建问题不修复
  • /copywriting
    - 营销文案优化
  • /cro
    - 转化率优化