Blood Sugar Battler: Constructing a Actual Recreation as a Designer utilizing AI

This all began as an experiment simply to see if I may do it.

I’m a designer who all the time needed to make a recreation. Not a elegant prototype idea or a cute interactive factor, however an honest-to-goodness recreation with animation, visible results, scoring, and a significant narrative or theme tying all of it collectively. The form of venture that normally requires a CS diploma or a really affected person developer buddy.

I had neither (effectively, I’ve developer mates, however I wouldn’t put them by means of this torture). What I had as an alternative: curiosity about AI improvement instruments, a love of retro gaming, and a private curiosity in diabetes training. So I made a decision to construct Blood Sugar Battler utilizing AI and Lovable.dev to fill the engineering gaps whereas I dealt with all the things else.

Three months later, I shipped a cell internet recreation the place you faucet falling meals, handle a blood sugar meter, and rack up combos whereas perhaps studying one thing a few situation tens of millions stay with. Why’d it take that lengthy? As a result of I needed a recreation that represents my inventive imaginative and prescient and never a rushed, half-baked vibe-coded mess with minimal human enter. Frankly, that will be boring.

It is a walkthrough of what turned out to be an enchanting, irritating, and regularly chaotic means of utilizing AI for recreation improvement.

Study fashionable internet animation utilizing GSAP 3 with 34 hands-on video classes and sensible tasks — excellent for all talent ranges.

Test it out

The Recreation: Faucet Quick, Assume Quicker

Right here’s the Loop.

• Rounds final one minute.
• Meals fall. You faucet them. Your blood sugar meter reacts.
• Wholesome meals nudges it down and scores factors. Junk meals spikes it up, subtracts factors, and breaks your combo chain.
• You’ve bought two power-ups for emergencies: Train drops the meter by 50, Sugar Rush bumps it by 25. They’re restricted, so timing issues.
• And talking of, don’t overlook the meter: in case your sugar goes too low or excessive, that dramatically impacts your total efficiency too.

On the finish, you get a rating and a blood sugar common, which features a proportion of time spent within the “wholesome” vary. Each factors scored and the blood sugar common must be respectable for the sport to present you a pat on the again. Low rating however excellent blood sugar? Nope. Excessive rating however horrible glucose management? Additionally nope. The sport makes you care about each.

The gameplay is brief and snackable (pun meant). It sneaks in a little bit of training about how meals impacts blood sugar by means of motion and never lecture. That was kinda the entire level.

Beginning With a Immediate (And Low Expectations)

I selected to construct the app on Lovable, a no-code AI platform that’s not really no-code when you need to do something fascinating. Additionally, until specified in any other case, it would construct your app on React, Tailwind, and Framer Movement. My first immediate was comparatively concise:

"Develop a cell contact recreation much like fruit ninja, however the theme is a recreation for sort 2 diabetes. And the rating is a blood sugar meter that is affected by what the consumer selects when it comes to wholesome balanced choices vs unhealthy. Develop a library of meals gadgets that may fly out with totally different diet ranges. Aesthetic follows Google's materials design expressive UI that is been revealed."

What got here again was useful however ugly. Emoji meals flying round on a primary background. No sound. Scoring that simply ticked upward. However it labored. Barely. That was the vital half. I may make a factor that moved and responded to enter with out making an attempt to jot down the physics myself.

From there, I began constructing a wishlist of options and gameplay enhancements. Interactive animations. Sound results. Energy-ups. A meter that felt extra partaking. Combo multipliers that rewarded good decisions. I iterated in prompts, testing every addition, determining what labored and what didn’t.

Ditching the Scaffolding

The early phases are enjoyable. AI is nice at scaffolding. It’s whenever you need one thing particular, one thing that matches a imaginative and prescient in your head, the place issues get a bit tougher (extra on that later).

As soon as I had proof that the idea labored, I moved away from the Fruit Ninja clone. I didn’t need meals flying in from off-screen with slicing interactions. I needed them to spawn within the center and fall down, able to explode by tapping or hovering. A bit extra Whack-A-Mole. I needed notifications that taught gamers with out interrupting the circulate. I needed the meter to really feel like one thing you needed to actively handle, not simply watch.

And I actually needed to ditch the Materials Design aesthetic. Too many “vibe-coded” apps lean on it. I wanted one thing that appeared intentional with extra persona.

However right here’s the factor. AI can’t artwork direct. It could actually acknowledge a picture you present it and try and approximate one thing comparable mechanically, however it could possibly’t design from style. Figuratively, and effectively, actually. That half needed to be me.

Artwork Route: The Lengthy, Tedious, Rewarding Half

Aesthetics matter

