SuperAPI AI Directory
Partner中文AI newsFavorites
Skillshanddrawn-promo-video

handdrawn-promo-video

Design & creation

View repository

Updated 11-01 16:11

About this skill

Hand-drawn Promo Video

<skill>is the folder where this SKILL.md is located. The engine is in <skill>/template/.

  • kit.js: hand-drawn lines, text, camera, transitions, pixel sprites, minimes, image pixelation helpers
  • minis-ai.js: minime sets for AI-related topics (Claude, Codex, Gemini, DeepSeek, Grok, Qwen)
  • render.mjs: parallel rendering with Chrome headless
  • main.js: scene skeleton

The required tools are node/npm, ffmpeg(libx264), Google Chrome, uv. If even one is missing, stop and report what is missing.

for c in node npm ffmpeg uv; do command -v $c >/dev/null || echo "missing: $c"; done; ffmpeg -hide_banner -encoders | grep -q libx264 || echo "missing: libx264"

0. Ask for detailed settings

Ask with a single AskUserQuestion. Omit items the user has already mentioned, and put the recommended option first.

  • Length: 30 seconds / 15 seconds / 45 seconds / 60 seconds
  • Screen: 16:9 1920×1080 / 9:16 1080×1920 / 1:1 1080×1080 / 16:9 2560×1440
  • Language: Korean-centric + English accents / English / Korean-English bilingual
  • Characters: logo mascot + minimes matched to the topic / specify minimes directly / logo mascot only / no characters

Minimes are an 8-bit supporting cast matched to the topic. If the user specifies them, follow that exactly; if not, determine the cast from the research results and propose it in the plan (basis: references/storyboard.md's minime casting).

For items not asked about, use the following defaults and note them in the plan.

  • 30fps, H.264 MP4, 10MB or less per 30 seconds
  • No audio. This engine only produces silent videos.

1. Research

references/research.md.

  • Entrust research of facts, figures, original copy text, and brand assets to a read-only agent (model: sonnet), and run independent research in parallel.
  • For figures that will appear prominently in the video, verify the original sentence directly.
  • If figures conflict between sources, ask the user.

2. Plan approval

Do not create the working folder until you have shown the following and received approval.

  • Research summary (source links)
  • Per-scene timetable: use the pattern and time allocation of references/storyboard.md.
  • Figures to use and figures omitted, asset list (logo URL, fonts, characters), working folder location

If the user changes scenes or emphasis points, summarize the updated flow once more and proceed.

3. Production

cp -R <skill>/template <작업폴더>/<name>-video && cd <작업폴더>/<name>-video
npm i
bash <skill>/scripts/fetch_fonts.sh assets/fonts
curl -fsSL -o assets/logo_src.png '<공식 로고 URL>'
uv run --with pillow python <skill>/scripts/clean_logo.py assets/logo_src.png assets/logo.png
  • index.html: window.VIDEOPut the size, fps, and length into @font-face.
  • main.js: put THEME, scene functions, and boot(). The API is in references/kit-api.md.
  • Use the actual files for the logo and wordmark.
  • Draw the logo mascot as a sprite for drawPixels.
  • Register minimes in MINISand draw them with drawMini. For AI-related topics, use the prepared set minis-ai.js, and draw only the missing characters anew.
  • Show the user one still of the character lineup early in production and get confirmation.
  • Copy and figures are main.js collected into constants at the top. For figures where a user decision is pending, branch on a single URL parameter so both versions can be rendered.

4. Review

references/qa-checklist.md.

  1. node render.mjs stills <장면 중간과 전환 직전·직후 시각들>to extract stills.
  2. uv run --with pillow python <skill>/scripts/contact_sheet.py stills <임시폴더>to try building a sheet.
  3. Fix the problems.
  4. CRF=25 node render.mjs video draft.mp4to render a draft, extract transition frames, and check the file size.

5. Final render and delivery

  • CRF=25 node render.mjs video <Name>_intro.mp4to create the final version. If it exceeds the size target, raise to CRF 27 or lower boot({ noise }).
  • stills/, and delete intermediate files such as drafts and logs.
  • SendUserFile(display render) to send the MP4 and report the following.
    • Specs: length, resolution, fps, file size
    • Scene composition
    • Facts used and source links
    • Omitted figures and reasons, items needing confirmation
    • Re-render command: state that it must be run inside the working folder.