Build a Brain Trainer App

In the last 5104 Tinker Lab, we distilled the decision framework of a Stoic emperor into an AI agent. We encoded a way of thinking.

This time we’re going to build something different.

Not an agent that helps you think. An app that trains the brain itself.

Let’s head to the garage and build one.

In the previous Agent Stack post, we talked about auditing your cognitive environment and evaluating the role of AI systems to ensure they enhance rather than detract from our cognitive autonomy.

For most of history, the forces shaping our thinking were mostly passive, the people around us, the conversations we overheard, the books on our shelves.

Today that environment is increasingly digital.

Our thinking is influenced by feeds, podcasts, frameworks, AI assistants and increasingly, software tools designed to shape cognition itself.

Which raises an interesting possibility.

If your cognitive environment can be intentionally designed, then some of the most powerful inputs may be the tools you build yourself.

This is where the agentic toolchain becomes interesting.

Coding agents and AI development platforms like Cursor, Lovable, Replit, Bolt, and Kiro dramatically lower the barrier to building software.

Tools that once required a team of engineers can now be prototyped by individuals in an afternoon. That opens the door to something new.

Individuals teaming with agents to design the lenses and tools shaping their cognitive environment and optimize their brain.

In the Four Circles framework for brain health, cognitive training sits primarily in the psychological circle — the domain of attention, interpretation, learning, and mental patterns.

Strengthening those patterns has downstream effects on the biological circle as well. Neural circuits activate. Metabolic demand increases. Plasticity follows activity.

In other words, the brain adapts to the challenges we give it.

We’ll create a Brain Trainer to reinforce these patterns.

Using an agentic coding tool, we’ll create a simple browser-based brain training app designed to strengthen processing speed, attention, and working memory.

As Stephen Covey says, “Begin with the end in mind.”

Before writing any code, start with the outcome. What would go in the press release?

“Agentic FYI, Planet Earth - Today introduced the Brain Reserve Trainer, a new cognitive training platform designed to help people actively build brain reserve and strengthen long-term brain health.”

What are we trying to build?

When working with agentic coding tools like Cursor, it’s tempting to jump straight into generation. But the better approach is to treat the agent as a collaborative design partner first.

Have a conversation.

Brainstorm.

Describe the idea in plain English.

Clarify the experience you want to create before asking the agent to build it.

In practice, this means writing the design specification before writing any code. Think through the mechanics, the theme, the user experience, and the outcome you’re aiming for. Often this is easiest to do by drafting a system prompt or instruction set that describes the application you want to build.

The clearer the instructions, the better the result.

In this case, the goal was simple: build a small browser-based brain training game.

I started with a mental model of a game I had played before — something that trains attention and processing speed by requiring the player to solve problems quickly before objects reach the bottom of the screen.

But instead of falling numbers, I wanted to tie the theme to something I’ve experienced first hand and is a tool to optimize recovery and helps with brain health - hyperbaric oxygen therapy.

The concept became oxygen bubbles feeding the brain.

Bubbles float down the screen. Each contains a small math problem. Solve the problem before the bubble reaches the bottom, and the oxygen is absorbed by the brain — energizing our mitochondria and building cognitive reserve.

Simple mechanics. Clear theme. A small tool designed to strengthen attention and processing speed.

With the concept clear, the next step was translating that idea into instructions for the coding agent.

Instead of jumping straight into code, I started by describing the game in english — the theme, the mechanics, and the experience I wanted the player to have. This ideation can happen in Cursor using plan mode or outside if you’e using another model.

Think of this as writing a design brief for the agent or a specifications doc.

Below is the prompt that kicked off the build inside Cursor.

Build a polished browser game called “Oxygen Flow” using vanilla HTML, CSS, and JavaScript.

Goal
Create a cognitive training game inspired by fast mental processing tasks where objects fall from the top of the screen and the player must solve the math problem inside each object before it reaches the bottom.

Theme
Use floating oxygen bubbles that deliver energy to the brain.
The theme should feel like brain health, mitochondria, oxygen, and cognitive reserve.

