# 소셜 카드 에이전트 스킬

> 다양한 콘텐츠 소스에서 샤오홍슈 캐러셀과 위챗 커버 쌍을 위한 시각적으로 놀라운 소셜 카드를 생성합니다. 편집 디자인 또는 스위스 디자인 시스템을 활용하여 기사와 게시물에 대한 매력적인 비주얼을 만듭니다.

- Canonical: https://nanoskill.ai/ko/skills/social-card-generation
- Markdown: https://nanoskill.ai/ko/skills/social-card-generation.md
- Author: op7418
- Published: 2026-06-01T07:18:11.391Z
- Updated: 2026-07-21T18:32:43.637Z
- Language: ko
- Source type: github
- Popularity signal: 2219

## Sources

- https://github.com/op7418/guizang-social-card-skill

## Install

```shell
npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md
```

## About

구이장 소셜 카드 스킬은 샤오홍슈, 위챗과 같은 플랫폼을 위한 소셜 카드 생성을 간소화하도록 설계된 고급 에이전트 기능입니다. 사용자가 기사, 제품 노트, 스크린샷, 사진 등 다양한 콘텐츠를 세련되고 플랫폼에 최적화된 비주얼로 변환할 수 있게 해줍니다. 에디토리얼(Editorial) 및 스위스 인터내셔널(Swiss International) 디자인 시스템을 제공함으로써, 내러티브 스토리텔링이든 데이터 기반 설명이든, 소셜 카드가 매력적이고 미적으로 일관되게 하여 청중의 관심을 사로잡을 준비를 합니다.

이 스킬은 구조화된 워크플로우로 두각을 나타내며, 28개의 레이아웃 스켈레톤과 10개의 테마 프리셋을 제공하여 콘텐츠 프레젠테이션을 안내합니다. 인기 플랫폼에서 이미지 소싱을 자동화하고, 일반적인 레이아웃 문제를 감지하여 시각적 품질을 유지하기 위한 강력한 플레이라이트 기반 검증기를 포함합니다. 출력은 단일 파일 HTML로 제공되며, PNG로 직접 렌더링되어 클로드 코드 및 코덱스와 같은 코딩 에이전트 환경과 높은 호환성을 갖습니다.

사용자는 긴 기사에서 멀티카드 샤오홍슈 캐러셀을 생성하거나, 시각적으로 조화로운 위챗 21:9 히어로와 1:1 공유 카드 쌍을 디자인하거나, 스크린샷에서 명확한 튜토리얼 비주얼을 제작하는 등 다양한 사용 사례에 구이장 소셜 카드 스킬을 활용할 수 있습니다. 이 디자인 원칙은 절제, 구조, 사용자 중심의 이미지 처리에 중점을 두어, 광범위한 디자인 전문 지식 없이도 전문적이고 영향력 있는 소셜 미디어 콘텐츠를 보장합니다.

## Key features

- **듀얼 비주얼 시스템**: 스토리텔링(모노클, 킨포크)을 위한 에디토리얼 스타일 또는 데이터와 구조(그리드 우선, 선명한 헤어라인)를 위한 스위스 인터내셔널 스타일 중에서 콘텐츠의 톤에 맞게 선택하세요.
- **다양한 캔버스 크기**: 샤오홍슈 3:4 (1080x1440), 위챗 21:9 (2100x900), 위챗 1:1 (1080x1080)을 지원하여 다양한 소셜 미디어 활동을 가능하게 합니다.
- **광범위한 레이아웃 스켈레톤**: 이미지 주도 커버, KPI 타워, 가로 막대형 차트 등을 포함한 28개의 사전 디자인된 레이아웃 스켈레톤(에디토리얼 16개, 스위스 12개)에 접근하여 빠르게 콘텐츠를 구성할 수 있습니다.
- **자동 이미지 소싱**: 언스플래시, 펙셀, 플리커 CC, 월헤이븐 또는 직접 검색을 통해 자동으로 이미지를 소싱하고, 자동 생성된 SOURCES.md 파일과 함께 로컬에 다운로드합니다.
- **레이아웃 검증기**: 플레이라이트 기반 검증기를 포함하여 오버플로우, 타입 캡 위반, 밀도 간격 및 푸터 충돌을 감지하여 고품질의 소셜 카드 생성을 보장합니다.

## Use cases

- **샤오홍슈 캐러셀 만들기**: 긴 기사, 제품 리뷰 또는 여행 가이드를 에디토리얼 또는 스위스 디자인을 사용하여 샤오홍슈용 매력적인 멀티 카드 캐러셀로 변환합니다.
- **위챗 커버 쌍 디자인하기**: 모든 콘텐츠 소스에서 위챗 모먼트 및 채널을 위해 시각적으로 일관된 21:9 히어로 이미지와 1:1 공유 카드를 생성합니다.
- **튜토리얼 비주얼 제작하기**: 스크린샷 튜토리얼, 게임 가이드 또는 도구 연습을 미화된 스크린샷과 명확한 레이아웃으로 구조화된 소셜 카드로 변환합니다.
- **데이터 및 리뷰 요약하기**: 차트와 행렬이 포함된 스위스 스타일 레이아웃을 사용하여 제품 리뷰, 데이터 리캡 또는 연간 리뷰 콘텐츠를 명확하게 전달합니다.

