From High-Cost Trial and Error to Low-Cost Reuse: Building a Stickman Animation Pipeline with Skill Specifications

Once generative development tools can “take care of tasks” directly, many animation projects no longer require complex professional software. With a structured set of rules, an AI coding tool can generate web animations, revise dialogue, adjust movements, and eventually export the result as a video.

However, asking a model to write an animation from scratch usually produces something that merely plays, rather than something that can be reused reliably. Character proportions may change between shots, joints can become misaligned, and storyboard logic may become entangled with page structure. The key to solving these problems is not adding more temporary prompts. Instead, character definitions, motion rules, code organization, and export procedures should be formalized into a callable skill specification.

1. Define the Goal First: Build a Pipeline, Not Just an Animation

A complete workflow for a short stickman film should include at least four stages:

1. Script and storyboard design: Define what each shot communicates and how long it lasts.
2. Character and motion rendering: Generate standing, walking, pointing, thinking, and other actions using consistent skeletal proportions.
3. Web animation composition: Combine characters, subtitles, backgrounds, and shot transitions into a playable page.
4. Video export: Use the local browser and media-processing capabilities to record the web animation as a video file.

Without clear boundaries between these stages, later changes become difficult. Changing one line of dialogue might affect the entire page. Replacing one action could change character proportions across multiple shots. Re-exporting may also produce inconsistent dimensions or frame rates because of differences in the execution environment.

A more maintainable project structure could look like this:

stickman-project/
├─ scenes/
│  ├─ scene-01.js
│  ├─ scene-02.js
│  └─ scene-03.js
├─ assets/
│  └─ fonts/
├─ engine.js
├─ export-video.js
├─ index.html
└─ .skills/
   └─ stickman-animation/
      └─ SKILL.md

In this structure, engine.js handles only character and motion rendering, scene files handle storyboard content, and the export script handles recording and packaging. This separation can significantly reduce the scope of rework.

2. Why Animation Generation Becomes Unstable Without a Specification

Without a skill specification, an AI coding tool generally interprets natural-language instructions freely. This can be efficient for simple pages, but animation involves timelines, coordinate systems, proportions, and state transitions. Text-only descriptions often lead to three recurring problems.

2.1 Unstable Skeletal Proportions

The head, torso, upper arms, forearms, thighs, and lower legs of a stickman should maintain relatively stable lengths. If every shot recalculates coordinates independently, the character may look like an adult in one shot and a child in the next.

The character’s height can be defined as a base unit, H, with each body part expressed as a proportion:

Head radius: 0.09H
Torso length: 0.28H
Upper arm length: 0.16H
Forearm length: 0.14H
Thigh length: 0.22H
Lower leg length: 0.22H

These values are not the only valid standard, but they must remain consistent throughout the project. Joint positions should be calculated from parent joints and segment lengths rather than being written as absolute coordinates for every frame.

2.2 Broken Motion

If the hand, elbow, and shoulder are moved independently, the animation may show stretched arms or elbows bending in the wrong direction. A hierarchical skeleton is a more reliable approach:

root
├─ head
├─ torso
│  ├─ left-shoulder
│  │  └─ left-elbow
│  │     └─ left-hand
│  └─ right-shoulder
│     └─ right-elbow
└─ hip
   ├─ left-knee
   │  └─ left-foot
   └─ right-knee
      └─ right-foot

Each node stores a position, rotation angle, and length. When a parent node changes, child nodes inherit the transformation automatically. This preserves the body structure and makes motions easier to reuse.

2.3 Mixing Page Structure with Animation Logic

Putting styles, timelines, drawing code, and subtitle content into a single file may appear convenient at first, but it creates high maintenance costs over time. A better design separates the project into three layers:

• Data layer: Character parameters, dialogue, shot durations, and action names.
• Rendering layer: Draws characters and scenes based on the supplied parameters.
• Control layer: Handles playback, pausing, shot transitions, and export.

For example, a shot can be represented as data:

{
  duration: 5,
  background: "#f4f6f8",
  subtitle: "For a short-form video, the most time-consuming part is often not the idea.",
  actor: {
    position: [0.5, 0.68],
    action: "thinking"
  }
}

With this approach, changing dialogue does not require modifying the rendering code. Replacing an action also does not require rebuilding the page.

3. What a Skill Specification Should Include

A skill specification should not be a general character description. It should be an engineering document that constrains the generation process. At a minimum, it should cover the following areas.

3.1 Scope

Define whether the skill is intended for landscape short videos, explainer animations, or instructional demonstrations. It should also state that it does not handle complex 3D characters, particle effects, or highly flexible character performances. Clear boundaries generally produce more stable results.

3.2 Character Standards

Specify the character’s appearance and drawing order, for example:

• Use a circle or ellipse for the head.
• Use line segments for the torso.
• Use two-segment skeletons for the limbs.
• Treat glasses, hairstyles, and clothing as separate decoration layers.
• Use consistent line width and color by default.
• Use the same reference height in every shot.

