Skill: gyeuun97/card-news-gen (version 1.0.0)

--- name: card-news-gen description: 인스타그램/SNS용 카드뉴스를 자동 생성하는 스킬. 주제를 입력하면 → HTML 디자인 → Playwright 스크린샷 → 업로드용 이미지 생성. 다크 에디토리얼 스타일(사진 커버 + 다크 텍스트 카드) 기본 제공. "카드뉴스", "인스타 콘텐츠", "캐러셀", "card news", "carousel" 키워드에 반응. --- # Card News Generator 주제만 주면 인스타그램 캐러셀 카드뉴스를 자동 생성합니다. ## 디자인 시스템 ### 기본 스타일: Dark Editorial (검증 완료) 커버: **사진 배경 + 다크 그라데이션 + 큰 텍스트** 내부 카드: **#0A0A0A 다크 배경 + 텍스트 중심 + 블루 포인트** 레퍼런스: highoutputclub, oneononenote 스타일 ### 디자인 토큰 ``` 배경: #0A0A0A (거의 블랙) 텍스트 메인: #FFFFFF 텍스트 서브: rgba(255,255,255,0.5) 포인트 블루: #60A5FA 포인트 옐로: #FBBF24 포인트 그린: #34D399 폰트: Pretendard (웹폰트) 카드 사이즈: 1080x1350px (4:5 인스타 세로형) 커버 제목: 96-104px, 900 weight 내부 제목: 44px, 900 weight 본문: 27px, 400 weight 프롬프트 블록: 24px ``` ### 카드 구조 ``` 커버 (1장) ├── 배경 사진 (Unsplash 무료, opacity 0.45) ├── 다크 그라데이션 오버레이 ├── 핸들 @lio_universe_00 ├── 대형 제목 (96-104px, 핵심 키워드 블루 강조) ├── 서브타이틀 (34px, 반투명) └── 페이지 인디케이터 dots 내부 카드 (N장) ├── 상단: 라벨 + 페이지 번호 ├── 배경 번호 (140px, 3% opacity) ├── 제목 (44px, 키워드 블루/옐로 강조) ├── 구분선 (48px) ├── 본문 (27px, 강조는 strong/blue) ├── 프롬프트 블록 또는 예시 (어두운 박스) ├── 결과/팁 블록 (블루 좌측 보더) └── 핸들 워터마크 CTA (1장) ├── 이모지 ├── 제목 + 서브 ├── 3개 아이템 리스트 ├── 팔로우 버튼 └── 핸들 ``` ## 워크플로우 ### 1단계: 콘텐츠 기획 주제를 받으면: - 커버 후킹 카피 작성 (호기심 유발) - 5-7장 내부 카드 구성 - CTA 카드 - 캡션 작성 (카드 내용을 상세히 풀어쓴 글 + 해시태그 3-5개) **콘텐츠 품질 기준:** - "이거 다 아는 내용 아니야?" → NO. 논문/데이터/구체적 수치 필수 - 바로 복붙/실행 가능한 실용성 - 저장하고 싶은 정보 밀도 ### 2단계: HTML 생성 템플릿 기반 HTML을 생성합니다. ```bash # 작업 디렉토리 생성 mkdir -p /Users/gyeuun/.openclaw/workspace/rio-interactive/card-news/{프로젝트명}/output ``` **CSS 임포트 (필수):** ```css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); ``` **배경 사진 (커버용):** - Unsplash에서 무료 다운로드 - 저장: `photos/` 폴더 - 또는 기존 사진 활용: `../insta-first/photos-v5/` (ai-code.jpg, laptop-desk.jpg, ai-robot.jpg, ai-abstract.jpg) **잘림/겹침 방지 체크리스트:** - [ ] 내부 카드 padding: 상 110px, 좌우 80px, 하 90px - [ ] 본문 텍스트가 프롬프트 블록과 겹치지 않는지 - [ ] 결과 블록이 카드 하단을 넘지 않는지 - [ ] 핸들 워터마크가 잘리지 않는지 ### 3단계: 스크린샷 생성 ```javascript const { chromium } = require('playwright'); const path = require('path'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage({ viewport: { width: 1080, height: 1350 }, deviceScaleFactor: 2 }); await page.goto('file://' + path.resolve('cards.html'), { waitUntil: 'networkidle' }); const cards = await page.locator('.card').all(); for (let i = 0; i < cards.length; i++) { await cards[i].screenshot({ path: `output/card_${i}.png` }); } await browser.close(); })(); ``` ### 4단계: JPEG 변환 (업로드용) PNG가 너무 크면 (>1MB) JPEG 변환: ```bash cd output for f in *.png; do sips -s format jpeg -s formatOptions 90 "$f" --out "${f%.png}.jpg" done ``` ### 5단계: 업로드 **API 업로드 (instagram-content-studio 스킬):** ```bash cd /Users/gyeuun/.openclaw/workspace/skills/instagram-content-studio node scripts/post-image.js \ --env .env \ --caption '캡션 텍스트' \ ./output/cover.jpg ./output/card_1.jpg ... ``` **API 레이트 리밋 걸릴 경우:** - 텔레그램으로 이미지 + 캡션 전송 → 대표님 수동 업로드 - 1시간 후 재시도 - 하루 1개 캐러셀 권장 ## 캡션 작성 가이드 ``` [후킹 1줄 - 질문 또는 충격적 사실] [핵심 요약 2-3줄] — [카드별 상세 내용 - 각 번호별로 풀어서] — [CTA - 저장/팔로우 유도] #해시태그1 #해시태그2 #해시태그3 #해시태그4 #해시태그5 ``` - 해시태그: 3-5개만 (많으면 스팸 판정) - 캡션 자체가 가치 있는 글이어야 함 (카드 요약 X, 추가 정보 O) - 캡션에 키워드 SEO 중요 (2026 알고리즘) ## 인스타 운영 정책 - **게시 시간:** 평일 오전 7-9시 / 점심 12-13시 / 저녁 19-21시 - **주 3회:** 월/수/금 권장 - **저장(Save)이 최고 지표** — 저장하고 싶은 콘텐츠 = 알고리즘 노출 ↑ - **캐러셀 최대 20장** (2024년부터) - **음악:** API 불가, 앱에서 수동 추가 - **핸들:** @lio_universe_00 ## 대체 스타일 ### Toss Clean (밝은 배경) - 템플릿: `card-news/templates/toss-clean-v5.html` - 화이트 배경, #3182F6 블루 포인트, 깔끔한 카드 ### Toss Frosted (반투명 배경) - 템플릿: `card-news/templates/toss-frosted-v5b.html` - 사진 위 frosted glass 오버레이 사용자가 밝은 스타일 요청 시 위 템플릿 참고. 기본은 Dark Editorial.


Security scan verdicts — ClawScan: suspicious | static analysis: suspicious | VirusTotal: clean | SkillSpector: suspicious (MEDIUM)