Core Gameplay
- Oxygen bubbles spawn at the top of the screen and fall downward.
- Each bubble contains a math expression.
- The player types the answer using the keyboard.
- When the player presses Enter, the game should check whether the typed answer matches one of the active bubbles.
- If correct, remove that bubble, increase score, and animate the bubble flowing into the brain.
- If incorrect, briefly shake the input box or show subtle feedback.
- If a bubble reaches the bottom without being solved, the player loses brain energy.
- The game ends when brain energy reaches zero.

Cognitive Framing
This game should feel like:
- processing speed training
- working memory practice
- sustained attention
- quick mental calculation
- building “brain reserve” by keeping mitochondria happy

Game Objects
1. Oxygen bubbles
- circular floating objects
- soft blue / cyan look
- each contains a simple math expression

2. Brain area at the bottom center
- stylized cartoon brain or brain-energy core
- bubbles visually travel into this area when solved

3. Mitochondria indicators
- small glowing energy icons near the brain
- briefly pulse when the player gets a correct answer

4. Brain reserve meter
- health/energy bar at the top
 - drains when bubbles are missed

5. Score display
6. Level / speed indicator
7. Start screen and game over screen

Difficulty Design
Start easy and gradually ramp up.
Phase 1:
- single-digit addition and subtraction
- slow fall speed
- few bubbles on screen

Phase 2:
- larger addition/subtraction
- occasional multiplication
- slightly faster falling speed
- slightly more bubbles

Phase 3:
- faster speed
- more simultaneous bubbles
- wider range of equations

Make difficulty scale automatically every 20 to 30 seconds.

Answer Handling
Important:
- The player should not need to click bubbles.
- The player types one answer into a single input box.
- When Enter is pressed, the game should find whether any active bubble has that answer.
- If multiple bubbles share the same answer, solve the lowest bubble first or the one closest to the bottom.
- Clear the input field after each Enter press.

Visual Design
Make it polished, modern, and clean.

- white or very light gradient background
- soft brain-health aesthetic
- minimal but lively motion
- rounded cards/panels
- strong readability
- no clutter
- no external libraries
- no canvas required unless truly helpful; regular DOM-based animation is fine if smooth
- should look good on desktop browser first

Animation / Feedback
- bubbles gently float while falling
- correct answer triggers satisfying animation toward the brain
- mitochondria pulse/glow on success
- missed bubble causes brain reserve meter to drop with subtle warning effect
- game over screen fades in cleanly
- restart button resets all state

Sound
Do not add sound in version 1.

Technical Requirements
- Use only:
- index.html
- styles.css
- script.js
- No frameworks
- No build step
- Must run by opening index.html in browser
- Organize code clearly with comments
- Use clean functions and simple game state management
- Use requestAnimationFrame for animation updates
- Keep code easy to modify later

Math Expression Requirements
Generate expressions and store both:
- display text, e.g. “7 + 5”
- numeric answer, e.g. 12

Allowed operations:
- addition
- subtraction
- multiplication

Rules:
- subtraction should avoid negative answers in the early phase
- multiplication should stay simple at first
- difficulty system should control operand size and operation mix

UI Layout
Top bar:
- title: Oxygen Flow
- score
- level
- brain reserve meter

Main play area:
- falling bubbles

Bottom area:
- brain visual centered
- small mitochondria icons around it
- answer input field above or near the brain

Start Screen Copy
Title: Oxygen Flow
Subtitle: Feed the brain. Fuel the mitochondria. Build cognitive reserve.
Button: Start Training
Game Over Screen Copy
Title: Brain Energy Depleted

Show:
- final score
- highest level reached
- restart button

Polish
Please make the interface feel surprisingly polished for a simple vanilla JS browser game.

Focus on:
- responsive spacing
- smooth motion
- legible typography
- satisfying success feedback
- clear game loop
- bug-free basic gameplay

Deliverables
Create all 3 files with complete code:
- index.html
- styles.css
- script.js

After generating the files, briefly explain:
1. how to run it
2. where to change difficulty
3. where to change the theme text and colors

