Developing CookieDraft: A Journey from Wireframe to Interactive ToolDeveloping CookieDraft: A Journey from Wireframe to Interactive Tool
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
After a bunch of research and prep, the core engine of CookieDraft is calculating correctly. Icing totals update in real time and match exactly what the user draws.
No visual design pass yet, only layout and foundations. I’ll probably say that ten more times because the hardest part of a two-week deadline is stopping yourself from adding effects and gradients early.
All the prep really paid off: 100+ components, tight auto-layout hierarchy, React-style naming, a published library, and clear markdown specs.
I was so nervous about hitting that first build button for no reason. I use code-based design workflows every day, so I knew the structure would translate. Still, there’s always that little “what if it all falls apart” feeling. Is this how Dr. Frankenstein felt? Different medium, same energy. Fully committed to locking in function before beauty. Real question though… can we rename Figma Make to Igor?
Anyway, the real-size math drives everything now. Flood only fills closed outlines. Scribe is a true warp tool that moves existing icing without adding volume, and per-color totals update live with the usual buffers. Canvas size is stable, the move tool appears on shape outlines, and those fruit cookies were made in the tool exactly as it stands, just to test the mechanics. I cannot wait to see them once the icing looks realistic.
Twenty versions in, and I’ve gone from a static wireframe to a fully wired drawing and icing tool. Started with 12,877 tokens, spent 3,940 so far, and I’m saving the latest 5k top-up entirely for the visual pass.
The two priciest turns were when I handed Figma Make an entire data model at once; those went to Opus. 7 versions came from Opus, the other 13 from default. Full breakdown is in the image below if you want the numbers.
Left to do before the deadline: interaction polish, spec-sheet output, and then the full visual layer, finally. The goal is to be functionally locked by tomorrow evening, so the last day and a half can be the fun stuff and a quick demo.
I’m genuinely excited to share the polished version. I’ve been stress-testing with random cookies just to see where the interactions break. It’s been a blast, I'm really pleased with how I think this is going to end up.
Post image
Post image
Post image
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started