Pure Code Stickman Animation: Reducing Production Costs with Skill Specifications

1. Problem Background: Why “Can Generate” Does Not Equal “Can Stably Produce”

When using AI programming tools to generate web animations, the easiest part is “making the visuals move.” The true challenge is ensuring the character maintains consistent proportions, postures, and rhythm across multiple generations, modifications, and exports.

Take a stickman explainer animation as an example. The requirements typically include:

• Characters must maintain fixed proportions for the head, torso, and limbs;
• Arms and legs must rotate naturally around joints;
• Character identity must remain consistent across different shots;
• Subtitles, storyboards, actions, and audio rhythm must be synchronized;
• Modifying dialogue must not trigger a complete regeneration of the visuals;
• The final web animation must be stably exportable as a video file.

If you simply ask an AI programming tool to generate a webpage directly, you will usually get a prototype that “looks playable,” but its internal structure often has obvious flaws: animation logic, styles, timelines, and drawing code are all mixed in a single file; character coordinates rely on hardcoding; each shot uses different proportions; and there are no unified interpolation rules between actions. At this point, modifying one shot can cause misalignment, jitter, or proportion imbalance in others.

Therefore, the core issue is not merely generating an HTML snippet, but establishing a reusable animation production specification.

2. Baseline Testing: Observing Flaws in Unregulated Generation

Before formally building the skill module, you can conduct a baseline test. Prepare an independent working directory and ask the AI programming tool to complete the following tasks:

1. Check if animation-related specification files already exist in the current directory;
2. Do not call any existing skill modules;
3. Generate a landscape web animation;
4. Set the animation duration to about 15 seconds;
5. Divide the screen into three shots;
6. The theme revolves around “the difficulties a one-person team faces when creating overseas short videos”;
7. Use a simple stickman format for the character;
8. Output a single-page file that can be opened directly in a local browser.

The significance of the baseline version is not to pursue the final effect, but to record “how the system works without constraints.” Typically, the following phenomena can be observed:

1. Inconsistent Character Proportions

The head might be small in the first scene and enlarged in the second; body length, arm angles, and leg positions will also change depending on the shot. This happens because each action is treated as an independent drawing task without a unified coordinate model.

2. Lack of Action Continuity

If the code only directly sets the character’s position at certain time points, the animation will appear to jump. Especially in waving, walking, and turning actions, a sense of disconnection between the arms and the body is likely.

3. Difficult Code Maintenance

When HTML, CSS, drawing functions, and the timeline are all written in the same file, modifying subtitles might affect the layout, and modifying character actions might break the scene styling. As the number of shots increases, maintenance costs rise rapidly.

4. Unstable Export Process

A webpage playing normally does not guarantee reliable video export. The export phase must also account for frame rate, canvas size, browser loading timing, font rendering, and audio-video synchronization.

After the baseline test is complete, retain this version and record the generation time, file size, page loading status, and main flaws. This information can serve as a control group for subsequent optimizations.

3. Core Solution: Encapsulating Animation Rules into a Skill Module

A skill module is essentially a set of structured specifications, code libraries, and execution workflows. It is not a platform-specific feature, but rather an engineering organization method suitable for AI programming collaboration.

It is recommended to split the module into three parts:

animation-skill/
├── SKILL.md
├── engine.js
└── export-video.js

1. SKILL.md: Describing Workflow Specifications

The specification file should clearly instruct the AI programming tool on:

• What coordinate system the character uses;
• The standard lengths of the head, body, and limbs;
• Which joints are allowed to rotate;
• How to perform time interpolation for actions;
• How storyboards are organized;
• How subtitles and scenes are layered;
• What naming conventions must be followed when generating code;
• What checks to perform before exporting video.

For example, you can specify that the character model uses normalized coordinates:

Head center: offset (0, -120) relative to the character's root node
Shoulder center: offset (0, -70) relative to the root node
Hip center: offset (0, 20) relative to the root node
Left elbow: calculated from shoulder position and upper arm angle
Left hand: calculated from left elbow position and forearm angle

The benefit of this approach is that the character can be scaled and moved as a whole without individually modifying the pixel coordinates of each body part.