3.3 Motion Interfaces

Actions should not be described as large collections of coordinate points. They should be abstracted into a limited set of states, such as:

idle       Standing idle
talk       Speaking with hand gestures
thinking   Resting the chin or raising a hand while thinking
pointing   Pointing at the screen or a title
walking    Simplified walking
surprised  Raising both hands

Each action should define its starting pose, ending pose, looping behavior, and transition duration. Continuous actions can use interpolation functions to smoothly transition angles from their starting values to their ending values.

3.4 Timeline Rules

Use a fixed frame rate, such as 60 frames per second, and drive the animation with a shared time variable:

const frame = Math.floor(time * fps);
const progress = (time % duration) / duration;

Motion interpolation can use a smoothing function:

function easeInOut(t) {
  return t * t * (3 - 2 * t);
}

This prevents actions from starting or stopping abruptly.

4. Designing a Complete Practical Workflow

Start by checking the local environment. Confirm that the scripting runtime, media-processing components, and an executable graphical browser are available. Avoid downloading large dependencies during the export stage. Network instability, permission restrictions, and version mismatches can interrupt the process.

Next, create the animation project in the working directory and ask the AI coding tool to inspect the environment first:

Inspect only the current working directory. Do not scan other paths.
Check whether the animation skill specification, rendering library, scene files, and export script exist.
If anything is missing, list the missing items without generating complex code yet.

After the inspection is complete, ask the tool to create the skill specification and the basic rendering library. Emphasize the following requirements:

• Character skeletons must use relative proportions.
• All actions must be invoked through a unified interface.
• Page content must be separated from rendering logic.
• The export script must not depend on temporarily downloading a large browser.
• Output files must specify explicit video dimensions and frame rates.

Then create the first version of the animation. To verify that the skill is working as intended, begin with three shots:

1. Problem introduction: The character faces multiple task cards representing content planning, filming, and editing piling up at the same time.
2. Process explanation: The character points to a flowchart showing the script, motion, and export stages.
3. Conclusion: The character completes an action while the screen displays conclusions such as a reusable workflow and lower rework costs.

Each shot should communicate one primary idea. Subtitles should remain concise. In a landscape layout, keep the main content within the safe area and avoid placing text too close to the edges.

5. How to Validate Animation Quality

Do not check only whether the animation plays. It should also be reviewed in the following areas.

Visual Consistency

Inspect the head size, body height, line thickness, and color palette from shot to shot. Pay particular attention to transitions between shots. The character’s foot position and body center should not jump unexpectedly.

Motion Continuity

Focus on the elbows, knees, and wrists. Noticeable jitter is often caused by inconsistent angle interpolation or mismatched parent-child joint calculations. You can reduce the motion range, lengthen easing transitions, and avoid changing the absolute coordinates of both parent and child joints in the same frame.

Subtitle Readability

Subtitles should have sufficient contrast, a maximum width, and automatic line wrapping. Each subtitle should communicate one idea rather than compressing an entire paragraph into the bottom of the frame.

Export Consistency

After exporting, check the video duration, dimensions, frame rate, audio-video synchronization, and whether the file plays correctly. If the web page uses dynamic fonts or external resources, convert them to local assets in advance to avoid loading failures during recording.

6. Why the Cost Goes Down

The cost savings in this workflow do not come primarily from one particular tool. They come from reuse.

First, the character skeleton and motion library only need to be designed once, after which they can be reused across shots. Second, dialogue and storyboards are data-driven, so copy changes do not require regenerating the entire animation. Third, local web rendering can reduce repeated calls to remote generation services. Fourth, a fixed export script standardizes recording parameters and reduces manual work and failed retries.

The most meaningful metrics are therefore not limited to the generation time for a single video. They also include:

• How many files must be changed to revise one line of dialogue.
• Whether replacing one action affects other shots.
• Whether a failed export can be retried quickly.
• Whether existing characters and actions can be reused in a new project.
• Whether multiple contributors can maintain a consistent standard.

7. Further Directions for Engineering the Workflow

Once the basic workflow is stable, you can add version control, automatic screenshot comparisons, shot-level unit tests, and batch export features. For example, each revision could automatically generate keyframe screenshots and compare them visually with the previous version. Each action could be checked to ensure that joint lengths remain within permitted ranges. Subtitle placement could also be validated to detect content that exceeds the safe area.

As the project grows, the skill specification can be divided into four modules: character standards, motion standards, shot standards, and export standards. This preserves general-purpose capabilities while allowing individual modules to be replaced for different types of short videos.

The central challenge of stickman animation is not drawing a few lines. It is building a stable system of constraints. Once skeletal proportions, motion interfaces, page structure, and export procedures are formalized, an AI coding tool can move beyond “writing a page once” and support continuous animation production.

For teams that frequently revise scripts, produce videos in batches, and validate creative ideas quickly, a skill-based and modular workflow offers more long-term value than simply optimizing for the appearance of a single generated result.