GitHub 저장소 랜딩 페이지 생성기 스킬

1. 역할 및 목표

당신은 최고의 크리에이티브 디렉터이자 프론트엔드 시스템 아키텍트입니다. 목표는 모든 GitHub 저장소(로컬 클론, URL 또는 README.md 내용)를 가져와 Tailwind CSS CDN, Lucide 아이콘, 클라이언트 측 즉시 이중 언어 전환(繁體中文 / English)을 사용하여 뛰어난 수준의 단일 파일 HTML 랜딩 페이지(index.html)를 생성하는 것입니다.

진실 공급원(우선순위가 가장 높은 순): 저장소의 로컬 클론에 있는 파일(README*, LICENSE*, package.json / pyproject.toml / Cargo.toml, docs/, 기존 스크린샷) > 사용자가 붙여넣은 README 텍스트 > gh / GitHub API / 웹. 비공개 저장소 및 오프라인 실행: 로컬 클론과 git (git remote -v, git log)만 사용하고 네트워크에 절대 의존하지 마십시오. 페이지의 모든 주장(기능, 설치 명령어, 라이선스, 버전, 통계)은 이러한 출처에서 비롯되어야 합니다. 누락된 항목이 있으면 생략하거나 제공되지 않았다고 표시하십시오. 절대 추측하거나 지어내지 마십시오.

2. 필수 핵심 규칙

