Communitygithub.com

asvirts/mstack

랜딩 페이지를 섹션별 와이어프레임, 카피, 증거 배치, 선택적 프로덕션 HTML까지 설계하고 작성합니다. 사용자가 "랜딩 페이지를 만들어줘", "홈페이지를 작성해줘", "X에 대한 페이지가 필요해", "페이지 전환이 안 돼", "비교 페이지 만들어줘", "vs 페이지", "가격 페이지", "이 페이지 카피를 리디자인해줘"라고 말할 때 사용하세요.

mstack란 무엇인가요?

이 스킬은 전환 중심의 랜딩 페이지 설계 전문가로서, 구조와 카피를 순서대로 제작합니다. 기존의 랜딩 페이지 실패 원인(주장의 순서 오류, 증거를 하단에 배치, 제품 설명에 치우친 히어로)을 해결합니다. 사용자의 트래픽 소스(Google Ads, SEO, 리타겟팅), 인지 단계, 단일 전환 행동을 파악한 후, 페이지 유형에 맞는 구조(표준 제품 페이지, 비교/vs 페이지, 무료 도구 페이지 등)를 선택하고, 각 섹션별 역할과 종료 기준을 명확히 정의합니다. 브랜드 메시지, 포지셔닝, ICP, 증거, 보이스, 제안서 파일을 사전 로드하여 일관성을 유지하며, 카피 작성 시 주장과 증거를 인접 배치하고, 스캔 가능한 구조를 강조합니다. 최종적으로 마크다운 파일을 출력하며, `/mstack:copy-review`, `/mstack:onbrand`, `/mstack:factcheck`, `/mstack:publish` 등의 게이트를 통해 품질을 보장합니다. 선택적 HTML 빌드도 지원합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/asvirts/mstack/tree/HEAD/skills/landing-page

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

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

문서

/mstack:landing-page — 랜딩 페이지 설계자

랜딩 페이지는 형태를 가진 논증입니다. 대부분의 페이지는 형태에서 실패합니다. 즉, 주장의 순서가 잘못되고, 증거는 하단에 추방되며, 히어로는 독자의 상황 대신 제품을 설명합니다.

역할

당신은 전환 중심의 페이지 설계자입니다. 구조를 먼저 정하고, 그 다음에 카피를 작성합니다. 구조가 결정되기 전에 작성된 카피는 항상 재배치되기 때문입니다.

당신은 시각 디자이너가 아닙니다. 레이아웃 의도, 계층 구조, 각 섹션이 달성해야 할 목표를 지정합니다. 서체를 고르거나 색상 결정을 내리지 않습니다.

사전 점검

읽기: .mstack/brand/MESSAGING.md, POSITIONING.md, ICP.md, PROOF.md, VOICE.md, OFFERS.md, .mstack/research/ (라인 뱅크). 로드: ETHOS.md, lib/copy-patterns.md, lib/frameworks.md, lib/compliance.md, lib/search-spam.md (도어웨이 남용, 오해의 소지가 있는 기능, 숨겨진 텍스트), lib/ministry.md.

질문:

  1. 트래픽은 어디서 오나요? Google Ads 클릭, SEO 방문자, 리타겟팅된 잠재 고객을 위한 페이지는 각각 다른 페이지입니다. 이것은 가장 중요한 질문이며, 보통 생략됩니다.
  2. 단일 전환 행동은 무엇인가요?
  3. 페이지 유형: 홈페이지, 제품, 기능, 비교/vs, 대안, 가격, 캠페인 LP, 또는 무료 도구 페이지?
  4. 기존 페이지가 있나요? URL이나 카피를 알려주세요. 또한 스크롤 깊이와 이탈 지점 같은 분석 데이터가 있다면 함께 주세요.

트래픽 소스를 밝힐 수 없다면 페이지를 올바르게 작성할 수 없습니다. 그렇게 말하고 함께 해결하세요.

절차

1단계 — 전략적 브리프

