AI 스킬마트스킬 둘러보기명령어프로그램배우기스킬이 뭐예요?
 
← 목록으로

AGENCY 커뮤니티 소셜 커버 생성기

고정된 디자인 시스템(다크+오렌지)으로 이벤트 커버·유튜브 썸네일·텔레그램 이미지를 HTML로 만들고 Playwright로 고화질 PNG로 뽑아주는 스킬.

디자인·UI중급★ 407⑂ 61AI 점수 5/10마지막 업데이트: 2026. 11. 2.

무엇을 해주나

  • 다크 배경(#0f0f0f) + 오렌지 포인트(#e85d04)로 구성된 고정 디자인 토큰(색상, Geist/JetBrains Mono/EB Garamond 폰트, 1px 프레임, 40px 그리드, 오렌지 액센트 라인)을 그대로 적용한 HTML 템플릿을 생성합니다.
  • 용도별 규격을 자동으로 맞춰줍니다: lu.ma 이벤트 커버 800×800, 유튜브 썸네일 1280×720, 텔레그램 이미지 1080×1080.
  • 발표자 사진에 흑백 변환·스캔라인·가장자리 페이드 효과를 적용하고, 썸네일 크기에서도 읽히도록 최소 폰트 크기 규칙(제목 62px+, 이름 28px+ 등)을 강제합니다.
  • Playwright(Chromium)로 deviceScaleFactor 2 캡처해 선명한 2배 해상도 PNG를 저장합니다.

이런 분께 추천

  • 밋업·웨비나·커뮤니티 행사를 정기적으로 열며 매번 비슷한 톤의 커버 이미지가 필요한 운영자
  • 디자이너 없이 코드로 반복 가능한 썸네일 파이프라인을 만들고 싶은 개발자
  • 자신의 브랜드 색/폰트로 토큰만 바꿔 사내 이벤트 템플릿을 만들고 싶은 분

활용 예시

  1. "브라우저 자동화를 주제로 한 Vlad 발표 밋업 커버 만들어줘" → 800×800 lu.ma 커버 HTML 생성 후 PNG 렌더링
  2. "오늘 밋업 녹화분 유튜브 썸네일 뽑아줘" → 1280×720 16:9 레이아웃으로 제목·발표자·핸들 배치
  3. "다음 커뮤니티 행사 텔레그램 공지 이미지" → 1080×1080 정사각 포스트 이미지 생성

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/glebis/claude-skills/HEAD/agency-socials/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

AI 스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 glebis/claude-skills 의 agency-socials 폴더를 내 ~/.claude/skills/agency-socials/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/glebis/claude-skills.git && mkdir -p ~/.claude/skills && cp -r claude-skills/agency-socials ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다.
  2. 저장소를 내려받습니다: git clone https://github.com/glebis/claude-skills.git
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  4. 스킬을 복사합니다: cp -r claude-skills/agency-socials ~/.claude/skills/
  5. 렌더링에 필요한 도구를 설치합니다: npm i playwright && npx playwright install chromium (Node.js 18 이상 필요)
  6. Claude Code를 재시작하고 "밋업 커버 이미지 만들어줘"처럼 요청하면 스킬이 호출됩니다.
  7. (선택) 본인 브랜드에 맞추려면 SKILL.md의 색상 코드·폰트·하단 바 문구(agency · community)를 직접 수정하세요. 클립보드 저장 명령(osascript)은 macOS 전용이므로 다른 OS에서는 사진 파일을 직접 넣어 주세요.
GitHub에서 원본 보기 ↗라이선스: MIT