Communitygithub.com

랜딩 - 유도형 판매 페이지 생성

17가지 질문(제품 포지셔닝 4문, 콘텐츠 채움 10문, 카운트다운/CTA 3~4문)을 통해 완전한 HTML + Tailwind 판매 페이지를 생성하는 스킬입니다. 이벤트, 온라인 코스, 디지털 제품 등 세 가지 유형을 지원하며, UI UX Pro Max(UUPM) 통합 시 업계 수준의 디자인 시스템을 적용합니다.

랜딩 - 유도형 판매 페이지 생성란 무엇인가요?

이 AI 에이전트 스킬은 개발자가 질문 기반 워크플로우를 통해 완전한 판매 페이지를 생성할 수 있도록 돕습니다. 사용자는 제품 유형, 산업, 브랜드 톤, 슬러그 등을 정의하는 4단계 제품 포지셔닝 질문에 답한 후, 히어로/훅/소개/학습 내용/후기/대상/정보/가격/FAQ/스피커 등 10개 콘텐츠 섹션을 채웁니다. 마지막으로 카운트다운 타이머와 CTA 세부 사항을 3~4문으로 설정합니다. 이 스킬은 Claude Code, Cursor, Codex 등 Bash 실행이 가능한 모든 플랫폼에서 작동합니다. UUPM이 설치되어 있으면 검색 기반 디자인 시스템(색상, 타이포그래피, 패턴)을 생성하고, 그렇지 않으면 직접 디자인을 생성합니다. 또한 프로젝트에 DESIGN.md 파일이 존재하면 이를 읽어 디자인 설정을 자동으로 적용하므로 수동 구성이 필요 없습니다. 최종 출력물은 단일 HTML 파일(single-file)로, Tailwind CDN과 인라인 CSS/JS를 사용하여 Framer, Notion, CMS에 쉽게 복사/붙여넣기할 수 있습니다. 사용자가 이전에 생성한 answers.json을 제공하면 질문을 다시 하지 않고 수정 작업을 진행할 수 있는 '리비전(Revision)' 모드도 지원합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add aaagbasm1991/landing-page-skill
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

랜딩 - 유도형 판매 페이지 생성은(는) 무엇을 하나요?

유도형 판매 페이지 생성 도구입니다. 이 스킬은 구조, 카운트다운 로직, 유도 질문 흐름을 처리합니다. 디자인 시스템은 UUPM에 위임되며, UUPM이 설치되지 않은 경우 대체 경로를 사용합니다.

런타임 요구 사항: Bash를 실행할 수 있는 환경이 필요합니다. Claude Code는 기본적으로 지원하며, Claude Desktop은 shell MCP가 필요합니다.

워크플로우 개요

단계 1: 유도형 Q&A, 3단계
   |
단계 2: 디자인 시스템 처리, UUPM 또는 대체
   |
단계 3: 2~3가지 스타일 옵션 제시
   |
단계 4: HTML 생성
   |
단계 5: generated-pages/{slug}/에 출력

단계 1: 유도형 Q&A

핵심 규칙: 이 흐름 외부의 컨텍스트를 사용하지 마세요

/landing 워크플로우 내에서는 사용자가 현재 제공하는 답변만 사용하세요. 다음을 참조하지 마세요:

  • 대화 기록 (이전 주제나 프로젝트)
  • 메모리 시스템 (MEMORY.md나 페르소나 파일)
  • 기존 프로젝트 폴더의 내용

이유: 각 사용자는 서로 다른 컨텍스트를 가지며, 스킬 동작은 일관되어야 합니다. 도메인을 잘 알고 있더라도 모든 것을 처음부터 채우는 것처럼 행동하세요. 최종 페이지는 AI 가정이 아닌 사용자의 답변에 의해 결정되어야 합니다.

나쁜 예: "이것은 슈퍼 개인 작업 방법(Super Individual Work Method) 강좌인가요?" 이는 메모리를 참조하는 것입니다.