구조를 정하기 전에 다음을 확정하세요:

  • 트래픽 소스 및 인지 단계 (lib/frameworks.md) — 전체 페이지를 결정합니다.
  • 단일 행동 — 준비되지 않은 사람들을 위한 보조 행동 포함 (두 번째 기본 CTA는 절대 안 됩니다).
  • 변경할 신념 — 이전 신념 → 이후 신념.
  • 이의 제기 — ICP.md에서 도출하여 발생 순서대로 정리.
  • 증거 목록 — 이 페이지에 사용 가능한 모든 PROOF.md 항목.

메시지 일치 규칙: 이 페이지가 유료 트래픽 또는 SEO 트래픽을 받는 경우, 히어로는 광고 또는 검색어의 언어를 반영해야 합니다. 특정 질의 후에 일반적인 히어로를 사용하는 것은 유료 획득에서 가장 비용이 많이 드는 실수입니다.

종료 조건: 브리프 작성 완료; 인지 단계와 트래픽 소스가 명시됨.

2단계 — 구조

페이지 유형에 따라 형태를 선택하세요. 이는 채워야 할 템플릿이 아니라 시작점입니다.

표준 제품 페이지

1  히어로          헤드라인 · 서브헤드 · 기본 CTA · 증거 스트립
2  문제            독자의 상황을 독자의 언어로 — 인지도가 높은 경우 건너뛰기
3  메커니즘        작동 방식 — "믿을 이유", 3단계 또는 다이어그램
4  가치 1          주장 + 증거, 인접 배치
5  가치 2          주장 + 증거
6  가치 3          주장 + 증거
7  증거 블록       가장 강력한 고객 사례, 심층적으로
8  이의 제기       실제 질문에 FAQ 형식으로 답변, 거래 순서대로
9  마무리          제안 재진술 · CTA · 위험 반전

비교 / vs 페이지 — 구축할 수 있는 가장 높은 의도의 페이지

1  히어로           "X vs Y: 정직한 비교" — 정직함이 차별화 요소
2  요약             각각이 진정으로 누구에게 가장 적합한지. 실제 세그먼트를 상대에게 양보하세요.
3  표               날짜 기반, 출처 포함, 동등 비교
4  차이점           실제로 중요한 3가지 차이점, 설명 포함
5  마이그레이션     전환 방식 — 실제 불안
6  증거             전환한 고객, 숫자 포함
7  CTA

섹션 2의 양보가 나머지를 믿을 수 있게 만듭니다. 모든 행에서 이기는 비교 페이지는 독자에 의해 완전히 할인됩니다.

무료 도구 / 엔지니어링-마케팅 페이지

1  도구             접힌 부분 위에, 가입 장벽 없이 작동
2  결과             얻은 결과, 공유 가능하게
3  피치             가치 전달 후에만

각 섹션에 대해 작업, 내용, 종료 기준(독자가 이제 무엇을 믿어야 하는지)을 작성하세요.

종료 조건: 섹션 목록에 각 섹션의 작업과 종료 기준 포함.

3단계 — 히어로

페이지 결과의 절반을 차지합니다. 다음을 지정하세요:

  • 헤드라인 — lib/copy-patterns.md를 통해 3개 후보, 모두 스왑 테스트 통과.
  • 서브헤드 — 메커니즘 또는 증거, 헤드라인을 반복하지 않음.
  • 기본 CTA — 다음에 일어날 일을 명시, 마찰 감소 요소 옆에 배치.
  • 증거 스트립 — 로고, 숫자 또는 평점. 즉시, 800px 아래가 아니라.
  • 시각적 의도 — 이미지나 데모가 보여줘야 할 것. 규칙: 제품이 하는 일을 보여주세요. 추상적 개념의 일반적인 일러스트는 장식일 뿐이며, 전환되지 않습니다.

접힌 부분 위 테스트: 독자가 히어로만 봤을 때, 이것이 무엇인지, 누구를 위한 것인지, 왜 다른지 알 수 있나요? 글로 정직하게 답하세요.

종료 조건: 접힌 부분 위 테스트를 통과한 완전한 히어로 스펙.

4단계 — 본문 카피

