Claude Code, Codex 및 유사한 코딩 에이전트 환경을 위한 에이전트 스킬입니다. 기사, 카피, 스크린샷, 제품 노트, 자막 또는 사진에서 샤오홍슈 / 레드노트 캐러셀 이미지와 위챗 21:9 + 1:1 커버 쌍을 생성합니다.
두 가지 비주얼 시스템이 하나의 워크플로우를 공유합니다:
- 에디토리얼. Monocle / Kinfolk / Cereal의 정신을 담은 절제된 레이아웃. 스토리텔링, 라이프스타일, 여행, 독서, 영화 및 개인적인 관찰에 가장 적합합니다.
- 스위스 인터내셔널. 그리드 중심, 단일 앵커 색상, 날카로운 헤어라인, 극단적인 서체 대비. 제품 리뷰, 데이터, 프레임워크, 튜토리얼 및 AI 도구에 가장 적합합니다.
guizang-ppt-skill의 자매 프로젝트입니다. 공유된 비주얼 언어, 별도 유지 관리. PPT는 '가로 스와이프 발표 자료'를 해결하고, 이것은 '정적 피드 이미지'를 해결합니다.
30초 시작
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
또는 셸 액세스 권한이 있는 AI 에이전트에 다음을 붙여넣으세요:
Install guizang-social-card-skill for me. Clone https://github.com/op7418/guizang-social-card-skill into ~/.claude/skills/guizang-social-card-skill, then verify that SKILL.md, assets/, and references/ exist.
이미 설치한 경우 다음으로 업데이트하세요:
Update guizang-social-card-skill for me. Go to ~/.claude/skills/guizang-social-card-skill, run git pull, then tell me the latest commit.
그런 다음 에이전트에게 다음과 같이 요청하세요:
Make me a Swiss-style Xiaohongshu carousel from this article, 5 cards, IKB blue.
기타 유용한 프롬프트:
Make me a 3:4 Xiaohongshu set from this product review, with editorial-style titles.
Turn this article into a WeChat cover pair: 21:9 hero + 1:1 share card, visually consistent.
I have 3 camping photos — make me an image-led Xiaohongshu carousel.
Turn this game guide copy into a Xiaohongshu set; pull some game art from Wallhaven.
이 스킬로 얻을 수 있는 것
- 🖋 두 가지 비주얼 시스템: 분위기와 내러티브를 위한 에디토리얼, 사실과 구조를 위한 스위스, 하나의 워크플로우 공유
- 📐 3가지 캔버스 크기:
.poster.xhs1080×1440 (샤오홍슈 3:4),.poster.wide2100×900 (위챗 21:9),.poster.square1080×1080 (위챗 1:1) - 🧩 28개의 레이아웃 골격: 16개 에디토리얼 (
M01-M16, 이미지 중심 커버, 파이프라인, Before/After 포함) + 12개 스위스 (S01-S12, KPI 타워, H-바 차트, 매트릭스 + 히어로 포함) - 🎨 10가지 테마 프리셋: 6개 에디토리얼 (잉크 클래식, 인디고 포셀린, 포레스트 잉크, 크라프트 페이퍼, 듄, 미드나잇 잉크 다크) + 4개 스위스 앵커 색상 (IKB 클라인 블루, 레몬, 레몬 그린, 세이프티 오렌지)
- 🖼 이미지 소싱 워크플로우: 사용자 이미지 우선, 그 다음 Unsplash → Pexels → Flickr CC → Wallhaven → 직접 검색 순으로 폭포수처럼 진행하며, 자동 생성된
SOURCES.md와 함께 로컬에 다운로드 - 🌫 WebGL 잉크 플로우 배경: 에디토리얼 히어로 페이지는 라이브 잉크 애니메이션을 제공할 수 있으며, 저전력 장치 또는 스크린샷 모드에서 비활성화 가능
- 🪧 이미지 오버레이 + 얼굴 안전: 풀 블리드 이미지에는 마스크가 적용되어야 하며, 텍스트 드롭 존은 피사체를 피해야 합니다.
references/image-overlay.md에 확고한 규칙이 있습니다. - 🧰 스크린샷 미화 자산: 9가지 실제 텍스처 WebP 배경 (에디토리얼 5종 / 스위스 4종),
.frame-shot/.device-browser/.device-phone유틸리티와 함께 제공 - 🗺 지도 컴포넌트: MapLibre + OSM 실제 타일, 다중 핀 + 연결선, 여행 가이드용으로 제작
- ✅ 검증기:
validate-social-deck.mjs가 오버플로우, 타입 캡 위반, 4밴드 밀도 간격, 푸터 충돌을 자동 감지 - 📄 단일 파일 HTML + Playwright 렌더링: 프론트엔드 빌드 파이프라인이 필요 없음.
node render.mjs로 PNG 직접 출력
적합한 경우 / 적합하지 않은 경우
✅ 적합: 샤오홍슈 캐러셀 / 위챗 커버 쌍 / 모멘츠 커버 / 채널 커버 / 기사 비주얼 / 튜토리얼 페이지 / 데이터 요약 / 여행 가이드 / 제품 리뷰 / 스크린샷 설명
❌ 부적합: 가로 스와이프 데크 (guizang-ppt-skill 사용) / 장편 비디오 생성 / 순수 사진 리터칭 / 레이아웃 없는 일반 텍스트 편집
11가지 샤오홍슈 카테고리
'권장 영역'에 따라 등급이 매겨짐 — references/category-cookbook.md 참조:
처음부터 끝까지 강력 (카피 / 구조 / 이미지 모두 처리 가능):
- 여행, 커리어, 추천 (하위 장르 지정 후)
카피와 구조에 강력, 이미지는 사용자 또는 소싱된 아트에 의존:
- 게임, 영화, 음식 (레시피 중심), 메이크업 (튜토리얼 중심), 피트니스, 홈, 패션 (큐레이션 픽)
범위 밖, 사전 선언 (억지로 맞추지 않음):
- OOTD 라이브 샷 / 드림코어 / 필름 에뮬레이션 그레이딩 / 실제 피부 테스트 메이크업 — 사진 촬영이나 후반 작업에 크게 의존하는 모든 것
일반적인 시나리오
| 작업 | 권장 워크플로우 |
|---|---|
| 긴 기사 → 샤오홍슈 캐러셀 | 핵심 요점 추출; 에디토리얼은 내러티브 페이싱, 스위스는 데이터 분석에 적합 |
| 제품 리뷰 / 도구 정리 | 스위스 + IKB 블루, S09 KPI 타워 / S10 H-바 차트 선호 |
| 여행 / 라이프스타일 | 에디토리얼 + 미드나잇 잉크 또는 듄, 풀 블리드 히어로에는 M16 이미지 중심 커버 |
| 위챗 커버 쌍 | 동일한 콘텐츠를 두 번 렌더링: .poster.wide 21:9 + .poster.square 1:1, 시각적으로 일관되게 |
| 스크린샷 튜토리얼 / 도구 연습 | .frame-shot + .device-browser, 스위스 그리드 베이스 선호 |
| 게임 가이드 / 영화 요약 | 에디토리얼 + 미드나잇 잉크, 풀 블리드 히어로를 위해 Wallhaven에서 게임 아트 가져오기 |
| 데이터 요약 / 연간 리뷰 | 스위스 + 레몬 또는 세이프티 오렌지, 매트릭스 + 레저 조합 |
왜 단일 파일 HTML을 PNG로?
- 에이전트 친화적: HTML + CSS는 텍스트이므로 에이전트가 직접 작성, 읽기, 편집 및 검증 가능
- 레이아웃 정밀도: CSS 그리드 + 엄격한 타입 / 마진 / 그리드 규칙은 마크다운의 레이아웃 범위를 훨씬 뛰어넘음
- 개방형 이미지 소싱: Unsplash / Pexels / Wallhaven / Mapbox / OSM / 모든 웹 리소스에 연결 가능
- 검증 가능한 품질:
validate-social-deck.mjs가 Playwright DOM 측정을 실행하므로 추측이 아님 - 간편한 전달:
output/*.png를 직접 전달 — 배포나 내보내기 도구가 필요 없음
플랫폼 지원
| 플랫폼 | 상태 | 참고 |
|---|---|---|
| Claude Code | 지원됨 | 네이티브 스킬 워크플로우, 카드 생성 및 반복 작업에 이상적 |
| Codex | 지원됨 | 장편 카드 생성, 이미지 소싱, 비주얼 QA에 적합 |
| Cursor / 기타 로컬 에이전트 | 작동함 | 파일 시스템 읽기/쓰기 + 셸 실행 필요 |
| 일반 챗봇 | 권장하지 않음 | 파일 시스템과 렌더링 파이프라인이 없으면 이미지를 안정적으로 전달할 수 없음 |
설치
옵션 1: 한 줄 설치 (권장)
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
옵션 2: AI에 붙여넣기
guizang-social-card-skillClaude Code 스킬을 설치해 주세요. 단계:
~/.claude/skills/가 존재하는지 확인합니다 (없으면 생성)git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill실행- 확인:
ls ~/.claude/skills/guizang-social-card-skill/결과에SKILL.md,assets/,references/가 표시되어야 함- 완료되면 알려주세요. 나중에 "샤오홍슈 캐러셀 만들어 줘" 같은 말을 하면 이 스킬이 실행됩니다.
위 블록을 Claude Code / Cursor / 셸 액세스가 가능한 모든 AI 에이전트에 붙여넣으세요.
옵션 3: 수동 CLI
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
실행 방법
설치하면 Claude Code가 스킬을 자동 감지합니다. 실행 문구:
- "샤오홍슈 / 레드노트 캐러셀 만들어 줘"
- "레드노트 카드 만들어 줘"
- "위챗 21:9 히어로 + 1:1 공유 카드 만들어 줘"
- "소셜 카드 / 매거진 스타일 소셜 카드 생성해 줘"
- "이 기사를 튜토리얼 캐러셀로 변환해 줘"
- "스위스 스타일 샤오홍슈 리뷰 / IKB 스타일 카드 만들어 줘"
워크플로우
이 스킬은 구조화된 워크플로우입니다. 에이전트는 7단계를 거칩니다:
- 인테이크 — 4가지를 캡처: 대상 플랫폼 / 스타일 / 소스 콘텐츠 / 사용자 이미지. 이미지가 없을 경우 A/B/C 옵션을 한 번 제시합니다 (직접 촬영 / AI 생성 / 온라인 소싱); 다시 제안하지 않습니다
- 스타일 & 테마 — 에디토리얼 또는 스위스를 선택한 다음 10가지 테마 프리셋 중 하나를 선택합니다. 사용자 정의 hex 값은 허용되지 않습니다
- 레이아웃 선택 — 28개의 레이아웃 골격에서 선택 / 붙여넣기 / 조정합니다. 에디토리얼 16종 / 스위스 12종
- 자산 준비 — 이미지 소싱 (Unsplash / Pexels / Flickr CC / Wallhaven / 직접 검색), 로컬에 다운로드 +
SOURCES.md작성; 출처 표시 여부 문의 - 구성 & 렌더링 — 시드 템플릿 복사 →
<!-- POSTERS_HERE -->교체 →node render.mjs - 전달 & 검토 — 먼저 PNG를 보여주고 "직접 보시겠습니까, 아니면 검증기를 실행할까요?"라고 묻습니다 — 자동 검증하지 않음
- 반복 — 사용자 피드백을 적용하고 인라인 스타일을 조정하거나 레이아웃/이미지를 교체한 후 다시 렌더링
전체 사양은 SKILL.md에 있습니다. 자세한 내용은 해당 references/*.md를 참조하세요.
검증기
node validate-social-deck.mjs path/to/task-dir
Playwright 실제 렌더링 측정 기반 6가지 규칙, 정적 스캔이 아님:
- R1 오버플로우 —
.poster를 넘치는 모든 섹션은 즉시 실패 - R2 타입 캡 —
.h-xl/.h-display크기 + 굵기 조합이 시드 정의를 초과 - R3 푸터 충돌 — 콘텐츠가 하단 푸터/페이지 번호를 침범
- R4 4밴드 밀도 — 1440 높이 캔버스를 4개의 수평 밴드로 분할; 각 밴드는 콘텐츠를 포함하거나 여백에 대한 명시적 이유가 있어야 함
- R5 프레임 오버플로우 —
.frame-img/.frame-shot자식이 프레임을 넘침 - R6 스위스 아이덴티티 — 인라인
font-weight >= 700이 있는 스위스 템플릿에서 경고 ('더 크면 더 얇게' 원칙 위반)
SKILL.md 7단계는 검증기가 자동 실행되지 않음을 명시합니다 — 사용자가 먼저 이미지를 확인할 때까지 기다리면 라운드당 수십 초를 절약할 수 있습니다.
테마 프리셋
references/theme-presets.md에서 선택하세요. 사용자 정의 hex 값은 허용되지 않습니다 — 선택의 자유보다 미학 보호가 더 중요합니다.
에디토리얼 (6)
| 테마 | 톤 | 적합한 용도 |
|---|---|---|
| 🖋 잉크 클래식 | #0a0a0b / #f1efea | 일반 기본값, 상업적 주제, 확신이 서지 않을 때 |
| 🌊 인디고 포셀린 | #0a1f3d / #f1f3f5 | 기술, 연구, AI, 기술 문서 |
| 🌿 포레스트 잉크 | #1a2e1f / #f5f1e8 | 자연, 지속 가능성, 야외, 논픽션 |
| 🍂 크라프트 페이퍼 | #2a1e13 / #eedfc7 | 향수, 인문학, 독서, 문학 |
| 🌙 듄 | #1f1a14 / #f0e6d2 | 예술, 디자인, 창작, 패션 |
| ⚫ 미드나잇 잉크 | #0e0d0c / #ece2cf / #d4a04a | 게임 키 아트 / 야경 / 시네마틱 커버 / 검은 신화: 오공 · 엘든 링 스타일 다크 테마 |
스위스 (4)
| 테마 | 앵커 | 적합한 용도 |
|---|---|---|
| 🔵 IKB 클라인 블루 | #002FA7 | 일반 기본값, 상업용 출시, AI 제품, 프레임워크 |
| 🟡 레몬 | #FFD500 | 청소년, 스포츠, 리테일, 소비재, Y2K |
| 🟢 레몬 그린 | #C5E803 | 친환경, 건강, Z세대, 그린 브랜드 |
| 🟠 세이프티 오렌지 | #FF6B35 | 경고, 뉴스, 산업, 활기찬 테마 |
테마를 전환하려면 시드 템플릿의 <section class="poster" data-theme="..."> 속성만 교체하면 됩니다. 모든 CSS는 var(--...)를 통해 해결됩니다.
디렉토리
guizang-social-card-skill/
├── SKILL.md ← 메인 스킬 파일: 7단계 워크플로우
├── README.md ← 중국어 README
├── README.en.md ← 이 파일
├── HANDOFF.md ← 핸드오프 문서: 사실 + 버전 기록
├── PRODUCT.md ← 제품 문서: 사고 + 결정 + 로드맵
├── validate-social-deck.mjs ← Playwright 레이아웃 검증기
├── assets/
│ ├── template-editorial-card.html ← 에디토리얼 시드 (6가지 테마 / 3가지 캔버스)
│ ├── template-swiss-card.html ← 스위스 시드 (4가지 악센트 / 3가지 캔버스)
│ ├── magazine-bg-webgl.js ← WebGL 잉크 흐름 배경
│ └── screenshot-backgrounds/ ← 9가지 스크린샷 스테이지 배경 (WebP)
│ ├── style-a/ ← 5가지 에디토리얼
│ └── style-b/ ← 4가지 스위스
└── references/
├── platform-specs.md ← 플랫폼 × 해상도 × 명명 규칙
├── style-system.md ← 두 스타일에 대한 엄격한 규칙과 안티패턴
├── theme-presets.md ← 10가지 팔레트 상세 정보
├── layout-recipes.md ← 28가지 레이아웃 골격 (M01-M16 + S01-S12)
├── components.md ← 타이포그래피 / 카드 / 간격 / 아이콘
├── background-systems.md ← 잉크 흐름 / 그리드 / 종이 레이어
├── portrait-fill.md ← 3:4 보드의 여백 전략
├── content-planning.md ← 훅 / 페이지 분할 / 카피 압축
├── category-cookbook.md ← 11가지 샤오홍슈 카테고리 라우팅 테이블
├── image-overlay.md ← 풀 블리드 이미지 마스크 + 얼굴 안전 규칙
├── screenshot-treatment.md ← `.frame-shot` 유틸리티 + 스크린샷 미화
├── map-component.md ← `.map-block` MapLibre 지도
├── title-shortener.md ← 1:1 커버를 위한 짧은 제목 전략
├── production-workflow.md ← Playwright 렌더링 파이프라인
└── qa-checklist.md ← 품질 체크리스트
핵심 디자인 원칙
- 화려함보다 절제 — 절제된 팔레트가 포화된 피드에서 돋보임
- 장식보다 구조 — 타이포그래피 / 대비 / 그리드가 계층 구조를 전달하며 그림자나 카드가 아님
- 자유보다 레이아웃 — 먼저 선택하고 나중에 조정하세요. 28개 골격 외의 페이지를 발명하지 마세요
- 사용자 이미지 우선 — 인테이크 시 A/B/C를 한 번 제시하고, 직접 촬영을 다시 제안하지 마세요
- 마스크 + 회피 — 풀 블리드 이미지에는 항상 마스크가 적용되며, 텍스트 드롭 존은 피사체(얼굴/제품/텍스트 밀집 영역)를 피해야 함
- 더 크면 더 얇게 — 스위스
.h-xl크기가 커지면 → 굵기는 내려가야 함. 에디토리얼도 동일한 규칙을 따름 - 자동 검증 금지 — 사용자가 먼저 확인한 후 검증 전에 물어보세요. 라운드당 수십 초 절약
- 스킬은 제품이지 프롬프트가 아님 — PRODUCT.md, 버전 번호, CHANGELOG, 기능 경계가 있음
- 로컬 테스트는 git에서 제외 — 모든 데모/스모크 테스트는
local-tests/에 위치하며 gitignore 처리
비주얼 레퍼런스
- Monocle / Kinfolk / Cereal 매거진 레이아웃 및 자간
- Massimo Vignelli / Helvetica Forever / 스위스 인터내셔널 타이포그래픽 스타일 그리드 시스템
- Apartamento / The Gentlewoman 이미지 대 텍스트 비율 및 인물 사진
- 샤오홍슈 / 레드노트의 절제가 피드에서 승리하는 사례
- 귀장의 소셜 카드 실무
로드맵
- 긴 에디토리얼 콘텐츠에서 타입 캡 엣지 케이스에 대한 더 많은 스모크 테스트
- 더 많은 스위스 데이터 레이아웃 (추가 차트 골격)
- 이미지 생성 후: 로컬 수정을 할지 / 전체 이미지를 재생성할지 적극적으로 물어보기
- 더 많은 카테고리별 추천 레이아웃 팩 (현재 11개 중 7개가 엔드투엔드로 강력함)
- 마켓플레이스 대응 WorkBuddy 버전
기여
버그, 레이아웃 문제, 새로운 레이아웃 요청 — 이슈와 PR을 환영합니다. 변경 시 우선순위:
- 시드 템플릿 편집 시
references/components.md의 대응 표도 업데이트하세요 (크기 / 간격 / 굵기) - 레이아웃 추가 시
references/layout-recipes.md에 전체 레시피를 추가하세요 (카피 캡 + 최소 밀도) - 테마 색상 추가 시 시드 템플릿의
[data-theme="..."]블록과references/theme-presets.md도 업데이트하세요 - 스위스 규칙 추가 시
validate-social-deck.mjs의 해당 규칙도 업데이트하세요 - 발견한 실수는
references/qa-checklist.md에 추가하세요 - 테스트와 데모는
local-tests/에 위치하며, 스킬 루트를 오염시키지 마세요
라이선스
AGPL-3.0 © 2026 op7418
이 프로젝트는 GNU AGPL-3.0에 따라 라이선스가 부여됩니다. 주요 사항:
- 저작자 표시 필수 — 저작권 고지를 유지하세요
- 파생물은 반드시 오픈소스로 공개 — 수정된 버전, 포크 또는 재배포는 전체 소스 코드와 함께 AGPL-3.0(또는 호환 라이선스) 하에 공개되어야 합니다
- 네트워크 사용도 배포로 간주 — 코드를 배포하지 않고 SaaS/웹 서비스로만 수정 버전을 실행하더라도 소스를 공개해야 합니다 (이것이 AGPL이 GPL보다 엄격한 이유입니다)
- 비공개 소스, 독점 또는 유료 전용 배포 금지
전체 약관은 LICENSE에서 확인하세요.