2. engine.js: Responsible for Stable Rendering

The rendering engine should not directly contain specific story content, but rather provide general capabilities, such as:

• Drawing the head, torso, and limbs;
• Calculating endpoints based on joint angles;
• Supporting character translation, scaling, and rotation;
• Generating basic actions like walking, waving, and thinking;
• Calculating continuous postures based on time parameters;
• Drawing speech bubbles, subtitles, and simple scene elements.

A simplified joint calculation approach is as follows:

function endpoint(start, length, angle) {
  return {
    x: start.x + Math.cos(angle) * length,
    y: start.y + Math.sin(angle) * length
  };
}
function drawLimb(ctx, start, length, angle, width) {
  const end = endpoint(start, length, angle);
  ctx.lineWidth = width;
  ctx.beginPath();
  ctx.moveTo(start.x, start.y);
  ctx.lineTo(end.x, end.y);
  ctx.stroke();
  return end;
}

In practice, you can first calculate from the shoulder to the elbow, and then from the elbow to the hand, forming a two-segment skeletal chain. The legs work the same way. Action changes should not directly modify the final coordinates, but rather modify the angle, length, or root node position.

3. export-video.js: Responsible for Automated Export

The export script’s responsibility is to open the local webpage, wait for resources to finish loading, capture the screen at a fixed frame rate, and call the machine’s existing video encoding capabilities to generate a file.

To minimize environmental issues, the script should prioritize common browsers and encoding components already installed on the computer, rather than temporarily downloading large dependencies. The export process should include at least the following checks:

• Whether the page can open normally;
• Whether the canvas size matches the landscape ratio;
• Whether the animation has entered the first frame;
• Whether fonts and graphic resources have finished loading;
• Whether the actual frame rate is stable;
• Whether the video file is generated;
• Whether the file duration matches the expectation.

If the animation is drawn purely with code, the most reliable approach is to have the page provide an explicit time control interface, for example:

window.renderAt = function(timeInSeconds) {
  drawScene(timeInSeconds);
};

The export program can call this function at fixed time steps, avoiding reliance on real-time playback speed. This way, even if the computer is currently under heavy load, playback stuttering will not cause inconsistent video frame rates.

4. Storyboard Design: Define the Timeline Before Drawing Visuals

A 15-second short film can be divided into three five-second shots, but more importantly, each shot should have a clear entry, hold, and exit phase.

An example timeline is as follows:

0.0~1.0 sec: Character enters the screen
1.0~4.0 sec: Display main action and subtitles
4.0~5.0 sec: Action resolves and transitions
5.0~6.0 sec: Switch to the second scene
6.0~9.0 sec: Display a new conflict or problem
9.0~10.0 sec: Emphasize key information
10.0~11.0 sec: Enter the third scene
11.0~14.0 sec: Provide a solution
14.0~15.0 sec: End freeze frame

It is best to define four types of information for each shot simultaneously:

1. Scene Information: Background color, ground line, simple props;
2. Character State: Position, orientation, action, and expression;
3. Text Information: Title, dialogue, emphasized words;
4. Transition Information: Fade in, slide in, zoom, or freeze frame.

This way, when modifying dialogue later, you only need to replace the text content and the corresponding time segment without redrawing the entire animation.

5. Prompt Design: Upgrading from “Write a Webpage” to “Implement by Specs”

High-quality prompts should not only describe the final visuals but also specify the execution sequence and acceptance criteria. It is recommended to adopt the following structure:

Part 1: Environment Check

Require the tool to only check the current working directory, avoid traversing irrelevant paths, and confirm the runtime environment, output directory, and status of existing files.

Part 2: Task Boundaries

Clearly state the animation duration, aspect ratio, number of shots, theme, character style, and output file name to prevent the tool from expanding the scope on its own.

Part 3: Specification Constraints

Require reading the specification files and rendering engine from the skill module first. Do not reinvent the character skeleton, and do not hardcode all action logic within the page.

Part 4: Delivery Requirements

After generation, automatically check:

• Whether the file exists;
• Whether the page can be opened;
• Whether the animation can play completely;
• Whether the three shots appear in chronological order;
• Whether character proportions remain consistent;
• Whether the exported video has the correct duration and resolution.

Part 5: Result Report

Require a return report on which files were modified, which modules were used, how long it took, whether there are known issues, and how to optimize in the next step.

Compared to “make an animation for me,” this prompting method is closer to a task specification in software engineering and can significantly reduce repeated communication.

6. Cost Control: Why Modifying Dialogue Shouldn’t Regenerate Visuals

The production cost of short videos typically comes from three aspects:

• Code generation and debugging time;
• Image or video asset regeneration costs;
• Repeated export and manual inspection costs.

If the animation relies entirely on a one-time generated full video, modifying a single line of dialogue often means regenerating all content. By adopting a “code-drawn character + data-driven storyboard” approach, dialogue, subtitles, actions, and scenes can be managed separately.

For example:

const scenes = [
  {
    start: 0,
    end: 5,
    text: "Topic selection, shooting, and editing are often done by one person",
    action: "thinking"
  },
  {
    start: 5,
    end: 10,
    text: "What really takes time is repeated revisions",
    action: "typing"
  },
  {
    start: 10,
    end: 15,
    text: "Standardizing the workflow enables consistent output",
    action: "presenting"
  }
];

Here, modifying only the text field changes the subtitle content without affecting the character’s skeleton and action logic. If voiceovers are also segmented by shot, you only need to re-record the changed fragments.

7. Quality Verification: Beyond Just “Can It Play”

After the animation is complete, four types of tests should be performed.

1. Visual Consistency Test

Check whether the head size, body length, limb connection points, and identifying elements like glasses remain consistent across different shots.

2. Timeline Test

Check the total duration, shot switching points, subtitle appearance time, and action end time. A common issue is that the subtitle has disappeared, but the character’s action has not yet finished.

3. Compatibility Test

Open the page in at least two common desktop browser environments to verify that canvas size, fonts, transparency effects, and animation interfaces function normally.

4. Export Result Test

Use a player to view the exported file and confirm:

• The video has no black screens;
• The first and last frames are complete;
• The aspect ratio is not distorted;
• The playback speed is normal;
• If audio is configured, it synchronizes with the visuals;
• The file size is within a reasonable range.

8. Common Issues and Improvement Suggestions

Issue 1: Character Actions Are Still Stiff

The cause is usually that only the start and end points are set without using smooth interpolation. You can use an ease-in-ease-out function to let the action gradually decelerate at the beginning and end:

function easeInOut(t) {
  return t < 0.5
    ? 2 * t * t
    : 1 - Math.pow(-2 * t + 2, 2) / 2;
}

Issue 2: Inconsistent Character Sizes Across Different Shots

Unify the use of the character’s root node and scaling parameters. Do not hardcode pixel values separately in each shot.

Issue 3: Exported Video Occasionally Drops Frames

Avoid relying entirely on real-time playback; switch to rendering by time points. Also, wait for page resources to finish loading before exporting.

Issue 4: Code Becomes Increasingly Hard to Maintain

Layer content, actions, rendering, and export. Place story data in configuration objects, basic drawing functions in the engine file, and the export workflow in an independent script.

9. Conclusion: Turning One-Time Generation into a Reusable Production Line

The value of pure code stickman animation is not just saving production time once, but more importantly, establishing a sustainable and reusable content production pipeline:

1. Use the baseline version to expose problems of unregulated generation;
2. Use skill files to solidify character proportions and action rules;
3. Use a rendering engine to achieve stable, composable skeletal animation;
4. Use data structures to manage storyboards, subtitles, and actions;
5. Use automated scripts to complete web-to-video export;
6. Use a testing workflow to verify visuals, timeline, and compatibility;
7. Reduce the cost of changing dialogue, shots, and subtitles through local modifications.

For individual developers and small teams who need to continuously produce explainer shorts, product demos, or educational content, this method is more reliable than generating a complete video from scratch each time. It transforms the creative process from “regenerating every time” to “iterating based on specifications,” which not only improves character consistency but also makes it possible to expand with more actions, scenes, and characters in the future.