Card News Generator

인스타그램/SNS용 카드뉴스를 자동 생성하는 스킬. 주제를 입력하면 → HTML 디자인 → Playwright 스크린샷 → 업로드용 이미지 생성. 다크 에디토리얼 스타일(사진 커버 + 다크 텍스트 카드) 기본 제공. "카드뉴스", "인스타 콘텐츠", "캐러셀", "card news...

Security Scan

The skill largely does what it says (generate HTML + take Playwright screenshots), but there are mismatches (undeclared runtime deps, hard-coded user paths, macOS-only commands, and references to another skill's .env) that warrant caution before installing or running.

Purpose & Capability

Name and description match the included assets and script: HTML templates, CSS, and a Playwright-based screenshot script. However, the SKILL.md assumes Node+Playwright and macOS tooling (sips) even though no runtime dependencies or platform restrictions are declared. The README also instructs using another skill's upload script and an .env file (instagram-content-studio), which the skill doesn't declare or justify in its top-level requirements.

Instruction Scope

Instructions include hard-coded file system paths (e.g., /Users/gyeuun/.openclaw/workspace/...), references to an external photos folder ../insta-first/photos-v5/ and to downloading images from Unsplash — all of which cause the skill to read/write files outside its own folder. The SKILL.md also tells the operator to call another skill's node script with an .env file, implying credential usage not declared here.

Install Mechanism

There is no install spec (instruction-only with small script file). That's low risk generally, but the script requires Playwright and Node to be available and uses macOS 'sips' for JPEG conversion. The lack of declared dependencies or platform notes is a friction/clarity issue (could cause failures or lead users to install packages from untrusted sources).

Credentials

The skill declares no required environment variables or credentials, yet the SKILL.md suggests passing a .env into an instagram-content-studio upload script. That creates an undeclared dependency on credentials. The SKILL.md also references other local folders for photos which may contain unrelated sensitive data.

Persistence & Privilege

always is false and the skill does not request persistent agent privileges. However, it instructs creating and writing into a hard-coded user workspace path and external photos directories. This is not a platform-privilege escalation, but it can cause unexpected file writes or access to unrelated user files.

What to consider before installing

Before installing or running this skill: - Understand required runtime: you need Node and Playwright installed (not declared). The screenshot script assumes those are present. - Platform note: JPEG conversion uses macOS 'sips' — it will fail or behave differently on Linux/Windows. - Review and possibly edit paths in SKILL.md: it uses a hard-coded path (/Users/gyeuun/...) and references ../insta-first/photos-v5/ which could read or overwrite files outside the skill directory. Change these to a safe project-local path. - Credentials: the README instructs calling another skill with --env .env. That implies you may pass a file containing credentials to that upload step. Verify the instagram-content-studio skill separately and never pass credentials to scripts you haven't audited. - Audit the script before running: scripts/screenshot.js invokes child_process.execSync to run sips; ensure paths are what you expect and that no untrusted input can supply malicious filenames. - If you plan to run this on a shared or production machine, run it first in an isolated environment (container or dedicated user). If you cannot confirm the other skill (instagram-content-studio) or the intended .env contents, do not run the upload step. These issues look like sloppy packaging and missing documentation rather than explicit malicious intent, but exercise caution and fix the hard-coded paths/dependency declarations before use.

주제만 주면 인스타그램 캐러셀 카드뉴스를 자동 생성합니다.

디자인 시스템

기본 스타일: 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을 생성합니다.

# 작업 디렉토리 생성
mkdir -p /Users/gyeuun/.openclaw/workspace/rio-interactive/card-news/{프로젝트명}/output

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단계: 스크린샷 생성

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 변환:

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 스킬):

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.