Landing - 引导式销售页面生成

一个引导式销售页面生成工具。此技能处理结构、倒计时逻辑和引导式问题流程。设计系统交由 UUPM 处理，并提供一个备选回退路径（当 UUPM 未安装时）。

运行时要求： 需要能运行 Bash 的环境。Claude Code 原生支持；Claude Desktop 需要 shell MCP。

工作流程概览

步骤 1：引导式问答，3 个阶段
   |
步骤 2：设计系统处理，UUPM 或回退
   |
步骤 3：呈现 2-3 种样式选项
   |
步骤 4：生成 HTML
   |
步骤 5：输出到 generated-pages/{slug}/

步骤 1：引导式问答

核心规则：不在此流程之外使用上下文

在 /landing 工作流中，仅使用用户此刻提供的回答。不要引用：

对话历史，例如先前的话题或项目
记忆系统，例如 MEMORY.md 或个人资料文件
现有项目文件夹中的任何内容

原因： 每个用户的上下文不同，技能行为必须保持一致。即使你熟悉该领域，也应像从头填充一切那样行事。最终页面应由用户的回答驱动，而非 AI 的假设。

错误示例： “这听起来像是超级个人工作法课程，对吧？”这引用了记忆。

正确示例： 仅从 A1 和 A2 推断行业。不要问“这是 X 课程吗？”

详细问题库： references/question-bank.md

三个阶段：

A. 产品定位，4 个问题 - 产品类型、行业、品牌调性、slug
B. 内容填充，10 个问题 - Hero / Hook / About / Learn / Testimonials 可选 / Audience / Info / Pricing / FAQ / Speaker
C. 倒计时和行动号召，3-4 个问题 - 先询问是否需要倒计时，然后询问详情和行动号召文案

问题呈现规则

每个问题必须显示：

问题本身
好与坏的示例作为指导
答案字段
特殊命令：skip 用于可选问题，generate 3 for me 用于 AI 生成的选项

在可选部分前询问是/否

B5a - 询问是否包含学员评价。如果不是，跳过 B5b。
C0 - 询问是否包含倒计时。如果不是，跳过 C1-C2。

专家模式，快速路径

如果用户说“我会一次性粘贴所有内容”，则跳过指导提示，接收完整文案，并一次性分类所有内容。

收集答案

将所有最终答案保存到 generated-pages/{slug}/answers.json，格式如下：

{
  "product": { "type": "...", "industry": "...", "tone": ["...", "..."], "slug": "..." },
  "content": {
    "hero": { "title": "...", "subtitle": "..." },
    "hook": "...",
    "about": "...",
    "learn": ["...", "..."],
    "testimonials": [{ "name": "...", "quote": "...", "role": "..." }],
    "audience": { "fit": ["..."], "unfit": ["..."] },
    "info": [{ "label": "...", "value": "..." }],
    "pricing": [{ "plan": "...", "price": "...", "note": "..." }],
    "faq": [{ "q": "...", "a": "..." }],
    "speaker": { "name": "...", "bio": ["..."], "photo": "..." }
  },
  "countdown": {
    "enabled": true,
    "deadline": "2026-04-30T23:59:00+08:00",
    "onZero": "ended-state"
  },
  "cta": { "text": "立即注册", "href": "#" }
}

步骤 1.5：检测 DESIGN.md

在进入设计系统步骤之前，检查用户是否已有品牌设计指南：

# 按优先级顺序搜索 DESIGN.md
DESIGN_FILE=""
for f in \
  "$PROJECT_ROOT/DESIGN.md" \
  "$PROJECT_ROOT/design.md" \
  "$PROJECT_ROOT/.claude/DESIGN.md" \
  "$HOME/.claude/DESIGN.md"; do
  if [ -f "$f" ]; then
    DESIGN_FILE="$f"
    break
  fi
done

如果 DESIGN.md 存在，直接应用

如果找到 DESIGN.md，读取其品牌颜色、排版和样式规则，然后直接用作设计系统：

解析 DESIGN.md 中的颜色、排版和样式部分。
与用户确认：“我找到了您的 DESIGN.md。品牌颜色是 #XXX，字体是 XXX。是否使用此配置？”
如果用户确认，跳过步骤 2 和步骤 3，直接进入步骤 4 生成 HTML。
如果用户说“不”，则正常进行到步骤 2。

如果 DESIGN.md 不存在，则进入步骤 2

使用 UUPM 流程或回退流程。

为何有此步骤： 第 3-2 课教导学生创建 DESIGN.md。如果 /landing 不读取它，学生创建的品牌指南就无法使用，这会破坏体验。一个 DESIGN.md 应能驱动视觉输出，如社交卡片、演示文稿和销售页面。

步骤 2：设计系统处理（仅当没有 DESIGN.md 时）

详细流程： references/uupm-integration.md

检测 UUPM

test -d ~/.claude/skills/ui-ux-pro-max || \
test -d "$PROJECT_ROOT/.claude/skills/ui-ux-pro-max" || \
command -v uipro

如果任一检查通过，则 UUPM 已安装，流程进入 UUPM 模式。

