Draw a good-looking short video in code. What follows is a path that works, not a fixed procedure; what to draw, which technique, the look and the motion are yours to design for this request.
Language
Talk to the user in the language of their first message and keep it for the whole session. Write the prompt blocks in that language too; the tag names stay in English. The seven examples are the Chinese originals that were actually run: learn their structure and level of detail, don't translate them word for word.
The rough path
- Ask: where it's used, who watches, what to show, what viewers should remember, the look, size and length, anything to avoid. Don't re-ask what the user said; use what you can infer; default what's missing (landscape 1920×1080, 30 fps, 8–15 s), and use all defaults if they say "you decide". Use a question tool if you have one, in one round
- Fill the prompt: fill the tags below for this request, save it as
prompt.mdin the project folder, and show the user (skip if they say "just do it") - Follow it: write the code, check a few stills, render the full video, look at the contact sheet, fix until it's right. If the first version shows habits you don't want, add them to
prompt.mdand fix - Deliver: the project folder keeps
video.mp4,check/contact-sheet.png,prompt.md,index.html,video.json,package.json(change one thing,npm i, re-render); deletenode_modulesand intermediate frames. Report how long it took and what the self-check fixed
The prompt: you fill the tags
Per Anthropic's prompting guide: keep requirements, background and checks in separate XML tags so they don't blur together, with a reason for each line so the model generalizes to what isn't written. The tag names are this skill's own; there is no official fixed set.
| Tag | What goes in it |
|---|---|
<role> |
which role does it and what that role cares about most (a motion designer for a promo, a science writer for an explainer, a pixel artist for pixel art… pick for this video) |
<context> |
where it's used and who watches, and therefore what it needs, written as "because…, so…" |
<task> |
what to show, in what order, what viewers should remember; the user's own words first |
<specs> |
size, frame rate, length, whether it loops, with or without sound; everything drawn in code |
<style> |
recommended techniques and look, each with a reason; recommendations, not rules: pick from the examples or design something new; follow the user where they've said what they want, and note what they don't want here too |
<check> |
what to verify on sampled frames, item by item, written for the defects this kind of video tends to have (a vague "check it" can make the model over-check) |
Infer what the user hasn't said from the request and ask when unsure. Then follow the prompt yourself, or hand prompt.md and the project folder path to a subagent: its context is clean and holds only this job, so the prompt must be complete; when it's done, look at the contact sheet before delivering.
Must hold
- Frames depend only on time: the page exposes
window.render(t)that draws second t; random numbers use a fixed seed; no requestAnimationFrame, CSS animations or Date.now; setwindow.__ready = trueonce ready; the page fills the viewport exactly (html, body { margin: 0; overflow: hidden }), with even width and height.render.mjsrelies on these to capture every frame - Facts in explainers are sourced: check every date and event at an official source, list them in
sources.md, and leave out what you can't verify - Assets and fonts are licensed for this; if the video uses AI-made imagery, turn on the platform's AI-content label when publishing
- Look at the contact sheet yourself before delivering
Tools at hand
| Tool | What it does |
|---|---|
scripts/render.mjs |
in the project folder, node <this skill>/scripts/render.mjs index.html video.mp4 renders every frame using size, fps and length from video.json; --stills 0,0.5,2.5 --outdir check for stills, --audio music.wav for sound |
scripts/contact.sh |
joins a video or a folder of stills into a contact sheet (frame 0 + 5 evenly spaced + the last) |
scripts/check.py |
colors counts colors in pixel art, loop checks whether a loop closes |
Setting up the project folder, which library for which look, springs and easing, music, fonts and which frames to check: references/practice.md and references/tech-stack.md.
What earlier videos left behind
References, not templates. Design for this request first; look here when unsure or when the user can't say what look they want:
references/examples/: seven prompts that were run end to end (one line, free rein; pixel; retro arcade; hand-drawn; 3D; UI motion; short history), to see how each block is written and how detailed; they have a separate<avoid>block, which now goes into<style>. Swap in this request's subject, numbers and palettereferences/practice.md: roles by video type, picking a technique per point in explainers, springs and easing, music, frame checks, fontsreferences/tech-stack.md: which library for which look, how it plugs into this pipeline, where it tends to get stuck