Landing Page Skill
본 Skill은 agent-agnostic하게 설계되었습니다. Claude Code, Codex CLI, Cursor, Trae, OpenClaw, Hermes Agent 또는 markdown 기반 skill을 지원하는 모든 agent가 사용할 수 있습니다. 모든 파일 참조는 본 Skill 루트 디렉토리 기준 상대 경로 형식을 사용합니다.
활성화 조건
사용자 입력에 다음 트리거 단어 중 하나가 포함되면 활성화됩니다: landing page, 랜딩 페이지, 제품 페이지, 마케팅 페이지, 메인 페이지 디자인, single page website, 착륙 페이지.
정직한 경계 (적용 가능성 판단)
적용 가능:
- 단일 페이지 전환형 랜딩 페이지 (리드 수집, 가입 유도, 구매 촉진)
- 제품/서비스 소개 페이지 (SaaS, 전자상거래 단일 상품, 컨설팅 서비스, 강좌)
- 기술 스택이 Next.js 14/15 + Tailwind CSS인 경우 (MVP 단계)
- 명확한 전환 목표(CTA)가 있는 페이지
적용 불가:
- 다중 페이지 웹사이트 또는 블로그 시스템 (단일 페이지 범위 초과)
- 백엔드 API, 데이터베이스, 사용자 인증이 필요한 완전한 애플리케이션
- 복잡한 상호작용 (실시간 협업, 데이터 시각화 대시보드, 게임)
- 웹이 아닌 플랫폼 (미니 프로그램, 네이티브 앱, 데스크탑 애플리케이션)
경계 선언: 본 Skill은 고품질 시작 코드를 생성하며, 카피 디테일과 브랜드 자산은 사람이 다듬어야 합니다. "원버튼 완벽"을 약속하지 않습니다.
5단계 운영 프로토콜
Phase 1: 요구 수집
다음 정보를 순서대로 사용자에게 확인합니다 (사용자가 이미 제공한 경우 건너뜁니다):
- 제품/서비스: 무엇인가요? 핵심 가치 제안은 무엇인가요?
- 타겟 대상: 누가 사용할까요? 어떤 고통점이 있나요?
- 전환 목표: 사용자가 무엇을 하길 바라나요? (가입/구매/다운로드/예약)
- 기술 스택: Next.js 14/15 + Tailwind CSS 사용 확인
- 브랜드 스타일 선호도:
references/aesthetic-styles.md의 6가지 스타일 중 선택 - 경쟁사 참고: 마음에 드는 랜딩 페이지 참고 자료가 있나요? (선택 사항)
출력물: 요구 사항 요약 문서 (Markdown 목록), Phase 2에서 사용.
Phase 2: 전략 기획
- 산업 템플릿 로드: 제품 유형에 따라
references/page-templates/에서 템플릿 선택:- SaaS 제품 →
references/page-templates/saas-product.md - 전자상거래 단일 상품 →
references/page-templates/ecommerce.md - 기타 → 일반 구조 (Hero → Features → Benefits → Social Proof → CTA → Footer)
- SaaS 제품 →
- 미적 방향 선택:
references/aesthetic-styles.md에서 스타일 선택, 색상 트렌드 확인 - 카피 구조:
references/copy-formulas/를 사용하여 계획:- Hero 제목:
references/copy-formulas/hero-headlines.md의 "결과 + 대상 + 메커니즘" 공식 - CTA 카피:
references/copy-formulas/cta-patterns.md의 "동사 + 이익" 형식 - 이의 처리:
references/copy-formulas/objection-handling.md의 5가지 유형 이의 템플릿
- Hero 제목:
- 전환 프레임워크 매핑: 7단계 카피를 DESIGNNAS 11개 요소에 매핑 (
references/conversion-framework.md참조)
출력물: 전략 문서 (스타일 선택, 색상 방향, 카피 개요, 요소 매핑 테이블 포함).
Phase 3: 디자인 시스템
references/design-system.md를 기반으로 디자인 토큰 생성:
- Typography Token: Display 글꼴, Body 글꼴, heading 글꼴 크기 단계
- Color Token: Primary / Secondary / Accent / Neutral / Background / Text (hex + CSS 변수)
- Motion Token: PageLoad 애니메이션, Scroll 트리거 애니메이션, Hover 상호작용 (유형 + 지속 시간)
- Layout Token: Grid 유형, Spacing 단계, Section 너비, 비대칭 레이아웃 규칙
출력물: 디자인 토큰 문서 (tailwind.config.ts에 바로 복사 가능).
Phase 4: 코드 생성
references/tech-adapters/nextjs-tailwind.md에 따라 코드 생성:
- 프로젝트 구조: app/page.tsx, app/layout.tsx, components/, lib/utils.ts, tailwind.config.ts
- 컴포넌트화: 각 DESIGNNAS 요소별 독립 컴포넌트 (HeroSection, FeaturesSection 등)
- Tailwind 설정: 디자인 시스템 토큰 확장 (colors, fonts, animations)
- 반응형: sm:/md:/lg:/xl: 중단점 사용
- 접근성: 시맨틱 HTML, alt 텍스트, 대비, focus-visible
출력물: 완전히 실행 가능한 Next.js 프로젝트 코드.
Phase 5: 품질 검증 (폐쇄 루프 보장)
5.1 전환 점검
- 11개 요소 커버리지: Hero, Social Proof, Features, Benefits, How It Works, Testimonials, Pricing/CTA, FAQ, Scarcity, Footer 포함 여부 확인 (최소 7개 이상 커버)
- CTA 명확성: CTA 텍스트가 "동사 + 이익" 형식을 사용하는가?
- Hero 제목: "결과 + 대상 + 메커니즘" 공식을 따르는가?
5.2 안티패턴 탐지 (항목별 검사, 자세한 내용은 references/anti-patterns.md 참조)
| # | 규칙 | 탐지 로직 | 심각도 |
|---|---|---|---|
| 1 | 과도한 글꼴 | Inter/Roboto/Arial을 Display 글꼴로 사용 | 차단 |
| 2 | 템플릿화된 색상 | 보라색 그라데이션 + 순수 흰색 배경 조합 | 차단 |
| 3 | 모호한 CTA | CTA가 Submit/Learn More/Click Here인 경우 | 차단 |
| 4 | 사회적 증거 부족 | Hero 아래에 Social Proof 요소 없음 | 차단 |
| 5 | Hero 제목 약함 | Welcome/브랜드명으로 시작, 순수 설명적 | 차단 |
| 6 | 모바일 적응 누락 | sm:/md:/lg: 반응형 중단점 없음 | 경고 |
| 7 | 접근성 기준 미달 | alt/aria/시맨틱 HTML 부족 | 경고 |
| 8 | SEO 기초 누락 | meta/title/OG 태그 없음 | 경고 |
| 9 | 성능 위험 | 큰 이미지 최적화 안 됨, lazy load 부족 | 경고 |
| 10 | 토큰 일관성 | 하드코딩된 색상/비표준 간격 | 경고 |
5.3 자동 복구 루프 (차단 수준 규칙)
차단 수준 규칙(1-5)을 통과하지 못한 경우, 자동으로 복구 루프 실행:
- 통과하지 못한 각 차단 규칙에 대해 구체적인 수정 코드 생성
- 규칙을 트리거한 Section 코드만 교체 (관련 없는 Section 수정 안 함)
- 해당 규칙의 탐지 재실행
- 위 단계를 반복, 최대 3회
- 3회 후에도 통과 못 함 → 실패 이유 보고, 사용자 결정에 맡김
5.4 긍정 패턴 검증 (권장 사항, 자세한 내용은 references/positive-patterns.md 참조)
| # | 패턴 | 탐지 로직 |
|---|---|---|
| P1 | CTA 동사+이익 | CTA 텍스트가 "동사 + 구체적 이익" 형식 일치 |
| P2 | Hero 결과+대상 | 제목에 정량화 가능한 결과 + 타겟 대상 포함 |
| P3 | 사회적 증거 요소 | 페이지에 ≥1개의 사회적 증거 유형 포함 |
| P4 | 긴급성/희소성 | 정원/시간/가격 긴박 요소 존재 |
긍정 패턴은 자동 복구를 트리거하지 않으며, 보고서에 최적화 제안만 제공합니다.
출력물: 탐지 보고서 (안티패턴 + 긍정 패턴 Markdown 테이블) + 자동 복구 요약 (복구가 있는 경우).
Phase 5.5: 반복 최적화 (선택 사항)
Phase 5 완료 후, 사용자에게 3가지 옵션 제공:
A) 수락 — 최종 전체 프로젝트 코드 출력 B) 지정 Section 수정 — 사용자가 수정할 Section과 수정 요구 사항 설명 C) 지정 Section 재생성 — 사용자가 지정한 Section을 처음부터 다시 생성
반복 규칙:
- 수정/재생성은 사용자가 지정한 Section에만 영향 (Section 단위)
- 각 수정 후, 해당 Section 관련 안티패턴 규칙 재탐지
- 최대 3회 반복, 초과 시 현재 버전 출력
- 각 라운드마다 변경 로그 출력: "Round N: Modified [Sections], Re-checked [Rules]"
인덱스
기술 스택 어댑터
- Next.js 14/15 + Tailwind CSS →
references/tech-adapters/nextjs-tailwind.md
산업 템플릿
- SaaS 제품 페이지 →
references/page-templates/saas-product.md - 전자상거래 제품 페이지 →
references/page-templates/ecommerce.md
카피 공식 라이브러리
- Hero 제목 →
references/copy-formulas/hero-headlines.md - CTA 패턴 →
references/copy-formulas/cta-patterns.md - 이의 처리 →
references/copy-formulas/objection-handling.md
디자인 참고
- 전환 프레임워크 →
references/conversion-framework.md - 디자인 시스템 →
references/design-system.md - 미적 스타일 →
references/aesthetic-styles.md - 안티패턴 탐지 →
references/anti-patterns.md - 긍정 패턴 탐지 →
references/positive-patterns.md
Agent 환경 간 적응 설명
본 Skill은 agent-agnostic하게 설계되었으며, 다음 런타임과 호환됩니다:
| 런타임 | 지원 방식 | 비고 |
|---|---|---|
| Claude Code | 네이티브 지원 | 권장, /agent 또는 트리거 단어 활성화 |
| Codex CLI | 호환 | SKILL.md 직접 로드 |
| Cursor | 호환 | .cursorrules에 복사 또는 Composer 사용 |
| Trae | 호환 | SKILL.md 직접 로드 |
| OpenClaw | 호환 | skills.sh 프로토콜 준수 |
| Hermes Agent | 호환 | SKILL.md 직접 로드 |
| 기타 markdown 기반 skill 런타임 | 호환 | YAML frontmatter + Markdown을 지원하는 모든 런타임 |
경로 규칙
모든 파일 참조는 본 Skill 루트 디렉토리 기준 상대 경로를 사용합니다:
references/xxx.mdassets/xxx.svgscripts/xxx.py
Agent 또는 사용자가 자신의 설치 위치에 따라 해석하며, 절대 경로에 의존하지 않습니다.
자체 포함 원칙
SKILL.md에는 모든 필수 정보가 포함되어 있으며, 바로 복사하여 사용할 수 있습니다. references/의 파일은 심화 지식 보충 자료로, 필요에 따라 로드하면 됩니다.
본 Skill은 Agent Skills 개방 프로토콜을 따릅니다.