如果所有检查均失败，则显示来自 references/uupm-integration.md 的说服性消息。

当 UUPM 未安装时的分支处理

用户响应	处理方式
`y` / `yes` / `ok`	运行 `npm install -g uipro-cli && uipro init --ai claude --global`，安装后继续步骤 3
`n` / `no` / `later`	使用回退模式，参考 `references/fallback-design-rules.md`
安装失败	显示错误并询问是否使用回退继续

UUPM 模式：生成设计系统

从阶段 A 的答案构建查询：

query="<A2 行业> <A3 调性关键词>"
slug="<A4>"

python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py \
  "$query" \
  --design-system \
  --persist \
  -p "$slug" \
  -f markdown

结果写入 design-system/MASTER.md。读取并解析颜色、排版、模式和反模式。

步骤 3：呈现样式选项

UUPM 模式

使用 UUPM 推荐的模式作为主要选项。然后从其他 7 种着陆页样式中选择 2 种兼容但不同的选项，共创建 3 个选项。

例如，如果 UUPM 推荐“Hero-Centric + Social Proof”，则添加“Conversion-Optimized”和“Trust & Authority”作为对比选项。

使用 <div class="cards"> 将每种样式渲染为迷你预览卡片，并参考视觉伴侣 UI，以便用户选择。

回退模式

Claude 生成 2 种方向，例如极简 vs. 趣味。每种方向包含自己的颜色、排版和间距规则。用户选择一种。

步骤 4：生成 HTML

读取骨架： templates/base.html

读取倒计时 JS： templates/countdown.js

组装逻辑

读取 templates/base.html。
条件渲染：
- {{#if countdown.enabled}} - 保留大型 Hero 倒计时和底部粘性栏；否则移除这两个部分。
- {{#if testimonials}} - 保留推荐部分；否则移除它。
从 answers.json 填充内容。
将设计令牌注入 <style>。在 UUPM 模式下，读取 MASTER.md。在回退模式下，根据三个回退规则生成它们。
仅当启用倒计时时，注入 countdown.js。

导航栏：必需且顶部粘性

导航栏是固定要求，必须包含在每个生成的页面中：

品牌：左侧。由 A4 slug 派生的简短名称，或基于产品类型的简短英文缩写。
章节链接：中间。链接到 About / Learn / Audience / Pricing / Speaker / FAQ。不要包含不存在的可选部分的链接。
注册行动号召：右侧。简短标签，例如“注册”或“购买”。
滚动时粘性。通过 JS 切换 .scrolled 在滚动时添加阴影。
在移动设备（宽度低于 860px）上隐藏链接。

必需数据，从 answers.json 推断：

"nav": {
  "brandText": "AI 单人工作坊",
  "linkAbout": "工作坊",
  "linkLearn": "您将学到",
  "linkAudience": "适合人群",
  "linkPricing": "方案",
  "linkSpeaker": "讲师",
  "linkFaq": "常见问题",
  "ctaShort": "注册"
}

导航样式应遵循所选的设计系统，包括排版、颜色和分隔线样式。结构和链接保持不变。

单文件 HTML 策略

通过 CDN 使用 Tailwind：<script src="https://cdn.tailwindcss.com"></script>
CSS 内联在 <style> 中
JS 内联在 <script> 中
使用学生提供的图片 URL

这使学生最容易复制粘贴到 Framer、Notion 或 CMS 中。

步骤 5：输出

写入到 generated-pages/{slug}/：

generated-pages/
└── {slug}/
    ├── index.html
    ├── design-system.md    # 仅 UUPM 模式
    └── answers.json

写入后为用户打开文件

不要告诉用户手动打开文件。直接为他们打开：

open "generated-pages/{slug}/index.html"

在 macOS 上，这会在默认浏览器中打开文件。如果失败（例如在没有 open 命令的 Linux 环境中），则告诉用户如何手动打开。

给学生的最终消息：

销售页面已生成并已在浏览器中打开。

文件位置：
   generated-pages/{slug}/index.html

想要编辑文案？直接编辑 HTML，或重新运行 /landing 来重新填写答案。将读取已有的 answers.json。

错误处理

情况	行为
npm 权限错误	建议 `! sudo npm install -g uipro-cli`，然后让学生手动运行
npm 不存在	建议通过 Homebrew 或 nvm 安装 Node.js
Python3 不存在	建议 `brew install python3`
UUPM 的 search.py 失败	记录错误并自动回退
Bash 工具不可用	捕获错误并回退到显示手动命令
同 slug 的文件夹已存在	询问是否覆盖、添加时间戳或选择其他名称

超出范围

订阅或会员页面，服务咨询页面
保障或退款部分
多语言页面，目前仅限英文
表单集成（如支付或订阅）；行动号召仅为链接
实际部署
on-zero: new-price 行为

触发短语

/landing、“制作销售页面”、“帮我制作一个着陆页”、“销售页面”

aaagbasm1991/landing-page-skill

landing-page-skill 是什么？

在你喜欢的 AI 中提问

文档