SaaS 랜딩 스킬
단일 페이지 SaaS 랜딩 페이지를 생성합니다. 에이전트는 다음 워크플로우를 정확히 따라야 합니다.
1. 컨텍스트 읽기
작성 전:
- 현재 작업 디렉토리에 있는
DESIGN.md를 읽습니다. 파일이 없으면 중단하고 요청합니다. - 색상 팔레트, 타이포그래피 토큰, 레이아웃 원칙을 식별합니다.
- "에이전트 프롬프트 가이드" 섹션을 확인합니다. 이 섹션은 충돌 시 이곳의 모든 지침보다 우선합니다.
2. 섹션 계획
필수 섹션, 순서대로:
- 히어로 — 로고 또는 워드마크, 헤드라인(태그라인 입력), 서브헤드(1–2문장), 기본 CTA, 보조 CTA.
hero_density매개변수를 px 단위의 세로 여백으로 사용합니다. - 기능 — 3–6개의 기능 타일. 각각: 아이콘, 짧은 제목, 1–2문장 본문.
- 사회적 증명 —
proof_count개의 로고 또는 사용 후기. 0이면 이 섹션을 건너뜁니다. - 가격 책정 — 2–3개 등급.
has_pricing이 true인 경우에만 포함합니다. - 푸터 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의 타이핑된 입력, 슬라이더, 미리보기 메타데이터, 기능 게이팅을 활성화합니다.- 프론트매터 아래의 워크플로우는 에이전트가 시스템 프롬프트로 읽는 일반 마크다운입니다.
- DESIGN.md는 재정의가 아닌 협력자로 취급됩니다. 스킬은 에이전트에게 브리핑이 충돌할 때 재정의할 권한을 부여하지만, 새로운 토큰을 만들지는 못하게 합니다.
data-od-id태깅은 요소를 주석 모드에 연결하는 방법입니다. 주석 모드 호환성을 원하는 스킬은 출력물에 이 태그를 추가해야 합니다.
전체 프로토콜은 ../../skills-protocol.md를 참조하세요.