From an $86 to $16 Bill: A Complete Guide to Building Stickman Animations with AI Coding Assistants

1. Background: Why Stickman Animation is a Great Benchmark for AI Coding

In frontend development, explainer animations are a classic case of a “small but difficult to perfect” task. A 15-second stickman animation looks simple, but it actually involves the coupling of multiple dimensions, including skeletal proportions, joint movement logic, scene choreography, and timeline control. This type of task demands a lot from AI coding assistants: they must understand the semantics of visual expression (e.g., “the stickman is thinking” or “the stickman falls”) and translate them into precise coordinate, angle, and timing control code.

An even more practical issue is cost. Letting a large language model (LLM) repeatedly trial-and-error to generate animation pages consumes tokens with every iteration, causing the bill to swell from a few dollars to tens of dollars rapidly. How to drastically compress costs while ensuring quality is the core problem this article aims to solve.

2. Environment Setup

This practice requires only three things: a command-line terminal, an AI coding assistant, and a browser.

# Navigate to the working directory and start the AI coding assistant in interactive mode
cd C:\Users\YourUsername\Documents\AI-Testing
ai-cli

Once started, the terminal will display the current version number and enter standby mode. Users can issue task instructions in natural language through the input box.

3. The Anti-Pattern: Unconstrained Generation

3.1 Unconstrained Prompt Design

Any optimization method needs a control group. For the first round of experiments, we deliberately gave the AI no skeletal constraints, scene choreography specs, or animation framework references, letting it rely on “intuition.” The prompt was divided into two steps: first, ask the AI to check if there are reusable animation generation skills in the current directory (only looking at the current directory, not scanning other locations). After confirming none, proceed to write unconstrained. Second, specify the delivery requirements—a single-page HTML file, a 15-second stickman explainer animation, the theme of “Pain points of a solo creator making short videos,” divided into 3 scenes, optimized for 16:9 widescreen viewing, and no irrelevant decorations.

First, check if there are any stickman animation-related Skills in the .claude/skills folder in the current directory (only look at the current directory, do not scan other locations). After confirming there are none, without using any Skill, write a single-page 15-second stickman explainer animation webpage in stickman-demo/v1-no-skill.html... Tell me the result and time taken when done.

3.2 Unconstrained Result Analysis

After waiting about two minutes, the AI confirmed there were no reusable skill files in the current directory and took about 64 seconds to produce a single-file webpage of approximately 11.6KB. Opening it in the browser revealed obvious problems:

1. Distorted Proportions: The stickman’s head-to-body ratio was stiff, and the visual weight of the head and torso was uncoordinated.
2. Poor Line Quality: The arm lines were skewed, and the joint transitions lacked movement logic.
3. Heavy Structural Coupling: The animation timing logic and the page’s HTML structure were entirely mixed together; modifying a scene later would mean rewriting the whole thing.

This result reveals a key rule: LLMs have a vague understanding of concrete visual concepts like “stickman.” Without explicit parameter constraints, they will output approximate solutions that “look like it but aren’t professional.”

3.3 The Cost Lesson

The biggest cost of unconstrained generation is not the 64 seconds spent this one time, but the subsequent iterations. Due to structural coupling, any adjustment (such as changing a joint angle) requires the AI to re-understand the entire file. Every round of dialogue repeats reading and rewriting a large amount of irrelevant code, causing token consumption to rise exponentially—this is the direct reason for the billing getting out of control.

4. The Solution: Taming AI Output with the “Skill Constraint” Mechanism

4.1 Mindset Shift: From “Describing Goals” to “Defining Specs”

The core idea to solve the above problems is: Do not let the AI invent the stickman drawing method from scratch every time, but pre-solidify a set of skeletal and animation specifications for the AI to work within. This is the so-called Skill mechanism—writing domain knowledge into a rule file that the AI can read, placing it in an agreed-upon directory, and having the AI automatically load it when a task starts.

4.2 What the Specification File Should Contain

A qualified stickman animation spec should at least include:

• Skeletal Parameter Table: Fixed values for head radius, torso length, upper arm/forearm ratio, and thigh/calf ratio to ensure consistent character proportions across all frames.
• Joint Angle Ranges: For example, shoulder joint -45° to 135°, elbow joint 0° to 150°. This physically prevents distortions like “skewed arms.”
• Scene Data Structure: Force the AI to break down each scene into an independent configuration object, separated from the rendering engine, for example:

const scenes = [
  {
    id: 1,
    duration: 5000,        // milliseconds
    character: "Thinking pose",
    poses: [{ t: 0, joints: {...} }, { t: 2500, joints: {...} }],
    text: "Pain point 1: No direction for topic selection"
  }
];

• Rendering and Timeline Separation: The animation state machine is responsible for advancing the timeline, and the rendering function is only responsible for drawing based on pose data. The two are decoupled through pose interpolation.

4.3 Triple Benefits Brought by the Constraint Mechanism

1. Quality Improvement: The AI no longer “freewheels.” Every frame is generated within the standardized parameter space, making proportions and lines naturally stable.
2. Drastic Cost Reduction: Because the structure is modular, iterating only requires modifying the configuration object of a specific scene. The AI does not need to re-read and rewrite the entire file. This is the key to compressing the bill from the tens-of-dollars range to the teens.
3. Reusability: This specification file can be precipitated and directly reused the next time other explainer animations are made, forming a personal or team “animation generation asset.”

5. Methodology Summary: Three Principles for AI Coding Cost Control

Combining this practice, three general principles can be extracted:

1. Establish Constraints Before Issuing Instructions: Before starting a task, have the AI check for reusable specification files to avoid starting from scratch every time.
2. Separate Data from Logic: Require the AI to make animation parameters, copy, and scenes into structured data, and make rendering a universal engine. Change the content, not the engine.
3. Validate in Small Steps, Iterate Incrementally: Have the AI deliver and validate scene by scene, rather than generating the entire project at once. The rollback cost is minimized when errors occur.

6. Conclusion

The capability ceiling of an AI coding assistant does not depend on the model itself, but largely on whether the user can explicitly inject domain knowledge into the AI. With the same model, unconstrained generation took 64 seconds to produce 11.6KB of coupled code, while constrained generation produced an engineered page with a clear structure and low-cost iteration—the essence of the gap is the difference between “prompt engineering” and “knowledge engineering.” Precipitating specs into reusable assets is the right way to make AI coding both cost-effective and efficient.