I stepped away from the code and targeted on the visuals. I really like 8-bit and 16-bit type video games, so I taught myself pixel artwork for this venture. Not as a result of I’m a masochist, however as a result of I needed each meals sprite to really feel constant and didn’t need to overly depend on simply utilizing third-party property as is. That meant studying fundamentals and watching quite a lot of YouTube tutorials.

I used Aseprite for creating and enhancing virtually all of the artwork property. Purchased some third-party icon and animation packs from itch.io, then modified and recolored them to match my palette. I ended up utilizing 79 meals property whole for gameplay. All tedious as hell to edit. All of the pixel-art animations you see had been constructed as sprite sheets for simpler management and manipulation within the code, with just a few exceptions (sidenote, creating and syncing the cloud spawn results with meals gadgets took like every week to determine 🙃).

I additionally spent just a few weeks sketching after which designing the emblem, which frankly helped anchor the general artwork path transferring ahead.

The typography was vital for the consistency of the theme. ChiKareGo2 and Lo-Res are each bitmap-based fonts designed to seize that late-90s working system aesthetic, the form of typesetting you’d see in system dialogs and app home windows. They keep legible at small sizes whereas reinforcing the retro computing vibe all through each display and interplay. I used an internet font converter for ChiKareGo2 to make it internet font-ready, whereas Lo-Res was already accessible on Adobe fonts.

The shift to pixel artwork actually pulled all the things collectively thematically. It felt visually intentional, and fewer like a vibe-coded experiment (which…yeah, I assume it was).

Sound Design: Give Me a Beat!

The visuals had been half the expertise. Sound was the opposite half. I needed each interplay to really feel tactile and satisfying, like urgent a button on an arcade cupboard or a cassette participant.

I spent weeks digging by means of itch.io, attempting to find the best 8-bit music and UI sound results. Not simply any retro sounds, those that match the tone. Upbeat background music that wouldn’t get annoying after repeated performs. Button clicks that felt crisp. Blast results that matched the explosion animations. Energy-up sounds that made you’re feeling such as you’d triggered one thing huge.

As soon as I had the best SFX, the actual work started. Getting sound to work reliably on cell browsers is its personal nightmare. That is the place AI grew to become very helpful. I described what I wanted (responsive audio that didn’t clip, sounds that performed constantly throughout units, music that might be muted with out breaking all the things), and we iterated on options collectively. AI helped construct the audio structure:

• Pooling techniques for cell browsers,
• deduplication logic so speedy faucets didn’t create sound chaos,
• fallback mechanisms when Net Audio wasn’t accessible.
• The efficiency aspect was difficult too. Audio information wanted particular codecs (WAV for some issues, OGG for others), normalized volumes, and trailing silence to stop clipping.

AI guided the technical necessities whereas I made inventive calls about how results had been triggered and carried out. Getting all of this proper took longer than anticipated, however whenever you faucet a meals and listen to that satisfying blast, the tactile button presses, or when the Sugar Rush power-up triggers with that warp impact, it reinforces the immersion.

Pulling it All Collectively in a Traditional Mac OS

The artwork type was headed in the best path, but it surely wanted a body. That’s once I dedicated to the classic Mac OS idea. Every part exterior the principle recreation window would seem like desktop icons. The sport itself would have a title bar, pixel buttons, and all of the window chrome you’d count on from a late-90s OS.

This did three issues:

• First, it tapped into nostalgia immediately.
• Second, it gave me a visible language to design round as an alternative of inventing UI patterns from scratch.
• Third, it made the expertise really feel approachable as an alternative of medical. Medical training wrapped in a playful throwback aesthetic.

I designed most of this in Figma, then used a Figma-to-React plugin in dev mode to export tough code. That code was a multitude. I cleaned it up utilizing Cursor and Copilot, manually tweaked what didn’t work, then introduced it again into Lovable so the AI had higher context for future iterations.

See the Pen
mac window by Alex Pierce (@alexpierce)
on CodePen.

Lovable is nice at coding. It’s not good at designing. I discovered that the onerous approach.

Working With AI With out Dropping the Plot

My workflow appeared like this: design in Figma and Aseprite, clarify what I needed in plain language, then ask the AI to output the wanted code that aligned to my intent. When issues broke, I requested why (which was frequent). When efficiency dipped or an surprising conduct occurred, I requested the right way to repair it.

I discovered to jot down higher prompts by treating AI like a collaborator with limits. I targeted on one process or characteristic at a time. I used ChatGPT to jot down higher prompts based mostly on Lovable’s finest practices.

It may translate my intent into code. It may refactor my messy logic into one thing structured. It may counsel patterns I hadn’t thought-about. However it couldn’t make inventive choices. It couldn’t inform me if the sport pacing felt on observe or if the power-up animations had been too gradual.

That was on me.

Fortunately, Lovable has two very helpful options I relied on typically:

