SaaS 랜딩 스킬
단일 페이지 SaaS 랜딩 페이지를 생성하세요. 에이전트는 이 워크플로우를 정확히 따라야 합니다.
1. 컨텍스트 읽기
작성 전:
- 현재 작업 디렉토리의
DESIGN.md를 읽으세요. 파일이 없으면 중단하고 요청하세요. - 색상 팔레트, 타이포그래피 토큰, 레이아웃 원칙을 식별하세요.
- "에이전트 프롬프트 가이드" 섹션을 확인하세요. 이 섹션의 내용이 여기의 지침과 충돌할 경우 우선합니다.
2. 섹션 계획
필수 섹션 (순서대로):
- 히어로 — 로고 또는 워드마크, 헤드라인 (태그라인 입력), 부제목 (1~2문장), 기본 CTA, 보조 CTA.
hero_density파라미터를 수직 패딩(px)으로 사용하세요. - 기능 — 3
6개의 기능 타일. 각각: 아이콘, 짧은 제목, 12문장 설명. - 사회적 증명 —
proof_count개의 로고 또는 사용후기. 값이 0이면 이 섹션을 건너뛰세요. - 가격 책정 — 2~3단계.
has_pricing이 true인 경우에만 포함하세요. - 푸터 CTA — 악센트 색상의 큰 밴드에 하나의 버튼 CTA.
- 푸터 — 최소 구성: 링크 + 저작권.
3. 디자인 시스템 적용
- 모든 색상은
DESIGN.md토큰에서 가져와야 합니다. 임의의 16진수 값을 만들지 마세요. - 타이포그래피: 헤드라인에는 선언된 디스플레이 글꼴을 사용하고, 나머지에는 본문 글꼴을 사용하세요.
- 레이아웃: 그리드, 최대 너비, 섹션 간격 규칙을 준수하세요.
- 컴포넌트: 선언된 버튼/카드/입력 패턴을 사용하세요. DESIGN.md의 '깊이 & 입체감' 섹션이 최소를 요구하면 그림자를 추가하지 마세요.
- 악센트: 히어로에 한 번, 푸터 CTA에 한 번, 그리고 모든 링크에만 악센트 색상을 사용하세요. 페이지 전체에 과도하게 사용하지 마세요.
4. 파일 작성
하나의 독립적인 index.html을 출력하세요.
- 모든 CSS는
<head>내부의<style>블록에 인라인으로 포함. - DESIGN.md의 글꼴을 Google Fonts 등에서 로드할 수 없는 경우 시스템 글꼴 대체.
- 외부 JS 없음.
- 시맨틱 HTML (
<header>,<main>,<section>,<footer>). - 각 수정 가능한 요소에는
data-od-id="<고유-슬러그>"속성을 태그하여 호스트 앱의 댓글 모드에서 대상으로 지정할 수 있도록 함.
5. 자체 점검
완료 전에 확인하세요:
- 모든 텍스트는 내용이 의미 있고, 로렘 입숨이 아님 (product_name 및 tagline 입력을 사용하고, 나머지는 구체적인 복사본을 생성).
- 깨진 색상 참조 없음 (모든 CSS 색상 값은 DESIGN.md의 팔레트 또는 유효한 알파/대체 변형).
- 반응형 중단점이 DESIGN.md의 '반응형 동작' 섹션과 일치함.
- 페이지가 1440w, 768w, 375w에서 잘 보임 (머리 속으로 시뮬레이션).
- 악센트는 전체에 최대 두 번만 사용됨.
6. 완료
index.html만 작성하세요. 별도의 CSS 파일, JS 파일 또는 README를 생성하지 마세요.
참고용으로 이 파일을 읽는 스킬 작성자 여러분께
이것은 최소하지만 완전한 스킬입니다. 구조:
saas-landing-skill/
├── SKILL.md ← 현재 위치
└── assets/
└── base.html (옵션 시작 템플릿, 이 스킬은 사용하지 않음)
주의할 점:
od:프론트매터 블록은 Claude-Code 전용 호환성을 위해 선택 사항이지만, 추가하면 OD의 타입 입력, 슬라이더, 미리보기 메타데이터, 기능 게이트를 활성화합니다.- 프론트매터 아래의 워크플로우는 일반 Markdown으로, 에이전트가 시스템 프롬프트로 읽습니다.
- DESIGN.md는 협력자로 취급되며 재정의가 아닙니다. 스킬은 에이전트가 브리프가 충돌할 때 재정의할 권한을 부여하지만, 새로운 토큰을 만들 권한은 부여하지 않습니다.
data-od-id태깅은 요소를 댓글 모드에 연결하는 방법입니다. 댓글 모드 호환성을 원하는 스킬은 출력에 주석을 달아야 합니다.
전체 프로토콜은 ../../skills-protocol.md를 참조하세요.