Communitygithub.com

GPT 손그림 스킬

번들된 p5.js/p5.brush 엔진, 헤드리스 Chrome, FFmpeg를 사용하여 수채화 및 잉크 스타일의 만화 비디오, 짧은 애니메이션, 뮤직비디오, 자막 비디오, 애니메이션 루프를 제작합니다.

GPT 손그림 스킬란 무엇인가요?

GPT 손그림 스킬은 Codex와 같은 AI 코딩 에이전트가 수채화와 잉크 스타일의 손으로 그린 듯한 애니메이션 비디오를 제작할 수 있게 해주는 도구입니다. 이 스킬은 p5.js의 p5.brush 엔진을 사용하여 각 프레임을 시간에 대한 순수 함수로 계산하고, 헤드리스 Chrome에서 렌더링한 후 FFmpeg로 인코딩하여 최종 MP4 파일을 만듭니다. 별도의 클로드 런타임, 유료 API, 또는 이미지 생성 모델이 필요하지 않으며, Node.js와 npm이 있는 환경에서 실행됩니다. 사용자는 프로젝트 디렉토리 생성, STORYBOARD.md 작성, 신(scene) 구현, 프레임 렌더링, 비디오 인코딩의 워크플로우를 따르며, 제공된 템플릿과 스크립트(`new_project.py`, `render.mjs`)를 활용합니다. 개발 중에는 프레임 시트와 모션 스트립을 검사하여 시각적 품질을 확인하고, 성능 측정을 통해 최종 비용을 예측합니다. 선택 사항인 ‘Clawd’ 캐릭터도 포함되어 있으며, 사용자의 캐스팅과 스타일 선택을 따릅니다.

지원 대상✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/chao69782/gpt-hand-drawing-skill/tree/HEAD

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Codex용 GPT 손그림 스킬

동작하는 애니메이션 프로젝트와 요청된 MP4 또는 루프를 만듭니다. 프레임은 시간에 대한 결정론적 함수이며, Chrome에서 p5.brush로 그리고 FFmpeg로 인코딩됩니다. Claude 런타임, 유료 API, 또는 이미지 생성 모델이 필요하지 않습니다. Clawd는 선택 사항인 내장 캐릭터입니다. 사용자가 선택한 캐스트와 스타일을 따르세요.

프로젝트 시작하기

이 스킬의 디렉토리를 로드된 SKILL.md 위치에서 확인하세요. Claude 디렉토리를 하드코딩하지 마세요. 다음을 실행하세요:

python "<skill-dir>/scripts/new_project.py" "<project-dir>"

크로스 플랫폼 초기화 프로그램은 template/을 복사하고, 데모를 분리하며, npm ci로 잠긴 종속성을 설치하고, 도구를 보고합니다. 데모나 엔진 확인용으로만 --keep-demo를 사용하고, 스캐폴딩만을 위해서는 --skip-install을 사용하며, Node는 사용 가능하지만 npm이 PATH에 없을 때는 --npm-cli /path/to/npm-cli.js를 사용하세요. NPM_CLI_JS는 동일한 환경 변수입니다. 비어 있지 않은 프로젝트를 덮어쓰지 않습니다.

설계하기 전에 생성된 ANIMATION_GUIDE.md를 전체적으로 읽으세요. 사용 가능한 이미지 뷰어(예: 실행 도구를 통한 view_image)로 docs/emotions.jpg와 docs/views.jpg를 검사하세요. 이 가이드에는 엔진과 캐릭터 API가 포함되어 있습니다. MV 또는 약 20초보다 긴 비디오에 대해서는 references/music-video.md를 읽으세요. 런타임 문제, 플랫폼 명령어, 렌더러 제한 사항에 대해서는 references/codex-runtime.md를 읽으세요.

계획 및 구축

사용자의 기존 선택을 사용하세요. 작업에 실질적으로 영향을 미치는 누락된 정보만 물어보고, 이미 답변한 질문은 반복하지 마세요. MV의 경우 오디오와 타이밍 소스를 수집하세요. 자막 비디오에는 LRC 또는 이에 상응하는 타임스탬프가 있는 자막이 제공되어야 하며, 누락된 가사를 만들어내지 마세요. 기악 MV는 LRC가 필요하지 않습니다. 창의적인 방향이 없을 때, 한 가지 선택 질문으로 이야기, 분위기, 반복되는 이미지, 그리고 피해야 할 사항을 다룰 수 있습니다. 사용자가 방향을 위임하면 일관된 해석을 제안하고 진행하세요.

음악을 측정하려면 python "<skill-dir>/scripts/beat_grid.py" song.mp3 --from=0 --to=30 --lrc=song.lrc를 실행하세요(NumPy와 FFmpeg 필요). 템포는 반박자/두배박자 모호성이 있는 추정치로 처리하며, 제공된 오디오와 타임스탬프가 타이밍을 정의합니다. LRC는 일반적으로 라인 단위로 시간을 정하므로, 단어 수준의 타이밍이 제공되지 않는 한 노래방식의 문자별 채우기는 근사치입니다. 강제 정렬(forced alignment)을 주장하지 마세요.

STORYBOARD.md를 작성하세요: 로그라인, 세계와 팔레트의 흐름, 시각적 모티프, 감정적 흐름, 그리고 시간 범위, 동작, 시청자가 읽는 내용, 전환이 포함된 샷(shot)들. 유용할 때 방향을 검토를 위해 공유하고, 사용자가 진행하라고 요청했다면 계속하세요. 완전한 작업 예제는 examples/xiaozhen/STORYBOARD.md에 있으며, 장면 파일이 함께 있습니다.

