aaagbasm1991/landing-page-skill

Landing - Guided Sales Page Generation

A guided sales page generation tool. This skill handles structure, countdown logic, and the guided question flow. The design system is delegated to UUPM, with a fallback path if UUPM is not installed.

Runtime requirement: Requires an environment that can run Bash. Claude Code supports this natively; Claude Desktop requires a shell MCP.

Workflow Overview

Step 1: Guided Q&A, 3 stages
   |
Step 2: Design system handling, UUPM or fallback
   |
Step 3: Present 2-3 style options
   |
Step 4: Generate HTML
   |
Step 5: Output to generated-pages/{slug}/

Step 1: Guided Q&A

Core Rule: Do Not Use Context Outside This Flow

Inside the /landing workflow, use only the answers the user provides in this moment. Do not reference:

• Conversation history, such as earlier topics or projects
• Memory systems, such as MEMORY.md or persona files
• Any content from existing project folders

Why: Each user has different context, and the skill behavior must remain consistent. Even if you know the domain well, behave as if you are filling everything in from zero. The final page should be driven by the user's answers, not by AI assumptions.

Bad example: "This sounds like the Super Individual Work Method course, right?" This references memory.

Good example: Infer the industry only from A1 and A2. Do not ask, "Is this the X course?"

Detailed question bank: references/question-bank.md

Three stages:

• A. Product positioning, 4 questions - Product type, industry, brand tone, slug
• B. Content fill-in, 10 questions - Hero / Hook / About / Learn / Testimonials optional / Audience / Info / Pricing / FAQ / Speaker
• C. Countdown and CTA, 3-4 questions - Ask whether a countdown is needed first, then ask details and CTA copy

Question Presentation Rules

Each question must show:

• The question itself
• Good and bad examples as guardrails
• The answer field
• Special commands: skip for optional questions, and generate 3 for me for AI-generated options

Ask Y/N Before Optional Sections

• B5a - Ask whether to include student testimonials. If N, skip B5b.
• C0 - Ask whether to include a countdown timer. If N, skip C1-C2.

Expert Mode, Fast Path

If the user says, "I will paste everything at once," skip guardrail display, receive the full copy, and classify everything in one pass.

Collecting Answers

Save all final answers to generated-pages/{slug}/answers.json in this format:

{
  "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": "#" }
}

Step 1.5: Detect DESIGN.md

Before entering the design system step, check whether the user already has brand design guidelines:

# Search for DESIGN.md in priority order
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

If DESIGN.md Exists, Apply It Directly

If DESIGN.md is found, read its brand colors, typography, and style rules, then use them directly as the design system:

1. Parse the colors, typography, and style sections in DESIGN.md.
2. Confirm with the user: "I found your DESIGN.md. The brand color is #XXX and the font is XXX. Should I use this configuration?"
3. If the user confirms, skip Step 2 and Step 3, then go directly to Step 4 to generate HTML.
4. If the user says no, proceed normally to Step 2.

If DESIGN.md Does Not Exist, Proceed to Step 2

Use either the UUPM flow or the fallback flow.

Why this step exists: Lesson 3-2 teaches students to create DESIGN.md. If /landing does not read it, the student has created brand guidelines that cannot be used, which breaks the experience. One DESIGN.md should drive visual outputs such as social cards, presentations, and sales pages.

---

Step 2: Design System Handling, Only When No DESIGN.md Exists

Detailed flow: references/uupm-integration.md

Detect UUPM

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

If any check passes, UUPM is installed and the flow enters UUPM mode.

If all checks fail, show the persuasion message from references/uupm-integration.md.

Branching When UUPM Is Not Installed

User response	Handling
y / yes / ok	Run npm install -g uipro-cli && uipro init --ai claude --global, then continue to Step 3 after installation
n / no / later	Use fallback mode, see references/fallback-design-rules.md
Installation fails	Show the error and ask whether to continue with fallback