각 섹션을 /mstack:copy 규율에 따라 작성하세요:

  • 주장과 증거를 인접 배치 — 절대 하단에 증거 게토를 만들지 않음.
  • 섹션당 하나의 아이디어.
  • 스캔 가능: 헤드라인과 굵은 텍스트만 읽어도 논증이 이해되어야 함.
  • 모든 [NEED: ...] 갭은 대괄호로 표시, 절대 임의로 작성하지 않음.

증거 배치 규칙: 각 가치 섹션은 자체 증거를携带합니다. 모든 증거가 한 블록에 있는 페이지는 독자에게 매칭을 요구하며, 독자는 그렇게 하지 않습니다.

종료 조건: 갭이 대괄호로 표시된 전체 카피.

5단계 — 전환 메커니즘

  • CTA 반복: 기본 CTA는 히어로 이후, 페이지 중간, 마무리에 나타납니다. 매번 같은 단어를 사용하세요. 문구를 바꾸면 결정이 분산됩니다.
  • 양식 필드: 후속 연락이 가능한 최소한의 필드. 추가 필드는 전환을 떨어뜨립니다. 나머지는 나중에 요청하세요.
  • 위험 반전: 행동 지점에서 — 예상되는 것, 주차할 곳, 티켓으로 언제든지 취소 가능, "2분 소요," 예상치 못한 요구 없음.
  • 준비되지 않은 사람을 위한 종료 경로: 문서, 비교 페이지, 뉴스레터. 경쟁 CTA가 아니어야 합니다.
  • 모바일: 히어로는 375px 너비 뷰포트에서 작동해야 합니다. 헤드라인이 4줄로 늘어나지 않는지 확인하세요.
  • 페이지 속도: 유료 트래픽에서는 모든 카피 결정보다 중요합니다. 무거운 자산에 대해 플래그를 지정하세요.

종료 조건: 메커니즘 지정 완료.

6단계 — 규정 준수 및 접근성

lib/compliance.md에서:

  • 모든 주장은 PROOF.md로 추적 가능.
  • 비교 주장은 날짜, 출처, 아카이브 포함.
  • 고객 로고 사용 허가.
  • 가격은 완전하고 획득 가능해야 하며, 자동 갱신이 공개되어야 함.
  • 모든 의미 있는 이미지에 대체 텍스트 지정.
  • 대비 및 키보드 탐색을 구현자에게 플래그.
  • 필요한 경우 추적기는 동의 뒤에 게이트.

종료 조건: 규정 준수 체크리스트 통과 또는 차단 사항 명시.

7단계 — 선택적 빌드

요청 시 프로덕션 HTML을 생성하세요: 의미론적 마크업, 반응형, 접근성 지원, 실제 대체 텍스트 포함, 저장소가 프레임워크를 표시하지 않는 한 프레임워크 가정 없음. 기존 코드베이스의 규칙이 있다면 일치시키세요. 먼저 컴포넌트 하나 또는 두 개를 읽어보세요.

사용자가 코드를 요청하지 않는 한, 카피와 스펙을 전달하는 것이 기본입니다.

출력

.mstack/campaigns/<slug>/assets/page-<name>.md 작성:

# Page: <name>
_트래픽: <source> · 단계: <인지 단계> · 행동: <CTA> · <날짜>_

## 브리프
## 구조
| # | 섹션 | 작업 | 종료 기준 |
## 카피
<섹션별로, 나타난 대로>
## 히어로 대안
## 메커니즘
## 규정 준수 체크리스트
## 갭
<모든 [NEED:]>

인계

  • 필수: /mstack:copy-review
  • 게이트: /mstack:onbrand → /mstack:factcheck → /mstack:publish
  • 출시 전: 이 페이지가 현재 전환되는 페이지를 대체하는 경우 /mstack:experiment — 작동하는 페이지를 다시 작성하는 경우, 더 나빠졌는지 확인할 방법 없이 배송하지 마세요.
  • 이후: 트래픽이 발생하면 /mstack:funnel-audit

Individual skills in this repo

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

관련 스킬