SaaS 랜딩 스킬
단일 페이지 SaaS 랜딩 페이지를 생성합니다. 에이전트는 이 워크플로를 정확히 따라야 합니다.
1. 컨텍스트 읽기
무엇이든 작성하기 전에:
- 현재 작업 디렉터리에서
DESIGN.md를 읽으십시오. 파일이 없으면 작업을 중단하고 요청하십시오. - 색상 팔레트, 타이포그래피 토큰 및 레이아웃 원칙을 식별하십시오.
- "Agent Prompt Guide" 섹션을 확인하십시오. 이 섹션의 내용이 여기의 지침과 충돌하는 경우 우선합니다.
2. 섹션 계획
필수 섹션, 순서대로:
- 히어로 — 로고 또는 워드마크, 헤드라인(태그라인 입력), 서브헤드(1~2문장), 기본 CTA, 보조 CTA.
hero_density매개변수를 수직 패딩(px)으로 사용하십시오. - 기능 — 3
6개의 기능 타일. 각각: 아이콘, 짧은 제목, 12문장 본문. - 사회적 증명 —
proof_count개의 로고 또는 사용후기. 0이면 이 섹션을 건너뜁니다. - 가격 — 2~3단계.
has_pricing이 true인 경우에만 포함합니다. - 푸터 CTA — 큰 악센트 색상 띠에 하나의 버튼 콜 투 액션.
- 푸터 — 최소한: 링크 + 저작권.
3. 디자인 시스템 적용
- 모든 색상은 DESIGN.md 토큰에서 가져와야 합니다. 16진수 값을 임의로 생성하지 마십시오.
- 타이포그래피: 헤드라인에는 선언된 디스플레이 글꼴을, 그 외 모든 텍스트에는 본문 글꼴을 사용하십시오.
- 레이아웃: 그리드, 최대 너비 및 섹션 간격 규칙을 준수하십시오.
- 컴포넌트: 선언된 버튼/카드/입력 패턴을 사용하십시오. DESIGN.md의 Depth & Elevation이 최소라고 명시하면 그림자를 추가하지 마십시오.
- 악센트: 악센트 색상은 히어로에서 한 번, 푸터 CTA에서 한 번, 그리고 모든 링크에만 사용하십시오. 페이지를 악센트로 범람시키지 마십시오.
4. 파일 작성
자체 포함된 단일 index.html 파일을 출력하십시오:
- 모든 CSS는
<head>의<style>블록에 인라인으로 포함합니다. - DESIGN.md 글꼴을 Google Fonts 등에서 로드할 수 없는 경우 시스템 폰트 폴백을 사용합니다.
- 외부 JS는 없습니다.
- 시맨틱 HTML (
<header>,<main>,<section>,<footer>)을 사용합니다. - 각 편집 가능한 요소에
data-od-id="<unique-slug>"를 태깅하여 호스트 앱의 주석 모드가 타겟팅할 수 있도록 합니다.
5. 자체 점검
마무리하기 전에 다음을 확인하십시오:
- 모든 텍스트가 Lorem Ipsum이 아닌 의미 있는 콘텐츠로 채워져 있습니다(
product_name및tagline입력을 사용하고 나머지 부분에 대해 구체적이고 그럴듯한 카피를 생성합니다). - 깨진 색상 참조가 없습니다(모든 CSS 색상 값이 DESIGN.md의 팔레트에 있거나 유효한 알파/폴백 변형입니다).
- 반응형 브레이크포인트가 DESIGN.md의 Responsive Behavior 섹션과 일치합니다.
- 페이지가 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태깅은 요소를 주석 모드에 연결하는 방법입니다. 주석 모드와 호환되는 스킬은 출력에 주석을 달아야 합니다.
이 네 가지 규칙을 패키지 계약 내에서 유지하십시오. 이 스킬과 함께 전달되지 않을 수 있는 저장소 수준 프로토콜 파일에 의존하지 마십시오.