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

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

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

I had neither (effectively, I’ve developer pals, however I wouldn’t put them by means of this torture). What I had as a substitute: curiosity about AI improvement instruments, a love of retro gaming, and a private curiosity in diabetes schooling. 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 sport the place you faucet falling meals, handle a blood sugar meter, and rack up combos whereas perhaps studying one thing a couple of situation tens of millions stay with. Why’d it take that lengthy? As a result of I needed a sport that represents my artistic imaginative and prescient and never a rushed, half-baked vibe-coded mess with minimal human enter. Frankly, that might be boring.

It is a walkthrough of what turned out to be an interesting, irritating, and often chaotic means of utilizing AI for sport improvement.

Study trendy internet animation utilizing GSAP 3 with 34 hands-on video classes and sensible tasks — good 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 neglect the meter: in case your sugar goes too low or excessive, that dramatically impacts your general efficiency too.

On the finish, you get a rating and a blood sugar common, which features a share of time spent within the “wholesome” vary. Each factors scored and the blood sugar common should be first rate for the sport to offer you a pat on the again. Low rating however good 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 supposed). It sneaks in a little bit of schooling 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 truly no-code when you wish to do something fascinating. Additionally, except specified in any other case, it should construct your app on React, Tailwind, and Framer Movement. My first immediate was comparatively concise:

"Develop a cell contact sport much like fruit ninja, however the theme is a sport for kind 2 diabetes. And the rating is a blood sugar meter that is affected by what the consumer selects by way of wholesome balanced choices vs unhealthy. Develop a library of meals gadgets that can fly out with completely different vitamin ranges. Aesthetic follows Google's materials design expressive UI that is been revealed."

What got here again was practical 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 might make a factor that moved and responded to enter with out trying to write 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 selections. I iterated in prompts, testing every addition, determining what labored and what didn’t.

Ditching the Scaffolding

The early levels 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 more durable (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 stream. 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 might probably acknowledge a picture you present it and try to approximate one thing related mechanically, however it could’t design from style. Figuratively, and effectively, actually. That half needed to be me.

Artwork Course: The Lengthy, Tedious, Rewarding Half

Aesthetics matter

I stepped away from the code and centered 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 wish to overly depend on simply utilizing third-party property as is. That meant studying fundamentals and watching numerous YouTube tutorials.

I used Aseprite for creating and modifying nearly 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 a couple of exceptions (sidenote, creating and syncing the cloud spawn results with meals gadgets took like every week to determine 🙃).

I additionally spent a couple of weeks sketching after which designing the brand, 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 type 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 screen 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 suppose 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, trying to find the fitting 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 are feeling such as you’d triggered one thing large.

As soon as I had the fitting 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 persistently throughout gadgets, music that could possibly be muted with out breaking all the things), and we iterated on options collectively. AI helped construct the audio structure:

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

AI guided the technical necessities whereas I made artistic calls about how results had been triggered and applied. 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 fitting path, nevertheless it wanted a body. That’s once I dedicated to the classic Mac OS idea. Every thing outdoors the principle sport window would appear to be 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 a substitute of inventing UI patterns from scratch.
• Third, it made the expertise really feel approachable as a substitute of medical. Medical schooling 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 large number. 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 sweet at coding. It’s not good at designing. I discovered that the arduous manner.

Working With AI With out Shedding 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 tips on how to repair it.

I discovered to write down higher prompts by treating AI like a collaborator with limits. I centered on one activity or characteristic at a time. I used ChatGPT to write down higher prompts primarily based on Lovable’s greatest practices.

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

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 write 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 important throughout debugging and fixing advanced UX challenges, typically, 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 should solely implement the final plan it generated, none earlier. So you probably have work that was achieved 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 vital considering abilities to say no and Ok.I.S.S. (hold 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 centered on tuning. The unique meter felt clunky and unclear. Level scoring was abstracted and primary. The gameplay lacked problem and pressure. I had the AI break all the things into smaller methods to simply handle: spawning logic, scoring, and blood sugar vary monitoring. Each wanted actual construction.

Gameplay Logic

Each meals merchandise saved within the foodLibrary has a bloodSugarImpact worth. I had the AI analysis basic vitamin patterns (American Diabetes Affiliation, different academic sources), personally validated its findings, then used artistic 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)
• Advanced 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 shortly, 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: large meter drop, however simple to expire for those who’re not listening to your blood sugar.
• Sugar Rush was the protection internet: a small bump whenever you’re low, however simple to overcorrect.

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

The transition results had been an instance of one thing I needed to tinker with outdoors of Lovable because the AI simply wasn’t understanding the artwork path. I constructed the display screen 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 type of a nightmare on this context as effectively (facet ratio scaling).

Issue Modes

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

• Regular and Laborious modes regulate spawn charges, fall speeds, hints, and the way typically twin meals seem.
• I additionally rewrote the tutorial a number of instances primarily based on suggestions and testing.
• Behind the scenes, I had the AI arrange easy capabilities in order that I might 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,
  vital: 2.5,
} as const;

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

What I discovered

AI Collaboration

• Burning Credit: AI interprets intent into code, however can’t make artistic 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 forestall 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 many others.). It might assist prevent time from a front-end design craft perspective. However truthfully, the management and constancy of Lovable is fairly aggressive.
• Effort continues to be wanted: AI might help complement your technical abilities, however the extra superior work you’re doing, the extra concerned you could be. It might probably’t actually change a gifted engineer with vital considering abilities.

Account for Cell Browser UI

• The shifting tackle bar on iOS and Android gobbles up vertical house. I leaned on dynamic viewport items, safe-area padding, and a single compact HUD with large 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 wish to depend on folks 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 you probably have numerous artistic property and information in your venture, there are limits to how and what you may add straight 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 the vast majority of my static property at first for comfort. Later, I noticed 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 Property

• This nearly 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 without delay. Or worse, in my occasion: a number of short-term 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 instantaneous loader that seems with minimal JavaScript. Then I warmed property in tiers behind a begin display screen. Important UI first, results and less-seen sprites later, plus a lookahead system so incoming meals are decoded earlier than they hit the display screen. 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 doable. 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 possible want aggressive pooling, and typically twin encodings (WAV for iOS, OGG for others). Take a look at continually throughout quite a lot of browsers. I’m certain the AI will get higher over time, fixing this downside intuitively, however be ready for audio bugs.

Artistic Course of

• Constraints power systematic considering and create cohesive aesthetics. Concentrate on concepting the theme and artwork path of your type. You in all probability don’t must know this already for those who’re a designer, however perhaps sit down first and resolve what the imaginative and prescient is earlier than you go all in and begin producing code. It’s more durable to back-track later. The extra context and imaginative and prescient you share with the AI at first, the smoother it will likely be in a while.

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 general artistic path.

AI made it doable for me to ship a complete sport as a solo designer. However it didn’t make the artistic choices. It translated my intent into code, then I iterated till it matched the imaginative and prescient.

When you’ve ever needed to make one thing outdoors your technical consolation zone, AI might help you bridge that hole for those who’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 harm for those who’re educated your self.

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

Credit to Some Gifted 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 Pink Hearts)

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