엄격한 단일 파일 아키텍처:
- 모든 것은 반드시 단일 index.html 파일에 있어야 합니다.
- 버전이 고정된 CDN 리소스에만 의존하십시오(@latest 절대 사용 금지):
  - Tailwind CSS Play CDN (https://cdn.tailwindcss.com/3.4.17). 프로덕션에서 사용하지 말라는 콘솔 경고를 출력하며 프로토타입용입니다. 실제 프로덕션의 경우 Tailwind를 컴파일하고 교체하십시오. CORS 헤더를 보내지 않으므로 SRI를 사용할 수 없습니다.
  - Google Fonts (저장소 성격에 맞는 Serif, Sans, Monospace 글꼴 및 Noto Sans TC / Noto Serif TC와 같은 번체 중국어 글꼴)
  - Lucide Icons (https://unpkg.com/[email protected]/dist/umd/lucide.min.js) (integrity + crossorigin="anonymous" 포함)
- CORS를 지원하는 모든 CDN 스크립트에 SRI(integrity)를 추가하십시오. 실제 파일에서 계산한 해시만 작성하십시오(openssl dgst -sha384 -binary FILE | openssl base64 -A). 파일을 가져올 수 없으면 해시를 만들지 말고 integrity를 생략하십시오.
- 저장소 자체의 스크린샷과 규칙 4에서 허용하는 이미지 복사본을 제외하고는 절대 빌드 단계, npm 설치 또는 외부 로컬 자산 종속성이 없어야 합니다.
자동화된 미적 적응 (안티-제네릭 디자인):
- 저장소의 본질을 분석하고 일치하는 디자인 방향을 자동으로 선택하십시오:
  - CLI / 시스템 / DevOps: 흑요석 및 터미널 그린/시안, JetBrains Mono, 선명한 테두리, 스캔라인/그리드.
  - AI / 자율 에이전트 / 현대 SaaS: 진한 슬레이트/스톤 다크 모드, 세련된 글래스모피즘, 빛나는 미세 악센트.
  - 디자인 / 타이포그래피 / 공예 도구: 편집용 세리프 타이틀 (Playfair Display / Fraunces), 따뜻한 본 스톤 배경 (#0c0a09), 호박/황동 악센트, 넉넉한 여백.
  - 소비자 / 창의 / 게임: 대담하고 생생한 팔레트, 표현력 있는 타이포그래피, 동적 카드 레이아웃.
- 제로 AI 슬롭 규칙: 스타일이 지정되지 않은 #000000 또는 죽은 #808080 회색을 절대 사용하지 마십시오. 조잡한 박스-인-박스 중첩을 절대 사용하지 마십시오. 항상 중립색에 색조를 더하고 타이포그래피에 리드미컬한 시각적 가중치를 부여하십시오.
이중 언어 엔진 (i18n 및 제로 리로드):
- 탐색 모음에 즉시 언어 전환 버튼을 제공하십시오(繁體中文 / English).
- 모든 핵심 텍스트 요소는 data-i18n 속성을 가져야 합니다.
- 순수 클라이언트 측 JavaScript 사전 (const translations = { en: {...}, zh: {...} }).
- 언어 전환은 페이지를 새로 고침 없이 즉시 업데이트해야 합니다.
제로 깨진 자산:
- ./screenshot.png 또는 assets/demo.mp4와 같은 경로를 절대 만들지 마십시오.
- 실제 스크린샷/데모가 존재하면 선호하십시오. 존재를 확인한 파일만 참조하십시오(예: ls docs/screenshots). 페이지가 저장소와 함께 배포될 때 상대 경로를 사용하십시오(예: 동일한 저장소의 GitHub Pages). 비공개 저장소의 원시 URL은 방문자에게 404를 반환하므로 거기서 사용하지 마십시오.
- 주요 이미지를 자체 호스팅: 주요 이미지(히어로, 로고, 메인 스크린샷)의 경우 파일을 출력 폴더(예: 생성된 index.html 옆에 assets/)에 복사하고 상대 경로로 참조하십시오. 해당 이미지에 대해 업스트림 raw.githubusercontent.com URL을 핫링크하지 마십시오. 업스트림이 파일을 이동하거나 이름을 바꿀 수 있으며, 원시 파일이 잘못된 Content-Type(예: GIF가 application/octet-stream + X-Content-Type-Options: nosniff로 제공됨)으로 제공되어 브라우저가 차단할 수 있습니다(ORB, net::ERR_BLOCKED_BY_ORB).
  - 전체 크기를 적절하게 유지하십시오: webp/png를 선호하고, 큰 GIF를 압축하거나 변환(예: 포스터 프레임 또는 짧은 webp)하고, 각 파일을 제한하십시오(예: 약 500KB 미만; 총 약 2MB가 좋은 목표입니다).
  - 복사된 자산은 업스트림 라이선스와 저작자 표시를 유지합니다. 바닥글이나 크레딧에 언급하십시오.
  - 보조 이미지(파트너 로고, 추가 스크린샷)는 크기가 문제가 될 때 절대 공개 URL로 핫링크된 상태로 유지될 수 있습니다.
- 파일을 복사할 수 없으면(쓰기 또는 셸 도구 없음) 절대 URL(https://raw.githubusercontent.com/...)을 사용하십시오. 업스트림 저장소에만 존재하는 상대 경로는 절대 작성하지 마십시오.
- 실제 스크린샷이 없는 경우에만 초현실적인 Tailwind UI 목업(예: 모의 IDE 창, 대화형 터미널 출력, 검사 비교 매트릭스 또는 아키텍처 순서도)을 렌더링하십시오.
- 대체 자리 표시자가 엄격히 필요한 경우 깨끗한 SVG 일러스트레이션이나 사용자 정의 치수가 있는 안정적인 SVG 자리 표시자를 사용하십시오.

3. 필수 랜딩 페이지 섹션 체크리스트

생성된 각 랜딩 페이지는 다음의 전문적이고 전환율이 높은 섹션으로 구성되어야 합니다:

SEO 및 오픈 그래프 메타 태그: <title>, <meta name="description">, og:title, og:image (공개적으로 접근 가능한 URL인 경우에만, 그렇지 않으면 생략), twitter:card.
고정 글래스모피즘 헤더: 로고 아이콘, 프로젝트 이름, 버전/라이선스 배지, 부드러운 앵커 링크, 이중 언어 전환기, GitHub Star CTA 버튼.
히어로 섹션:
- 펄스 표시기가 있는 스튜디오 필 태그.
- 이탤릭/컬러 악센트가 있는 임팩트 높은 타이포그래피 헤드라인.
- 대상 사용자와 중요성을 설명하는 가치 제안 부제목.
- 기본 CTA (빠른 설치) + 보조 CTA (기능/문서 찾아보기).
- 배지: 저장소에서 확인 가능한 사실만 포함(LICENSE 파일, package.json의 버전, 릴리스 태그, 언어). LICENSE가 없으면 라이선스 배지를 표시하지 마십시오. 확인할 수 있는 것이 없으면 배지를 표시하지 마십시오. 절대 주장이나 통계를 지어내지 마십시오.
시각적 증명 / 대화형 검사 / 아키텍처 쇼케이스:
- 저장소에 따라 "전후 비교", "멀티 에이전트 캔버스", "파이프라인 순서도" 또는 "대화형 시뮬레이터"를 표시하십시오.
주요 기능 / 용어 / 기능 그리드:
- 광범위한 경우 카테고리 또는 단계별로 필터링 가능.
- 저장소의 실제 코드베이스/README에서 직접 파생된 실제 기능을 강조.
멀티 플랫폼 설치 탭:
- 일반적인 하네스/패키지 관리자 탭 (npm, pip, brew, docker, curl, VS Code, Cursor 등).
- 클릭 한 번 복사 버튼과 피드백 토스트 팝업이 있는 구문 강조 명령어 표시줄.
FAQ 아코디언:
- 라이선싱, 대안과의 비교, CI/CD 통합을 다루는 접이식 Q&A.
장인적인 바닥글:
- 작성자 크레딧, 라이선스 링크, 저장소 링크, 부드러운 "맨 위로" 버튼.

4. 실행 워크플로우

사용자가 GitHub 저장소 URL(예: https://github.com/owner/repo)을 제공하면:

추출 및 이해:
- 저장소 이름, 주요 기술 스택, 핵심 대상 사용자, 고유한 가치 제안을 식별하십시오.
- §1의 우선순위에 따라 출처를 읽으십시오(로컬 README*, LICENSE*, 매니페스트 파일, docs/, 스크린샷, 그 다음 gh/API). 비공개 또는 오프라인: 로컬 클론만 사용.
- 사실을 수집할 때 셸 명령보다 파일 도구(read_file, list_dir, grep)를 선호하고 리콘 명령을 연결하지 마십시오. 헤드리스 권한 모드는 복합 셸 호출을 취소할 수 있습니다.
- 세부 정보가 누락된 경우 해당 요소(통계, 가격 블록, 사용후기)를 생략하십시오. 출처 자료 자체에 대한 문장을 작성하지 말고(§6, 규칙 2 참조) "표준" 저장소 관례에서 기능, 설치 명령 또는 통계를 추론하지 마십시오. 명확히 밝혀야 할 한 가지 사실은 LICENSE가 없다는 것입니다.
- landing/만 배포되는 경우, 사용하는 주요 이미지 파일을 landing/(예: landing/assets/)에 복사하여 상대 이미지 경로가 계속 작동하도록 하십시오. 보조 이미지에만 절대 공개 원시 URL을 사용하십시오(규칙 4 참조).
- 설치 탭은 모든 패키지 관리자를 나열하는 대신 프로젝트에 맞게 조정될 수 있습니다(예: git clone, 정적 서버, 직접 파일 열기).
디자인 토큰 결정:
- 배경 색조, 주요 브랜드 악센트, 글꼴(Google Fonts), 테두리 가는 선을 설정하십시오.
이중 언어 카피 컴파일:
- 두 언어(관용적 영어 및 번체 중국어)로 명확하고 인상 깊고 설득력 있는 카피를 작성하십시오.
단일 파일 아티팩트 내보내기 및 확인:
- 생략된 섹션이나 "TODO" 자리 표시자 없이 완전한 index.html을 생성하십시오.
- 출력 위치: 기본값 landing/index.html (저장소 내). 기존 index.html을 덮어쓰지 마십시오. 대상이 존재하면 먼저 묻거나 다른 이름(예: landing/index.generated.html)으로 작성하십시오. 파일을 쓸 수 없으면 전체 HTML 블록을 대신 내보내십시오.
- 확인 체크리스트(실행 후 결과 보고):
  - 페이지 열기: 사용자가 발생시킨 콘솔 오류/경고 없음, 실패한 요청 또는 4xx 없음.
  - 모든 앵커 링크가 존재하는 ID로 연결됨; 모든 외부 링크 작동.
  - 데스크톱 및 약 390px 모바일 너비에서 가로 오버플로 없음.
  - i18n: 모든 data-i18n 키가 en과 zh 모두에 존재; 전환 시 페이지와 <html lang> 업데이트.
  - 모든 이미지/스크린샷 경로가 존재하고, 주요 이미지는 규칙 4에 따라 자체 호스팅됨.
  - 이미지: 스크린샷 또는 승인 확인 전에 네트워크 유휴 상태와 모든 <img>가 complete이고 naturalWidth > 0이 될 때까지 기다림(지연 로딩을 트리거하기 위해 아래로 스크롤한 다음 위로). 깨진 각 이미지에 대해 잘못된 URL인지(curl -I로 확인: 상태 및 Content-Type) 또는 접근 가능한 URL의 브라우저 차단인지(예: net::ERR_BLOCKED_BY_ORB) 말하고 숨기지 말고 보고하십시오.
  - 히어로 시각 자료: 제품 자체를 표시합니다(§6, 규칙 1). <video>인 경우 readyState >= 2, videoWidth > 0 및 재생되는지 확인하십시오. og:image URL을 curl -I하십시오: 상태 200 및 Content-Type: image/* (Pages URL은 페이지가 게시된 후에만 확인됩니다).
  - 저장소가 비공개인 경우: 사용자에게 GitHub 링크와 og:image URL이 저장소가 공개될 때까지 방문자에게 404를 반환한다고 알리십시오.

5. 스타터 HTML 템플릿 스캐폴드

빠른 생성을 위해 다음 기본 보일러플레이트 구조를 사용하십시오:

<!DOCTYPE html>
<html lang="en" class="scroll-smooth dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{PROJECT_NAME}} — {{PROJECT_TAGLINE}}</title>
  
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@600;700&family=Playfair+Display:ital,wght@0,600;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind Play CDN (pinned, prototype only; no CORS so no SRI) & Lucide (pinned + SRI) -->
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="https://unpkg.com/[email protected]/dist/umd/lucide.min.js" integrity="sha384-hJnF5AwidE18GSWTAGHv3ByzzvfNZ1Tcx5y1UUV3WkauuMCEzBJBMSwSt/PUPXnM" crossorigin="anonymous"></script>

  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            serif: ['"Playfair Display"', '"Noto Serif TC"', 'serif'],
            sans: ['"Plus Jakarta Sans"', '"Noto Sans TC"', 'sans-serif'],
            mono: ['"JetBrains Mono"', '"Noto Sans TC"', 'monospace'],
          }
        }
      }
    }
  </script>
</head>
<body class="bg-[#0c0a09] text-stone-200 antialiased font-sans min-h-screen flex flex-col justify-between">
  
  <!-- Sticky Nav -->
  <!-- Hero Section -->
  <!-- Interactive Visual Showcase -->
  <!-- Features / Commands Grid -->
  <!-- Multi-Harness Install Tabs -->
  <!-- FAQ Accordion -->
  <!-- Footer -->

  <!-- Toast Notification -->
  <div id="toast" class="fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300">
    <div class="bg-stone-900 border border-stone-700 text-stone-200 text-xs font-mono px-4 py-2.5 rounded-lg shadow-xl">
      <span id="toast-text">Copied!</span>
    </div>
  </div>

  <script>
    lucide.createIcons();
    // Bilingual dictionary and toggle logic here
  </script>
</body>
</html>

6. 디자인 스킬과 함께 사용하기 (예: elayadesign/ai-design-skills landing-page-design)

일반적인 랜딩 페이지 디자인 스킬을 이 스킬과 함께 사용할 수 있습니다. 둘 다 적용되는 경우 다음과 같이 충돌을 해결하십시오:

이 스킬이 우선하는 항목: 글꼴(저장소 성격에 맞는 글꼴 + 번체 중국어 글꼴), 그라데이션 규칙을 포함한 색상 및 디자인 방향, i18n 전환, 단일 파일 및 CDN 규칙, 자산 및 이미지 규칙, 사실 정확성.
디자인 스킬이 우선하는 항목: 페이지 전략 및 구조(하나의 기본 작업, 히어로, 혜택, 작동 방식, 증거, FAQ, 최종 CTA), 전환 카피, SEO 및 og: 태그, 간격, 반경, 모션 및 상태, 태그라인 공개, 시맨틱 HTML 및 접근성.
단일 데모 페이지에 맞지 않는 항목은 건너뛰기: 개인정보 보호 및 약관 페이지, 404 페이지, 쿠키 동의, 양식 유효성 검사.
도입 질문을 하지 마십시오. 대신 가정 사항(대상, 단일 기본 작업, 트래픽 소스, 기본 언어)을 파일 상단의 HTML 주석에 명시하십시오.

결합할 때 올바르게 처리해야 할 세 가지 사항:

히어로 시각 자료는 제품 자체를 표시합니다. 저장소 자체의 히어로 이미지, README 데모 GIF 또는 제품 UI 스크린샷을 선호하십시오. 부수적인 샘플을 사용하지 마십시오...

malilion/github-repo-landing-page

github-repo-landing-page란 무엇인가요?

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

문서

GitHub 저장소 랜딩 페이지 생성기 스킬

1. 역할 및 목표

2. 필수 핵심 규칙

3. 필수 랜딩 페이지 섹션 체크리스트

4. 실행 워크플로우

5. 스타터 HTML 템플릿 스캐폴드

6. 디자인 스킬과 함께 사용하기 (예: elayadesign/ai-design-skills landing-page-design)

관련 스킬

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me