스타트업 랜딩 스킬
카테고리: SaaS / 스타트업 고전환율 단일 페이지 스타트업 랜딩 페이지 생성: 히어로, 기능, 사회적 증거, 가격 정책, 행동 유도. 30초 안에 가치를 전달하고 이메일을 확보하는 것이 목표입니다.
메타데이터
이름: startup-landing 설명: 단일 페이지 스타트업 랜딩 페이지: 히어로, 기능, 사회적 증거, 가격 정책, 행동 유도. 트리거 키워드: "startup landing", "marketing page", "product launch", "SaaS landing", "landing page"
입력 및 매개변수
| 매개변수 | 유형 | 필수 | 기본값 |
|---|---|---|---|
product_name | string | ✓ | — |
tagline | string | ✓ | — |
description | string | ✓ | — |
has_pricing | boolean | ✓ | true |
has_testimonials | boolean | — | true |
proof_count | integer | — | 4 |
pricing_tiers | array | — | [3개의 기본 계층] |
primary_color | string | — | DESIGN.md 악센트 |
가격 정책 계층:
{ name: string; price: string; period: string; features: string[]; cta: string; highlighted?: boolean }
필수 섹션 (순서대로)
- 네비게이션 — 로고 + 네비게이션 링크 + "Get Started" CTA 버튼
- 히어로 — 제품명, 태그라인, 설명, 이중 CTA (기본: "Get Started Free", 보조: "See Demo"), 선택적 제품 스크린샷/모형
- 사회적 증거 스트립 — 로고 행 (흑백, 최대 6개)
- 기능 — 3열 그리드, 각각 아이콘 + 제목 + 설명
- 작동 방식 — 번호가 매겨진 3단계 수평 흐름
- 가격 정책 — 3개의 계층 카드 (Starter / Pro / Enterprise)
- 사용자 후기 — 이름, 역할, 회사, 아바타가 포함된 2-3개의 인용문
- CTA 밴드 — 어두운 섹션: 헤드라인 + 이메일 입력 + 버튼
- 푸터 — 링크 + 저작권
디자인 규칙
- 모바일 우선 반응형
- 모든 CTA는 작동하는 href 또는 form action이 있어야 함
- 가격 정책 카드: 강조 표시된 카드는 독특한 테두리 + 그림자를 가짐
- 사용자 후기 아바타: 일관된 플레이스홀더를 위해
https://i.pravatar.cc/60?img=[n]사용 - 외부 JS 없음
- 모든 CSS는
<style>블록에 인라인으로 포함 - 임의 색상 사용 금지 — DESIGN.md 토큰만 사용
출력
단일 파일: index.html (자체 포함)
자체 점검
- lorem ipsum 없음
- 최소 4개의 기능 나열됨
- 가격 정책 계층 높이 일관적
- 모든 CTA가 명확하게 표시되고 스타일링됨
- 모바일: 단일 열로 축소
- CTA 밴드의 이메일 입력은
type="email"및required속성 포함