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:
skipfor optional questions, andgenerate 3 for mefor 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:
- Parse the colors, typography, and style sections in DESIGN.md.
- Confirm with the user: "I found your DESIGN.md. The brand color is
#XXXand the font isXXX. Should I use this configuration?" - If the user confirms, skip Step 2 and Step 3, then go directly to Step 4 to generate HTML.
- 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
/landingdoes 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
- Read
templates/base.html. - 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.
- Fill in content from
answers.json. - Inject design tokens into
<style>. In UUPM mode, read MASTER.md. In fallback mode, generate them from the three fallback rules. - 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-pricebehavior
Trigger Phrases
/landing, "make a sales page", "help me make a landing page", "sales page"