• “Chat mode”, the place your inputs/requests set off the AI to jot down an implementation plan earlier than executing—stopping undesirable rogue adjustments and inspiring refinement and specificity, although it burns by means of extra credit. Whereas that was very important throughout debugging and fixing complicated UX challenges, generally, if I wasn’t cautious, I might overengineer the answer with out realizing it and create extra issues.
• That is the place “Model Historical past Management” turns out to be useful, permitting you to revert to any earlier code change or simply preview them. Although there are limits. You’ll be able to revert, however it would solely implement the final plan it generated, none earlier. So when you have work that was carried out after that time, and also you needed to maintain it, have that in thoughts.

Not like a human, an AI doesn’t essentially have the crucial pondering expertise to say no and Okay.I.S.S. (maintain it easy, silly). So I needed to know when to chop my losses and pivot to various options.

Refining the Loop

As soon as the core labored, I targeted on tuning. The unique meter felt clunky and unclear. Level scoring was abstracted and primary. The gameplay lacked problem and stress. I had the AI break all the things into smaller techniques to simply handle: spawning logic, scoring, and blood sugar vary monitoring. Every one wanted actual construction.

Gameplay Logic

Each meals merchandise saved within the foodLibrary has a bloodSugarImpact worth. I had the AI analysis common diet patterns (American Diabetes Affiliation, different academic assets), personally validated its findings, then used inventive license to approximate values that labored in a 60-second spherical.

• Non-starchy greens: -3 to +1 (broccoli, lettuce, peppers)
• Wholesome fat: -2 to 0 (avocados, nuts, olives)
• Lean proteins: -1 to 0 (rooster, fish, eggs)
• Low-glycemic fruits: +2 to +5 (berries, apples, citrus)
• Complicated carbs: +5 to +8 (beans, candy potato, brown rice)
• Excessive-glycemic fruits: +8 to +15 (bananas, grapes, mangoes)
• Refined carbs/processed meals: +16 to +40 (cake, pizza, soda)
• Dairy: +3 to +6 (milk, cheese)

To be clear, I’m not a medical physician or researcher. I’m a nerd who likes video games. I refined for readability and ease of gameplay. The objective was quick suggestions that teaches “wholesome meals regular, refined carbs spike” with out pretending to be medical recommendation.

Combos and Energy-Ups

Combos grew to become the key ingredient. Hit a number of wholesome meals rapidly, and your rating multiplier ramps up. Junk breaks the streak. That gave the sport rhythm. That’s the place the PowerUpSystem comes into play.

Balancing power-ups is a little bit of a strategic mini-game itself. Early variations let gamers spam them. Later revisions restricted every to a few makes use of per spherical.

• Train grew to become high-risk, high-reward: huge meter drop, however simple to expire should you’re not taking note of your blood sugar.
• Sugar Rush was the security web: a small bump whenever you’re low, however simple to overcorrect.

I needed huge, splashy screens for power-ups, so I designed customized sprite animations with hand-edited typography. Exhausting to overlook. Enjoyable to set off.

The transition results had been an instance of one thing I needed to tinker with exterior of Lovable because the AI simply wasn’t understanding the artwork path. I constructed the display wipes in Aseprite as sprite sheets, then labored on getting the JS and CSS shut sufficient inside Cursor, earlier than bringing it again to Lovable. Making sprite sheets responsive was kind of a nightmare on this context as effectively (side ratio scaling).

Problem Modes

I didn’t add problem settings till late. Household and mates examined the sport, and I heard sufficient moaning and groaning to know I wanted choices.

• Regular and Exhausting modes regulate spawn charges, fall speeds, hints, and the way typically twin meals seem.
• I additionally rewrote the tutorial a number of instances based mostly on suggestions and testing.
• Behind the scenes, I had the AI arrange easy capabilities in order that I may fine-tune settings on the fly within the code with out its assist.

const BASE_DIFFICULTY = {
  PHYSICS_TICK_MS: 20,
  CLOUD_TO_APPEAR_MS: 300,
  APPEAR_TO_VISIBLE_MS: 500,
  GRAVITY_PER_TICK: 0.5,
  TERMINAL_VY: 12,
} as const;

// Standing-weighted common configuration (Possibility A)
export const BLOOD_SUGAR_AVG_WEIGHTS = {
  regular: 1.0,
  warning: 1.8,
  crucial: 2.5,
} as const;

export const getStatusWeight = (standing: BloodSugarStatus): quantity =>  standing === 'warning-high') return BLOOD_SUGAR_AVG_WEIGHTS.warning;
  return BLOOD_SUGAR_AVG_WEIGHTS.crucial; // too-low or too-high
;

What I discovered

AI Collaboration

