Communitygithub.com

바이오 링크 배포자

Linktree 스타일의 바이오 링크 허브 페이지를 단일 자체 포함 HTML 파일로 생성합니다.

바이오 링크 배포자란 무엇인가요?

이 스킬은 사용자가 Instagram, TikTok, X(트위터), LinkedIn 등 여러 소셜 미디어 프로필에서 하나의 링크로 모든 콘텐츠를 연결할 수 있는 Linktree 스타일의 바이오 링크 페이지를 만듭니다. 출력은 단일 HTML 파일로, 최소형, 다크, 그라디언트의 3가지 테마 옵션을 제공하며 모바일 우선으로 디자인되어 있습니다(바이오 링크 트래픽의 90% 이상이 모바일에서 발생). 사용자가 직접 링크 목록을 제공하거나 이전 스킬 세션(S1-S4)에서 수집된 제품, 블로그 게시물, 랜딩 페이지 URL을 자동으로 가져와 카테고리별로 정리합니다. 또한 Netlify Drop, Vercel, GitHub Pages에 즉시 배포할 수 있는 지침을 제공하며, 커스텀 도메인 설정 가이드도 포함되어 있습니다.

지원 대상✓Claude Code~Codex CLI✓Cursor✓Gemini CLI✓Windsurf
npx skills add https://github.com/Affitor/affiliate-skills/tree/HEAD/skills/distribution/bio-link-deployer

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

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

문서

바이오 링크 배포자은(는) 무엇을 하나요?

모든 제휴 콘텐츠(블로그 게시물, 랜딩 페이지, 소셜 프로필, 제품 링크)를 한곳에 연결하는 Linktree 스타일의 허브 페이지를 만듭니다. 출력은 단일 자체 포함 HTML 파일이며, 3가지 테마 옵션, 모바일 우선(바이오 링크 트래픽의 90% 이상이 모바일)으로 제공되어 어디에든 배포할 수 있습니다.

단계

S5: 유통 — 전체 제휴 깔때기를 하나로 묶는 중앙 허브입니다. 이 링크를 소셜 미디어 바이오, 이메일 서명, 그리고 모든 것을 지배할 하나의 링크가 필요한 모든 곳에 넣으세요. Linktree와 달리 페이지를 소유하고 비용을 지불하지 않습니다.

사용 시기

  • 사용자가 소셜 미디어 프로필의 링크-인-바이오 페이지를 원할 때
  • 사용자가 모든 제휴 콘텐츠를 연결하는 단일 페이지를 원할 때
  • 사용자가 "linktree", "bio link", "link page", "link in bio", "all my links" 등과 같은 말을 할 때
  • 사용자가 여러 제휴 제품/블로그 게시물/랜딩 페이지를 보유하고 허브가 필요할 때
  • 사용자가 Linktree/Beacons/Stan Store의 무료 대안을 원할 때

입력 스키마

user_name: string           # 필수 — 표시 이름 또는 핸들 (예: "@alexcreator")

tagline: string             # 선택 사항 — 이름 아래 짧은 소개
                            # 기본값: 링크 카테고리에서 자동 생성

avatar_url: string          # 선택 사항 — 프로필 이미지 URL
                            # 기본값: 니치 기반 이모지 플레이스홀더

links:                      # 필수 — 최소 3개의 링크
  - label: string           # 표시 텍스트 (예: "HeyGen — AI 비디오 크리에이터")
    url: string             # 대상 URL
    category: string        # 그룹 레이블 (예: "도구", "내 콘텐츠", "연결")
    icon: string            # 선택 사항 — 시각적 효과를 위한 이모지 (예: "🎬")

theme: string               # 선택 사항 — "minimal" | "dark" | "gradient"
                            # 기본값: "minimal"

체이닝 컨텍스트: 이전 스킬(S1-S4)이 대화에서 실행된 경우, 다음 출력 스키마 필드를 사용하세요:

  • S1 recommended_program.url + .name → "추천 도구" 링크로 추가
  • S2 posts[].platform → 사용자의 소셜 플랫폼 프로필로 연결
  • S3 products_featured[].url + .name → "내 콘텐츠" 링크(블로그 게시물)로 추가
  • S4 landing_page.filename 또는 배포된 URL → "랜딩 페이지" 링크로 추가
  • S4 products_featured[].url + .name → 아직 포함되지 않은 경우 제품 링크로 추가

사용자가 "지금까지 한 모든 내용으로 바이오 링크를 만들어 줘"라고 말하면 — 대화에서 모든 제품, 블로그 게시물, 랜딩 페이지를 수집하여 카테고리로 정리하세요.

워크플로우

1단계: 링크 수집

다음 소스 중 하나에서 링크를 수집합니다:

옵션 A — 사용자가 직접 링크 제공: links 배열을 그대로 사용합니다. 각 링크에 레이블, URL 및 카테고리가 있는지 확인합니다.

옵션 B — 대화 컨텍스트에서 수집: 이전 스킬(S1-S4)이 실행된 경우, 수집:

  • 제품 제휴 URL → 카테고리: "추천 도구"
  • 블로그 게시물 URL → 카테고리: "내 콘텐츠"
  • 랜딩 페이지 URL → 카테고리: "랜딩 페이지"
  • 소셜 미디어 프로필(언급된 경우) → 카테고리: "연결"

옵션 C — 사용자가 부분 정보 제공: 누락된 필수 필드를 요청합니다. 최소: user_name + 3개의 링크.

링크를 카테고리별로 정리합니다. 권장 카테고리 순서:

  1. "추천 도구" (제휴 제품 링크 — 먼저 돈이 되는 링크)
  2. "내 콘텐츠" (블로그 게시물, 랜딩 페이지, 비디오)
  3. "연결" (소셜 미디어, 이메일, 웹사이트)

2단계: 페이지 구축

페이지 구조와 세 가지 테마 변형을 위해 templates/bio-link.html을 읽습니다.

선택한 theme을 적용합니다:

최소형 (기본값):

  • 깔끔한 흰색 배경, 미묘한 테두리
  • 어두운 텍스트, 밝은 회색 악센트
  • 둥근 모서리 (12px)
  • 가장 적합: 전문적이고 깔끔한 스타일

