How the ZIM Master Prompt Solves AI Code Hallucinations for 2D Canvas

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.

---

1. The Core Challenge: Why LLMs Struggle with Canvas Frameworks

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:

1. Parameter Confusion: Display classes often take 5+ arguments. Without active documentation, LLMs guess parameter orders and default values.
2. Framework Drift: Because ZIM is built on top of CreateJS, an unguided AI defaults to raw createjs methods rather than ZIM’s high-level abstractions.
3. Context Window Bloat: Full HTML documentation contains thousands of lines of navigation menus, CSS styling, and DOM noise that overwhelm an AI's context window.

---

2. The Solution: The Two AI Reference Pillars

The ZIM Master Prompt gives the AI immediate access to two distilled, machine-friendly resources:

📄 1. 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:

• Exact Parameter Signatures: Eliminates parameter guessing.
• DUO Identification: Tells the AI when methods support configuration objects ({props, time, call}).
• VEE Flags: Informs the AI which parameters accept dynamic lazy evaluations (e.g., random arrays [red, blue], series(), min/max ranges {min: 10, max: 50}, or functions).

💡 2. 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):

• Enforces chainable 3-letter helpers (.sca(), .rot(), .alp(), .loc()).
• Replaces raw coordinate calculations with declarative layout methods (.centerReg(), .pos(0, 0, RIGHT, BOTTOM)).
• Prevents unnecessary Ticker loops by letting animate(), drag(), and UI components manage stage updates automatically.
• Mandates built-in convenience utilities (loop() over for, rand() over Math.random(), built-in color constants like red and blue).

---

3. The Difference: Without vs. With the Master Prompt

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.

❌ Without Master Prompt (Generic Hallucinated Code)

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 ZIM Master Prompt (Idiomatic, Clean, Expressive)

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();
      });
    }
  });

---

4. Key Takeaways for Framework Authors & Developers

The success of the ZIM Master Prompt reveals a powerful blueprint for any open-source library or framework:

1. Provide an /ai Documentation Endpoint: Create a plain-text, token-dense API cheat sheet (like docs_ai.php) specifically designed for LLMs to read in seconds.
2. Explicitly Teach Conventions: LLMs don't just need to know what exists; they need strict rules telling them what NOT to do (e.g., "Do not use addChild(), use .center() or .pos()").
3. Enforce Single-File Outputs: Instructing the AI to deliver ready-to-run, self-contained HTML templates eliminates setup friction for developers testing prototypes.

---

Try It Out

Want to test AI-assisted creative coding with ZIM?

• 🌐 Explore the Framework: zimjs.com
• 📖 AI-Master Prompt: zimjs.com/prompt.html
• 💻 Interactive Web Editor: zimjs.com/editor

---

Have you created AI prompts or machine-readable docs for your favorite libraries? Share your workflow in the comments below!

Comments

[Alex Shev]

The debugging lesson here is that the system needs to explain what it believed at the decision point. Without that, every failure becomes archaeology.