• Burning Credit: AI interprets intent into code, however can’t make inventive choices or inform you if one thing feels good. Write clear instruction information early to outline coding method & methodology, outline your tech stack early, and stop AI from wandering into unapproved dependencies. Complement costly AI SaaS platforms like Lovable with ChatGPT or Copilot for debugging earlier than burning credit (it undoubtedly grew to become a cash pit close to the tip).
• Figma Integration: My translation from Figma to Lovable was a sizzling mess on the time. Since then, I’ve discovered there are a variety of AI integrations that higher translate Figma to actual code (Builder.IO, Figma Make, Figma MCP & Claude code, and so forth.). It could assist prevent time from a front-end design craft perspective. However actually, the management and constancy of Lovable is fairly aggressive.
• Effort remains to be wanted: AI might help complement your technical expertise, however the extra superior work you’re doing, the extra concerned it’s essential be. It could actually’t actually change a gifted engineer with crucial pondering expertise.

Account for Cell Browser UI

• The shifting handle bar on iOS and Android gobbles up vertical area. I leaned on dynamic viewport items, safe-area padding, and a single compact HUD with huge contact targets. No reliance on fullscreen. Only a structure that accommodates all that pesky browser UI.
• I additionally arrange the sport as a PWA, however I didn’t need to depend on individuals putting in it to their homescreen. The expertise wanted to work within the browser first.

Please, Use GitHub From the Begin

• Lovable doesn’t spell it out for you, however when you have quite a lot of inventive property and information to your venture, there are limits to how and what you’ll be able to add immediately within the chat interface. Lovable itself doesn’t account for one of the best file administration (or in any respect, actually). I made the error of externally internet hosting nearly all of my static property at first for comfort. Later, I spotted syncing to a GitHub repository WILL make your life 10 instances simpler and also you’ll keep away from any cross-domain points. Fortunately, Lovable does make the method very simple for non-technical people.

Efficiency and Belongings

• This virtually delayed the launch by every week. Early on, I didn’t plan for sprite sheets. Now the sport was loading 79 particular person property concurrently (and externally). Even small information create efficiency points whenever you’re making that many HTTP requests directly. Or worse, in my occasion: a number of momentary IP bans from my service supplier throughout improvement 😭 (as famous earlier than, I had made the error of externally internet hosting all my property earlier than finally integrating into GitHub for simpler file syncs with Lovable).
• The answer: I added a styled immediate loader that seems with minimal JavaScript. Then I warmed property in tiers behind a begin display. Crucial UI first, results and less-seen sprites later, plus a lookahead system so incoming meals are decoded earlier than they hit the display. First paint feels quick. Later play feels smoother.
• Plan for HTTP request bottlenecks early. 79+ particular person property create efficiency points no matter file measurement, so use sprite sheets or over-engineer preloading if that’s not attainable. Lock your animation engine to match your artwork technique earlier than you begin constructing.

Audio and Cross-Platform Testing

• Cell browser audio is bizarre and finicky, particularly on iOS. Relying on the way you’re utilizing sound, you’ll probably want aggressive pooling, and generally twin encodings (WAV for iOS, OGG for others). Check continually throughout quite a lot of browsers. I’m positive the AI will get higher over time, fixing this downside intuitively, however be ready for audio bugs.

Inventive Course of

• Constraints drive systematic pondering and create cohesive aesthetics. Give attention to concepting the theme and artwork path of your type. You most likely don’t have to know this already should you’re a designer, however perhaps sit down first and determine what the imaginative and prescient is earlier than you go all in and begin producing code. It’s tougher to back-track later. The extra context and imaginative and prescient you share with the AI to start with, the smoother it is going to be afterward.

Wrapping Up

Blood Sugar Battler took three months to construct. Most of that point was spent on craft: Making the pixel artwork, UI/UX, and total inventive path.

AI made it attainable for me to ship an entire recreation as a solo designer. However it didn’t make the inventive choices. It translated my intent into code, then I iterated till it matched the imaginative and prescient.

In the event you’ve ever needed to make one thing exterior your technical consolation zone, AI might help you bridge that hole should you’re affected person. However you continue to need to know what you need and be keen to maintain tinkering till it feels proper. And it doesn’t damage should you’re educated your self.

The instruments don’t (and shouldn’t) change style and important thought. They amplify it.

Credit to Some Proficient Artists

Modified Pixel Asset Sources (Itch.io)

• Kiddolink – VFX Set (Season 1)
• PiiiXL – Mega 1-Bit Icons & Meals Pack
• Valentin – Hand Icons (Figma)
• Brian Levy – Traditional Macintosh UI Equipment (Figma)

Sound & Music (Itch.io)

• Halftone SFX Pack by Will Bedford
• Shapeforms SFX Library by Shapeforms
• Freesfx Pack by Kronbits
• “Out of Time” by Abstraction Music (Three Purple Hearts)

And particular shout-out to my spouse, Jazmin, for placing up with all of the “consumer” testing.