src/config.js에 duration, bpm, offset, 그리고 선택적으로 audio를 설정하세요. 신(scene)을 src/scenes/ 안에 IIFE로 구현하고, shots([[t0, fn], ...])로 등록하며, studio.html에 해당 스크립트를 포함시키세요. 먼저 읽을 수 있는 포즈를 차단하세요. 샷 전반에 걸쳐 공통 캐스트, 팔레트, 반복되는 모티프를 사용하세요.

렌더링 및 검사

프로젝트 디렉토리에서 필요할 때 선택한 프레임, 짧은 모션 스트립, 세부 정보를 렌더링하세요:

node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/poses.jpg
node render.mjs --strip=2.1:2.6 --out=out/check/motion.jpg
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg

생성된 이미지를 여세요. 각 샷의 이벤트와 읽기 시간, 얼굴, 소품 접촉, 캐릭터 크기, 전환, 팔레트를 확인하세요. 주요 동작과 이음새 주변의 모션을 검사하세요. 관찰된 문제를 수정한 후, 영향을 받는 프레임을 다시 검사하세요. 연락처 시트(contact sheet)는 포즈와 연속성을 확인하며, 중요한 동작 타이밍을 위해 짧은 인코딩된 미리보기를 검사하세요. 소스 코드만으로 시각적 검토를 완료했다고 주장하지 마세요.

측정된 ms/프레임과 프레임 수를 사용하여 최종 비용을 추정하세요. 이 데스크톱 환경은 로컬입니다: 비디오 생성 요청은 일반적으로 로컬 렌더링을 승인합니다. 명시적인 로컬/클라우드 선택을 존중하고, 필수 위치 승인 게이트를 추가하거나 승인 없이 유료/클라우드 서비스를 사용하지 마세요. 작업이 실제로 원격이고 렌더링 위치가 중요한 경우, 전체 렌더링 전에 명확히 하세요. 사용자가 소스 또는 로컬 명령어만 요청하는 경우, 실행 가능한 프로젝트와 미리보기를 보존하세요.

node render.mjs --clip --out=out/video.mp4
node render.mjs --frames --workers=4
node render.mjs --encode --audio=assets/song.mp3 --out=out/video.mp4

프레임 렌더링과 인코딩에 동일한 --fps를 사용하세요. 프레임 파일은 재개 가능하지만, 변경된 시간 범위에 대해서는 캐시된 프레임을 다시 렌더링하기 전에 제거해야 합니다. --encode는 0부터 시작하는 프레임을 소비하며, 나중에 시작하는 부분 범위는 자체 FFmpeg 시작 번호와 일치하는 오디오 트림이 필요합니다(런타임 참조 참조).

ffprobe로 인코딩된 지속 시간, 해상도, fps, 오디오를 확인하고 결과를 검사하세요. 비디오 및 프로젝트 경로, 측정된 성능, 실제 제한 사항을 반환하세요. node_modules, 프레임 캐시, 임시 파일은 휴대용 소스 아카이브에 포함시키지 마세요.

시각 및 엔진 불변 조건

  • paint()와 inkLine()으로 그리세요. 가산광(Additive light)에는 glow()를 사용하세요. 평평한 2D 드로잉 주요 뷰, 부드러운 팔레트, 끓는 잉크(boiling ink) 스타일이 기본값입니다. 명시적인 사용자 요구사항이 우선합니다.
  • 불필요한 텍스트는 피하세요. 노래방 가사와 요청된 문자 표기는 지원됩니다. timeline.js 다음에 src/karaoke.js를 로드하고, LY를 채우며, 동작을 하단 밴드 위로 유지하세요. 실제 글꼴과 한자 문자를 확인하세요.
  • 모든 샷은 이벤트, 원인에 따른 반응, 그리고 읽을 수 있는 유지된 의미가 필요합니다. emotions()를 통해 얼굴을, feel()을 통해 무표정/idle을 애니메이션하세요. 전환을 스토리에 맞추고, 적절할 때 결말을 시작과 연결하세요.
  • 모든 프레임은 t의 순수 함수여야 합니다: 누적 시뮬레이션, 시드되지 않은 Math.random(), 또는 렌더 순서에 대한 의존성 없음. 안정적인 변형을 위해 hash()를 사용하고, 각 독립 요소에 대해 boilSeed(key)를 사용하세요.
  • p5 전역 이름 충돌을 피하기 위해 헬퍼를 신(scene) IIFE 안에 유지하세요. 퇴화된 기하와 NaN을 방어하세요. 문/창문 내용물을 전경 프레임으로 마스킹하고, 가까운 줌에서 외곽선 두께를 줄이세요.
  • 성능은 브러시 채우기와 선에 따라 달라집니다. 규모를 키우기 전에 대표적인 프레임 몇 개를 측정하고, GPU 메모리가 부족할 때 과도한 기하와 작업자 수를 줄이세요. --soft-gl은 느린 대체재이지 기본 최적화가 아닙니다.
  • 사용자가 명시적으로 에이전트를 요청하지 않는 한 장(chapter)을 순차적으로 구현하세요. 병렬 렌더 작업자는 렌더러 기능이며 하위 에이전트가 필요하지 않습니다.

소스 및 라이선스: references/upstream.md. 엔진 또는 스킬을 재배포할 때 번들된 두 MIT 고지를 모두 유지하세요.

관련 스킬