← Lyon Works

Prototype #004

Guai or Not 乖不乖

A mood meter for two small humans. Built from a lunch conversation, finished in a weekend.

See the live demo ↓

01 — The Spark

Sparks are everywhere.

This one did not start in a brainstorm. It started at lunch.

A few fellow dads and I were swapping notes on how we handle behaviour at home. Someone had a points system: +1 for good behaviour, -1 for poor behaviour. Everyone nodded, then everyone had a "but" about their own version.

I didn't leave with a plan. I left with a question: what would the simplest possible version of this look like, and could I show my kids?

Three things from that table:

01

The idea was small. Nobody pitched it. It just came up between mouthfuls.

02

The build has great potential. I knew that within minutes.

03

The interesting part was what to leave out.

💬

A note before you ask: this is not a parenting method. I'm not telling anyone how to raise kids. This is how a lunch idea became a working prototype, nothing more.

02 — The Cut

Deciding what the prototype must prove.

The first version in my head was a points economy. Points earned, points spent, history tracked, maybe a few parents sharing one system. It sounded smart. It was also a big build and a bigger argument.

So for this prototype, I dug deep into what I actually wanted it to prove.

Answer: a kid can look at a screen and instantly see how the day is going, and the screen reacts when it matters.

Everything that didn't serve that sentence got cut.

What stayed:

What got cut, and why:

🪙

A points economy.

Redeeming points means rules, bookkeeping and arguments about exchange rates. A mood is simpler than a balance.

🔑

Accounts and sharing.

One screen, one operator (me), and the kids just look. No logins means no backend, no cost, no privacy headache.

📊

History and charts.

Nobody needs a graph of a small child's Tuesday.

The scale also needed a payoff. A face that changes with nothing happening at the extremes felt flat. That's where the celebration, the rain cloud and the reward wheel came from.

5

levels

2

kids

7

rewards

0

accounts

03 — The Build

Try it yourself.

Live Demo

How it works:

(Ah Boy and Ah Girl are stand-ins for my real kids, for the usual reasons.)

Three calls that shaped what you're seeing:

🤝

If one AI can't do it, use two.

Claude couldn't generate the characters, so I used Gemini to make the images. Claude then cleaned up the backgrounds and put them into code.

👀

The first pop-up was wrong.

It repeated the devil or angel face on top of the one behind it. I caught it on first look. Now the pop-ups are plain cards with just text and a button.

🏷️

The labels avoid judgment words.

I tried weather names (sunny, stormy) but they didn't match the angelic and devilish faces. Now: Rough moment, Getting there, the kid's name, Good job, Awesome!

04 — Under the Hood

Small on purpose.

There isn't much hood here, and that's the point.

📄

One file.

The whole thing is a single HTML page. No database, no server, no framework. Hosting costs nothing and there's nothing to maintain.

💾

Scores live in the browser.

Each device remembers its own scores. The trade-off is that it doesn't sync, and I accepted that when I cut accounts.

🎡

The wheel picks the winner first, then spins to match.

The result is chosen by weighted chance, then the wheel is rotated so the pointer lands on that slice. AI tested 300 spins and the result matched the pointer every time. The JACKPOT slice is half the size of the others, so it comes up about half as often.

✏️

The rewards are one editable list.

Each reward is a single line (label, text, size). Add one and the wheel redraws itself. No coding knowledge needed.

05 — What I Learned

How we built it, not what we built.

Sparks are everywhere. The idea came from the least likely place for one: a lunch table with no agenda. I didn't have to find it. I had to notice it, then take it seriously for long enough to try. If you wait for a "real" project idea, you'll miss the small ones.

A prototype is a claim, not a product. The coding took a weekend. The harder part was deciding what this thing stands for, in one sentence. Once that was clear, every feature had to earn its place, and most didn't. The features I wanted most (history, points) were the first to go.

Faster with AI means more checks, not fewer. Rapid prototyping runs on speed, and AI delivers plenty of it. But speed with no checking just ships mistakes faster. The pop-up that repeated a face and the weather labels that didn't fit were both caught by looking, not by a test. AI built what I asked for. I had to say "that's not right." As AI does more of the work, the human's job shifts toward checking it, so the checks should go up, not down. The balance I landed on is a short loop: build, look, fix, repeat.