Studio — 5 visual/media 생성 스킬
Codex CLI 와 ffmpeg / Playwright / pptxgenjs 를 활용해서 한 문장 트리거로 이미지·영상·슬라이드·인포그래픽·앱 프로토타입을 뽑아내는 산출물 스튜디오. 능동적 생성기 (사용자/Claude 가 명시적 호출).
설치 + doctor
# Clone + install
git clone https://github.com/kinkos1234/comad-studio \
~/Programmer/01-comad/comad-studio
cd ~/Programmer/01-comad/comad-studio
./install.sh
# 의존성 진단 (codex, node, ffmpeg, python3, playwright 자동 검사)
./doctor.sh
install.sh 가 5종 스킬을 ~/.claude/skills/ 로 복사. 기존 파일은 .bak-<UTC> 백업 후 덮어쓰기. 재실행 안전. 47 MB 중 약 90% 는 BGM/SFX (CC-BY 4.0).
의존성 매트릭스
./doctor.sh 가 자동 진단. 부족한 의존성 + 설치 명령 알려줌. 스킬마다 자체 deps check 도 트리거 시점에 동작.
| 의존성 | image | motion | pptx | infographic | app-prototype | 설치 |
|---|---|---|---|---|---|---|
codex (CLI) | ● | ● | npm i -g @openai/codex | |||
node (≥18) | ● | ● | ● | brew install node | ||
playwright (chromium) | ● | ● | ● | npx playwright install chromium | ||
ffmpeg | ● | brew install ffmpeg | ||||
python3 | (general — 다수 스크립트가 사용) | brew install python | ||||
comad-image — 7-mode 이미지 생성
Codex CLI 의 /imagen 기능을 사용해서 7가지 모드를 자동 감지: portrait · landscape · object · illustration · thumbnail · logo · conceptual. image-studio 시스템 프롬프트가 내면화되어 있어 한 문장 트리거로 충분.
출력 — {git-root|pwd}/images/YYYY-MM-DD/{slug}-NN.png. SHA1 검증으로 중복 방지. 후처리 금지 가드 (모델 출력 그대로 보존).
트리거 — "이미지 만들어줘", "썸네일 만들어", "로고 만들어줘", "포스터 만들어", "프로필 이미지" / "create image", "make thumbnail", "make logo", "render image"
parallel 또는 일반 Claude 응답으로 라우팅됨.comad-motion — 한 문장 영상 생성
HTML 애니메이션 → Playwright 녹화 → ffmpeg 후처리 → SFX+BGM 믹싱 의 4-단계 파이프라인. Stage+Sprite 시간축 엔진 (inline React) 으로 5-beat 서사 (Hook → Setup → Build → Climax → Rest) 자동 구성.
출력 — 10-60초 MP4 (1920×1080 @ 25fps) + 선택적 GIF (720×405) + 60fps minterpolate 업스케일 derivative. 2-pass palette GIF.
오디오 — BGM 6곡 (Kevin MacLeod, CC-BY 4.0, incompetech.com) · SFX 16곡. 주파수 분리 (lowpass 4000 BGM / highpass 800 SFX / normalize=0).
트리거 — "영상 만들어", "GIF 로 뽑아줘", "릴리스 영상", "스킬 소개 영상", "MP4 로 뽑아줘" / "motion design", "make video", "export MP4", "render GIF"
assets/{bgm,sfx}/LICENSES.md 참고) 반드시 포함.
comad-pptx — 고품질 PPTX 생성
Codex /imagen 으로 슬라이드를 한 장씩 이미지로 생성한 후 pptxgenjs 로 LAYOUT_WIDE (13.333×7.5") PPTX 조립. 디자인 품질은 Codex 이미지 그대로, 편집은 overlay 텍스트 또는 spec 수정 후 재생성.
출력 — {git-root|pwd}/slides/YYYY-MM-DD/{deck-name}.pptx. 슬라이드별 PNG 도 별도 보존.
트리거 — "PPT 만들어줘", "슬라이드 만들어줘", "발표자료", "프리젠테이션", "deck 만들어줘", "마케팅 덱", "투자자 덱" / "create pptx", "make slides", "pitch deck", "investor deck"
comad-infographic — 숫자 시각화 인포그래픽
단일 숫자 강조 (metric hero), 비교 (before/after, A/B), 타임라인, 플로우 차트 4종 패턴 제공. Pretendard (본문) + Inter (숫자 전용) 하이브리드 타이포그래피.
출력 — HTML (SVG 차트 + 폰트 임베드) + PNG (Playwright 스냅샷) + PDF.
트리거 — "인포그래픽 만들어줘", "수치 시각화", "통계 그래픽", "차트 만들어줘", "비교 그래픽", "타임라인 만들어줘", "before/after 시각화", "숫자 강조 포스터" / "infographic", "data visualization", "stats graphic", "metric hero"
comad-app-prototype — 앱 UI 프로토타입
모바일·웹·데스크톱 앱 UI 프로토타입을 HTML 로 생성. 4종 프레임: iOS (iPhone 15 Pro Dynamic Island 재구현) · Android (Material You) · macOS (Sonoma 창) · 브라우저 (Chrome). Flow demo (탭 전환·스크롤) 와 Overview (평철 배치) 듀얼 라우팅.
출력 — HTML (CSS 재구현 프레임, 스펙 참고 재구현이라 외부 코드 의존성 0) + Playwright click-test.
트리거 — "앱 프로토타입", "iPhone 화면", "iOS 화면", "Android 화면", "데스크톱 앱 UI", "브라우저 목업", "UI 프로토타입", "앱 플로우 만들어줘" / "app prototype", "iPhone mockup", "Android screen", "browser mockup"
레포 / 라이선스
GitHub: kinkos1234/comad-studio · 코드 라이선스: MIT · BGM/SFX: CC-BY 4.0 (attribution 필요)