SaaS 랜딩 페이지 스킬
하나의 아이디어를 가진 하나의 제품을 판매하는 단일 파일 SaaS 랜딩 페이지를 제작합니다.
워크플로우
- 활성화된 DESIGN.md를 읽습니다 (위에 주입됨). 히어로, 카드, CTA 모두 DESIGN.md에 정의된 색상, 타이포그래피, 간격, 테두리 반경 토큰을 사용합니다. 값을 직접 만들지 말고
var(--token)만 사용하세요. - 제품 이름과 약속(Promise)을 정합니다. 브리핑에서 구체적인 제품 이름, 한 줄 약속, 그리고 단일 기본 행동(평가판 시작 / 데모 예약 / 시작하기)을 도출합니다. 실제 카피를 작성하세요. "기능 1 / 회사 이름 입력" 같은 플레이스홀더는 사용하지 마십시오.
- 다음 순서로 섹션을 배치합니다:
- 고정 내비게이션: 왼쪽에 워드마크, 4-5개 링크, 오른쪽에 기본 CTA 버튼.
- 히어로: 하나의 H1(최대 약 8단어), 하나의 지원 문단, 두 개의 버튼(기본 + 보조), 그리고 액자가 있는 제품 시각 자료 자리 표시기.
- 로고 스트립: 5-6개 고객사 이름, 흐리게(뮤트), 균일한 간격.
- 기능 그리드: 각각 짧은 제목(<=5단어)과 1-2문장의 혜택(기능 명세가 아님)이 있는 6개의 카드.
- 사용 후기: 하나의 인용문(이름, 역할, 회사 포함).
- 가격 티저: 2-3개의 요금제 카드, 브리핑의 통화로 가격 표시, 각 카드당 기능 불릿(<=5개), 하나의 강조된 요금제.
- 마무리 CTA 밴드 + 얇은 푸터(제품 / 회사 / 법적 정보 열).
- 품질 기준을 유지하세요:
- 페이지에 하나의 H1; 섹션당 H2; 계층 구조는 크기로 구분하고, 색상으로 구분하지 마십시오.
- 기본 색상(primary color)은 액션에만 사용하고, 장식용으로 사용하지 마십시오.
- 섹션의 리듬은 간격 스케일(
--section-y-*또는 공간 토큰)을 사용합니다; 표면/배경 밴드를 번갈아 사용하여 숨 쉴 공간을 확보합니다. - 모든 상호작용 요소에는 보이는 포커스 상태가 있어야 합니다; 버튼은 >=44px 높이; 밴드 배경 위의 흐린 텍스트 대비 >= 4.5:1.
- 반응형: 768px 미만에서 단일 열, 내비게이션은 간단한 세로 링크 행으로 축소(햄버거 메뉴 불필요).
- 하나의 자체 포함
index.html을 출력합니다 -<style>포함, 외부 요청 없음, 브리핑이 요구하지 않는 한 JavaScript 없음.
안티패턴
- 히어로 뒤에 그라데이션을 배경으로 사용하고, 위에 읽을 수 없는 오버레이 텍스트를 덧씌우는 경우.
- 모두 "강력하다"고 주장하는 6개의 동등한 크기의 기능.
- 화면당 하나 이상의 액센트 색조; 에머/빨간색은 오류용으로 예약.
- Lorem Ipsum, "~의 힘을 발휘하세요...", "~를 혁신하세요...".