UUPM Mode: Generate Design System

Build the query from the Stage A answers:

query="<A2 industry> <A3 tone keywords>"
slug="<A4>"

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

The result is written to design-system/MASTER.md. Read it and parse colors, typography, pattern, and anti-patterns.

Step 3: Present Style Options

UUPM Mode

Use the pattern recommended by UUPM as the primary option. Then choose 2 compatible but distinct options from the other 7 Landing Page Styles, creating 3 options total.

For example, if UUPM recommends Hero-Centric + Social Proof, add Conversion-Optimized and Trust & Authority as comparison options.

Render each style as a mini preview card using <div class="cards">, referencing the visual companion UI, so the user can choose.

Fallback Mode

Claude generates 2 directions, such as minimal vs. playful. Each direction includes its own color, typography, and spacing rules. The user chooses one.

Step 4: Generate HTML

Read skeleton: templates/base.html

Read countdown JS: templates/countdown.js

Assembly Logic

1. Read templates/base.html.
2. Conditionally render:
   • {{#if countdown.enabled}} - Keep the large hero countdown and bottom sticky bar; otherwise remove both sections.
   • {{#if testimonials}} - Keep the testimonials section; otherwise remove it.
3. Fill in content from answers.json.
4. Inject design tokens into <style>. In UUPM mode, read MASTER.md. In fallback mode, generate them from the three fallback rules.
5. Inject countdown.js only when countdown is enabled.

Nav, Required and Sticky Top

Nav is a fixed requirement and must be included in every generated page:

• Brand: Left side. A short name derived from the A4 slug, or a short English abbreviation based on the product type.
• Section links: Middle. Link to About / Learn / Audience / Pricing / Speaker / FAQ. Do not include links for optional sections that are not present.
• Register CTA: Right side. Short label, such as "Register" or "Buy".
• Sticky on scroll. Add shadow while scrolling via JS toggle .scrolled.
• Hide links on mobile, under 860px.

Required data, inferred from answers.json:

"nav": {
  "brandText": "AI Solo Workshop",
  "linkAbout": "Workshop",
  "linkLearn": "What You Will Learn",
  "linkAudience": "Who It Is For",
  "linkPricing": "Plans",
  "linkSpeaker": "Instructor",
  "linkFaq": "FAQ",
  "ctaShort": "Register"
}

The nav styling should follow the selected design system, including typography, colors, and divider style. The structure and links remain the same.

Single-File HTML Strategy

• Use Tailwind via CDN: <script src="https://cdn.tailwindcss.com"></script>
• Inline CSS in <style>
• Inline JS in <script>
• Use image URLs supplied by the student

This makes it easiest for students to copy and paste into Framer, Notion, or a CMS.

Step 5: Output

Write to generated-pages/{slug}/:

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

Open the File for the User After Writing It

Do not tell the user to open the file manually. Open it for them:

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

On macOS, this opens the file in the default browser. If it fails, such as in a Linux environment without open, then tell the user how to open it manually.

Final message to the student:

Sales page generated and opened in the browser.

File location:
   generated-pages/{slug}/index.html

Want to edit the copy? Edit the HTML directly, or run /landing again to refill the answers. Existing answers.json will be read.

Error Handling

Situation	Behavior
npm permission error	Suggest ! sudo npm install -g uipro-cli, then let the student run it manually
npm does not exist	Suggest installing Node.js via Homebrew or nvm
Python3 does not exist	Suggest brew install python3
UUPM search.py fails	Log the error and automatically fallback
Bash tools unavailable	Catch the error and fallback to showing manual commands
A folder with the same slug already exists	Ask whether to overwrite, add a timestamp, or choose another name

Out of Scope

• Subscription or membership pages, service consultation pages
• Guarantee or refund sections
• Multilingual pages, currently English only
• Form integration such as payment or subscription; CTA is only a link
• Actual deployment
• on-zero: new-price behavior

Trigger Phrases

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