agentSkill
landing-page-builder
대화형 인터뷰를 통해 누구나 랜딩페이지를 만들 수 있는 스킬. 브랜드명, 색상, 메뉴, 히어로 카피, 섹션 구성 등을 단계별로 질문하고 완성도 높은 HTML 랜딩페이지를 자동 생성한다. 사용자가 "랜딩페이지 만들어줘", "홈페이지 만들고 싶어", "랜딩페이지 스킬", "웹사이트 만들어줘", "소개페이지 만들어줘", "제품 페이지 만들어줘", "서비스 홈페이지", "원페이저 만들어줘", "landing page 만들어줘"를 언급하면 반드시 이 스킬을 사용한다. 레퍼런스 이미지나 스크린샷을 업로드하며 "이런 느낌으로
| name | landing-page-builder |
| description | 대화형 인터뷰를 통해 누구나 랜딩페이지를 만들 수 있는 스킬. 브랜드명, 색상, 메뉴, 히어로 카피, 섹션 구성 등을 단계별로 질문하고 완성도 높은 HTML 랜딩페이지를 자동 생성한다. 사용자가 "랜딩페이지 만들어줘", "홈페이지 만들고 싶어", "랜딩페이지 스킬", "웹사이트 만들어줘", "소개페이지 만들어줘", "제품 페이지 만들어줘", "서비스 홈페이지", "원페이저 만들어줘", "landing page 만들어줘"를 언급하면 반드시 이 스킬을 사용한다. 레퍼런스 이미지나 스크린샷을 업로드하며 "이런 느낌으로 만들어줘"라고 할 때도 트리거된다. |
Landing Page Builder
대화형 인터뷰를 통해 누구나 완성도 높은 랜딩페이지를 만들 수 있는 스킬.
비개발자도 질문에 답하기만 하면 바로 사용 가능한 HTML 파일이 생성된다.
전체 흐름
codeSTEP 1: 브랜드/서비스 파악 STEP 2: 디자인 방향 결정 (색상 테마 / 분위기) STEP 3: 네비게이션 메뉴 구성 STEP 4: 히어로 섹션 카피 & 구성 STEP 5: 본문 섹션 선택 (카드, 후기, 가격표, CTA 등) STEP 6: 푸터 & 마무리 STEP 7: HTML 생성 + 파일 제공
한 번에 모든 질문을 던지지 않는다. 한 스텝씩 진행하며 사용자 답변을 누적한다.
스텝 사이에는 반드시 요약을 보여주고 다음 단계로 넘어간다.
STEP 1 — 브랜드 / 서비스 파악
다음 정보를 수집한다 (한 번에 2~3개 질문):
항목 | 질문 예시 |
|---|---|
브랜드명 | "서비스나 브랜드 이름이 뭔가요?" |
서비스 한 줄 소개 | "어떤 서비스/제품인가요? 한 줄로 설명해주세요." |
타겟 고객 | "주로 누구를 위한 서비스인가요?" |
언어 | "페이지는 한국어로 만들까요, 영어로 만들까요?" |
→ 답변 받으면 STEP 2로 이동
STEP 2 — 디자인 방향
references/themes.md를 로드해 테마 목록을 제시한다.
사용자에게 2가지 선택을 받는다:
분위기: 다크/라이트/미니멀/볼드/소프트 중 선택 (또는 자유 묘사)
주 색상: 직접 입력(예: 파란색, #3B82F6) 또는 추천 팔레트에서 선택
레퍼런스 이미지가 있으면 이미지에서 색상/분위기를 자동 추출해서 제안한다.
테마 확정 후 한 줄 요약:
"✓ 다크 테마 + 보라색 계열로 진행할게요."
→ 답변 받으면 STEP 3으로 이동
STEP 3 — 네비게이션 메뉴
code기본 메뉴 예시: 서비스 소개 / 기능 / 요금제 / 후기 / 문의하기
기본값 제안 후 수정/추가/삭제 받기
CTA 버튼 텍스트 확인 (예: "무료 시작", "상담 신청", "지금 구매")
→ 확정 후 STEP 4로 이동
STEP 4 — 히어로 섹션
가장 중요한 섹션. 다음을 수집:
항목 | 설명 |
|---|---|
메인 헤드라인 | 1~2줄, 굵고 임팩트 있는 문장 |
서브 카피 | 2~3줄 설명 텍스트 |
CTA 버튼 | 버튼 텍스트 + 연결 URL (없으면 "#") |
배경 스타일 | 그라디언트 / 단색 / 영상 배경 / 이미지 |
플로팅 요소 | 기술 태그, 숫자 배지 등 (선택사항) |
통계 바 | 숫자 데이터 있으면 입력 (예: 고객 1만명+, 후기 3천개+) |
카피를 직접 주면 그대로, 없으면 브랜드 정보 기반으로 3가지 헤드라인 옵션 제안 후 선택받는다.
→ 확정 후 STEP 5로 이동
STEP 5 — 본문 섹션 구성
references/sections.md를 참고해 사용 가능한 섹션 목록을 보여준다.
code사용 가능한 섹션 (다중 선택 가능): [ ] 기능/특징 카드 — 3~4개 카드로 핵심 기능 소개 [ ] 카테고리/서비스 그리드 — 분류별 카드 (노베이스 클래스처럼) [ ] VOD/상품 목록 — 상품/강의 카드 (D-day 배지 포함) [ ] 수강 후기/리뷰 — 탭 필터 + 카드 그리드 [ ] 가격표 — 플랜 비교 (Free/Pro/Enterprise) [ ] FAQ — 아코디언 형식 [ ] 팀 소개 — 프로필 카드 [ ] 브랜드 로고 슬라이드 — 파트너사/고객사 로고 띠 [ ] 최종 CTA 배너 — 전환 유도 풀스크린 배너
선택된 섹션마다 필요한 콘텐츠를 간단히 수집한다.
(예: 기능 카드 선택 시 → "기능 3가지를 알려주세요. 제목 + 한 줄 설명으로요.")
콘텐츠가 없으면 브랜드/서비스 정보 기반으로 예시 콘텐츠를 자동 생성한다.
→ 확정 후 STEP 6으로 이동
STEP 6 — 푸터 & 마무리
간단하게:
회사명 / 저작권 연도
푸터 링크 (이용약관, 개인정보처리방침, 고객센터 등)
SNS 링크 (선택)
STEP 7 — 생성
모든 정보가 모이면 references/template.md의 HTML 템플릿 구조를 기반으로 랜딩페이지를 생성한다.
생성 규칙
단일 HTML 파일로 생성 (CSS + JS 인라인 포함)
Google Fonts 사용 — 한국어 서비스면 Noto Sans KR 필수, 영문 디스플레이 폰트 페어링
CSS 변수로 색상 관리 (
--primary,--bg,--text등)스크롤 reveal 애니메이션 기본 포함
모바일 반응형 (breakpoint: 768px)
외부 이미지 없이 SVG / CSS로 비주얼 처리 (placeholder 이미지 불가)
인터랙션: 호버 효과, 버튼 액티브 상태, 탭 전환 (선택된 섹션에 따라)
출력
bash# 파일 생성 후 /mnt/user-data/outputs/ 로 복사 cp /home/claude/{브랜드명}-landing.html /mnt/user-data/outputs/
파일 제공 후 다음을 안내한다:
"이 파일을 그대로 웹서버에 올리거나, Vercel/Netlify에 드래그 앤 드롭하면 바로 배포됩니다."
수정 원하는 부분 있으면 바로 반영 가능함을 알림
중간 이탈 처리
사용자가 스텝 중간에 "그냥 만들어줘" / "알아서 해줘"라고 하면:
→ 수집된 정보만으로 베스트 게스 버전을 즉시 생성하고 "이렇게 만들었는데 수정할 부분 알려주세요"로 마무리한다.
참고 파일
references/themes.md— 테마 팔레트 & 분위기 옵션 목록references/sections.md— 섹션별 구조 & 콘텐츠 스키마references/template.md— HTML 베이스 템플릿 & 섹션 코드 스니펫