Communitygithub.com

tonone-ai/tonone

랜딩 페이지 구조, 전환 중심 레이아웃 설계 또는 정보 아키텍처 계획 시 사용합니다. 예: "SaaS용 랜딩 페이지 구조", "전환 최적화 레이아웃"

tonone란 무엇인가요?

이 스킬은 AI 에이전트(Claude Code, Cursor 등)가 사용자 요청에 따라 전환율이 높은 랜딩 페이지의 정보 아키텍처(IA)를 구조화하고 설계하도록 안내합니다. SaaS, 전자상거래 등 다양한 제품 유형에 대해 섹션 순서와 CTA(Call-to-Action) 배치를 제안하며, 40줄 CLI 출력 형식을 따릅니다. 이 스킬은 랜딩 페이지 패턴 검색 및 제품 추론 검색을 통해 데이터 기반으로 IA를 구성하며, 각 섹션에 '그래서 어쩌라고?' 테스트를 적용해 불필요한 섹션을 제거하고 전환 목적을 명확히 합니다. 주요 안티 패턴으로는 전환 목적이 없는 섹션 추가, 첫 화면에서 기본 CTA를 접힌 부분 아래에 배치하는 행위 등을 경고합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tonone-ai/tonone/tree/HEAD/skills/draft-landing

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

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

문서

draft-landing — 랜딩 페이지 정보 아키텍처

docs/output-kit.md에 정의된 출력 형식을 따르세요. 최대 40줄 CLI, 박스 그리기 스켈레톤, 통합 심각도 표시기, 압축된 산문.

사용 시기

사용자가 랜딩 페이지 구조, 섹션 순서 또는 전환 최적화 레이아웃을 필요로 합니다. 제품 유형이 알려져 있거나 발견 가능해야 합니다.

워크플로우

  1. 사용자 요청 또는 프로젝트 컨텍스트에서 제품 유형 식별
  2. 랜딩 페이지 패턴 검색:
    python3 -m draft_agent.uiux search --domain landing --query "{product_type}" --limit 3
    
  3. 대상 및 전환 컨텍스트를 위한 제품 추론 검색:
    python3 -m draft_agent.uiux search --domain product --query "{product_type}" --limit 3
    
  4. 각 섹션을 "그래서 어쩌고?" 테스트로 검증 — 모든 섹션은 자신의 존재 가치를 증명해야 함
  5. CTA 배치 표시와 함께 섹션 순서 출력

출력 형식

┌─ 랜딩 페이지 IA — {product_type} ──────────────────────────────────┐
│ #  │ 섹션               │ 목적                       │ CTA?          │
├────┼────────────────────┼────────────────────────────┼───────────────┤
│  1 │ {section_name}     │ {purpose}                  │ 기본 CTA      │
│  2 │ {section_name}     │ {purpose}                  │ —             │
│  3 │ {section_name}     │ {purpose}                  │ 보조 CTA      │
│  … │ …                  │ …                          │ …             │
└────┴────────────────────┴────────────────────────────┴───────────────┘

전환 전략: {strategy}
CTA 카피 가이드: {cta_guidance}

안티 패턴

  • 섹션당 "그래서 어쩌고?" 테스트를 절대 건너뛰지 마세요 — 섹션이 답변할 수 없으면 제거하세요
  • 명확한 전환 목적 없이 섹션을 추가하지 마세요
  • 첫 화면에서 기본 CTA를 접힌 부분 아래에 배치하지 마세요
  • 기본 대상과 그들의 '처리해야 할 작업(job-to-be-done)'을 모른 채 페이지를 구조화하지 마세요

전달

출력이 40줄 CLI 예산을 초과하는 경우, 전체 결과와 함께 /atlas-report를 호출하세요. HTML 보고서가 출력입니다. CLI는 영수증입니다 — 박스 헤더, 한 줄 평결, 상위 3개 결과, 보고서 경로. 분석을 CLI에 덤프하지 마세요.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

관련 스킬