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 個問題 - 英雄區塊 / 鉤子 / 關於 / 學習內容 / 見證（可選）/ 受眾 / 資訊 / 定價 / FAQ / 講者
C. 倒數計時與 CTA，3-4 個問題 - 先詢問是否需要倒數計時，再詢問細節與 CTA 文案

問題呈現規則

每個問題必須顯示：

問題本身
好範例與壞範例作為防護措施
答案欄位
特殊指令：可選問題使用 skip，AI 產生的選項使用 generate 3 for me

在可選區塊前詢問 Y/N

B5a - 詢問是否包含學員見證。若為 N，則跳過 B5b。
C0 - 詢問是否包含倒數計時器。若為 N，則跳過 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": "Register Now", "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 推薦「英雄區塊為主 + 社會證明」，則加入「轉換最佳化」和「信任與權威」作為比較選項。

使用 <div class="cards"> 將每個風格渲染為迷你預覽卡片，並參考視覺輔助 UI，以便使用者選擇。

備援模式

Claude 產生 2 種方向，例如極簡對比活潑。每個方向包含自己的顏色、字體與間距規則。使用者選擇其中一種。

步驟 4：產生 HTML

讀取骨架： templates/base.html

讀取倒數計時 JS： templates/countdown.js

組合邏輯

讀取 templates/base.html。
條件式渲染：
- {{#if countdown.enabled}} - 保留大型英雄區塊倒數計時與底部黏性欄位；否則移除這兩個區段。
- {{#if testimonials}} - 保留見證區段；否則移除它。
從 answers.json 填入內容。
將設計 Token 注入 <style>。在 UUPM 模式下，讀取 MASTER.md。在備援模式下，根據三個備援規則產生。
僅在啟用倒數計時時注入 countdown.js。

導航列：必要且固定於頂部

導航列是固定需求，必須包含在每個產生的頁面中：

品牌：左側。根據 A4 slug 衍生的簡短名稱，或根據產品類型衍生的簡短英文縮寫。
區段連結：中間。連結至「關於」/「學習內容」/「受眾」/「定價」/「講者」/「FAQ」。不要包含不存在的可選區段連結。
註冊 CTA：右側。簡短標籤，例如「註冊」或「購買」。
滾動時固定。透過 JS 切換 .scrolled 在滾動時加入陰影。
在行動裝置上隱藏連結，寬度低於 860px 時隱藏。

必要資料，從 answers.json 推斷：

"nav": {
  "brandText": "AI Solo Workshop",
  "linkAbout": "工作坊",
  "linkLearn": "你將學到",
  "linkAudience": "適合對象",
  "linkPricing": "方案",
  "linkSpeaker": "講師",
  "linkFaq": "常見問題",
  "ctaShort": "註冊"
}

導航列樣式應遵循所選的設計系統，包括字體、顏色與分隔線樣式。結構與連結保持不變。

單一 HTML 檔案策略

透過 CDN 使用 Tailwind：<script src="https://cdn.tailwindcss.com"></script>
在 <style> 中使用行內 CSS
在 <script> 中使用行內 JS
使用學生提供的圖片 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 的資料夾已存在	詢問是否要覆蓋、加上時間戳記或選擇其他名稱

不包含的範圍

訂閱或會員頁面、服務諮詢頁面
保證或退款區段
多語言頁面（目前僅支援英文）
表單整合（例如付款或訂閱）；CTA 僅為連結
實際部署
on-zero: new-price 行為

觸發短語

/landing, "make a sales page", "help me make a landing page", "sales page"

aaagbasm1991/landing-page-skill

landing-page-skill 是什麼？

在你喜歡的 AI 中提問

說明文件