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

단일 페이지 SaaS 랜딩을 생성합니다. 에이전트는 이 워크플로우를 정확히 따라야 합니다.

1. 컨텍스트 읽기

작성하기 전에:

순서대로 필수 섹션:

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

모든 색상은 DESIGN.md 토큰에서 가져와야 합니다. 16진수 값을 임의로 생성하지 마십시오.
타이포그래피: 헤드라인에는 선언된 디스플레이 폰트를, 나머지에는 본문 폰트를 사용합니다.
레이아웃: 그리드, 최대 너비, 섹션 간격 규칙을 준수합니다.
컴포넌트: 선언된 버튼/카드/입력 패턴을 사용합니다. DESIGN.md의 깊이 및 입체감에 최소라고 명시되어 있으면 그림자를 추가하지 마십시오.
강조: 강조 색상은 히어로에서 한 번, 푸터 CTA에서 한 번, 모든 링크에만 사용합니다. 페이지를 과도하게 사용하지 마십시오.

다음을 포함하는 단일 자체 포함 index.html을 출력합니다:

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

모든 텍스트는 Lorem Ipsum이 아닌 의미 있는 내용입니다 (product_name 및 tagline 입력 사용; 나머지 부분에 대해 구체적이고 그럴듯한 카피를 생성하십시오).
끊어진 색상 참조가 없습니다 (모든 CSS 색상 값은 DESIGN.md 팔레트에 있거나 유효한 알파/대체 변형입니다).
반응형 중단점이 DESIGN.md의 반응형 동작 섹션과 일치합니다.
페이지가 1440w, 768w, 375w에서 잘 보입니다 (정신적으로 시뮬레이션).
강조 색상이 총 두 번 이하로 사용되었습니다.

index.html만 작성합니다. 별도의 CSS 파일, JS 파일 또는 README를 생성하지 마십시오.

이는 최소하지만 완전한 스킬입니다. 구조:

saas-landing-skill/
├── SKILL.md    ← 여기 있습니다
└── assets/
    └── base.html    (선택적 시작 템플릿; 이 스킬은 사용하지 않음)

주의할 점:

od: 프론트매터 블록은 클로드 코드 전용 호환성을 위해 선택 사항이지만, 추가하면 OD의 타입 입력, 슬라이더, 미리보기 메타데이터, 기능 게이팅이 활성화됩니다.
프론트매터 아래의 워크플로우는 에이전트가 시스템 프롬프트로 읽는 일반 마크다운입니다.
DESIGN.md는 재정의가 아닌 협력자로 취급됩니다. 스킬은 에이전트에게 브리프가 충돌할 때 재정의할 권한을 부여하지만, 새 토큰을 생성하지는 않습니다.
data-od-id 태깅은 요소를 댓글 모드에 연결하는 방법입니다. 댓글 모드 호환성을 원하는 스킬은 출력물에 주석을 달아야 합니다.

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