Such a good skill for visual explainers. All SVG and animated. Prompt I used: install skill /anatomy Explain how Seedream 5.0 is able to split an image into layers and what cool things you can produce with it. Do that in a single HTML file. Change the camera/zoom in... for scene 1 to 5 to explain more clearly.show more

designers discovering AI can do their busywork and calling it a skill

Thanks for sharing!!

This has me thinking about product onboarding. Let someone change one input and see what happens, rather than watch the whole walkthrough. Especially useful for explaining something like permissions or pricing. Have you tried it with a product flow yet?

using a single HTML file for such a complex task really simplifies the process

i think the follow up prompt does more than the skill. first pass is never clear, telling it which scenes to zoom in on is what fixes it. did you give it seedream's docs or let claude guess how the layers work?

the prompt pushes opus 5.5 to check the docs.

does the prompt name which docs to check or does it just say check the docs and let the model pick? curious if it actually fetches them or just answers from memory

one line prompt to an animated svg walkthrough is wild, does it hold up when the machine has like 30 parts or does the camera get lost

thx for always sharing such inspiring work 🫶

omdsss this is awesome dude !!

Wow, this looks so cool 🔥 Love it!

this skill is so good for explainers, saving the prompt

Banger!

Dope

animated SVG explainers are the kind of output people actually save and share

The layered SVG output stays light, so the single file embed stays under a few hundred kilobytes with multiple scene zooms

@kaustubh_kr_ let's use thissss

svg focus keeps output light and edit-ready, perfect for embedding into docs or interactive pages

How heavy is the single HTML file once all the scenes and animations are in? Wondering if it's light enough to embed on a landing page.

The /anatomy directive forces the model into structured SVG rather than raster diffusion outputs. Layer count breaks past four; use explicit z-index in prompt.

@bot add content of this post to our notion note db, linking it to the anatomy skill you previously logged

Crazy

Wish they would build a cross over of mermaid diagrams to explain tech systems

@bot 帮我安装这个 skill

The agent can draw every SVG. Choosing the 3 parts worth labeling is still the design job.

Love this direction. These explainers can go way beyond video and be fully interactive browser experiences. We're about to see new forms of video-like content. Opus is surprisingly good at this. It built me this QR code explainer without any skills. We'll all be Meng Tos.

动画好看是一回事，能把拆图逻辑讲清楚才值得收藏。

“documented” and “inferred” would make useful hover labels for your Seedream explainer.

all svg is the smart part, you can still tweak one piece instead of rerolling the whole thing. did the html come out in one go

The single HTML file constraint is what makes this work as a skill, no build step or bundler to babysit. Curious how the WebGL shaders hold up when the isometric wireframe gets dense, that's usually where the frame budget goes.

Can you export as SVG?