CD Case: Four Discs
A clear plastic CD case in your browser: tap to swing the lid open, drag to turn it, spin the disc and flip through four disc designs.
Bring a product object and the variants it should come in. The Skill returns a downloadable Skill (meta prompt, lessons, verification) and a runnable reference scene.
How it works
The meta prompt goes to your coding agent together with any reference images.
The agent starts from the reference scene, changes the case geometry and the label drawings, and compares closed, open and design screenshots each round.
Verify headlessly and build one self-contained HTML file.
Frequently asked questions
Does it call any model or need a key?
No. The Skill gives your agent a prompt, lessons and a reference scene; the scene itself makes no network calls.
Why is the demo sandboxed?
The frame has an opaque origin and no network access, so the scene can’t read anything from this page or reach the internet.
Are the disc designs images?
No. All four labels are drawn in code on canvases, and the case is built from code geometry, so the Skill ships no image files.
Can I show another product?
Yes. Describe the object and its variants in the slots; your agent edits the geometry, the materials and the label drawings.
Does it work on mobile?
Phones get the low tier automatically and on-screen buttons, and the scene honours reduced motion. It has been verified under touch emulation, not on real devices.
Why is there no online generation?
Building a new scene needs a model key inside the sandbox, which the backend doesn’t support yet. Run the Skill with your own agent for now.