좋은 예: A1과 A2에서만 업계를 유추하세요. "이것이 X 강좌입니까?"라고 묻지 마세요.

상세 질문 목록: references/question-bank.md

세 단계:

  • A. 제품 포지셔닝, 4문항 - 제품 유형, 업계, 브랜드 톤, 슬러그
  • 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가 발견되면, 그 안의 브랜드 색상, 타이포그래피, 스타일 규칙을 읽고 디자인 시스템으로 직접 사용합니다:

  1. DESIGN.md의 색상, 타이포그래피, 스타일 섹션을 파싱합니다.
  2. 사용자에게 확인합니다: "DESIGN.md를 찾았습니다. 브랜드 색상은 #XXX, 폰트는 XXX입니다. 이 구성을 사용할까요?"
  3. 사용자가 확인하면, 2단계와 3단계를 건너뛰고 바로 4단계로 이동하여 HTML을 생성합니다.
  4. 사용자가 거부하면, 정상적으로 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 / oknpm 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가 미니멀 vs. 플레이풀 등 2가지 방향을 생성합니다. 각 방향에는 고유한 색상, 타이포그래피, 간격 규칙이 포함됩니다. 사용자가 하나를 선택합니다.

단계 4: HTML 생성

스켈레톤 읽기: templates/base.html

카운트다운 JS 읽기: templates/countdown.js

조립 로직

  1. templates/base.html을 읽습니다.
  2. 조건부 렌더링:
    • {{#if countdown.enabled}} - 큰 히어로 카운트다운과 하단 스티키 바를 유지하고, 그렇지 않으면 두 섹션을 모두 제거합니다.
    • {{#if testimonials}} - 후기 섹션을 유지하고, 그렇지 않으면 제거합니다.
  3. answers.json의 콘텐츠를 채웁니다.
  4. <style>에 디자인 토큰을 주입합니다. UUPM 모드에서는 MASTER.md를 읽고, 대체 모드에서는 세 가지 대체 규칙에서 생성합니다.
  5. 카운트다운이 활성화된 경우에만 countdown.js를 주입합니다.

네비게이션, 필수 및 상단 고정

네비게이션은 필수 요구사항이며 모든 생성된 페이지에 포함되어야 합니다:

  • 브랜드: 왼쪽. A4 슬러그에서 파생된 짧은 이름 또는 제품 유형에 기반한 짧은 영어 약어.
  • 섹션 링크: 중간. About / Learn / Audience / Pricing / Speaker / FAQ에 링크. 존재하지 않는 선택 섹션에 대한 링크는 포함하지 마십시오.
  • 등록 CTA: 오른쪽. 짧은 레이블(예: "Register" 또는 "Buy").
  • 스크롤 시 고정. 스크롤 시 JS로 .scrolled 클래스를 토글하여 그림자 추가.
  • 모바일에서 링크 숨기기, 860px 미만.

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"
}

네비게이션 스타일은 선택한 디자인 시스템(타이포그래피, 색상, 구분선 스타일 포함)을 따라야 합니다. 구조와 링크는 동일하게 유지됩니다.

단일 파일 HTML 전략

  • Tailwind CDN 사용: <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 없음Node.js를 Homebrew 또는 nvm을 통해 설치하도록 제안
Python3 없음brew install python3 제안
UUPM search.py 실패오류를 기록하고 자동으로 대체 모드로 전환
Bash 도구 사용 불가오류를 캐치하고 수동 명령어를 보여주는 방식으로 대체
동일한 슬러그의 폴더가 이미 존재덮어쓰기, 타임스탬프 추가, 또는 다른 이름 선택 여부 질문

범위 외

  • 구독 또는 멤버십 페이지, 서비스 상담 페이지
  • 보증 또는 환불 섹션
  • 다국어 페이지 (현재 영어만 지원)
  • 결제 또는 구독과 같은 양식 통합; CTA는 링크만 제공
  • 실제 배포
  • on-zero: new-price 동작

트리거 문구

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

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community