## Result preview

이 스킬로 제작된 전문적인 소셜 미디어 캐러셀을 살펴보세요.

![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png)

![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png)

![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png)

![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png)

## Result walkthrough

### 설치

소셜 카드 생성 스킬을 AI 에이전트에 추가하세요.

![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png)

### 콘텐츠 설명

소셜 미디어 카드로 변환하려는 콘텐츠, 주제 또는 핵심 메시지를 제공하세요.

![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png)

### 소셜 카드 생성

명확한 정보 계층 구조, 강력한 스토리텔링 흐름, 게시 준비가 완료된 레이아웃으로 시각적으로 매력적이고 플랫폼에 최적화된 카드 디자인을 만듭니다.

![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png)

## Skill definition

Claude Code, Codex 및 유사한 코딩 에이전트 환경을 위한 에이전트 스킬입니다. 기사, 카피, 스크린샷, 제품 노트, 자막 또는 사진에서 **샤오홍슈 / 레드노트 캐러셀 이미지**와 **위챗 21:9 + 1:1 커버 쌍**을 생성합니다.

두 가지 비주얼 시스템이 하나의 워크플로우를 공유합니다:

- **에디토리얼**. *Monocle* / *Kinfolk* / *Cereal*의 정신을 담은 절제된 레이아웃. 스토리텔링, 라이프스타일, 여행, 독서, 영화 및 개인적인 관찰에 가장 적합합니다.
- **스위스 인터내셔널**. 그리드 중심, 단일 앵커 색상, 날카로운 헤어라인, 극단적인 서체 대비. 제품 리뷰, 데이터, 프레임워크, 튜토리얼 및 AI 도구에 가장 적합합니다.

> [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)의 자매 프로젝트입니다. 공유된 비주얼 언어, 별도 유지 관리. PPT는 '가로 스와이프 발표 자료'를 해결하고, 이것은 '정적 피드 이미지'를 해결합니다.

![Guizang Social Card Skill preview](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png)

## 30초 시작

```bash
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
```

또는 셸 액세스 권한이 있는 AI 에이전트에 다음을 붙여넣으세요:

```text
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.
```

이미 설치한 경우 다음으로 업데이트하세요:

```text
Update guizang-social-card-skill for me. Go to ~/.claude/skills/guizang-social-card-skill, run git pull, then tell me the latest commit.
```

그런 다음 에이전트에게 다음과 같이 요청하세요:

```text
Make me a Swiss-style Xiaohongshu carousel from this article, 5 cards, IKB blue.
```

기타 유용한 프롬프트:

