SaaS 랜딩 스킬
단일 페이지 SaaS 랜딩 페이지를 생성합니다. 에이전트는 이 워크플로우를 정확히 따르십시오.
1. 컨텍스트 읽기
무엇을 작성하기 전에:
- 현재 작업 디렉토리에서
DESIGN.md를 읽으십시오. 파일이 없으면 중단하고 요청하십시오. - 색상 팔레트, 타이포그래피 토큰, 레이아웃 원칙을 식별하십시오.
- "Agent Prompt Guide" 섹션을 참고하십시오. 이 섹션은 충돌이 있을 경우 여기의 모든 지침을 재정의합니다.
2. 섹션 계획
필수 섹션 (순서대로):
- 히어로(Hero) — 로고 또는 워드마크, 헤드라인(태그라인 입력), 서브헤드(1–2문장), 기본 CTA, 보조 CTA.
hero_density매개변수를 수직 패딩(px)으로 사용하십시오. - 기능(Features) — 3–6개의 기능 타일. 각각: 아이콘, 짧은 제목, 1–2문장 본문.
- 사회적 증거(Social proof) —
proof_count개의 로고 또는 사용후기. 0이면 이 섹션을 건너뛰십시오. - 가격표(Pricing) — 2–3개 티어.
has_pricing이 true인 경우에만 포함하십시오. - 푸터 CTA(Footer CTA) — 큰 악센트 색상 띠에 하나의 버튼으로 된 행동 촉구.
- 푸터(Footer) — 최소: 링크 + 저작권.
3. 디자인 시스템 적용
- 모든 색상은 DESIGN.md 토큰에서 가져와야 합니다. 임의의 16진수 값을 생성하지 마십시오.
- 타이포그래피: 헤드라인에는 선언된 디스플레이 폰트를 사용하고, 그 외 모든 것에는 본문 폰트를 사용하십시오.
- 레이아웃: 그리드, 최대 너비, 섹션 간격 규칙을 존중하십시오.
- 컴포넌트: 선언된 버튼/카드/입력 패턴을 사용하십시오. DESIGN.md의 깊이 및 입체감 섹션에서 최소라고 명시하면 그림자를 추가하지 마십시오.
- 강조(Accept): 히어로에 한 번, 푸터 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태깅은 댓글 모드에 요소를 연결하는 방법입니다. 댓글 모드 호환성을 원하는 스킬은 출력물에 주석을 달아야 합니다.
전체 프로토콜은 ../../skills-protocol.md를 참조하십시오.