WIZARD · AI PRODUCT · 2025
Wizard
Problem
AI generates beautiful images - as one flat, locked file
Today’s models can invent a full illustration in seconds. What they can’t give you is structure: a person you can move, a background you can recolor, a prop you can delete. Everything is fused into a single raster.
So the moment a designer or motion artist wants to tweak one element, they’re stuck - regenerate the whole frame, or painstakingly cut it apart by hand. The creative speed of AI collapses into a flat PNG no product team can own.
What people actually do with AI images
- Edit / refine
- 75% of generations
- Generate from scratch
- 21% of generations
Research
Same wall, everywhere
Designers don’t struggle to generate AI images - they struggle to edit them. Public threads, research papers, and product launches all point at the same gap.
What public threads ask for
- Editable layers
- 40%
- Small local edits
- 28%
- Handoff to AE / Figma
- 18%
- Usable layered gen
- 14%
Why layers - and why now?
Generation is solved enough to ship pretty frames. Production still needs structure. That mismatch shows up for both the designer and the product team - at the same step in the journey.
Where the workflow breaks
Prompt Write the “perfect” prompt and hope
Generate Looks done - until one detail is wrong
Edit Can’t move, recolor, or delete one element
Export Only a flat PNG leaves the tool
Prompt More generations, not more ownership
Generate Pretty demos that stall in production
Edit Dead-end assets · support & workarounds
Export Teams re-cut or re-prompt instead of ship
From the threads
-
AI-generated graphics - anyone found a way to get editable layers out of them?
-
Why is AI so advanced at creating graphics, but then can’t make slight modifications to an existing image?
-
How do I get AI-generated image elements into After Effects as separate layers?
-
Anyone tried layered image generation yet - actually getting usable layers?
Solution
Here are some of the key flows
From chat to Wizard
Bring a generated illustration straight into the product - the flat AI image becomes the starting point, not a dead end.
Detect what’s in the image
Wizard scans the flat raster and surfaces the elements hiding inside - so structure appears where there was only pixels.
Select and vectorize
Choose the pieces that matter, then turn them into editable vector layers - ready to move, resize, and refine.
Build the full layer stack
Every detected element becomes its own layer - a scene you can finally control, instead of a single locked PNG.
Add to canvas
Drop layers onto the canvas, arrange the composition, and keep editing - the handoff to product starts here.
Tl;dr
Teams generate AI illustrations in minutes - but ship a flat PNG no one can edit. I designed Wizard end to end: upload, AI decomposition, visible selection frames, independent editing, and SVG export - plus the interactive story that proves “editable” before users commit.
-
PNG → SVG
Flat AI art becomes editable production assets
-
End-to-end
Designed the full flow: upload, split, edit, export
-
Vector-ready handoff
Separated SVG layers ready for product UI
Overview
Closing the gap between AI art and production assets
Wizard closes the gap between AI-generated illustrations and production-ready assets: upload a flat image, decompose it into editable layers, refine each element, and export vector files ready to embed in product UI.
I designed the experience from upload through export - interaction, motion, and the marketing narrative that shows what “editable” actually means.
Goals
Make AI layers feel selectable and trustworthy
User goal
Ship production-ready assets, not pretty PNGs
Business goal
Let users edit elements independently
User goal
Enable clean engineering handoff via SVG
Business goal
Prove the story with scroll-driven motion
User goal
Make “editable” obvious before commitment
Business goal
Design process
Transparency forward - show the boxes, then the control
Wizard walks users through upload, decomposition, independent editing, and vector export - with scroll-driven motion that makes abstract AI layers feel tangible.
Outcome
What the feature unlocks
Wizard turns AI illustrations into separated, editable assets - so product teams can move fast without rebuilding scenes from scratch. The interactive story and export flow show users exactly what "editable" means before they commit to the workflow.
-
PNG → SVG
Flat AI art becomes editable production assets
-
End-to-end
Designed the full flow: upload, split, edit, export
-
Vector-ready handoff
Separated SVG layers ready for product UI
Reflection
My key takeaways
Show the boxes early
Abstract “AI layers” only feel real when selection frames are visible. Trust comes from seeing what you can grab.
Motion is the brief
Scroll-driven explode isn’t decoration - it’s how users understand hierarchy before they touch a control.
Export is the punchline
If the story ends on a prettier PNG, the feature fails. Vector handoff is the product promise.
Also check out..
