我的電燈開關吉祥物：用 4 張圖片、mix-blend-mode 和幾行 JS 製作

I love front-end work, but life took me elsewhere: years of coding whatever came along, and I never got deep into it. Now, with AI, I can finally learn while I build.

A while ago I saw a mascot with three light switches around it. Click one and its lamp turns on or off, and the light falls on the character. I loved it, so I asked AI to research it and make one like it.

It was done fast, and then I realised I had no idea how it worked. So I sat down and took it apart. I expected three.js or something complicated. It turned out all it takes is:

• 4 images: one with every lamp off, and three with one lamp on each. Stack them and let CSS blend them; with 2 or 3 lamps on at once, the colours still mix well.
• The main CSS property doing the blending is mix-blend-mode.
• The images themselves: ask Gemini or ChatGPT to draw them.
• For the click when a lamp switches, AI wrote a few lines of JS so the browser makes the sound itself. No mp3 file at all.

I put the whole process into a talk. Here's a short video that pulls out the principles underneath:

If you want to dig deeper, open the slides and turn on autopilot, and they present themselves: https://vibe-coding-a-light-switch-mascot.codeleadgrow.workers.dev/?src=devto

Slide 9 keeps exactly how I prompted, and re-prompted, until it came out right. Honestly, that part was painful. I'm still looking for a better way. Ha ha.

Want more, or the next parts as they come out? Follow me on Facebook: https://www.facebook.com/codeleadgrow

Building in public 2026 · part 1: Vibe-Coding a Light-switch Mascot

I wrote this post in Vietnamese; AI helped me translate it.