다크:

  • 어두운 네이비 배경 (#0f172a)
  • 밝은 텍스트, 파란색 악센트
  • 미묘한 카드 테두리
  • 가장 적합: 기술, 게임, 현대 브랜드

그라디언트:

  • 보라색에서 파란색으로의 그라디언트 배경
  • 흰색 텍스트, 프로스트 유리 링크 카드
  • 큰 둥근 모서리 (24px)
  • 가장 적합: 창의적, 라이프스타일, 대담한 브랜드

선택한 테마를 기반으로 :root에 CSS 변수를 설정합니다. 템플릿에서 다른 테마 블록을 제거합니다.

avatar_url이 제공되면 <img> 태그를 사용합니다. 그렇지 않으면 사용자의 니치와 일치하는 이모지가 있는 이모지 플레이스홀더 div를 사용합니다 (기본값: 🚀).

3단계: 출력

최종 출력을 다음 구조로 제시합니다:

파트 1: 페이지 요약

---
바이오 링크 페이지
---
이름: [user_name]
테마: [minimal/dark/gradient]
링크 수: [count]
카테고리: [list]
---

파트 2: 완전한 HTML 펜스 코드 블록(```html) 안의 전체 HTML 파일. index.html(또는 links.html)로 저장하고 브라우저에서 엽니다.

파트 3: 배포 지침 references/domain-setup.md를 읽고 배포 옵션을 제공합니다:

---
배포
---
1. `index.html`로 저장
2. 미리보기: 브라우저에서 파일 열기
3. 배포 (하나 선택):
   - Netlify Drop: 파일을 https://app.netlify.com/drop로 드래그 앤 드롭 (30초)
   - Vercel: `npx vercel deploy --prod` (Node.js 필요)
   - GitHub Pages: 저장소로 푸시 → 설정 → 페이지 → 메인 브랜치
4. 소셜 바이오에 추가: Instagram, X, TikTok, LinkedIn 바이오에 URL 붙여넣기
5. 커스텀 도메인: DNS 설정 가이드는 references/domain-setup.md 참조
---

4단계: 자체 검증

출력을 제시하기 전에 다음을 확인합니다:

  • 모든 링크가 작동하는 URL입니다 (플레이스홀더 아님)
  • 모바일 우선 레이아웃이 375px 너비에서 올바르게 렌더링됩니다
  • 테마 CSS 사용자 정의 속성이 일관되게 적용됩니다
  • 제휴 링크가 포함된 경우 FTC 공개 표시가 있습니다
  • "Built with Affiliate Skills by Affitor" 푸터가 있습니다
  • 수익 링크(제휴)가 소셜/콘텐츠 링크보다 먼저 정렬됩니다

어느 검사라도 실패하면 출력을 전달하기 전에 수정합니다. 사용자에게 체크리스트를 표시하지 말고 — 그냥 출력이 통과하는지 확인합니다.

출력 스키마

output_schema_version: "1.0.0"  # Semver — 주요 변경 사항에 대해 메이저 버전 업
bio_link:
  user_name: string         # 표시 이름
  theme: string             # 적용된 테마
  html: string              # 완전한 자체 포함 HTML
  filename: string          # 제안된 파일명 (예: "index.html")
  link_count: number        # 페이지의 총 링크 수
  categories: string[]      # 사용된 카테고리

deploy:
  local: string             # "브라우저에서 index.html 열기"
  netlify: string           # Netlify Drop 지침
  vercel: string            # Vercel 배포 명령
  github_pages: string      # GitHub Pages 지침

출력 형식

출력을 세 개의 명확히 구분된 섹션으로 제시합니다:

  1. 페이지 요약 — 이름, 테마, 링크 수, 카테고리
  2. HTML — 코드 블록 안의 완전한 파일, 바로 저장 가능
  3. 배포 지침 — 페이지를 라이브로 만들고 소셜 바이오에 추가하는 방법

HTML은 즉시 사용 가능해야 합니다 — .html로 저장하고, 브라우저에서 열면 작동합니다. 빌드 단계, 종속성 없음, 모바일 최적화.

오류 처리

  • 링크가 제공되지 않음: "바이오 페이지를 만들려면 최소 3개의 링크가 필요합니다. 제휴 제품 URL, 블로그 게시물, 소셜 프로필 또는 랜딩 페이지를 나열해 주세요."
  • user_name 없음: "어떤 이름이나 핸들을 표시할까요? (예: @yourusername)"
  • 잘못된 avatar_url: 이모지 플레이스홀더를 대신 사용합니다. 참고: "아바타 이미지를 로드할 수 없어 이모지 플레이스홀더를 사용했습니다. 나중에 HTML을 편집하여 교체할 수 있습니다."
  • 알 수 없는 테마: 최소형으로 기본 설정. 알림: "'minimal' 테마를 사용했습니다. 사용 가능한 테마: minimal, dark, gradient."
  • 링크가 너무 많음 (20개 이상): 모두 포함하지만 제안: "링크가 많습니다 — 상위 10-15개를 추천하고 나머지는 전체 디렉토리 페이지로 연결하는 것을 고려하세요."
  • 카테고리가 제공되지 않음: URL 패턴에 따라 자동 분류 (소셜 도메인 → "연결", 블로그 URL → "내 콘텐츠", 제품 URL → "도구").

예시

예시 1: 전체 입력

사용자: "@sarahcontent를 위한 다크 테마 바이오 링크 페이지를 만들어 줘. 링크는: HeyGen (heygen.com/ref), Semrush (semrush.com/ref), 내 HeyGen 리뷰 (blog.com/heygen), X에서 팔로우 (x.com/sarah)" 작업: theme=dark, 3개 카테고리(도구, 콘텐츠, 연결)로 정리, HTML 생성.

예시 2: 대화 컨텍스트에서

사용자: "오늘 우리가 한 모든 것으로 바이오 링크 페이지를 만들어 줘" 컨텍스트: S1이 HeyGen을 찾음, S3가 블로그 게시물을 작성함, S4가 랜딩 페이지를 만듦 작업: 대화에서 모든 URL 수집, 자동 분류, 기본 테마=minimal, HTML 생성.

예시 3: 최소 입력

사용자: "링크 인 바이오 페이지가 필요해" 작업: user_name과 링크를 요청합니다. 예시 제공: "표시 이름과 원하는 링크는 무엇인가요? 예: 제품 URL, 블로그 게시물, 소셜 프로필."

참조

  • templates/bio-link.html — 3가지 테마 변형(최소형, 다크, 그라디언트)이 있는 바이오 링크 페이지 템플릿. 2단계에서 읽음.
  • references/domain-setup.md — Netlify Drop, Vercel, GitHub Pages를 위한 호스팅 및 도메인 설정 가이드. 3단계에서 읽음.
  • shared/references/ftc-compliance.md — 바이오 링크 페이지용 FTC 공개(푸터 텍스트). 2단계에서 참조.
  • shared/references/affitor-branding.md — Affitor 푸터 HTML. 2단계에서 참조.
  • shared/references/flywheel-connections.md — 마스터 플라이휠 연결 맵

수익 및 실행 계획

예상 결과

  • 수익 가능성: 귀하의 바이오 링크는 모든 소셜 미디어 트래픽의 깔때기 입구입니다. 평균 바이오 링크 CTR은 프로필 방문자의 1-3%입니다. 월 5,000회 프로필 조회 시 → 50-150회 클릭 → 제휴 전환율 3% 및 수수료 $50인 경우 = $75-225/월. 최적화된 바이오 링크를 가진 탑 크리에이터는 $500-2,000/월을 보고합니다.
  • 벤치마크: 위치 1-2에 배치된 수익 링크(제휴 제품)는 모든 바이오 링크 클릭의 60%를 차지합니다. 위치가 디자인보다 중요합니다.
  • 추적할 주요 지표: 링크별 클릭률 — 어떤 링크가 가장 많이 클릭됩니까? 주간 재정렬하여 가장 성과가 좋은 링크를 상단에 유지하세요.

지금 당장 해야 할 일 (15분)

  1. 페이지 배포 — Netlify Drop 사용 (드래그 앤 드롭, 30초)
  2. 모든 소셜 바이오 업데이트 — Instagram, TikTok, X, LinkedIn, YouTube — 새 바이오 링크 URL로
  3. 모바일에서 확인 — 바이오 링크 트래픽의 90% 이상이 모바일입니다. 지금 당장 휴대폰에서 링크를 열어보세요.
  4. 분석 도구 북마크 — Netlify를 사용하는 경우 Netlify Analytics를 확인하거나 무료 분석 스니펫을 추가하세요.

결과 추적

7일 후: 어떤 링크가 가장 많은 클릭을 받습니까? 최고 제휴 제품입니까? 그렇지 않다면 링크를 재정렬하세요 — 수익 링크를 #1 위치에 두세요. 성과에 따라 매주 확인하고 회전시키세요.

다음 단계 — 이 프롬프트를 복사하여 붙여넣으세요: "내 바이오 링크 페이지를 커스텀 도메인과 함께 GitHub Pages에 배포해 줘" → github-pages-deployer 실행

플라이휠 연결

공급 대상

  • conversion-tracker (S6) — 클릭 추적을 위해 배포된 링크 허브 URL
  • github-pages-deployer (S5) — 배포할 바이오 링크 HTML

공급 출처

  • landing-page-creator (S4) — 링크 허브에 추가할 랜딩 페이지 URL
  • squeeze-page-builder (S4) — 링크 허브용 스퀴즈 페이지 URL
  • webinar-registration-page (S4) — 링크 허브용 등록 페이지 URL

피드백 루프

  • conversion-tracker (S6)는 어떤 바이오 링크가 가장 많은 클릭을 받는지 보여줍니다 → 가장 높은 전환율의 링크를 상단에 배치하도록 링크 재정렬

품질 게이트

출력을 전달하기 전에 다음을 확인합니다:

  1. 내 개인 소셜에서 공유할 것인가?
  2. 구체적이고 놀라운 세부 정보를 포함하는가? (일반적이지 않음)
  3. 독자의 지능을 존중하는가?
  4. 공유할 가치가 있을 만큼 뛰어난가? (퍼플 카우 테스트)
  5. 거부할 수 없는 제안 프레이밍인가? (S4 오퍼 스킬이 실행된 경우)

어느 하나라도 아니오 → 전달하기 전에 다시 작성하세요.

chain_metadata:
  skill_slug: "bio-link-deployer"
  stage: "distribution"
  timestamp: string
  suggested_next:
    - "github-pages-deployer"
    - "conversion-tracker"

Individual skills in this repo

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

Affitor/affiliate-skills

Write paid ad copy for affiliate offers across ad platforms. Triggers on: "write ad copy", "Facebook ad for affiliate", "Google Ads copy", "TikTok ad script", "Pinterest ad", "paid traffic to affiliate", "create ad campaign", "ad headlines", "ad descriptions", "scale with paid ads", "run ads for my affiliate link", "write Facebook ad", "Google Search ad copy".

Affitor/affiliate-skills

Take 1 blog post or article and generate 15-30 platform-native micro-content pieces. Not reformatting — re-contextualizing for each platform's culture. Triggers on: "atomize this content", "repurpose my blog post", "turn this into social posts", "content atomizer", "pillar content", "one to many content", "repurpose content", "multiply my content", "content explosion", "turn article into posts", "break down this article", "micro content from blog", "content pillar strategy", "10x my content", "platform-native content", "atomize", "content multiplication".

Affitor/affiliate-skills

Generate branded infographic specifications from any content or data. Outputs structured layout, copy, data visualization, and color scheme — ready to render as HTML/CSS, Satori, Canva, or any design tool. Use this skill when the user wants an infographic, data visual, social media image, comparison chart, stat card, or says "create an infographic for [content]", "make a visual for my LinkedIn post", "design an image for [topic]", "stat graphic for [data]", "comparison infographic", "branded image", "social media graphic", "infographic for [blog post]", "data visualization", "visual content", "image for my post", "LinkedIn carousel image", "feature comparison chart", "pricing table image".

Affitor/affiliate-skills

Write short-form video scripts for TikTok, Instagram Reels, and YouTube Shorts that promote affiliate products with strong hooks, demos, and CTAs. Use this skill when the user asks about TikTok scripts, Reels scripts, Shorts scripts, short-form video for affiliate marketing, or says "write a TikTok for X", "script a Reel promoting X", "YouTube Shorts script affiliate", "60-second video script", "hook for TikTok affiliate", "write a video promoting X", "TikTok script that converts", "short video script for product review", "viral TikTok affiliate script", "how to promote X on TikTok".

관련 스킬