PROMPTED by Dr Abstract - organized by Gemini.
If you have ever asked a Large Language Model (LLM) to write code for a specialized or evolving framework, you have likely encountered the "Legacy Fallback" trap:
Instead of using the latest idioms, the AI defaults to outdated patterns it saw millions of times in older training data. For ZIM (the JavaScript canvas framework for creative coding), generic LLM queries often hallucinate obsolete Flash or raw CreateJS code—writing messy stage.addChild()
calls, manual coordinate math, and unnecessary ticker loops.
To fix this, the ZIM team created the ZIM Master Prompt at https://zimjs.com/prompt which is a structured system prompt backed by two lightweight, AI-optimized reference URLs: docs_ai.php
and tips.html
.
Here is why this approach works so effectively and how it transforms AI code generation from broken boilerplate into clean, idiomatic canvas code.
LLMs excel at standard HTML, CSS, and basic React because the web is flooded with examples. However, for specialized interactive frameworks, LLMs face three distinct hurdles:
createjs
methods rather than ZIM’s high-level abstractions.The ZIM Master Prompt gives the AI immediate access to two distilled, machine-friendly resources:
docs_ai.php
(Machine-Readable API Map)
Instead of feeding full web pages to the model, docs_ai.php
delivers a dense, stripped-down summary of modules, classes, and methods:
{props, time, call}
).[red, blue]
, series()
, min/max ranges {min: 10, max: 50}
, or functions).tips.html
(Idiomatic Style Rules) Having API docs alone isn't enough; the AI needs to know how to write code like the framework's creator (Dr. Abstract):
.sca()
, .rot()
, .alp()
, .loc()
)..centerReg()
, .pos(0, 0, RIGHT, BOTTOM)
).Ticker
loops by letting animate()
, drag()
, and UI components manage stage updates automatically.loop()
over for
, rand()
over Math.random()
, built-in color constants like red
and blue
).Let's look at what happens when you ask an AI to create a simple interactive test: Create a centered red rectangle, animate it to 2× scale, and place it at the bottom-right on click.
The AI falls back to generic canvas boilerplate, manual math, and outdated event loops:
// Clunky, imperative, and misses built-in conveniences
var rect = new createjs.Shape();
rect.graphics.beginFill("red").drawRect(-50, -50, 100, 100);
rect.x = stage.canvas.width / 2;
rect.y = stage.canvas.height / 2;
stage.addChild(rect);
createjs.Tween.get(rect)
.to({ scaleX: 2, scaleY: 2 }, 1000)
.call(function() {
rect.on("mousedown", function() {
rect.x = stage.canvas.width - 100;
rect.y = stage.canvas.height - 100;
stage.update();
});
});
createjs.Ticker.on("tick", stage);
With the master prompt and rules active, the AI produces pure, chainable ZIM:
// Clean, declarative, and 65% shorter
new Rectangle(100, 100, red)
.centerReg()
.animate({
props: { scale: 2 },
time: 1,
call: (target) => {
target.on("mousedown", () => {
target.pos(0, 0, RIGHT, BOTTOM);
S.update();
});
}
});
The success of the ZIM Master Prompt reveals a powerful blueprint for any open-source library or framework:
/ai
Documentation Endpoint:docs_ai.php
) specifically designed for LLMs to read in seconds.addChild()
, use .center()
or .pos()
").Want to test AI-assisted creative coding with ZIM?
Have you created AI prompts or machine-readable docs for your favorite libraries? Share your workflow in the comments below!