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의 Depth & Elevation이 최소라고 명시하면 그림자를 추가하지 마십시오.
강조: 강조 색상은 히어로에서 한 번, 푸터 CTA에서 한 번, 그리고 모든 링크에만 사용합니다. 페이지 전체에 과도하게 사용하지 마십시오.

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

완료하기 전에 다음을 확인합니다:

모든 텍스트는 의미 있는 콘텐츠이며 로렘 입숨이 아닙니다. (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: 프론트매터 블록은 호환성 메타데이터로 유지됩니다. Clean Design은 타입이 지정된 입력, 슬라이더, 미리보기 메타데이터, 기능 힌트를 읽습니다.
프론트매터 아래의 워크플로우는 에이전트가 시스템 프롬프트로 읽는 일반 마크다운입니다.
DESIGN.md는 재정의가 아닌 협력자로 취급됩니다. 스킬은 브리프가 충돌할 때 에이전트에게 재정의 권한을 부여하지만, 새로운 토큰을 생성하지는 않습니다.
data-od-id 태깅은 요소를 로컬 주석 모드에 연결합니다. 주석 모드 호환성이 필요한 스킬은 출력물에 이를 주석 처리해야 합니다.

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