귀장 소셜 카드 스킬은(는) 무엇을 하나요?
샤오홍슈/레드노트, 위챗 공식 계정, 아티클 커버, 플랫폼 썸네일을 위한 세련된 소셜 카드 패키지를 만듭니다.
이 스킬은 자체적으로 완전히 동작합니다. 귀장 PPT 스타일 시스템의 시각적 원칙을 차용하지만, 원본 PPT 스킬, 템플릿 또는 참조 파일을 수정해서는 안 됩니다. 원본 PPT 스킬을 사용할 수 있는 경우, 참고용으로만 읽을 수 있습니다.
생성된 작업물은 스킬 루트 디렉토리가 아닌 작업 폴더에 저장되어야 합니다. 기본값은 이 저장소 내의 local-tests/<slug>/ 디렉토리이며, 사용자가 명시적으로 요청한 출력 폴더를 사용할 수도 있습니다. social-card-*, livephoto-*, wechat-*, output/과 같은 루트 레벨 작업 폴더를 만들거나, SKILL.md 옆에 렌더링된 에셋을 풀어놓지 마십시오.
생성할 항목
다음과 같은 경우에 이 스킬을 사용하십시오:
- 소셜 카드 / 캐러셀 이미지 세트: 커버와 콘텐츠 페이지, 특히 샤오홍슈/레드노트 3:4 비율.
- 사용자가 라이브 포토 / 实况照片을 요청하고 비디오 증거 또는 화면 녹화를 제공하는 경우 짧은 라이브 포토 모션 카드.
- 사용자가 고품질 비디오 에셋을 가지고 있고 텍스트를 거의 또는 전혀 추가하지 않고 단일 비디오, 2그리드, 3그리드 또는 4그리드 모션 카드를 원하는 경우, 소재 우선 라이브 포토 퍼즐 레이아웃.
- 사용자가 세 개의 짧은 비디오, 세 개의 결과, 세 개의 시점 또는 하나의 이미지 카드 단위 안에 들어가야 하는 정보량이 많은 비교 자료를 가지고 있는 경우 트리플 라이브 포토 콜라주.
- 라이브 포토를 위한 롱 비디오 입력: 트리밍, 속도 변경, 트리플 콜라주로 분할 또는 렌더링 전에 사용자에게 특정 시간 범위를 요청해야 하는지 진단합니다.
- 위챗 공식 계정 커버 쌍: 하나의
21:9메인 커버와 하나의1:1정사각형 커버를 동일한 HTML에서 시각적 확인을 위해 함께 구성합니다. - 스크린샷이 많은 제품 게시물, 아티클 커버, 튜토리얼 캐러셀, 야외/라이프스타일 노트, AI/제품 업데이트 설명.
- 귀장 스타일의 스위스 또는 에디토리얼 매거진 레이아웃이 필요한 소셜 이미지.
다음과 같은 경우에는 이 스킬을 사용하지 마십시오:
- 전체 슬라이드 데크 또는 가로 PPT 웹사이트. 이 경우 PPT 스킬을 사용하십시오.
- 장문 비디오 생성. 이 경우 비디오 스킬을 사용하십시오. 이 스킬은 정적 이미지 슬롯을 비디오로 대체하는 짧고 레이아웃에 국한된 라이브 포토 카드만 지원합니다.
- 레이아웃이나 아티클 추출 요구 사항이 없는 순수 이미지 편집.
Rednote 카테고리 기능 (기능 원)
가장 흔한 11가지 Rednote(小红书) 카테고리는 세 가지 버킷으로 나뉩니다. 레시피별 라우팅은 references/category-cookbook.md를 참조하십시오.
강력한 종단 간 (텍스트, 구조 및 이미지 스토리 모두 범위 내):
- 旅行 (여행), 职场 (직장), 推荐 (추천, 하위 유형 지정 후).
텍스트 및 구조에 강함; 이미지는 사용자 또는 소싱된 라이브러리에서 가져와야 함:
- 游戏 (게임), 影视 (영화/TV), 美食 食谱方向 (음식 — 레시피 전용), 彩妆 教程方向 (메이크업 — 튜토리얼 전용), 健身 (피트니스), 家居 (홈), 穿搭 精选方向 (의상 — 캡슐/에세이 전용).
범위 외 — 결과를 약속하기보다 정직하게 거절:
- 美食 菜品大片摆盘 (음식 사진 쇼케이스).
- 穿搭 日常 OOTD 全身 (일상 OOTD 전신 사진; 생성 또는 시뮬레이션 불가).
- 情感 梦核 / 氛围感装饰风 (드림코어 / 감성 라이트 스타일링 — 에디토리얼 및 스위스 스타일과 충돌).
- Y2K / 千禧辣妹 / 哥特萝莉 / kawaii 장식 미학.
- 이미지 자체가 결과물의 전부인 순수 사진 쇼케이스 게시물.
요청이 세 번째 버킷에 해당하는 경우, 수신 시 무엇을 할 수 없는지 명확히 밝히십시오 — 사용자의 의도를 놓친 레이아웃을 조용히 개조하지 마십시오.
핵심 원칙
표현이 먼저입니다. 목표는 텍스트를 포스터에 집어넣는 것이 아니라, 소스를 명확한 시각적 논증으로 전환하는 것입니다.
각 페이지에 대해 다음을 결정하십시오:
- 한눈에 보는 사람이 무엇을 이해해야 하는가?
- 그것을 뒷받침하는 증거, 스크린샷 또는 이미지는 무엇인가?
- 어떤 단어가 크게 표시되어야 하고, 어떤 단어가 캡션이나 메타데이터가 될 수 있는가?
- 게시물 본문에 속하기 때문에 이미지에서 제거할 수 있는 것은 무엇인가?
필수 참조 파일
필요에 따라 다음 파일을 읽으십시오:
references/platform-specs.md— 정확한 비율, 출력 크기 및 명명 규칙.references/style-system.md— 귀장 에디토리얼 및 스위스 시각적 규칙.references/theme-presets.md— 전자 매거진 팔레트 또는 스위스 악센트 팔레트 선택 시.references/layout-recipes.md— 캐러셀/소셜 카드/위챗 페이지 구조 선택 시.references/components.md— 공유 컴포넌트 사양: 폰트 스택, 타입 스케일, 최소 읽기 가능 크기, 중국어 제목 길이 밴드, 스위스 카드 채우기 상호 배타 규칙, 이미지 컨테이너 비율 클래스, 간격 토큰 및 Lucide 아이콘 규칙.references/background-systems.md— 전자 매거진 WebGL/잉크/종이 배경 구축 시.references/portrait-fill.md— 3:4 레이아웃을 적용하고 빈 수직 공간을 피할 때.references/content-planning.md— 커버 훅, 페이지 분류 및 카피 압축.references/production-workflow.md— HTML/CSS 렌더링 및 이미지 처리.references/live-photo-production.md— 사용자가 라이브 포토 / 实况照片 / 三连实况拼图를 요청하고, 소셜 카드용 비디오 에셋을 제공하거나, 샤오홍슈 / 위챗 모션 카드 전달을 원할 때. 정보 예산, 단일 vs 트리플 라이브 포토, 롱 비디오 입력 및 플랫폼 게시 알림을 다룹니다.references/image-overlay.md— 텍스트가 사진 위에 배치될 때마다: 사진 적격성, 지역화된 색조 대체, 다중 모드 주제 매핑을 통한 얼굴/주제 회피.references/screenshot-treatment.md— 사용자가 앱/웹/코드/대시보드 스크린샷을 제공할 때:.frame-shot을.frame-img보다 선택하고, 모서리/그림자/배경/내부 여백을 설정하고,.device-browser또는.device-phone크롬을 결정합니다.references/map-component.md— 콘텐츠에 공간적 관계(여행 경로, 상점 위치, 도보 투어)가 있을 때: 실제 경로는 기본적으로 Mapbox Static 또는 OSM 정적 타일을 사용하고, SVG는 개념적/일러스트레이션 지도에만 사용합니다. 핀은 HTML 오버레이이며, 라이브 JS 지도를 사용하지 마십시오.references/title-shortener.md— 작업이 위챗 21:9+1:1 커버 쌍이거나 크로스 플랫폼 재사용인 경우: 긴 제목에서 1:1 짧은 제목을 파생합니다(5단계 추출, 4가지 패턴, 안티 패턴,.poster.square에서의 크기 조정).references/category-cookbook.md— 사용자가 명명한 Rednote 카테고리(旅行 / 职场 / 游戏 / 影视 / 彩妆 / 美食 / 穿搭 / 家居 / 健身 / 情感 / 推荐)를 적용 가능한 레시피로 라우팅하고 범위를 확인합니다.references/qa-checklist.md— 최종 이미지 전달 전에 검토합니다.
워크플로우
1. 수신
출력을 변경하는 누락된 정보만 수집하십시오:
-
대상 플랫폼 및 비율.
-
소스 텍스트, 자막, 아티클 또는 제목.
-
Rednote 카테고리 — 사용자가 11가지 일반 유형(旅行 / 职场 / 游戏 / 影视 / 美食 / 彩妆 / 穿搭 / 家居 / 健身 / 情感 / 推荐) 중 하나를 명명하는 경우,
references/category-cookbook.md를 통해 라우팅하여 올바른 레시피를 찾고 요청이 기능 원 내에 있는지 확인합니다(위의 "Rednote 카테고리 기능" 참조). 요청이 범위 외 버킷에 해당하는 경우, 설계 전에 사용자에게 이를 알리고 조용히 개조하지 마십시오. -
제공된 이미지/스크린샷 및 각각의 위치. 뉴스 / 튜토리얼 / 데이터 / 리뷰 콘텐츠의 경우, 스크린샷이나 사진을 적극적으로 요청하십시오 — 이는 증거 계층입니다. 실제 결과물이 없는 포스터는 종종 내용이 부실하게 읽힙니다.
-
사용자가 라이브 포토를 요청하는 경우 제공된 비디오 에셋. 사용자가 제공한 비디오를 정상 경로로 처리하고, 웹 소싱 무료 비디오는 데모/프로모션 사례 또는 사용자가 명시적으로 소싱 자료를 요청하는 경우에만 사용하십시오. 지속 시간이 다르므로 대상 플랫폼을 확인하십시오: 샤오홍슈는
5초를 지원하고, 위챗 공식 계정 라이브 포토는3초를 유지해야 하며 iPhone에서 업로드해야 합니다. 자르기 전에references/live-photo-production.md를 읽고 요청을 단일 라이브 포토, 트리플 콜라주 또는 롱 비디오 입력으로 분류하십시오. 소스가 너무 길거나 여러 사용 가능한 순간을 포함하는 경우, 먼저 저비용 진단을 수행한 다음 트리밍, 속도 변경, 여러 웰로 분할 또는 사용자 지정 시간 범위 사용 중 하나를 한 번만 질문하십시오. 소스가 대상 지속 시간보다 짧은 경우, 더 긴 클립을 제공할지, 더 짧은 라이브 포토를 수락할지, 또는 명시적으로 홀드/슬로우다운을 허용할지 질문하십시오. 중요한 초점이 모호한 경우, 가능한 자르기/확대 옵션을 제안하되 실행 전에 사용자가 결정하도록 하십시오. -
사용자가 텍스트만 제공하고(이미지 없음) 설계 전에 한 번 질문하십시오:
이 글에는 1-2장의 사진이 필요합니다. 세 가지 방법이 있습니다: A. 직접 찍은 사진/스크린샷을 보내주세요(추천 — 가장 "AI 느낌"이 적습니다) B. 제가 Pexels / Unsplash / Flickr에서 찾아드립니다 C. AI로 생성합니다A를 한 줄로 추천하십시오 — 직접 찍은 사진이 포스터가 AI 생성처럼 보이지 않게 하는 요소입니다. 사용자가 선택한 것("아무거나 알아서 해" 포함)을 수락하고 진행하십시오. 나중에 다시 알리거나 여러 턴에 걸쳐 A를 계속 권하지 마십시오. 이 질문은 한 번만 합니다.
-
지정된 경우 선호하는 스타일: 스위스 스타일, 매거진/에디토리얼, 테크, 야외 등.
-
하드 제약 조건: 제목 텍스트, 1:1 커버에 이미지 없음, 하드웨어 사진 포함, 스크린샷 읽기 가능 유지 등.
사용자가 이미 충분한 컨텍스트를 제공한 경우, 합리적인 가정하에 진행하십시오.
콘텐츠에 현재 제품 출시, 정책, 가격, 주장 또는 뉴스가 포함된 경우, 브라우징을 통해 불안정한 사실을 확인하고 최종 응답에 출처를 인용하십시오.
2. 스토리 추출
설계 전에 소스를 페이지 계획으로 전환하십시오.
Rednote의 경우:
- 1페이지는 커버 훅입니다.
- 2-N페이지는 각각 하나의 아이디어만 전달합니다.
- 대부분의 게시물에는 5-9페이지를 사용하십시오. 하단 영역이 비어 있게 되면 페이지를 압축하거나 결합하십시오.
- 게시물 본문은 뉘앙스를 위해 남겨두고, 이미지는 훅, 비교, 체크리스트 및 선명한 핵심 내용을 전달해야 합니다.
위챗의 경우:
- 항상 쌍 시스템을 생성하십시오:
21:9메인 커버 및1:1정사각형 커버. - 두 커버를 동일한 HTML 파일에 구축하고 결합된 미리보기 섹션을 추가하여 시각적 관계를 함께 확인할 수 있도록 하십시오.
21:9는 전체 또는 거의 전체 제목, 부제목 및 하나의 강력한 시각적 관계를 유지합니다.1:1은 긴 제목에서 파생된 단순화된 짧은 제목을 사용합니다: 큰 중앙 정렬 텍스트, 기본적으로 이미지 없음, 비좁은 부제목 없음.
3. 스타일 모드 선택
패키지당 하나의 모드를 선택하십시오. 두 시스템은 특정 콘텐츠 유형에 바인딩되지 않습니다 — 변경되는 것은 시각적 입장이지, 다룰 수 있는 주제가 아닙니다. 직장 에세이는 에디토리얼이 될 수 있고, 여행 기록은 스위스가 될 수 있습니다. 카테고리 조회가 아니라 원하는 느낌으로 선택하십시오.
에디토리얼 매거진 x E-ink는 다음을 제공합니다:
- 세리프/송티 디스플레이 + 조용한 산스 본문, 종이 + 잉크 팔레트.
- 따뜻한 종이 베이스 위의 분위기 레이어 (종이 질감/잉크 워시/WebGL 캔버스).
- 원장 행, 여백, 인용구, 대형 사진 웰 — 매거진 기능 느낌.
- 페이지가 느리고, 신중하며, 수작업으로 조판된 느낌을 원할 때 가장 좋습니다.
스위스 인터내셔널는 다음을 제공합니다:
- Inter / Helvetica 느낌, 큰 크기에서 매우 가벼운 디스플레이, 작은 크기에서 모노 레이블.
- 엄격한 왼쪽 정렬 그리드, 가는 선 규칙, 하나의 높은 채도 악센트.
- 카드 채우기 행렬, KPI 타워, h-막대 차트, 번호가 매겨진 진술 — 시스템/데이터 느낌.
- 페이지가 엔지니어링되고, 정량화되며, 결정적인 느낌을 원할 때 가장 좋습니다.
두 가지 모두 특정 콘텐츠에 실행 가능해 보이는 경우, 에디토리얼 의도에 대한 질문이 됩니다: "이것은 기능 스토리인가, 릴리스 노트인가?" 이것이 주제 자체가 아니라 모드를 결정합니다.
사용자가 명시적으로 하이브리드를 요청하지 않는 한, 동일한 이미지 세트 내에서 두 시각적 시스템을 혼합하지 마십시오.
그런 다음 하나의 테마를 선택하십시오:
- 에디토리얼 매거진 x E-ink는 6가지 매거진 팔레트 중 하나를 사용합니다: Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune 또는 Midnight Ink (유일한 다크 변형; 게임 키 아트/야간 사진/시네마틱 커버용으로 예약됨).
- 스위스 인터내셔널은 4가지 악센트 팔레트 중 하나를 사용합니다: IKB Blue, Lemon Yellow, Lemon Green 또는 Safety Orange.
정확한 CSS 토큰은 references/theme-presets.md를 참조하십시오. 사용자에게 엄격한 브랜드 요구 사항이 없는 한 임의의 색상을 발명하지 마십시오.
4. 페이지 계획
간결한 내부 계획을 만드십시오:
Page 01 / cover / hook / image source / layout intent
Page 02 / point / key copy / visual evidence / layout intent
...
사용자가 승인을 요청하는 경우, 렌더링 전에 이 계획을 보여주십시오. 그렇지 않으면 내부적으로 사용하고 진행하십시오.
페이지 구조를 선택하려면 references/layout-recipes.md를 사용하십시오. 모든 페이지를 반복되는 제목 및 카드 레이아웃으로 만들지 마십시오.
3:4 이미지의 경우, 코딩 전에 references/portrait-fill.md를 확인하십시오. 짧은 테이블 또는 원장은 인용문 열, 이미지 증거, 여백, 더 큰 행 또는 배경 히어로 영역이 있는 전체 세로 구성으로 확장되어야 합니다.
대상 독자를 위한 카피는 생산 방법이 아닌 사용자의 실제 장면을 설명해야 합니다. 3s, 5s, Live Photo, triple collage, information budget, long-video intake, speed-up, highlight detection, one action point 또는 layout template과 같은 내부 용어는 계획, 파일 이름, QA 노트 및 전달 요약을 안내하는 데 사용될 수 있지만, 사용자가 명시적으로 해당 개념에 대한 교육 게시물을 만드는 경우가 아니라면 H1, 훅 또는 주요 본문 카피가 되어서는 안 됩니다. 렌더링 전에 모든 가시적인 헤드라인을 실제 시청자처럼 한 번 읽으십시오: 작업 요구 사항처럼 들리면 장면별 카피로 대체하십시오.
자동화된 밀도 경고를 만족시키기 위해 템플릿이 아닌 장식을 추가하지 마십시오. 추가 눈금자, 사이드바, 의사 시간 축, 장식 레이블 또는 발명된 배지는 기존 레이아웃 레시피 또는 사용자 요청에서 비롯되어야 합니다. 밀도 경고가 나타나면, 더 나은 레시피를 선택하거나, 실제 콘텐츠 크기를 조정하거나, 시각적 근거와 함께 권고 경고를 수락하여 수정하십시오; 카드에 의미 없는 UI를 넣지 마십시오.
라이브 포토 카드의 경우, 먼저 일반 소셜 카드로 계획한 다음 모션 역할을 결정하십시오: 하나의 액션 포인트, 하나의 작은 프로세스, 전후 변경, 세 개의 병렬 결과 또는 분위기/증거. 유일한 구조적 변경은 하나 이상의 이미지 웰이 비디오 웰이 된다는 것입니다. 동일한 비율, 자르기, 안전 영역, 타이포그래피 및 스타일 모드 규칙을 유지하십시오; 정적 이미지 자르기 논리를 비디오 스트림에 적용하십시오. 첫 번째 프레임은 정적 이미지와 동일한 검사를 통과해야 합니다: 과도한 자르기 없음, 주요 UI/콘텐츠를 읽을 수 있고, 카드는 여전히 선택한 레이아웃 레시피를 따릅니다. 렌더링 전에 references/live-photo-production.md를 읽으십시오.
소재 우선 라이브 포토 퍼즐 카드의 경우, 비디오 에셋이 선두를 따르도록 하십시오. 카피를 거의 또는 전혀 사용하지 마십시오: o
… (truncated for translation)