Once the instructions are clear, the agent can begin turning that description into working code.

Cursor generated the initial structure of the application — HTML, CSS, and JavaScript — along with the core gameplay mechanics.

Within a few iterations we had a playable prototype running directly in the browser.

Here’s what the first working version looked like.

Now that we have version 1, let’s describe the improvement for our design specs. If you need help on improvements to make, then ideate with the agent on how to make it better.

Please make these upgrades:

1. Make the visuals more polished and premium
2. Add a best score saved in localStorage
3. Add a combo streak counter for consecutive correct answers
4. Add a “Hyperbaric Boost” mode that activates every 10 correct answers:
- lasts 8 seconds
- bubbles move slightly slower
- score is doubled
 - mitochondria glow brighter

5. Add better difficulty balancing so early gameplay feels easy and smooth
6. Improve bubble spacing so bubbles do not overlap too much
7. Add pause functionality with the P key
8. Make sure the game scales well on laptop screens
9. Refactor the code for readability without changing the game concept

Brand style direction:
- clean wellness-tech aesthetic
- modern but playful
- colors inspired by oxygen, energy, mitochondria, and brain health
- not childish, not arcade-neon
- should feel credible, health-oriented, and approachable

Seeing the prompts is helpful, but the real magic is watching the process unfold.

In the short walkthrough below, I show how the prompts translate into a working application — and how collaborating with a coding agent turns a simple idea into a functional brain training tool. I have saved the prompts for the ideation and the specifcations prompt output and above and pasted them into Cursor.

After playing for a bit, felt like the game needed a different branding and additional improvements as follows:

Upgrade the Oxygen Flow game into a structured cognitive training experience called "Brain Reserve Trainer".

Do not rewrite the game from scratch. Improve the existing code and add the following systems while keeping the code clean and modular.

Core Concept

The game is now part of a daily brain training routine designed to improve processing speed, working memory, and sustained attention while "fueling mitochondria and building brain reserve". The experience should feel similar to a light brain training platform rather than just an arcade game.

Add a Training Session System
A training session lasts 3 minutes.

Add:
session timer (countdown from 3:00)
session progress bar
session complete screen

When the timer reaches zero:

- stop spawning bubbles
- show a session summary screen

Session Summary should show:

• Score
•Highest Level
• Accuracy %
• Total Problems Solved
• Missed Bubbles

Include button:
"Train Again"

The trainer was working but there were a few points where as I added more complexity there were bugs that needed to be addressed. It’s very to easy to troubleshoot in a tool like Cursor, described the issue:

“it's not working / doesn't play now when I drag it into the browser. When I click start training it does nothing”

Cursor:

Identifying the cause: a syntax error on line 407 — optional chaining (?.) can't be used on the left side of an assignment. Searching for and fixing all occurrences.

The script should run correctly now. Reload the page (or drag index.html into the browser again) and click Start Training; it should navigate to the mode selection screen.

We went back and forth like this a few times. Human in the loop :-)

Add constraints as needed to match your preferences:

The quality of your agents work depends on the clarity of your framework.

For most of history, the forces shaping our thinking were largely a product of our surroundings — the people around us, the conversations we heard, the books within reach.

Today that environment is increasingly programmable.

Agentic platforms are lowering the barrier to building software, allowing individuals to create small tools, lenses, and exercises that influence how they think and learn. And we shouldn’t lose sight of the brain’s neuroplasticity. In the language of the Four Circles, tools like this primarily strengthen the psychological circle — attention, interpretation, and learning — while indirectly supporting the biological circle through activity and adaptation.

AI can certainly be used in ways that distract or degrade our attention.

But that’s not the most interesting question.

The better question is: how can we use these tools to make ourselves better?

This small brain trainer isn’t the point. It’s simply an illustration of a larger shift.

For the first time, individuals can contribute to designing the tools that shape their own cognitive environment.

The most powerful tools we’ll build with AI may be the ones that improve the builder.

Next in 5104 Tinker Lab: we’ll explore what happens when our agents move to the edge.