Communitygithub.com

jhd3197/AgentSite

SaaS 제품 마케팅 랜딩 페이지 — 히어로, 사회적 증명, 기능, 가격 티저, CTA 포함.

AgentSite란 무엇인가요?

이 스킬은 에이전트(예: Claude Code, Cursor 등)가 마케팅 수준의 SaaS 제품 랜딩 페이지를 단일 페이지로 구축할 수 있도록 설계되었습니다. 템플릿 수준이 아닌 실제 마케팅에 사용할 수 있는 품질을 목표로 하며, 지정된 순서대로(sticky nav, 히어로, 사회적 증명, 기능 그리드, 심층 섹션, 사용후기, 가격 티저, 푸터) 8개의 필수 섹션을 포함합니다. 핵심 규칙으로는 하나의 포인트 악센트 색상만 사용하고(한 화면에 최대 2회), 모바일 우선(360px에서 수평 스크롤 없이 동작), 프롬프트에 특화된 구체적인 카피를 작성해야 하며, 스톡 사진 대신 실제 애셋이나 라벨이 붙은 플레이스홀더, 또는 `generate_image`로 생성된 이미지만 사용합니다. 개발자에게 이 스킬은 반복적인 디자인 결정을 자동화하고 일관된 브랜드 경험을 보장하며, AI가 직접 마케팅 페이지를 생성하게 함으로써 프로토타이핑과 출시 속도를 크게 높여줍니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jhd3197/AgentSite/tree/HEAD/agentsite/skills/saas-landing

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

SaaS 랜딩 페이지

당신은 SaaS 제품을 위한 단일 랜딩 페이지를 구축하고 있습니다. 템플릿 수준이 아닌 마케팅 수준의 품질을 목표로 하세요.

필수 섹션 (이 순서대로)

  1. 고정 내비게이션 — 로고, 제품/솔루션/가격/문서/로그인 링크 3-5개, 오른쪽에 기본 CTA.
  2. 히어로 — 짧은 혜택 헤드라인 한 줄(≤ 10단어), 서브 헤드라인 한 줄(≤ 20단어), 기본 CTA + 보조 CTA, 제품 시각 자료 하나(스크린샷, 일러스트레이션, 또는 라벨이 붙은 플레이스홀더 — 사람 사진이 아닌 것).
  3. 사회적 증명 — 로고 스트립(고객 4-6개) 또는 수치 지표 스트립("12,000개 팀이 우리와 함께 배송 중"). 실제 로고가 없으면 라벨이 붙은 플레이스홀더를 사용하세요.
  4. 기능 그리드 — 구체적인 혜택이 있는 기능 3-6개. 일반적인 아이콘 사용 금지(✨ 🚀 등).
  5. 하나의 심층 섹션 — 가장 차별화된 기능을 선택하고 넓은 시각 자료 + 2-3개의 지원 글머리 기호와 함께 보여주세요.
  6. 사용후기 / 사례 연구 — 출처가 있는 강력한 인용 한 개 또는 하나의 지표가 포함된 미니 사례 연구.
  7. 가격 티저 — 요금제 카드 3개 또는 /pricing으로 연결되는 단일 CTA.
  8. 푸터 — 제품 / 회사 / 리소스 / 법적 정보의 다중 열.

품질 규칙

  • 하나의 결정적인 악센트 색상을 사용하고, 한 화면에서 최대 두 번만 사용하세요.
  • 카피는 프롬프트에 구체적이어야 함 — "Feature One / Feature Two" 또는 "저희 웹사이트에 오신 것을 환영합니다" 같은 일반적인 표현은 안 됩니다.
  • 모든 이미지는 실제(애셋 라이브러리), 라벨이 붙은 플레이스홀더, 또는 generate_image를 통해 생성된 것이어야 함 — 깨질 수 있는 스톡 사진 URL은 절대 사용하지 마세요.
  • 모바일 우선: 360px에서 수평 스크롤 없이 작동해야 합니다.
  • 접이식 위에 보이는 기본 CTA가 있어야 합니다.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

관련 스킬