Design: Bad Suggestions, Dead Ends, and a Mid-Implementation Breakthrough

A quick caveat before this one: I’m not a professional designer. But I’m not walking in blind, either. I’ve got a lot of hours in Figma, I’ve designed apps and sites start to finish before, and in my day job as a product manager and software developer I’ve worked closely with genuinely talented designers — enough to know good design when I see it, even if I can’t always produce it myself on the first try.

That last part turned out to matter a lot for this project.

Starting from nothing

Every design starts as a blank page, and mine started about as plainly as possible: pick a layout, get the modes on screen, make sure a person could tap the right thing. No theme, no personality, just structure.

Early game select screen with plain blue buttons for each math mode Early level select screen with a stack of plain blue level buttons

It worked. It was also completely forgettable — the kind of screen you’d mistake for a placeholder because it basically was one. Functional, readable, zero identity. I knew this wasn’t the design, just the scaffolding to build the real one on top of.

Chasing something better, and mostly striking out

This is where I expected AI tools to save me a lot of time. That did not go the way I expected.

Figma Make was first up, since I already work in Figma. I couldn’t get anything usable out of it — outputs that didn’t hold together as a real screen, or that ignored the structure I was trying to build on.

ChatGPT and Sora were next, mostly for generating visual concepts and imagery. Also a bust. The suggestions were generic in a way that’s hard to describe until you see it — competent-looking but with no point of view.

Gemini struggled specifically with image generation — I’d ask for a clean, consistent visual direction and get something that didn’t hold up past a first glance.

Along the way I got a few concrete artifacts out of the chaos, none of which survived contact with reality:

A pixel-style green-on-black title screen for “Math Whiz” with broken, overlapping button text A hand-lettered font experiment for the title and numbers A cartoonish gameplay mockup with clouds, trees, and a sky background — an “exotic” direction born of pure desperation A slick, neon-gradient “Math Sprint” title screen concept with a glowing start button

Some of these failed for obvious reasons — the pixel-font attempt literally breaks its own layout, text overflowing the buttons it’s supposed to live in. Others just didn’t fit: the cartoon-sky gameplay mockup and the neon “Math Sprint” title screen both look like screens from a different game, not this one. Polished in isolation, wrong in context.

You’ll also notice none of these agree on a name — “Math Whiz” here, “Math Sprint” there. That’s not a typo across screenshots, that’s just where things stood at each point. Full disclosure: the name is still evolving as I write this post.

The long battle, and where it actually got solved

The direction that finally worked didn’t come from a single prompt or a single tool. It came out of a long, iterative back-and-forth with Claude — well past the “design phase” and into the middle of actually building the thing. Some of the real answer only showed up once I was looking at working code and could point at exactly what was wrong.

Case in point: this bug, found mid-implementation, where large numbers simply overflowed their container instead of scaling down to fit.

A math problem implementation where the digits overflow past the edges of their container

That’s not a design mockup — that’s a real screen breaking in a real way, and it’s the kind of problem you only find by building. No amount of up-front Figma work or AI-generated concept art was going to surface it. Fixing it, and the dozen smaller things like it, is what actually shaped the final design — not a mood board.

From there, things started converging fast.

The first fully working version of the fast addition screen, with a clean layout and circular number pad

And the version that’s closest to what’s shipping now:

A near-final dark-themed screen showing time, digit count, and digits-per-second stats above the problem and number pad

Simpler than any of the AI-generated concepts. No neon gradients, no cartoon sky. Just a clear number, a clear input, and stats that actually tell you something useful while you play.

What this actually taught me

The tools were most useful early (structure, scaffolding, getting something on screen fast) and least useful when I needed real design judgment. The flashiest outputs — the neon title screen, the illustrated gameplay scene — were the easiest to generate and the first things I threw out. The design that stuck came from iterating against a real, broken implementation, not from asking for a better mockup.

Next up: the “free” path — what happens when you try to build all of this without paying for anything.