Showcase Tuning: A Visual Debugging Workflow for AI-Assisted Rendering Code

Source: Dev.to

Overview

Rendering code often suffers from a testing problem that many developers quietly accept: it looks right. Unit tests verify logic, but they can’t catch issues like inverted normals or clipped sprites. To address this, I created a workflow called Showcase Tuning and packaged it for easy reuse.

The Showcase Tuning Loop

1. Write a harness – a small, standalone program that calls your actual rendering code.
2. Run it – generate the output image.
3. Look at what came out – inspect the visual result.
4. Fix the renderer – adjust the rendering code, not the harness.
5. Repeat – iterate until the output matches expectations.

Rules for an Honest Loop

• Deterministic inputs – use fixed seeds and hard‑coded data so every run is comparable.
• Fix the renderer, not the harness – the harness is only a capture mechanism; defects belong in the rendering code.
• Generate before reviewing – never guess what the output looks like; always produce the image first.
• One component at a time – isolate changes to keep feedback tight and results unambiguous.

Example Session: Hot‑Air Balloon Renderer

Step 1 – Initial inspection

Claude runs the harness for the first time. The balloon appears as a plain oval.

Step 2 – First round of fixes

All five palettes now render. The basket, gore lines, and ropes are present, but some geometry is still off.

Steps 3‑4 – Diagnosing and redesigning the shape

Claude traces the problem to buildEnvelopePath and rewrites the profile curve.

Steps 5‑6 – Final refinements

• Height ratio adjusted.
• Basket positioning fixed (it was floating too far from the balloon).

The whole process—from a broken oval to a finished balloon—took only a few iterations.

Additional Showcases

• Tuning the particle system.
• Showcasing the tile‑map renderer at night.
• Demonstrating the character sprite with all animation frames.

Platform Support

The harness works across multiple platforms:

• Android / JVM
• Web / TypeScript
• Python

Generated images are written to a Showcase/ directory, which is automatically added to .gitignore.

Repository

The repository includes a SKILL.md file that defines the Claude Code skill used for Showcase Tuning.

👉 GitHub:

The skill behavior lives entirely in SKILL.md, making it easy to read and extend.

Call to Action

Have you encountered similar problems with rendering code? I’m curious to hear how others handle visual debugging.