SaaS 랜딩 페이지 스킬

SaaS 랜딩 페이지 스킬은(는) 무엇을 하나요?

단일 페이지 SaaS 랜딩 페이지를 생성합니다. 에이전트는 다음 워크플로우를 정확히 따르십시오.

1. 컨텍스트 읽기

무언가를 작성하기 전에:

• 현재 작업 디렉토리의 DESIGN.md를 읽으십시오. 파일이 없으면 중단하고 요청하십시오.
• 색상 팔레트, 타이포그래피 토큰, 레이아웃 원칙을 식별하십시오.
• "에이전트 프롬프트 가이드" 섹션을 참고하십시오. 이 가이드는 여기의 지시와 충돌하는 경우 어떤 지시든 재정의합니다.

2. 섹션 계획

필수 섹션 (순서대로):

1. 히어로 — 로고 또는 워드마크, 헤드라인 (태그라인 입력), 서브헤드 (1-2문장), 기본 CTA, 보조 CTA. hero_density 파라미터를 수직 패딩(px 단위)으로 사용하십시오.
2. 기능 — 3-6개의 기능 타일. 각각: 아이콘, 짧은 제목, 1-2문장 본문.
3. 사회적 증거 — proof_count 개의 로고 또는 사용 후기. 0이면 이 섹션을 건너뜁니다.
4. 가격 — 2-3개 티어. has_pricing이 true인 경우에만 포함합니다.
5. 푸터 CTA — 큰 강조 색상 밴드에 하나의 버튼 콜투액션.
6. 푸터 — 최소: 링크 + 저작권.

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. 자체 점검

완료하기 전에 다음을 확인하십시오:

• 모든 텍스트는 Lorem Ipsum이 아닌 의미 있는 콘텐츠입니다 (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 태깅은 요소를 주석 모드에 연결하는 방법입니다. 주석 모드 호환성을 원하는 스킬은 출력에 주석을 달아야 합니다.

전체 프로토콜은 ../../docs/skills-protocol.md를 참조하십시오.