```text
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.xhs` 1080×1440 (샤오홍슈 3:4), `.poster.wide` 2100×900 (위챗 21:9), `.poster.square` 1080×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](https://github.com/op7418/guizang-ppt-skill) 사용) / 장편 비디오 생성 / 순수 사진 리터칭 / 레이아웃 없는 일반 텍스트 편집

## 11가지 샤오홍슈 카테고리

'권장 영역'에 따라 등급이 매겨짐 — [`references/category-cookbook.md`](./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: 한 줄 설치 (권장)

```bash
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
```

### 옵션 2: AI에 붙여넣기

> `guizang-social-card-skill` Claude Code 스킬을 설치해 주세요. 단계:
>
> 1. `~/.claude/skills/`가 존재하는지 확인합니다 (없으면 생성)
> 2. `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill` 실행
> 3. 확인: `ls ~/.claude/skills/guizang-social-card-skill/` 결과에 `SKILL.md`, `assets/`, `references/`가 표시되어야 함
> 4. 완료되면 알려주세요. 나중에 "샤오홍슈 캐러셀 만들어 줘" 같은 말을 하면 이 스킬이 실행됩니다.

위 블록을 Claude Code / Cursor / 셸 액세스가 가능한 모든 AI 에이전트에 붙여넣으세요.

### 옵션 3: 수동 CLI

```bash
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단계를 거칩니다:

1. **인테이크** — 4가지를 캡처: 대상 플랫폼 / 스타일 / 소스 콘텐츠 / 사용자 이미지. 이미지가 없을 경우 A/B/C 옵션을 한 번 제시합니다 (직접 촬영 / AI 생성 / 온라인 소싱); 다시 제안하지 않습니다
2. **스타일 & 테마** — 에디토리얼 또는 스위스를 선택한 다음 10가지 테마 프리셋 중 하나를 선택합니다. 사용자 정의 hex 값은 허용되지 않습니다
3. **레이아웃 선택** — 28개의 레이아웃 골격에서 선택 / 붙여넣기 / 조정합니다. 에디토리얼 16종 / 스위스 12종
4. **자산 준비** — 이미지 소싱 (Unsplash / Pexels / Flickr CC / Wallhaven / 직접 검색), 로컬에 다운로드 + `SOURCES.md` 작성; 출처 표시 여부 문의
5. **구성 & 렌더링** — 시드 템플릿 복사 → `<!-- POSTERS_HERE -->` 교체 → `node render.mjs`
6. **전달 & 검토** — 먼저 PNG를 보여주고 "직접 보시겠습니까, 아니면 검증기를 실행할까요?"라고 묻습니다 — 자동 검증하지 않음
7. **반복** — 사용자 피드백을 적용하고 인라인 스타일을 조정하거나 레이아웃/이미지를 교체한 후 다시 렌더링

전체 사양은 [`SKILL.md`](./SKILL.md)에 있습니다. 자세한 내용은 해당 `references/*.md`를 참조하세요.

## 검증기

```bash
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`](./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                   ← 품질 체크리스트
```

## 핵심 디자인 원칙

1. **화려함보다 절제** — 절제된 팔레트가 포화된 피드에서 돋보임
2. **장식보다 구조** — 타이포그래피 / 대비 / 그리드가 계층 구조를 전달하며 그림자나 카드가 아님
3. **자유보다 레이아웃** — 먼저 선택하고 나중에 조정하세요. 28개 골격 외의 페이지를 발명하지 마세요
4. **사용자 이미지 우선** — 인테이크 시 A/B/C를 한 번 제시하고, 직접 촬영을 다시 제안하지 마세요
5. **마스크 + 회피** — 풀 블리드 이미지에는 항상 마스크가 적용되며, 텍스트 드롭 존은 피사체(얼굴/제품/텍스트 밀집 영역)를 피해야 함
6. **더 크면 더 얇게** — 스위스 `.h-xl` 크기가 커지면 → 굵기는 내려가야 함. 에디토리얼도 동일한 규칙을 따름
7. **자동 검증 금지** — 사용자가 먼저 확인한 후 검증 전에 물어보세요. 라운드당 수십 초 절약
8. **스킬은 제품이지 프롬프트가 아님** — PRODUCT.md, 버전 번호, CHANGELOG, 기능 경계가 있음
9. **로컬 테스트는 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](https://github.com/op7418)

이 프로젝트는 **GNU AGPL-3.0**에 따라 라이선스가 부여됩니다. 주요 사항:

1. **저작자 표시 필수** — 저작권 고지를 유지하세요
2. **파생물은 반드시 오픈소스로 공개** — 수정된 버전, 포크 또는 재배포는 전체 소스 코드와 함께 AGPL-3.0(또는 호환 라이선스) 하에 공개되어야 합니다
3. **네트워크 사용도 배포로 간주** — 코드를 배포하지 않고 SaaS/웹 서비스로만 수정 버전을 실행하더라도 소스를 공개해야 합니다 (이것이 AGPL이 GPL보다 엄격한 이유입니다)
4. **비공개 소스, 독점 또는 유료 전용 배포 금지**

전체 약관은 [`LICENSE`](./LICENSE)에서 확인하세요.

## FAQ

### 구이장 소셜 카드 스킬이란 무엇인가요?

구이장 소셜 카드 스킬은 클로드 코드, 코덱스 및 유사한 코딩 에이전트 환경을 위한 에이전트 스킬로, 기사, 노트, 사진 등 다양한 콘텐츠 입력을 통해 샤오홍슈 캐러셀과 위챗 커버 쌍을 생성하며, 독특한 비주얼 디자인 시스템을 사용합니다.

### 소셜 카드를 생성하기 위해 어떤 종류의 콘텐츠를 사용할 수 있나요?

소셜 카드 생성의 소스 콘텐츠로 기사, 카피, 스크린샷, 제품 노트, 자막 또는 사진을 사용할 수 있습니다. 이 스킬은 다양한 입력에 적응하여 시각적으로 매력적인 결과물을 생성합니다.

### 소셜 카드 생성에 사용할 수 있는 두 가지 비주얼 시스템은 무엇인가요?

이 스킬은 두 가지 비주얼 시스템을 제공합니다: 스토리텔링, 라이프스타일 및 내러티브 콘텐츠를 위한 '에디토리얼'과 제품 리뷰, 데이터, 프레임워크 및 튜토리얼을 위한 '스위스 인터내셔널'로, 그리드 우선 접근 방식이 특징입니다.

### 소셜 카드에 사용자 정의 색상을 사용할 수 있나요?

아니요, 사용자 정의 헥스 값은 허용되지 않습니다. 이 스킬은 시각적 일관성과 품질을 유지하기 위해 10개의 테마 프리셋(에디토리얼 6개, 스위스 4개)을 제공합니다. 시드 템플릿의 data-theme 속성을 업데이트하여 테마를 전환할 수 있습니다.

### 구이장 소셜 카드 스킬을 어떻게 설치하나요?

\`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\`을 사용하거나 리포지토리를 에이전트의 스킬 디렉토리에 복제하여 설치할 수 있습니다.

### 이 스킬은 영어 콘텐츠를 지원하나요?

네, 이 스킬은 영어 콘텐츠를 지원합니다. 에디토리얼(플레이페어 디스플레이 + 노토 세리프) 및 스위스(인터 + 헬베티카) 폰트 모두 중국어와 영어를 지원하며, 레이아웃 스켈레톤은 언어에 구애받지 않습니다.